How to write page with items - how it should be done #5375

Jimmi08 · 2024-12-28T09:11:37Z

Jimmi08
Dec 28, 2024

Hi,
it looks like we are now discussing a lot of ideas, so I am curious about this one.

Imagine single category page with parts:

category header with information about category (title, descriptions)
grid/list of items with this category , pagination is possible
category footer with other information

How to combine templates and shortcodes?

Example:

load category single template (with header, body, footer)
inside body template is shortcode f.e. CATEGORYITEMS
inside this shortcode is loop for items with new template for items

or
in code for category page output:

parse category header
add loop for items with new template
parse category footer

or ? any ideas? I tried to look at news plugin, but I don't think it should be standard for new plugins.

Template for categories has to be 2 dimensional because you can have more layouts for single category.

I prefer to split template for category and items into separated files, the same with shortcodes...

The question is how to combine a single category and loop of items....

For now... my last idea is layout template and simple parsing on category page - this way I avoid loop in shortcodes and any layout is possible.

rica-carv · 2024-12-28T12:52:59Z

rica-carv
Dec 28, 2024

@Jimmi08 You're thinking something like a catalogue?

I think the only way is like my stampcat plugin, that i think i've sent you sometime ago....

I render the pageheader, the the page body is rendered in a loop with templates inside, and after the page footer:

These are my loop templates, and since i got the amount of loops defined in the plugin backend, i call it the times defined there

$PHILCAT_TEMPLATE['title'] = "<div class='well well-sm'><div class='panel-heading'>{PHCAT_SERIE:title}{PHCAT_EDIT:serie}</div><div class='table-responsive panel-body panel-collapse collapse in collapse{PHCAT_SERIE:id}' id='collapse{PHCAT_SERIE:id}'>";

$PHILCAT_TEMPLATE['start'] = "
    <ul class='nav nav-tabs'>
    <li class='nav-item active'>
      <a class='nav-link' data-toggle='tab' href='#tab0_{PHCAT_SERIE:id}'>".LAN_PHILCAT_30."</a>
    </li>
    <li class='nav-item'>
      <a class='nav-link' data-toggle='tab' href='#tab1_{PHCAT_SERIE:id}'>".LAN_PHILCAT_21."</a>
    </li>
    {PHCAT_INFO:tab}
    {PHCAT_SERIE:more}
  </ul>
    <div class='tab-content'>
    <div id='tab0_{PHCAT_SERIE:id}' class='tab-pane fade in active'>
    <div class='table-responsive col-xs-12 panel'{PHCAT_SERIE:pais}>
<table class='table sortable table-striped table-condensed table-hover panel panel-default'>
											<colgroup>
                                            <col style='width:5%'>
											<col style='width:5%'>
											<col style='width:7%'>
											<col style='width:12%'>
											<col style='width:15%'>
											<col style='width:10%'>
											<col style='width:5%'>
											{PHCAT_THUMB:serie_col}{PHCAT_LIST:serie_col}
                                            </colgroup>
                      <thead class='panel-heading'><tr class='panel-title panel-heading'>{PHCAT_EDIT:serie_head}<th>".LAN_PHILCAT_31."</th>
		<th>".LAN_PHILCAT_32."</th>
		<th>".LAN_PHILCAT_16."</th>
		<th>".LAN_PHILCAT_34."</th>
		<th>".LAN_PHILCAT_35."</th>
		<th>".LAN_PHILCAT_36."</th>
		<th>".LAN_PHILCAT_37."</th>{PHCAT_THUMB:serie_head}{PHCAT_LIST:serie_head}</tr></thead><tbody>";

$PHILCAT_TEMPLATE['item'] = "<tr class='table-lrow'>{PHCAT_EDIT:peca}<td><a href={PHCAT_PECA}>{PHCAT_TIRAGEM}</a></td><td><a href={PHCAT_PECA}>{PHCAT_CIRC}</a></td><td><a href={PHCAT_PECA}>{PHCAT_PAPEL}</a></td><td><a href={PHCAT_PECA}>{PHCAT_DENT}</a></td><td><a href={PHCAT_PECA}>{PHCAT_COR}</a></td><td><a href={PHCAT_PECA}>{PHCAT_DESCR}</a></td><td><a href={PHCAT_PECA}>{PHCAT_VALORFACIAL}</a></td>{PHCAT_THUMB:}{PHCAT_LIST:peca}</tr>";
    
