Jump to content

Product counters?


dave
 Share

Recommended Posts

Must say I'm loving Cubecart so far, soon be up and running here. But have a question more about design than anything.

I've now loaded around 500 products but looking at the product listing the is nothing their to indicate when browsing how many products are remaining in that the category to be viewed.

Ideally if I have the setting "VIEW" 30 products in a listing page I would like at the bottom "displaying 1 to 30 of 134 products in this category" and this to change as the customer goes page to page. At the moment they wouldn't have a clue how many the are as you can see - in this screenshot - it just says MORE on the button

Ideas very much appreciated
 

Screenshot 2022-02-08 at 16-33-47 Vinyl Records.png

Link to comment
Share on other sites

That is an interesting enhancement to the 'More' button.

There is a hard-coded switch in the skin template code that will revert to a more legacy style pagination:

[1] 2 3 4 5 ... 37 All

To make the switch:

In the Foundation template content.category.php, near line 198, from:

   </ul>
   {* Uncomment for traditional pagination *}
   {*
   <div class="row">
      <div class="small-12 large-8 columns">
         {$PAGINATION}

To:

   </ul>
   {* Uncomment for traditional pagination *}

   <div class="row">
      <div class="small-12 large-8 columns">
         {$PAGINATION}

Line 215, from:

      </div>
   </div>
   *}
   <div class="hide" id="ccScrollCat">{$category.cat_id}</div>
   {if $page!=='all' && ($page < $total)}
   {$params[$var_name] = $page + 1}
   {* Add "hide-for-medium-up" to the class attribute to not display the more button *}
   <a href="{$current}{http_build_query($params)}{$anchor}" data-next-page="{$params[$var_name]}" data-cat="{$category.cat_id}" class="button tiny expand ccScroll-next">{$LANG.common.more} <svg class="icon"><use xlink:href="#icon-angle-down"></use></svg></a>
   {/if}
   <div class="text-center hide" id="loading"><svg class="icon-x3"><use xlink:href="#icon-spinner"></use></svg></div>
</div>

To:

      </div>
   </div>
   {*
   <div class="hide" id="ccScrollCat">{$category.cat_id}</div>
   {if $page!=='all' && ($page < $total)}
   {$params[$var_name] = $page + 1}
   <!-- Add "hide-for-medium-up" to the class attribute to not display the more button -->
   <a href="{$current}{http_build_query($params)}{$anchor}" data-next-page="{$params[$var_name]}" data-cat="{$category.cat_id}" class="button tiny expand ccScroll-next">{$LANG.common.more} <svg class="icon"><use xlink:href="#icon-angle-down"></use></svg></a>
   {/if}
   <div class="text-center hide" id="loading"><svg class="icon-x3"><use xlink:href="#icon-spinner"></use></svg></div>
   *}
</div>

 

Link to comment
Share on other sites

Please give this a test.

In the Foundation skin template content.category.php, near the end, find:

   <a href="{$current}{http_build_query($params)}{$anchor}" data-next-page="{$params[$var_name]}" data-cat="{$category.cat_id}" class="button tiny expand ccScroll-next">{$LANG.common.more} <svg class="icon"><use xlink:href="#icon-angle-down"></use></svg></a>

Change to:

   Showing <span id="products_showing">{$products_showing} of </span>{$TOTAL_RESULTS} products<a href="{$current}{http_build_query($params)}{$anchor}" data-next-page="{$params[$var_name]}" data-cat="{$category.cat_id}" class="button tiny expand ccScroll-next">{$LANG.common.more} <svg class="icon"><use xlink:href="#icon-angle-down"></use></svg></a>
In the Foundation's skin javascript file 2.cubecart.js, find near the middle of the file:

            complete: function(returned) {
                var page = returned.responseText;
                var list = $('.product_list li', page);
                var next = $('a.ccScroll-next', page);
                $('.product_list li').removeClass("newTop");
                $(list[0]).addClass('newTop');
                setTimeout(function(){
                    product_list.append(list);
                    set_product_view(0)
                    $(next_link).replaceWith(next);
                    init_add_to_basket();

Change to:

complete: function(returned) {
                var page = returned.responseText;
                var list = $('.product_list li', page);
                var next = $('a.ccScroll-next', page); var products_showing = $('#products_showing', page).text();
                $('.product_list li').removeClass("newTop");
                $(list[0]).addClass('newTop');
                setTimeout(function(){
                    product_list.append(list);
                    set_product_view(0)
                    $(next_link).replaceWith(next); if(products_showing){$('#products_showing').text(products_showing + " of ");}else{$('#products_showing').text("");}
                    init_add_to_basket();
In the file /classes/db/databse.class.php,
in the public function pagination(),
near the end of the function, find:

                'view_all'  => (bool)$view_all,
                'per_page'  => (int)$per_page,

Change to:

                'view_all'  => (bool)$view_all,
                'per_page'  => (int)$per_page,
                'products_showing' => $page * (int)$per_page,

Because the javascript file has been changed, you will need to force your browser to fetch a fresh copy of it. This is usually done with CTRL-F5.

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