Please help us to make AbanteCart Ideal Open Source Ecommerce Solution for everyone.

Support AbanteCart eCommerce

Author Topic: List view by default, instead grid view  (Read 7855 times)

Offline ewgeny

  • Newbie
  • *
  • Posts: 13
  • Karma: +2/-0
    • View Profile
List view by default, instead grid view
« 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?

Offline ewgeny

  • Newbie
  • *
  • Posts: 13
  • Karma: +2/-0
    • View Profile
Re: List view by default, instead grid view
« Reply #1 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">

Offline masalachai

  • Newbie
  • *
  • Posts: 28
  • Karma: +4/-0
    • View Profile
Re: List view by default, instead grid view
« Reply #2 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/

Offline Basara

  • Administrator
  • Hero Member
  • *****
  • Posts: 5774
  • Karma: +274/-2
    • View Profile
Re: List view by default, instead grid view
« Reply #3 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

Offline masalachai

  • Newbie
  • *
  • Posts: 28
  • Karma: +4/-0
    • View Profile
Re: List view by default, instead grid view
« Reply #4 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!

Offline Fehrwight_Lukas

  • Newbie
  • *
  • Posts: 2
  • Karma: +1/-0
    • View Profile
Re: List view by default, instead grid view
« Reply #5 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!

 

Powered by SMFPacks Social Login Mod