Jump to content
garywhitling

More products to display below current

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

 

Share this post


Link to post
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.

Share this post


Link to post
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();
    });

 

Share this post


Link to post
Share on other sites

Is there a web address for your site so we can see this?

Share this post


Link to post
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.

Share this post


Link to post
Share on other sites

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

Share this post


Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now

×