在主页上的特色产品添加分页(X-Cart)

Question

我正在与x-cart网站合作，我有一个关于如何在主页上为特色产品添加分页的问题。有可能吗？

我在等你的答复。

Answer 1

这取决于您的模板，但让我们假设您的特色产品是这样显示的：

<div id="products">
    <div class="product-item product-item-odd">...</div>
    <div class="product-item product-item-even">...</div>
    <div class="product-item product-item-odd">...</div>
    <div class="product-item product-item-even">...</div>
    ...
</div>

然后您可以使用jQuery (可能是x-Cart中的旧版本)来分页：

function paginate(container, max) {
    var items = container.children();
    var totalItems = items.length;
    var totalPages = Math.ceil(totalItems / max);
    var pager = $('<p class="my_pager"></p>');
    for (p = 1; p <= totalPages; p++) {
        pager.append('<span class="open_page">' + p + '</span>');
        items.slice((p - 1) * max, p * max).attr('data-page', p);
    };
    container.after(pager);
    $('.open_page').click(function (e) {
        $('.open_page').removeClass('active');
        $(this).addClass('active');
        var pageToOpen = $(this).text();
        items.hide();
        items.filter('[data-page=' + pageToOpen + ']').show();
    });
    $('.open_page:first').click();
};
paginate($('#products'), 2);

Fiddle example