Question

有人为我的网店创建了一个无限卷轴。除了一件事，这项工作非常好。当您在页面的中途并单击产品时，您将转到产品页面。当用户点击浏览器后退按钮时，用户返回具有无限卷轴的页面。问题是脚本在第一次用户点击产品的位置再次加载所有产品。换句话说，当您点击后退按钮时，所有产品都会再次加载。在搜索这个网站后，我读过你可以用window.loacation.hash做点什么。问题是我是JS和Jquery的初学者，所以我不知道这将如何适合下面的代码。任何帮助都更受欢迎......

对于下面代码中的任何错误，我很抱歉，但我不得不通知脚本......

我的代码

var currentPage = {{ collection.page }};
var collectionPages = {{ collection.pages }};
var category = '{{ collection.internal.url }}';
var appendProduct = function (product) {
    if (currentPage == 1) {
        return false
    }
    $('<div class="product"></div>').html(product).appendTo($(".productsGrid"));
    var i = 1;
    $('.product').each(function () {
        if (i++ % 3 == 0) $(this).addClass('last')
    })
};
var loadProducts = function () {
    var url = "http://www.riemen-tekoop.nl/" + category + "/page" + currentPage + ".ajax" + window.location.search;
    $.getJSON(url, function (data) {
        $.each(data.products, function (index, product) {
            var imageUrl = product.image.replace('50x50x2', '210x175x2');
            var itemHtml = '' + '<a href="' + product.url + '" title="' + product.title + ' ' + product.brand.title + '"><img src="' + imageUrl + '" width="210" height="175" alt="' + product.title + ' ' + product.brand.title + '" title="' + product.title + ' ' + product.brand.title + '"/>';
            if (product.price.price_old) {
                itemHtml = itemHtml + '<div class="perc">' + (((+product.price.price / product.price.price_old) * 100) - 100).toFixed(0) + '%</div>'
            }
            itemHtml = itemHtml + '<div class="caption" style="display:none;"><a href="' + product.url + '" class="opener">Quick view</a></div>' + '</a>' + '<div class="info">' + '<h3>' + '<a href="' + product.url + '" title="' + product.title + ' ' + product.brand.title + '">' + product.title + ' ' + product.brand.title + '</a>' + '</h3>' + '<div class="gridAddToCart">' + '<a class="btnLink" href="' + product.url + '" title="' + product.title + ' ' + product.brand.title + '" rel="nofollow" alt="Bekijk details"><span>{{ '
            Details ' | t }}</span></a>' + '<a class="btnWishlist" href="{{ ' / account / wishlistAdd / ' }}' + product.id + '" title="{{ '
            Add to wishlist ' | t }}" rel="nofollow" alt="Zet op {{ '
            Wishlist ' | t }}"></a>' + '</div>' + '<div class="price"><strong>' + product.price.price_money + '</strong>';
            if (product.price.price_old) {
                itemHtml = itemHtml + ' <span>' + product.price.price_old_money + '</span>'
            }
            itemHtml = itemHtml + '<div class="clear"></div>' + '</div>' + '</div>' + '<span class="imgshadow"></span>';
            appendProduct(itemHtml)
        });
        $("#overlay").fadeOut();
        $(window).scroll(function () {
            update()
        })
    })
};
loadProducts();
var isUpdating = false;
var update = function () {
    if ($(window).height() + $(window).scrollTop() >= $(document).height() - 4000) {
        if (currentPage < collectionPages && !isUpdating) {
            isUpdating = true;
            currentPage++;
            $("#overlay").fadeIn();
            $(window).unbind('scroll');
            setTimeout(function () {
                loadProducts();
                setTimeout(function () {
                    isUpdating = false
                }, 500)
            }, 500)
        }
    }
};
$(window).scroll(function () {
    update()
});

使用无限滚动时，在浏览器后退按钮后保持位置

0 个答案: