AbanteCart Community

Shopping Cart Operations => Support => Topic started by: ewgeny on February 02, 2016, 09:39:12 AM

Title: List view by default, instead grid view
Post by: ewgeny on February 02, 2016, 09:39:12 AM

OK, i knew how to remove buttons for Grid or List view, but how can I make the list view to be default?

Title: Re: List view by default, instead grid view
Post by: ewgeny on February 05, 2016, 04:28:46 AM

So, since nobody helps me, I did it my way! By myself!
storefront\view\default\template\pages\product\product_listing.tpl
 
Switch places of all content in <ul class="thumbnails grid row list-inline"> and <ul class="thumbnails list row">

Title: Re: List view by default, instead grid view
Post by: masalachai on January 20, 2017, 07:12:39 AM

I'm looking to do something similar. Have all 110 products on the Home page displayed by using them as Featured Products. Would like to have them shown as a list instead of grid. Something like this:
tympanus dot net/Blueprints/ViewModeSwitch/

Title: Re: List view by default, instead grid view
Post by: Basara on January 20, 2017, 08:28:21 AM

Hi.

Enable template debug to find what block files your need to edit http://docs.abantecart.com/pages/tips/template_debug.html

Title: Re: List view by default, instead grid view
Post by: masalachai on January 21, 2017, 05:42:50 AM

Thanks for the reply Basara!
I'm obviously new to AbanteCart but am liking it very much overall.  I don't however understand how/why it's set up the way it is and how best to go about editing it.  Why, for example, there isn't a custom.css file built in? Things that are easy to do in straight HTML and PHP are for some reason difficult to track down in AbanteCart. Fortunately, there's TexFinderX and phpMyAdmin to be able help out somewhat, but still, way too obfuscated for me. Anyhow.

Thanks again!

Title: Re: List view by default, instead grid view
Post by: Fehrwight_Lukas on June 20, 2018, 09:39:37 AM

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}
to:
     .grid {display:none}

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

AND

    <button class="btn btn-orange" id="grid">
to:
    <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!