How to make category grid view as default

[Eduard J]

I'm having some troubles to make grid view as default in category page, changed following code in content.category.php :

From :

         <dd><a href="#" class="grid_view"><i class="fa fa-th-large"></i></a></dd>
         <dd class="active"><a href="#" class="list_view"><i class="fa fa-th-list"></i></a></dd>

To:

         <dd class="active"><a href="#" class="grid_view"><i class="fa fa-th-large"></i></a></dd>
         <dd><a href="#" class="list_view"><i class="fa fa-th-list"></i></a></dd>

this only changes to icon of grid view but still displaying list vew of the products. 

​Also have checked JavaScript in /js/2.cubecart.js but cannot locate default setting to change from list view to grid view.

[bsmither]

Try also near line 70:

From:
<div class="row product_list_view">
To:
<div class="row product_list_view hide">

And line 129:

From:
<div class="product_grid_view hide">
To:
<div class="product_grid_view">

Then delete this cookie: product_view

That gets you most of the way. Without the cookie, the product "panels" don't know what shape to take. So each panel is as big as it can get.

I haven't found the javascript to set the cookie. Probably somewhere in 2.cubecart.js.

[Eduard J]

Hi,

Thanks for reply, already done that what it will do is make grid view product only one per line when it loads the page messes up the style of the grid. Not sure why.

also where do i delete the cookie product_view from ?

Edited May 8, 2015 by Eduard J

[bsmither]

That would be a feature/function of your browser.

What I can't seem to find is where the cookie "product_view" is initially set in the CubeCart codebase, if at all.

If the cookie is only initially set via one of the javascript functions, and only when the visitor clicks one of the grid/list icons, then it seems to me the initial orientation should be fine.

On the other hand, looking at the functions grid_view() and list_view(), I see that when switching to grid view, the element having class "product_list" has a class added of "small-block-grid-3". So, try changing the template code near line 65:

<div id="ccScroll">
   <ul class="small-block-grid-1 product_list" data-equalizer>

To:

<div id="ccScroll">
   <ul class="small-block-grid-3 product_list" data-equalizer>

for the initial 3-across grid layout.

And if this last edit fixes it, then maybe you don't need to kill the cookie as these functions will reset the cookie as appropriate.

Except, of course, it will be necessary to kill the cookie during your testing so that the javascript won't have a basis to make a decision on what's been showing.

[Dirty Butter]

I would like for medium to have 2 columns grid view OR use list view for small and medium (whichever is simpler to code). I'm starting a new thread for help with that.

[bobdonkey]

Hi DB

Did you manage to do this? I also want to set grid view as default, it is much better when there are a lot of products in the store.

Thanks

[Dirty Butter]

I did change the number of grids, but never did work on grid as the default. Will give Bsmither's directions a try and get back.

[kealan]

I have implemented the above with moderate success, there were still a few exception cases where other tweaks were needed. 

Try implementing the above and let us know if you are having any specific issue after that we can try to address

 

 

[Dirty Butter]

I made the edits outlined here, except I need 2 grid columns, not 3. As a default, it seems to work. But attempting to go back and forth between grid and list is not consistently smooth. Sometimes it takes a browser refresh to get the correct look after swapping, and sometimes it works. Currently live on dirtybutterestates.com.

[bobdonkey]

Hey DB, yes it does default but the list view is looking a bit odd, e.g. if I click on glass it initially shows as list view, then click on grid and grid looks fine, but then if I click on list again it shows as a grid but with very tiny images. 

[maximus]

On 5/8/2015 at 4:54 PM, bsmither said:

On the other hand, looking at the functions grid_view() and list_view(), I see that when switching to grid view, the element having class "product_list" has a class added of "small-block-grid-3". So, try changing the template code near line 65:

<div id="ccScroll">
   <ul class="small-block-grid-1 product_list" data-equalizer>

To:

<div id="ccScroll">
   <ul class="small-block-grid-3 product_list" data-equalizer>

for the initial 3-across grid layout.

 

This is horrible advice, this changes the layout to 3 products per line also on mobile devices, which is surely not intended.