在博客页面上加载更多按钮(Shopify)

Question

我正在考虑在我的shopify博客页面中添加一个load按钮(而不是基本的分页)。

有人知道怎么做吗？

这是页面的代码

 <div class="mx-auto">
        {% if item.show_sidebar and section.blocks != blank %}
          {%- case item.layout -%}
            {%- when 'left_column' -%}
            <div class="flex flex-wrap flex-row-reverse -mx-4">
              <div class="w-full lg:w-9/12 px-4">
                  <div class="grid grid-cols-1 {% if section.settings.view == 'grid' %}grid-cols-2 md:grid-cols-{{ section.settings.show_item_per_row | minus: 1 }} lg:grid-cols-{{ section.settings.show_item_per_row }}{% endif %} gap-8">
                    {%- for article in blog.articles -%}
                        {% render 'article-card', article: article, view: item.view %}
                    {% endfor %}
                  </div>
                {%- if paginate.pages > 1 -%}
                <div class="flex justify-center my-7 lg:my-16">
                  {%- render 'pagination', paginate: paginate -%}
                </div>
                {%- endif -%}
              </div>
              <div class="w-full lg:w-3/12 px-4">
                {% render 'blog-sidebar' %}
              </div>
            </div>
            {%- else -%}
            <div class="flex flex-wrap -mx-4">
              <div class="w-full lg:w-9/12 px-4 blogBox moreBox">
                  <div class="grid grid-cols-1 {% if section.settings.view == 'grid' %}grid-cols-2 md:grid-cols-{{ section.settings.show_item_per_row | minus: 1 }} lg:grid-cols-{{ section.settings.show_item_per_row }}{% endif %} gap-8">
                    {%- for article in blog.articles -%}
                        {% render 'article-card', article: article, view: item.view %}
                    {% endfor %}
                  </div>
                {%- if paginate.pages > 1 -%}
                <div class="flex justify-center my-7 lg:my-16">
                  {%- render 'pagination', paginate: paginate -%}
                </div>
                {%- endif -%}
              </div>
              <div class="w-full lg:w-3/12 px-4">
                {% render 'blog-sidebar' %}
              </div>
            </div>
          {%- endcase -%}
        {% else %}
            <div class="grid grid-cols-1 {% if section.settings.view == 'grid' %}grid-cols-2 md:grid-cols-{{ section.settings.show_item_per_row | minus: 1 }} lg:grid-cols-{{ section.settings.show_item_per_row }}{% endif %} gap-8">
                {%- for article in blog.articles -%}
                    {% render 'article-card', article: article, view: item.view %}
                {% endfor %}
            </div>
          {%- if paginate.pages > 1 -%}
     <div class="flex justify-center my-7 lg:my-16">
                  {%- render 'pagination', paginate: paginate -%}
                </div>
          {%- endif -%}
        {% endif %}
    </div>
  </div>
</section>

我们已经尝试了一些在收集页面上工作的方法，但似乎并没有处理博客文章

Answer 1

我认为您可以使用这段代码，这是为产品在集合页面，但您需要替换类和重命名变量和博客文章使用。

1. Go to your collection template and fid this code section
<ul class="grid grid--uniform{% if collection.products_count > 0 %} grid--view-items{% endif %}">
        {% for product in collection.products %}
add class and date:
data-next-url="{{paginate.next.url}}"
class="products-on-page"

example:
<ul data-next-url="{{paginate.next.url}}" class="products-on-page grid grid--uniform{% if collection.products_count > 0 %} grid--view-items{% endif %}">

2. second html code end of the </ul> tag find this code and add after this code
{% else %}
            {%- assign is_empty_collection = true -%}
          {% endif %}
        {% endfor %}
      </ul> 
code:
<div class="load-more">
      <a class="load-more_btn btn" onclick="loadMoreProducts()">Load More</a>
      <div class="load-more_spinner"></div>
</div>

3. add css code for designing load more button
.load-more{text-align:center;margin-top:45px;}
.load-more_spinner{
    display: none;
    width: 35px;
    height: 35px;
    border: 5px solid #f3f3f3;
    border-top: 5px solid #3a3a3a;
    border-radius: 50%;
    margin-left: auto;
    margin-right: auto;
    animation: 2s spin linear infinite;
}
@keyframes spin{
    0%{transform:rotate(0deg)}
    100%{transform:rotate(360deg)}
}

4. Go to assets and create a new collection-load-more.js file and paste this code:

var products_on_page = $('.products-on-page');
var next_url = products_on_page.data('next-url');

var load_more_btn = $('.load-more_btn ');
var load_more_spinner = $('.load-more_spinner');

function loadMoreProducts() {
  $.ajax(
    {
      url: next_url,
      type: 'GET',
      dataType: 'html',
      beforeSend: function(){
        load_more_btn.hide();
        load_more_spinner.show();
      }

    }
  ).done(function(next_page){
    
    load_more_spinner.hide();
    
    var new_products = $(next_page).find('.products-on-page');
    var new_url = new_products.data('next-url');
    
    if(new_url)
      load_more_btn.show();

    next_url = new_url;
    products_on_page.append(new_products.html());

  })

}

5. Go to layout area paste this code on the theme.liquid file:

{% if template contains 'collection' %}
  <script src="{{ 'collection-load-more.js' | asset_url }}" defer="defer"></script>
  {%endif%}