Product Updates
Joomla 5.2.3 Compatibility for JA Templates, Bug Fixes, and More

Hi there,

i am working on some layouts for our club site and i would like to know if there is a possibility to detect if the content is shown in grid or list mode.

In list mode i would like top have an complete different layout with as in grid mode and show not all custom fields.

Hope you can help or give advice on that. And just to mention it ... you are doing an amazing job!!!!!

Best regards an greets from Germany,

Andreas

Hi Andreas,

Let me check and will get back to you.

Could you tell me more details of how the layout looks like between Grid vs List mode?

If you simply want to hide fields, I recommend to use custom css to hide, it will be quick and simple to achieve.

Hi there,

its a bit different, because i use the filter for 5 categories and different categories, wich need different views.

  1. Newsfeed: There i only need a blog view(list) wich shows the headline above all, the article image left sided and the full article text or a teaser with a defined lenght on the right ... beyond all this the read more button. This i think, i will get done.

  2. An archiv for Newspaperarticles: There i need both views but on the grid view i need less information than in the list view and on the list view i need the ame layout as in the news section (Headline above, image left, custom fields right. Also i need the custom fields with the titel left and value right as a sort of table ... beyond all this the read more button).

3+4: An archive for Books and Magazines: I only need the Cover and the Title in the Grid Layout and the information as shown in the image in the list layout. ... beyond all this the read more button.

  1. A list of Essays with the same layout as in 1.

So especially for 2,3 and 4 i would have to detect what layout i use to hide the custom fields by additional css and place image etc.

Hope that helps bit. Is there a way to get single field values or do you save a complete layout within indexing the filters?

I normally would like to have a simple table as a result too. That would be a great feature i think.

This is an example how it should look like for 2,3 and 4 + the button beyond this or on right side.

    Thats what i have already done but in the product-item.php of the override i cannot figure out if it is the grid or list layout. By the way ... did you change anything? the switch between grid and list does not work anymore ... even not without override.

    [Update] There was a ) missing at the end of the script.js so that threw an error and the initscript() routine wasnt executed. I fixed that so the site is functional again, but the translations does not work. As i said i think the translationroutines have to be called from the initscript function.

    Hi

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

      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 ... 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.

        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,

          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.

            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,

              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?

                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,

                  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.

                    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,

                      You need to Login to view replies.