Override product-item.php detect if grid or list mode possible?=

saguaros

Could you check the log? as in this topic, I did not touch anything on your site 🙂

seoboxx

saguaros ... i updated the post ... you edited the script.js and a ) was missing ... i added it so the initscript routine works again but the translations still not work.

saguaros

Which translation are you referring to?

seoboxx

saguaros ... https://www.joomlart.com/forums/d/45329-remove-sort-by-position-and-german-translation-in-date-filter

saguaros

seoboxx Ah pls help to follow that topic 🙂

seoboxx

saguaros ... any idea on the solution of getting a variable or flag to detect if the view is in grid or list mode? my project has to be delivered in 3-4 weeks and thats the only big thing missing so far.

saguaros

seoboxx Let me check and get back to you shortly.

vangogh

Hi, seoboxx

This Click event related to the grid and list mode will be handled in JavaScript, while the PHP views in the component will handle loading the specific layouts such as product-list (which contains product-item), filter-list... These PHP views will not be affected by the JavaScript event.

So I added some JavaScript code to detect whenever the Grid or List button is clicked in components/com_jamegafilter/assets/js/script.js, specifically in lines 38-48. JavaScript is very flexible in customizing HTML code or creating any layout that you desire.

Please review the changes and let me know if everything is working as expected.

megafilter-detect-grid-list-mode.zip

1kB

Regards,

seoboxx

vangogh ... Hi there ... i am not really fit in coding JS ... i checked the code and i found the place to add some code ... but i have to add there something i can use from the product-item.php of the specific layout. A simple var or something like this to check from php. Is it possible to set a var in the product-item.php from this place of code? Or maybe you can explain what the added code does and how it works.

vangogh

Hi, seoboxx
I may explanation a bit in your case: detect mode of layout by PHP code.
Firstly, you are able to init a variable for first load = 'grid' but when button Grid or List was clicked, this event was handled by JS code and it can not reversely bind this JS event to PHP. So impossible to directly detect Grid or List mode in PHP when clicking.
Secondly, I am able to help you know when Grid or List mode is switched in JS code then you can do something like: add or hide fields or many other actions.
This is another solution without adding custom code to a core of Megafilter component. A custom code will be added in a file plugins/jamegafilter/content/tmpl/default.php

function getLayoutMode() {
	var grid_btns = jQuery('span.grid-content');
	var list_btns = jQuery('span.list-content');
	
	grid_btns.on('click', handleButtonClick);
	list_btns.on('click', handleButtonClick);
}

function handleButtonClick(event) {
	var btn = jQuery(this);
	var btn_attr = btn.attr('data-layout');
	if (btn_attr === 'grid'){
		// do something in grid mode		
	}
	if (btn_attr === 'list'){
		// do something in list mode
	}
}
setTimeout(getLayoutMode, 1500);

You only need to notice on your action will be executed in block // do some thing ...
You kindly check and response to us.

Regards,

seoboxx

vangogh ... well .. i don't get it ... in fact i think this is really complicated to get there a custom layout ...

for example (list mode news blog) i would need the date left in a column .. then the thumb in a column .. then in the next column title, description and the "read more" button but i have no clue how to get that done ... is there any tutorial how to achieve this or customize the layout in deep? any setting to get the description longer or stuff like that?

vangogh

Hi, seoboxx

Thank you for getting back to us. Could you please provide more details about the list mode and grid mode configurations you have in mind? It would be helpful to know which fields should be shown, hidden, or positioned on the left or right for each mode. If possible, sharing demo figures illustrating these situations would greatly assist in understanding the issues and finding a solution, while also saving time.

We appreciate your cooperation and thorough response. Please take your time to review and provide us with as much detail as you can.

Regards,

saguaros

seoboxx Hi

You can check and override into template you're using: plugins/jamegafilter/content/tmpl/default.php

We have guideline for how to override file only: https://www.joomlart.com/documentation/joomla-component/ja-megafilter#override-layout

In order to achieve column view like you mentioned above, you need to change the HTML markup of default.php file and customize CSS code to achieve that. @vangogh already suggested you the necessary JS code to generate the associated classes when grid/list mode is active.

Regards

seoboxx

