dave Posted February 8, 2022 Share Posted February 8, 2022 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 Link to comment Share on other sites More sharing options...
bsmither Posted February 8, 2022 Share Posted February 8, 2022 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 More sharing options...
bsmither Posted February 11, 2022 Share Posted February 11, 2022 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 More sharing options...
dave Posted February 16, 2022 Author Share Posted February 16, 2022 Sorry folks I forgot to put a notice on this thread and have only now revisited, I will read your replies and respond as soon as possible. Link to comment Share on other sites More sharing options...
Recommended Posts
Archived
This topic is now archived and is closed to further replies.