Jump to content

How to make category grid view as default


Recommended Posts

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.

Link to comment
Share on other sites

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.

Link to comment
Share on other sites

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 by Eduard J
Link to comment
Share on other sites

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.

Link to comment
Share on other sites

  • 1 month later...

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

 

 

Link to comment
Share on other sites

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.

Link to comment
Share on other sites

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. 

Link to comment
Share on other sites

  • 8 years later...
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.

Link to comment
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

×
×
  • Create New...