$PHILCAT_TEMPLATE['end'] = "
</tbody></table></div></div>
    <div class='tab-pane fade' id='tab1_{PHCAT_SERIE:id}'>
<table class='serie-data'>{PHCAT_DESENHOS}{PHCAT_GRAVURAS}{PHCAT_TIPOSIMP}{PHCAT_LOCAISIMP}{PHCAT_FOLHAS}{PHCAT_APLIC}{PHCAT_NOTAS}{PHCAT_OBSERV}</table>
    </div>
{PHCAT_INFO}
</div>";

$PHILCAT_TEMPLATE['titleend'] = "</div></div>";

$PHILCAT_TEMPLATE['group']['line'] = " {PHCAT_NAME} {PHCAT_VALUES}";
$PHILCAT_TEMPLATE['group']['inner_sep'] = ", ";
$PHILCAT_TEMPLATE['group']['line_sep'] = "<br>";

If i want something out of the loops i use this:

$PHILCAT_TEMPLATE['head'] = "<div id='phcat'>{PHCAT_NAV}";
$PHILCAT_TEMPLATE['caption'] = "&nbsp;<br><small>{PHCAT_DPAIS}{PHCAT_DTIPO}{PHCAT_DFAMILIA}{PHCAT_IANO}{PHCAT_FANO}</small>";
$PHILCAT_TEMPLATE['footer'] = "{PHCAT_IMAGEDISCLAIMER}</div>";

Of course there's wrappers around these shortcodes, but i don't show it here or the code would be too long...

4 replies

Jimmi08 Dec 28, 2024
Author

Thanks, this is one way. I dislike it because it mixes single and loop templates. You can't use get_layouts() correctly then for selecting the needed template, It could be great for specific plugins - like yours.
It is possible that I will end with a similar solution because it works. But I prefer split code to smaller template files for easier copying them in future plugins with the same logic. Something like this:

I will see.

rica-carv Dec 28, 2024

@Jimmi08 Personally i don't like to split templates that are gonna be used some how together across several files. Too much files to call.

But its everybody choice...

I don't seem to understand your layout issue... Is not the page with the single game layout? Its not that way its supposed to work, a single layout per single page?

Jimmi08 Dec 28, 2024
Author

Imagine news category page. You can have layout for it f.e. Category header, grid, or category header with list, or header with 2 columns... you will set layout for single category page in prefs.

I have this for menus - one template for list, grid etc. and just select needed layout for used menu.

The same for item layout - you can have it with big header, with video header... you can set it for each item.

It worked this way in content plugin... it was very handy, maybe I look there for inspiration. Thanks for reminder.

rica-carv Dec 29, 2024

@Jimmi08

You want probably something like this?

You can see news items displayed with two different layouts: Grid and columns, on the same page.

I'm doing it with shortcodes, but at theme level, not at plugin level, but if it's what you want, i can send you this theme. It's a WiP, so it's a little crumbersome... I've grabbed a old e107 theme and did some personal mock ups... 😁

tgtje · 2024-12-28T17:59:02Z

tgtje
Dec 28, 2024

Looking for inspiration.... well do not know the whole idea but somewhat even more advanced styling of faqs ? as @Alex-e107nl did
edit : Faq is just a name ;-)

4 replies

Alex-e107nl Dec 28, 2024

Heeee Leo,
you can also see the accordion on https://www.fysiowebdesign.nl/demo03/cookbook/id/2/clinical-assessment-cca This should be THE plugin where i could learn from, so i will use it for my future projects :-)

tgtje Dec 29, 2024

damn the thumbsup in wrong post (not trying to 'up'myself) Looking good/interesting @Alex-e107nl

(new peek taken..... oops, hope your not working :
Fatal error: Uncaught Error: Failed opening required './e107_themes/bootstrap3/theme.php' (include_path='.:/.......................demo03:.:/usr/local/php81/lib/php') in
.................../demo03/class2.php:1041 Stack trace: #0
..................../demo03/index.php(58): require_once() #1 {main} thrown in
................../demo03/class2.php on line 1041

tgtje Dec 29, 2024

ok (changes).

Alex-e107nl Dec 29, 2024

I am working on it, have tried to automate the changes needed for the bs5 admin theme, and when you update e107 there should be a check that the right files are present.. so it can be down today :-)

