Add a simple Grid/List Layout option to your category pages

[Ron Frigon]

No Kits, No Javascript, No JQuery required. Just a basic understanding of Miva page templates, forms and CSS is all you need. The framework I'm using is Bootstrap, but this procedure could be applied to any framework I believe.

Example: http://www.gpencil.com/category/golf-pencils-bulk.php

Step 1: Create a new Content Item. Go to Pages > Items > Click the ADD ITEM button. Enter "category_list_layout" for the code. Enter, or look up, "cmp-mv-content" for the module. Click the Add button then assign this item to the CTGY page.

Step 2: Go to Pages and edit the Category Display, CTGY, page. Open the "Category Product List Layout" tab and Copy/Paste the content into your favorite text editor. Edit the content, layout, css styles etc. for your new list layout. You can add Buy Now buttons, product attributes, product descriptions, volume price tables, custom fields etc. Some things may require that other "Items" be assigned to the CTGY page. Paste the new content into the "Content (category_list_layout)" tab.

Step 3: edit the Category Display "Page" tab and find <mvt:item name="category_listing" />. Replace it with:

<mvt:if expr="g.Cat_View NE 'List_View'">
  <mvt:item name="category_listing" />
  <mvt:else>
  <mvt:item name="category_list_layout" />
</mvt:if>

Step 4: TEST IT and FIX IT!!! Visit any category page on your website with a product listing. If you're using seo short links just add "?Cat_View=List_View" to the url in the address bar. If using the longer Miva link structure add "&Cat_View=List_View" to the url.

Step 5: The Category page uses a lot of forms and links for pagination, sorting etc. We need to make sure we have the hidden input so that our Grid/List View option doesn't get lost. Add <input type="hidden" name="Cat_View" value="&mvte:global:Cat_View;" /> to all of the forms and Cat_View=&mvte:global:Cat_View; to any links. Don't forget to check things like the continue shopping button in the shopping cart if you have one that will return you to CTGY.

Added to Forms:
<input type="hidden" name="Cat_View" value="&mvte:global:Cat_View;" />

Added to Links:
Cat_View=&mvte:global:Cat_View;

Step 6: Add the form to the Category page for the Grid/List view Options. Make sure you have all of the hidden inputs you need. They may be different than this. You may also need to edit the styles assiged to the buttons. Note that this form does not include <input type="hidden" name="Cat_View" value="&mvte:global:Cat_View;" />.

<mvt:if expr="l.settings:category_listing:products_on_page_count GT 1">
<form method="get" action="&mvte:global:sessionurl;">
  <input type="hidden" name="Screen" value="&mvte:global:Screen;" />
  <input type="hidden" name="Store_Code" value="&mvte:global:Store_Code;" />
  <input type="hidden" name="Category_Code" value="&mvte:global:Category_Code;" />
  <input type="hidden" name="Product_Code" value="&mvte:global:Product_Code;" />
  <input type="hidden" name="Search" value="&mvte:global:Search;" />
  <input type="hidden" name="Offset" value = "&mvte:global:CatListingPrevOffset;" />
  <input type="hidden" name="AllOffset" value = "&mvte:global:AllOffset;" />
  <input type="hidden" name="CatListingOffset" value = "&mvte:global:CatListingPrevOffset;" />
  <input type="hidden" name="Sort_By" value="&mvte:global:Sort_By;" />
  <input type="hidden" name="Per_Page" value="&mvte:global:Per_Page;" />
  <button type="submit" name="Cat_View" value="List_View" class="btn btn-default alignright" title="List Layout"><span class="icon-th-list"></span></button> &nbsp; <button type="submit" name="Cat_View" value="Grid_View" class="btn btn-default alignright" title="Grid Layout"><span class="icon-th"></span></button>
</form>
</mvt:if>

This same procedure can be applied to SRCH and PLST pages.

Cheers!

[jsdva]

Re: Add a simple Grid/List Layout option to your category pages

Nice Ron! Thanks for sharing!