Jump to content

Foundation skin category view


huggettm
 Share

Recommended Posts

In /foundation/templates/content.category.php find the "<dd"

<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>

change the, class="active" to whichever one you want, in this case grid view, making sure to remove it from list view.

Then in the same file, look for product_list_view  and  product_grid_view 

and add hide to the one you don't want to use, again making sure to remove hide from the one we want to show, if we follow the example shown above, it'll look like this.


 

<div class="row product_list_view hide " >
...
  ...
  ...
  ...
  
  ..
  .
  .
  .
  
 <div class="product_grid_view">

 

Edited by Lastwolf
Link to comment
Share on other sites

Please make these edits:

In the Foundation template content.category.php, these changes switch the initial view from list to grid.

Find near line 59:

         <dd><a href="#" class="grid_view"><svg class="icon"><use xlink:href="#icon-th-large"></use></svg></a></dd>
         <dd class="active"><a href="#" class="list_view"><svg class="icon"><use xlink:href="#icon-th-list"></use></svg></a></dd>

Change to:

         <dd{* *} class="active"><a href="#" class="grid_view"><svg class="icon"><use xlink:href="#icon-th-large"></use></svg></a></dd>
         <dd{* class="active" *}><a href="#" class="list_view"><svg class="icon"><use xlink:href="#icon-th-list"></use></svg></a></dd>

Find near line 66:

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

Change to:

   <ul class="small-block-grid-1 medium-block-grid-3 product_list" data-equalizer>

Find near line 70:

            <div class="row product_list_view">

Change to:

            <div class="row product_list_view{* *} hide">

Find near line 115:

                        <input type="text" name="quantity" value="1" class="quantity text-center">

Change to:

                        <input type="text" name="quantity" value="1" class="quantity text-center"{* *} disabled>

Find near line 130:

            <div class="product_grid_view hide">

Change to:

            <div class="product_grid_view{* hide *}">
In the Foundation javascript file 2.cubecart.js, these changes sets the non-default view (now list) if the cookie says the non-default view (now list).

Find near line 523:

function set_product_view(delay) {
    if ($.cookie('product_view') == 'grid') {
        grid_view(delay, null);
    }
}

Change to:

function set_product_view(delay) {
    if ($.cookie('product_view') == 'list') { // if ($.cookie('product_view') == 'grid') {
        list_view(delay, null); // grid_view(delay, null);
    }
}

The javascript file has changed, so force your browser to reload page resources. This is usually done by CRTL-F5.

The template has changed, so you may need to clear CubeCart's cache. (admin, Maintenance, Rebuild tab, Clear Cache)

Link to comment
Share on other sites

I see extra lines in 2.cubecart.js:

Lines 542-545:

        if(Foundation.utils.is_medium_up()) {
            $('.product_list').removeClass('small-block-grid-1');
            $('.product_list').addClass('small-block-grid-3');
        }

Change to:

        if(Foundation.utils.is_medium_up()) {
            $('.product_list').addClass('medium-block-grid-3');
        }

Near lines 567-568:

        $('.product_list').removeClass('small-block-grid-3');
        $('.product_list').addClass('small-block-grid-1');

Change to:

        $('.product_list').removeClass('medium-block-grid-3');

 

  • Like 1
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.

 Share

×
×
  • Create New...