Jimmi08 · 2024-12-30T09:55:36Z

Jimmi08
Dec 30, 2024
Author

Ok, guys, still haven't solved items but I solved layouts.

First, I don't need this in real life, I am just playing, but I can imagine using this for some of my future plugins, if there will be some.
Future easy using is the reason why I use constants for plugin-related stuff (you just copy code and replace constant name in future plugin).

Second, forget legacy stuff. I know how to write this many other ways. I play with jobs (Father Barry jobs_search plugin) because this way I can spend time on it at work. Psst.

What I knew:

the start point should be Routes (e_url addon). Its results are $_GET variables and plugin logic should reflect this. So if you design your plugin the correct way, the logic of the plugin is clear and easy to rewrite or use.
most of the content should be covered by templates. The reason? The possibility of rewriting them in themes
with plugin preferences, you can select what template to use and manipulate with output without code change.

I don't know how to use e_frontend handler (there are not enough examples and if there are some, they are different).

Then I remembered that this is solved in the comment class for comments layout, so I did the same thing.

My solution:

require(HEADERF);
ejobs_content::contentBreadcrumb($get_type, $get_id);  //it can be moved later
ejobs_content::parseLayout($get_type, $get_id, $page_render, true);
require(FOOTERF);

where $page_render["caption"] and $page_render["text"] are normal values for tablerender filled before. They are responsible for the content itself.

	static function parseLayout($type, $id, $pageRender, $shouldRender = true)
	{

		$key = $id ? "item" : $type;

		$renderEngine = e107::getRender();

		$topContent = self::contentInfo($type, $id, "top", false);
		$bottomContent = self::contentInfo($type, $id, "bottom", false);

		$placeholders = ["{TOP}", "{CAPTION}", "{CONTENT}", "{BOTTOM}"];
		$replacements = [
			$topContent,
			$pageRender["caption"],
			$pageRender["text"],
			$bottomContent
		];

		$template = self::$template[$type][$key];
		$parsedContent = str_replace($placeholders, $replacements, $template);

		if ($shouldRender)
		{
			$renderEngine->tablerender($pageRender["caption"], $parsedContent, 'content_' . $type);
		}
		else
		{
			return $parsedContent;
		}
	}

Just a minimal version:

$JOBS_LAYOUT_TEMPLATE['index']['index']=
'{TOP}{CONTENT}{BOTTOM}';

$JOBS_LAYOUT_TEMPLATE['category']['item'] =
'{TOP}{CONTENT}{BOTTOM}';

$JOBS_LAYOUT_TEMPLATE['category']['category'] =
'{TOP}{CONTENT}{BOTTOM}';

$JOBS_LAYOUT_TEMPLATE['location']['item'] =
'{TOP}{CONTENT}{BOTTOM}';

$JOBS_LAYOUT_TEMPLATE['location']['location'] =
'{TOP}{CONTENT}{BOTTOM}';

$JOBS_LAYOUT_TEMPLATE['job']['item'] =
'{TOP}{CONTENT}{BOTTOM}';

$JOBS_LAYOUT_TEMPLATE['job']['job'] =
'{TOP}{CONTENT}{BOTTOM}';

Any theme can override this with the needed HTML markup. For example, {CAPTION} is not used because the theme layout use magic shortcodes... But you can use a bare layout and put everything into your theme template.

TOP and BOTTOM are templates too (the code is from the original old plugin)

$JOBS_LAYOUT_TEMPLATE['default']['top'] = "<div class='fborder' style='width:" . USER_WIDTH . "' >
			<table style='width:" . USER_WIDTH . "' class='jobs_category_no_icons' >
		<tr>
			<td class='forumheader2'  colspan='3' style='width:30%;text-align:left;' ><img src='./images/blank.png' alt='' />&nbsp;</td>
		</tr>
		<tr>
			<td class='forumheader2' colspan='3' ><div style='text-align:center;'>{JOBLOGO}</div></td>
		</tr>
		<tr>
			<td class='forumheader2' colspan='3' ><div style='text-align:left;'>" . JOBSCH_100 . " {JOBLOCALSELECTOR}</div></td>
		</tr>

		<tr>
			<td class='forumheader2' style='width:60%;'><strong>" . JOBSCH_2 . "</strong></td>
			<td class='forumheader2' style='width:30%;'><strong>" . JOBSCH_5 . "</strong></td>
		</tr>";

