Button "Load more" in the catalog in CS-Cart


In CS-Cart the default pagination in the product catalog is made through Ajax, but when implemented through the selection of pages in pagination. Sometimes you need to either add or change the standard pagination to the “Load more” button, so that more goods are loaded at the bottom of the page..

This is not difficult to do, it is enough to make changes to the site theme. This can be done either in the theme itself, either through its plugin or in the standard plugin “My Changes”.

1. In file \views\categories\view.tpl need to add your button

{hook name="categories:view"}
<div id="category_products_{$block.block_id}" class="gul-main-catalog">

<h1 class="gul-categ-head">{$category_data.category}</h1>
{if $category_data.description || $runtime.customization_mode.live_editor}
    <div class="ty-wysiwyg-content ty-mb-s" {live_edit name="category:description:{$category_data.category_id}"}>{$category_data.description nofilter}</div>
{/if}

{if $products}
{assign var="layouts" value=""|fn_get_products_views:false:0}
{if $category_data.product_columns}
    {assign var="product_columns" value=$category_data.product_columns}
{else}
    {assign var="product_columns" value=$settings.Appearance.columns_in_products_list}
{/if}

{if $layouts.$selected_layout.template}
    {include file="`$layouts.$selected_layout.template`" columns=$product_columns}
{/if}

{elseif !$subcategories || $show_no_products_block}
<p class="ty-no-items cm-pagination-container">{__("text_no_products")}</p>
{else}
<div class="cm-pagination-container"></div>
{/if}
<!--category_products_{$block.block_id}--></div>
###################################################################################
# Add here a button that will be responsible for downloading new content.
    {assign var="pagination" value=$search|fn_generate_pagination}	
    {if $pagination.total_pages>1} # if we have more than one page in the category
       {if $smarty.request.dispatch=="products.search"} # if the search page
       		<div class="gul-load-more serchpagin" data-curcateg='{$smarty.server.REQUEST_URI}' data-curpagunpage="{$pagination.current_page}" data-allpaginpage="{$pagination.total_pages}">Load more</div>
       {elseif $smarty.request.dispatch=="categories.view"} # if the catalog page
            <div class="gul-load-more catpagin" data-curcateg='{"categories.view&category_id={$category_data.category_id}"|fn_url}' data-curpagunpage="{$pagination.current_page}" data-allpaginpage="{$pagination.total_pages}">Load more</div>
       {/if}>
    {/if}
###################################################################################
{capture name="mainbox_title"}<span {live_edit name="category:category:{$category_data.category_id}"}>{$category_data.category}</span>{/capture}
{/hook}

2. In file \blocks\list_templates\grid_list.tpl you need to remove the call to the standard pagination and add the necessary tags so that our download works

