Infinite scroll on collection page in Shopify

 Hello, Collection page structure is as followed

{% paginate collection.products by 48 %}

<div class="collection-content">

<ul class="product-list">

  {% if product.available != false and product.featured_image != blank %}

      {% include 'product-item' %}

    {% endif %}

</ul>

</div>

{% if paginate.next %}

      <a href="{{ paginate.next.url }}" class="load-more" data-load-more style="display:none">Load More</a>

{% endif %}

 <div class="load_more" data-loadmore-image style="text-align: center;display:none;">

        <img

             class="lazyload"

             src="https://cdn.shopify.com/s/files/1/1385/4017/files/Spin-1s-200px_1.gif?v=1600964630"

             width="100px"

             alt="Contemporary and Modern Custom Clothing"

             />

      </div>

  {% endpaginate %}

JS script is as follows

Before adding below script, make sure you have added jQuery library in your code

function ScrollExecute(){

  //     let triggered = false;

  let moreButon = $('[data-load-more]').last();

  let nextUrl = $(moreButon).attr("href");

  let totalPaginatePages = parseInt($('[data-paginate-pages]').val());

  console.log(nextUrl);

  var detachMoreButton; 

  console.log('moreButon', moreButon);

  //     if ((($(moreButon).offset().top - $(window).scrollTop()) < 800) && (triggered == false)) {

  //       triggered = true;

  $.ajax({

    url: nextUrl,

    type: 'GET',

    beforeSend: function() {

      detachMoreButton = moreButon.detach();

      $('[data-loadmore-image]').show();

    }

  })

  .done(function(data) {

    console.log('data', data);

    $('.product-list').append($(data).find('.product-list').html());

    $('[data-loadmore-image]').hide();

    //         triggered = false;

    var oldUrl = $(detachMoreButton).attr('href').split('?');

    var colUrl = oldUrl[0].replace(',','');

    var splittedOldUrl = oldUrl[1].split('&');

    var extraUrlParameters= '';

    if(typeof splittedOldUrl[1] != "undefined"){

      extraUrlParameters = '&'+splittedOldUrl[1].replace(',','');

    }

    var nextPage = parseInt(splittedOldUrl[0].replace('page=',''))+1;

    //         console.log(nextPage);

    setTimeout(function(){ 

      $(detachMoreButton).attr('href', colUrl+'?page='+nextPage+extraUrlParameters);

      console.log($(detachMoreButton).attr('href'))

      $('main.content').append(detachMoreButton);

    }, 200);

  });

  //     } 

}

$(window).scroll({ passive: true }, function() {

  //     if($(document).height() - 800 < ($(document).scrollTop() + $(window).height())) {

  $('[data-loadmore-image]').trigger('click');

  //     }

});

$(document).ready(function(){

  $('[data-loadmore-image]').click(function() {

    var temp = $(".collection-content").offset();

    var productBottom = $(".collection-content").height() + temp.top;

    var windowScroll = $(window).scrollTop() + $(window).height();

    //       if (windowScroll > productBottom) {

    if ($('[data-load-more]').length > 0)

      ScrollExecute();

    //       }

  });

})

$(window).scroll({ passive: true }, function() {

  //     if($(document).height() - 800 < ($(document).scrollTop() + $(window).height())) {

  $('[data-loadmore-image]').trigger('click');

  //     }

});

Thanks

Accessing product data in checkout.liquid Shopify

Hello,

please ensure, your store is Shopify PLUS.

it seems that the global liquid variables  all_products and collections are not available in the checkout.liquid file. 

So you can grab data using the following code

<script>

jQuery.getJSON('/products/<product_handle>.js', function(product) {
  alert('The title of this product is ' + product.title);
});

</script>

Please make sure you have added jQuery before this script

Thanks,

Enjoy :)

Get blog details from article in Shopify

 Hello,
If you are fetching different articles by using some blocks, then you can use following code
Code: --------------------------
{% assign article = articles[block.settings.article] %}
        
{% assign splittedUrl = article.url | split:"/" %} 
        
{% assign blohHandle = splittedUrl[2] %}
        
{% assign blog = blogs[blohHandle] %}

Thanks

Add promo block at desired place on collection page with Shopify

 hello people,

append following schema in your collection page code 

,

  "blocks": [

      {

        "type": "feature",

        "name": "Promo blocks",

        "settings": [

          {

            "type": "select",

            "id": "style",

            "label": "Style",

            "options": [

              {

                "value": "primary",

                "label": "Primary"

              },

              {

                "value": "secondary",

                "label": "Secondary"

              }

            ],

            "default": "primary"

          },

          {

            "type": "collection",

            "id": "collection",

            "label": "Collection",

            "info": "Unless specified, promotion will appear on all collection pages"

          },

          {

            "type": "text",

            "id": "position",

            "label": "Display after X products",

            "default": "4"

          },

          {

            "type": "richtext",

            "id": "text",

            "label": "Title",

            "default": "<p>Promotion text<p>"

          },

          {

            "type": "url",

            "id": "link",

            "label": "Link"

          },

          {

            "type": "text",

            "id": "button",

            "label": "Button text",

            "default": "More info"

          }

        ]

      }

    ]

--------------------------------------------------------------

Add following code in the loop of  "collection.products"

code:

{%- for product in collection.products -%}

    

    {% assign index = forloop.index0 | downcase %}

    {% if section.blocks.size > 0 %}

      {% for block in section.blocks %}

        {% if block.settings.position != blank and block.settings.position == index %}

          {% unless block.settings.collection != empty and block.settings.collection != collection.handle %}

            {% include 'promo-block' %}

            {% break %}

          {% endunless %}

        {% endif %}

      {% endfor %}

    {% endif %}

    

      {%- render 'product-grid-item', product: product, grid_item_width: grid_item_width -%}

{% - endfor -%}

---------------------------------------------

Create snippet named "promo-block"

<div

  class="

      grid__item grid-product {{ grid_item_width }}

  "

>

  <h3 class="rte product-grid-item--details promo-block--content">{{ block.settings.text }}</h3>

  {% if block.settings.link != blank and block.settings.button != empty %}

    <a class="promo-block--link" href="{{ block.settings.link }}">

    <span class="promo-block--button">

      {{ block.settings.button }}

    </span></a>

  {% endif %}

</div>

Output: