Author Topic: Product listing default layout controls (one for search, another for categories)  (Read 7404 times)

Offline junkyard

  • Full Member
  • ***
  • Posts: 127
  • Karma: +25/-0
    • View Profile
It could be a new nice feature, unless there a quick way to set it somewhere.

Do you remember those two Grid & List orange buttons to the right of the product listing sorting header?
Customers can press and change on the fly how the listed products are layed out, no matter if it's a list built from Search or by browsing Categories.

Now the problem is, only a few customers really know and use these buttons; and there is no Setting found in the AC to control the default behavior.
The default "Grid" layout is fine when applied to the lists built from browsing Categories;  but the lists built from Search -- there should be a way to change the defaults separately,  like to show the Search results in the form of the List rather than Grid.   With the "List" type arrangement the customers can see product descriptions shown under the thumbs.  These descriptions are helpful for the lists built from Search because search results are quite random, detached from the categories, so the customers often get lost.

These 2 orange buttons to switch between 'grid' and 'list' are reflected in "Sorting + Pagination" section of

But how to specify which button is pressed by default for the list built from Category and the list built from Search (separately)?
We would like to be able to specify the default one (the List) specifically for the products found in Search while leaving it as is (the Grid) for those customers who prefer browsing Categories.  If you know the place where to look at into the code for the Search, we would appreciate that.

The only seemingly related note we found in the release notes for 1.1.8 was
"default_html5 minor fix related to product listing buttons for product"
( )
Not sure how that fix aligned with this feature.

Offline abantecart

  • Administrator
  • Hero Member
  • *****
  • Posts: 4338
  • Karma: +296/-10
    • View Profile
    • Ideal Open Source Ecommerce Solution
Yes, probably settings would help. I will add this to the to do list in version 1.2.

Thank you
Please  rate your experience or leave your review
We need your help to build better free open source ecommerce platform for everyone. See how you can help

Offline Fehrwight_Lukas

  • Newbie
  • *
  • Posts: 2
  • Karma: +1/-0
    • View Profile
Figured it out.  Just need to change small bit of code on two files:

/storefront/view/default/style.css -> around line 2525 change:
     .list {display: none}
     .grid {display:none}

/storefront/view/default/template/pages/product/category.tpl -> around line 35 change:
    <button class="btn" id="list">
    <button class="btn btn-orange" id="list">


    <button class="btn btn-orange" id="grid">
    <button class="btn" id="grid">

The JS just toggles the element's display style for both the grid and list divs.  Then CSS was used to set ".list" initially to "display:none".  So you'll just change this from .list to .grid
Same thing for the btn-orange class.  JS just toggles this, there's no :active class or anything, just a toggle.  So instead of .grid initially having the btn-orange class and .list not having it, you just switch it around so .list has it initially and .grid does not.  Then toggle will continue to work like normal.

Hope this helps!


Powered by SMFPacks Social Login Mod