$JOBS_LAYOUT_TEMPLATE['default']['bottom'] =  "	 
    	<tr>
    		<td class='forumheader3' colspan='3'>{JOB_NEXTPREV}&nbsp;{JOBMANAGE=button}&nbsp;{JOBTC=button}&nbsp;{JOBSUBSCRIBE=button}</td>
    	</tr>
	</table>
	</div>";

Simple output for any position (top, bottom for now.)

	static function contentInfo($type, $id, $position, $shouldRender = true)
	{
		$renderEngine = e107::getRender();
		$templateParser = e107::getParser();

		$contentTemplate = self::$template['default'][$position];
		$shortcodes = e107::getScBatch(JOBS_DEF_PLUGIN_FOLDER, true, 'ejobs');
		$parsedContent = $templateParser->parsetemplate($contentTemplate, false, $shortcodes);

		if ($shouldRender)
		{
			$renderEngine->tablerender("", $parsedContent, 'content_' . $position . '_' . $type);
		}
		else
		{
			return $parsedContent;
		}
	}

Then I found a way how to set routes and canonical URL were changed...

But I am proud of my breadcrumbs:

static function contentBreadcrumb($type, $id)
	{
		$breadcrumb = [];
		$breadcrumb[] = [
			'text' => JOBSCH_1,
			'url' => e107::url('ejobs', 'index', null, ['mode' => 'full'])
		];

		switch ($type)
		{
			case "category":
				$url = e107::url('ejobs', $type, [
					JOBS_DEF_CATEGORY_FIELD_ID => "",
					JOBS_DEF_CATEGORY_FIELD_SEF => 'all'],
					['mode' => 'full']
				);
				$breadcrumb[] = ['text' => JOBSCH_128, 'url' => $url];

				if ($id)
				{
					$breadcrumb[] = [
						'text' => ejobs_categories::category_field($id, JOBS_DEF_CATEGORY_FIELD_NAME),
						'url' => ejobs_categories::category_field($id, JOBS_DEF_CATEGORY_FIELD_SEF),
						['mode' => 'full']
					];
				}
				break;

			case "location":
				$url = e107::url('ejobs', $type, [
					JOBS_DEF_LOCATION_FIELD_ID => "",
					JOBS_DEF_LOCATION_FIELD_SEF => 'all',
					['mode' => 'full']]);
				$breadcrumb[] = ['text' => JOBSCH_133, 'url' => $url];

				if ($id)
				{
					$breadcrumb[] = [
						'text' => ejobs_locations::location_field($id, JOBS_DEF_LOCATION_FIELD_NAME),
						'url' => ejobs_locations::location_field($id, JOBS_DEF_LOCATION_FIELD_SEF)
					];
				}
				break;

			default:
				// No additional breadcrumbs for other types.
				break;
		}

		e107::breadcrumb($breadcrumb);
	}

0 replies

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

How to write page with items - how it should be done #5375

{{title}}

{{editor}}'s edit

{{editor}}'s edit

Replies: 3 comments 8 replies

{{title}}

{{title}}

{{title}}

{{title}}

{{title}}

{{title}}

{{editor}}'s edit

{{editor}}'s edit

{{title}}

{{title}}

{{editor}}'s edit

{{editor}}'s edit

{{title}}

{{title}}

{{title}}

{{editor}}'s edit

{{editor}}'s edit

Select a reply

How to write page with items - how it should be done #5375

Replies: 3 comments · 8 replies

Jimmi08 Dec 28, 2024 Author

Jimmi08 Dec 28, 2024 Author

Jimmi08 Dec 30, 2024 Author

Replies: 3 comments 8 replies

Jimmi08 Dec 28, 2024
Author

Jimmi08 Dec 28, 2024
Author

Jimmi08
Dec 30, 2024
Author