Ad

Pull Through Product Data In Shopify

- 1 answer

I am making my own product slider for my website. I have my own dynamic section, where in 'customise theme' you can select 5 products.

I can pull through the product handle with {{ section.settings.product-1 }} , but how can I get the product id, product name, product price, product image url etc..?

Things, like {{ product.title }} don't work, because it doesn't know where to pull the information from.

My current code is:

<div class="wrapper">
  <div class="section-header text-center">
    <h2 class="h1 section-header__title"> {{ section.settings.text-box }} 
    </h2>
  </div>

  <div class="rte">

    <div class="gallery js-flickity" data-flickity-options='{ "freeScroll": true, "wrapAround": true }'>
       <div class="gallery-cell"> </div>
       <div class="gallery-cell"> Text </div>
       <div class="gallery-cell"> Text </div>
       <div class="gallery-cell"> Text </div> 
   </div>
 </div>
</div>

{% schema %}
{
"name": "Featured Slider",
"settings": [

{
    "id" : "text-box",
    "type" : "text",
    "label" : "Title of Section",
    "default" : "Featured Products"
},

{
    "type" : "product",
    "id" : "product-1",
    "label" : "Featured Product"
},

{
    "type" : "product",
    "id" : "product-2",
    "label" : "Featured Product"
},

{
    "type" : "product",
    "id" : "product-3",
    "label" : "Featured Product"
},

{
    "type" : "product",
    "id" : "product-4",
    "label" : "Featured Product"
},

{
    "type" : "product",
    "id" : "product-5",
    "label" : "Featured Product"
}],

"presets": [
    {
    "name" : "Featured Product Slider",
    "category" : "Allsops Sections"
    }
        ]
 }
{% endschema %}

So the idea is in each gallery-cell div will be a different product.

Ad

Answer

It seems that you are using a section which is great but you are not using it in a useful way.

Sections provides a very nice addition to your code logic - Blocks ( a.k.a dynamic content )

{% schema %}
{
    "name": "Featured Slider",
    "settings": [
        {
            "id" : "text-box",
            "type" : "text",
            "label" : "Title of Section",
            "default" : "Featured Products"
        }
    ],
    "blocks": [
        {
            "type": "slide",
            "name": "Slide",
            "settings": [
            {
                "id": "product",
                "type  "id": "product",
                "type": "product",
                "label": "Featured Products"
            }
            ]
        }
    ],
    "presets": [
        {
            "name" : "Featured Product Slider",
            "category" : "Allsops Sections"
        }
    ]
}
{% endschema %}

{% for block in section.blocks %}
    {% assign product = all_products[block.settings.product] %}
    <div class="slider">
        <a target="_blank" rel="nofollow noreferrer" target="_blank" rel="nofollow noreferrer" href="{{ product.url }}">
            <img src="{{ product.featured_image | img_url: 'master' }}">
            {{ product.title }}
        </a>
    </div>
    ...
{% endfor %}

This way you can add as many slides as you like and reorder them the way you like.

As for your question, you get the product using the all_products object to get a specific object. In the schema I provided you can see that I use it here {% assign product = all_products[block.settings.product] %}

Please note that all_products allows for only 20 request, any more than that and it will throw a liquid error.

Ad
source: stackoverflow.com
Ad