{if $products}

    {script src="js/tygh/exceptions.js"}
    

    {if !$no_pagination}
		#####################################################################################
		# here we replace the connection of standard pagination with a block of content
        <div class="ty-pagination-container cm-pagination-container" id="pagination_contents">
		#####################################################################################
    {/if}

    {if !$show_empty}
        {split data=$products size=$columns|default:"2" assign="splitted_products"}
    {else}
        {split data=$products size=$columns|default:"2" assign="splitted_products" skip_complete=true}
    {/if}

    {math equation="100 / x" x=$columns|default:"2" assign="cell_width"}
    {if $item_number == "Y"}
        {assign var="cur_number" value=1}
    {/if}

    {* FIXME: Don't move this file *}
    {script src="js/tygh/product_image_gallery.js"}

    {if $settings.Appearance.enable_quick_view == 'Y'}
        {$quick_nav_ids = $products|fn_fields_from_multi_level:"product_id":"product_id"}
    {/if}
    <div class="grid-list">
        {strip}
            {foreach from=$splitted_products item="sproducts" name="sprod"}
                {foreach from=$sproducts item="product" name="sproducts"}
                    <div class="ty-column{$columns}">
                        {if $product}
                            {assign var="obj_id" value=$product.product_id}
                            {assign var="obj_id_prefix" value="`$obj_prefix``$product.product_id`"}
                            {include file="common/product_data.tpl" product=$product}

                            <div class="ty-grid-list__item ty-quick-view-button__wrapper">
                                {assign var="form_open" value="form_open_`$obj_id`"}
                                {$smarty.capture.$form_open nofilter}
                                {hook name="products:product_multicolumns_list"}
                                        <div class="ty-grid-list__image">
                                            {include file="views/products/components/product_icon.tpl" product=$product show_gallery=true}

                                            {assign var="discount_label" value="discount_label_`$obj_prefix``$obj_id`"}
                                            {$smarty.capture.$discount_label nofilter}
                                        </div>

                                        <div class="ty-grid-list__item-name">
                                            {if $item_number == "Y"}
                                                <span class="item-number">{$cur_number}. </span>
                                                {math equation="num + 1" num=$cur_number assign="cur_number"}
                                            {/if}

                                            {assign var="name" value="name_$obj_id"}
                                            {$smarty.capture.$name nofilter}
                                        </div>

                                        <div class="ty-grid-list__price {if $product.price == 0}ty-grid-list__no-price{/if}">
                                            {assign var="old_price" value="old_price_`$obj_id`"}
                                            {if $smarty.capture.$old_price|trim}{$smarty.capture.$old_price nofilter}{/if}

                                            {assign var="price" value="price_`$obj_id`"}
                                            {$smarty.capture.$price nofilter}

                                            {assign var="clean_price" value="clean_price_`$obj_id`"}
                                            {$smarty.capture.$clean_price nofilter}

                                            {assign var="list_discount" value="list_discount_`$obj_id`"}
                                            {$smarty.capture.$list_discount nofilter}
                                        </div>

                                        <div class="ty-grid-list__control">
                                            {if $settings.Appearance.enable_quick_view == 'Y'}
                                                {include file="views/products/components/quick_view_link.tpl" quick_nav_ids=$quick_nav_ids}
                                            {/if}

                                            {if $show_add_to_cart}
                                                <div class="button-container">
                                                    {assign var="add_to_cart" value="add_to_cart_`$obj_id`"}
                                                    {$smarty.capture.$add_to_cart nofilter}
                                                </div>
                                            {/if}
                                        </div>
                                {/hook}
                                {assign var="form_close" value="form_close_`$obj_id`"}
                                {$smarty.capture.$form_close nofilter}
                            </div>
                        {/if}
                    </div>
                {/foreach}
                {if $show_empty && $smarty.foreach.sprod.last}
                    {assign var="iteration" value=$smarty.foreach.sproducts.iteration}
                    {capture name="iteration"}{$iteration}{/capture}
                    {hook name="products:products_multicolumns_extra"}
                    {/hook}
                    {assign var="iteration" value=$smarty.capture.iteration}
                    {if $iteration % $columns != 0}
                        {math assign="empty_count" equation="c - it%c" it=$iteration c=$columns}
                        {section loop=$empty_count name="empty_rows"}
                            <div class="ty-column{$columns}">
                                <div class="ty-product-empty">
                                    <span class="ty-product-empty__text">{__("empty")}</span>
                                </div>
                            </div>
                        {/section}
                    {/if}
                {/if}
            {/foreach}
        {/strip}
    </div>

    {if !$no_pagination}
		#################################	
		# also replace the standard pagination to close the tag	
        <!--pagination_contents--></div>
		#################################
    {/if}

{/if}

{capture name="mainbox_title"}{$title}{/capture}

3. In the scripts of your module or in the scripts of your theme \common\scripts.tpl need to add a new content download handler for our button

$('body').on('click','.gul-load-more',function(){ // Announce an event by clicking on our button.
	var but=$(this); // Put in a variable our button
    if (but.hasClass('catpagin')) { // If catalog page
    	$.ceAjax('request', $(this).data('curcateg') + 'page-' + ($(this).data('curpagunpage') + 1) + '/', {
        	result_ids: 'pagination_contents',
            caching: true,
            append: true,
            callback: function (data) {
            	but.next().next().next('.ty-sort-container').remove(); // Remove sort block
                but.next('.ty-pagination__bottom').remove(); // Remove pagination block
                but.remove();

                if (but.data('curpagunpage') + 1 >= but.data('allpaginpage')) { // If the page we are loading is the last one, delete the "load more" button
                	$('.gul-load-more').remove();
                }
             }
          });
      } else if (but.hasClass('serchpagin')) { // If search page
      	var request=$(this).data('curcateg');
        request=request.replace("page="+$(this).data('curpagunpage'), "page="+($(this).data('curpagunpage') + 1));
        $.ceAjax('request', request, {
        	result_ids: 'pagination_contents',
            caching: true,
            append: true,
            callback: function (data) {
            	but.next().next().next('.ty-sort-container').remove(); // Remove sort block
                but.next('.ty-pagination__bottom').remove(); // Remove pagination block
                but.remove();

                if (but.data('curpagunpage') + 1 >= but.data('allpaginpage')) { // If the page we are loading is the last one, delete the "load more" button
                	$('.gul-load-more').remove();
                }
             }
          });
       }
});



Connect

If you have any questions, want to get individual advice or you have an interesting offer, you can contact via the feedback form.

Or write to the email info@bobreod.ru





By submitting the form, you agree to our privacy policy