Jump to content

More products to display below current


garywhitling

Recommended Posts

Hi,

Anybody know how to make the website show more products below the existing products when you click on More?

Currently when you click on more it just replaces what is there with the next 12 products.

Before the latest upgrade a while back it added the next group of products below,  so you could see say 48 products at once on the same page.

Regards Gary

 

Link to comment
Share on other sites

We are assuming you are running Foundation skin.

In 2.cubecart.js, near line 300, there is a function that will:
* make an ajax call to get the next page,
* find all <li> nodes in the parent node having the product_list class,
* append that new list to the existing list.

So, if that doesn't happen, then:
* you may not be running a version of Foundation that has ccScroll implemented,
* that implementation is in an older version of Foundation that may have been fixed,
* some other part of javascript is crashing such that the ajax call is not happening - the new page replaces the previous.

To determine if javascript is crashing, have the browser show you its diagnostic console panel.

Link to comment
Share on other sites

Hi Brian,

Yes I am using the foundation skin

Sorry, not 100% sure what you mean 😂

 Here is the code from that area.

I see it has ccScroll implemented.

 // Set cookie for 10 mins
        var date = new Date();
        date.setTime(date.getTime() + (10 * 60 * 1000));
        $.cookie("ccScroll", JSON.stringify(ccScrollHistory), {expires: date});

        $(this).after(function() {
            return loadingHtml;
        });

        $.ajax({
            async: false,
            url: $(this).attr('href'),
            cache: true,
            complete: function(returned) {
                
                $('p#loading').hide();

                var page = returned.responseText;
                var list = $('.product_list li', page);
                var next = $('a.ccScroll-next', page);
                
                product_list.append(list);
                set_product_view(0)
                $(next_link).replaceWith(next);
                init_add_to_basket();
            }
        });
    });

    if($('#ccScrollCat').length > 0) {
        var cat_pages = parseInt($('#ccScrollCat').text());
        if ($.cookie('ccScroll')) {
            var ccScrollHistory = $.parseJSON($.cookie("ccScroll"));
            if(cat_pages in ccScrollHistory) {
                for (i = 1; i < ccScrollHistory[cat_pages]; i++) {
                    $('.ccScroll-next:last').trigger("click");
                }
                $('html, body').animate({ scrollTop: ccScrollHistory['loc'] }, 'slow');
            }
        }
    }

    var duration = 500;
    $(window).scroll(function() {
        if ($(this).scrollTop() > 400) {
            $('.back-to-top').fadeIn(duration);
        } else {
            $('.back-to-top').fadeOut(duration);
        }
    });

    $('.back-to-top').click(function(event) {
        event.preventDefault();
        $('html, body').animate({
            scrollTop: 0
        }, duration);
        return false;
    });
    $('#show-small-search').click(function() {
        $("#small-search").slideDown();
    });

    if ($("#checkout_form")[0]) {
        if (window_loc_hash == '#login') {
            checkout_form_toggle(false);
        } else if (window_loc_hash == '#register') {
            checkout_form_toggle(true);
        }

        $('#checkout_login').click(function() {
            checkout_form_toggle(false);
        });
        $('#checkout_register').click(function() {
            checkout_form_toggle(true);
        });
    }

    if($('#ptp').length > 0 && $('[name^=productOptions]').length > 0) {
        price_inc_options();
        $("[name^=productOptions]").change(function() {
            price_inc_options();
        });
    }

    $("#newsletter_email").focus(function() {
        $("#newsletter_recaptcha").slideDown();
    });

 

Link to comment
Share on other sites

Looking at the HTML source as delivered to my browser, it seems that there is a mis-identified selector that the ccScroll click event is looking for.

Please try this:

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

<a href="{$current}{http_build_query($params)}{$anchor}" class="button tiny expand" id="ccScroll-next">{$LANG.common.more} <i class="fa fa-angle-down"></i></a>

Change to:

<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} <i class="fa fa-angle-down"></i></a>

Two lines above that, find:

{if ($page < $total)}

Change to:

{if $page!=='all' && ($page < $total)}

Clear CubeCart's cache.

Link to comment
Share on other sites

  • 1 month later...

Hi Brian,

I have just noticed that since adding that code i now see duplicates of any products that have been added after the code change was made.

Any ideas why the category page would do that? the product is only added one in the admin area but displaying twice on the category page.

I have reverted back to the old code for now

Regards Gary

Link to comment
Share on other sites

Archived

This topic is now archived and is closed to further replies.

×
×
  • Create New...