自定義Ajax頁面加載Shopify集合頁面？

我想在shopify上構建一個簡單的解決方案，在那裏我點擊'查看更多'鏈接，我的ajax將從下一個頁面中提取數據並將其顯示在當前的集合頁面上，而無需更改頁面。自定義Ajax頁面加載Shopify集合頁面？

我有這個工作到最簡單的方法下面，但我想改變這個，所以每頁後它會爲下一個請求添加另一個div。它應該是這樣的：

用戶滾動到底部並單擊查看更多鏈接。
數據顯示在提供的第一個div中。
用戶點擊的再次查看
數據是從下一個頁面顯示以前

後，我希望是有道理的。我認爲我需要實現某種計數器，並使用該計數器作爲我的ajax查詢中的頁碼，但我不確定如何做到這一點，以及在每個查詢後面的下一個數據將被插入後創建一個NEW div。

這是到目前爲止我的代碼：

$(document).ready(function() { 
$('#more p a').click(function(e) { 
    e.preventDefault(); 
    $.ajax({ 
    url: 'https://url.myshopify.com/collections/all?page=2', 
    type:'GET', 
    success: function(data){ 
     $('#ajax-content-2').html($(data).find('.collection-wrapper').html()); 
    } 
    }); 
}); 
});

來源

2015-08-15 Elevant

我知道這是一個老話題，但這裏是有可能真正幫助你，因爲它沒有對我來說：[無限滾動Shopify收藏]（http://www.davecap.com/post/9675189741/infinite-scroll-for-shopify-collections） –

好了，因爲我並沒有真正得到我只是寫我自己的，它非常基本的任何迴應，但它的工作原理。

的Jquery：

$(document).ready(function() { 
    var counter = 2 
    var pages = Math.ceil('{{ collection.all_products_count }}'/{{ settings.products_per_page }}); 
    var maxCount = pages + 1; 
    console.log("Pages Found: " + pages); 

    console.log("Collection Title: {{ collection.handle }}"); 

    $('#more p a').click(function(e) { 

     e.preventDefault(); 
     var getUrl = "site.myshopify.com/collections/{{ collection.handle }}?page="+counter; 

     $.ajax({ 
      url: getUrl, 
      type:'GET', 
      success: function(data){ 
       $("#ajax-content-"+counter).html($(data).find('.collection-wrapper').html()); 
       counter++; 
       var oldCount = counter - 1; 
       $("#ajax-content-"+oldCount).append("<div id='ajax-content-"+counter+"'></div>"); 

       if(counter == maxCount) { 
        $('#more').empty(); 
       } 

      } 
     }); 
    }); 
});

如果你看到任何可以改善這裏請讓我知道:)

來源

2015-08-16 07:08:39 Elevant

自定義Ajax頁面加載Shopify集合頁面？

回答

相關問題