Hi vangogh,
i will try to figure that out for you with the 1 Filter "Literatur" on the website. I made already overrides for all of the filters.
In "listmode" i need the "Base Field Title (Titel)" above with the "Custom Field Bandnummer" on the right if set. Beyond that i need the "Custom Field Untertitel" ... thats the "top row of the layout. Beyond this i need a row with 2 columns. Left row 1/2 .. right row 2/3 of the width. In the left column i need the "Custom Field Cover (Image)" and on the right Column i need the Custom Fields Autor*in(en), Seiten, Erscheinungsjahr, Verlag, Druck, Herausgeber and ISBN-Nummer in a kind of table. Left sided the "Custom Field Name" and right the "Custom Field Value". On bottom of that the "Read more Button (Mehr Informationen)". Hopefully this describes all you need and what is shown in the following image

In "gridmode" i only need the "Custom Field Title (Titel)", above that the "Custom Field Cover (Image)" and beyond that the "Custom Field Erscheinungsjahr" On bottom of that the "Read more Button (Mehr Informationen)". Hopefully this describes all you need and what is shown in the following image. The button has to be on bottom of the cards.

Some stuff i got made using css ... maybe you can help on the rest ... what would be helpfull would be the hiding of unneeded fields in the different modes ... i cannot figure out how to place or call the code in the override. Here is what i got for the "Literatur" -> https://joomla4.land-dinslaken.de/literaturinformationen/vereinsbuchreihe#sort=position&sortdir=desc

Hop you can help on that, so i can work on the other layouts on my own.

Access data is added to thread if needed. A fresh backup is made.
Overrides are in /joomla4.land-dinslaken.de/templates/astroid_template_zero/html FTP-folder.

vangogh

Hi, seoboxx
Thank you for your detailed information. I will review your custom description, find a solution, and perform additional tests as needed. Please stay tuned for any additional details I may need from you.

Regards,

seoboxx

vangogh ... hi there,

i am a bit under pressure now ... i will have to deliver until 1st of June ... the only thing missing is a solution for the views ... could you please give advice or send a file, where this piece of code you provided aboove is added to the override, so i can work on that. Time is slipping away and i need to get that done.

Best regards and greets from Germany,

Andreas

seoboxx

Ok ... i am here when needed ... thanks a lot for your support !!!!!

seoboxx

saguaros ... hi there ... i already created overrides for every single stuff where i use the filtering. As i said, i am not that much into coding and i have no idea in which file to put that JS code and how to use it there. So i will need a functionals example, not only the code snippet.

saguaros

I'm afraid that in this case, we can guide you the function needed to be implemented, changed file only. To implement the changes you desire, it will involve coding in JS/PHP/CSS. If you are not well-versed in these programming languages, I highly recommend considering the services of a skilled developer. This will ensure the task is completed efficiently, as it falls outside the scope of our technical support.

Thank you for your understanding

seoboxx

saguaros what about the information @vangogh gave, on wich i decided to wait for the additional information and a solution? I am able to code in PHP/CSS and i am also able to include JS and do basic things but i cannot modify your layouts for my needs. Who, when not you, can provide information for modifying your code? How will a professional coder know ehre to modify and how to modify that? Also the german translation of the calendar drop-down still not works.

@vangogh told me to add the JS code snippet provided above to the plugins/jamegafilter/content/tmpl/default.php, but that does not work for me. Wheres the problem adding this code tho the file and providing the file, so i can see where the code has to be placed and how it is called?

vangogh

Hi, seoboxx
I added some sample code to detect list and grid for megafilter layout: Buchreihe. Whenever you click these buttons, console tab will show you the event and you are able to custom code inside this block: // do something in grid, // do something in list
/templates/astroid_template_zero/html/layouts/jamegafilter/content/buchreihe/product-toolbar.php, lines changed: 88 -> 89
/templates/astroid_template_zero/html/plg_jamegafilter_content/buchreihe.php, lines changed: 174 -> 198

megafilter-detect-grid-list-mode.zip

4kB

Due to our support scope, we can support you to make sure that our products will work as showcased on our demo site only. Customization beyond this can be complex and time-consuming.

I already provide assistance in the form of adding override files and incorporating necessary functions. This will grant you the ability to override filter with content plugin and customize as you wish. However, it will require additional effort and resources on your part.

Hope you understand us.