Solved

use setting of a section outside of section

Paula2021
Excursionist
28 0 5

Hi, So i am customizing a theme i purchased. 
The section of "product-template.liquid" has the setting "delivery_date". Like this

 

{% include 'product-template' %}
{% schema %}
  {
    "name": "Product pages 3D",
    "settings": [
      {
        "type": "header",
        "content": "Order and Shipping Time",
        "info": "Working days"
      },
      {
        "type": "checkbox",
        "id": "order_shipping_time",
        "label": "Enable Order and Shipping Time",
        "default": true
      },
      {
        "type": "range",
        "id": "deadline_day",
        "label": "Deadline each day",
        "default": 14,
        "min": 0,
        "max": 23,
        "step": 1,
        "unit": "h"
      },
      {
        "type": "range",
        "id": "delivery_time",
        "label": "Delivery time",
        "default": 2,
        "min": 1,
        "max": 7,
        "step": 1,
        "unit": "d"
      },

 

This data is show in the 

product.liquid

by doing this

 

  <ul class="shipping-time" data-deliverytime="{{ section.settings.delivery_time }}" data-deadline="{{ section.settings.deadline_day }}">

    <li class="delivery-time"></li>

    <li class="deadline">
      <span class="text">{{ 'products.product.order_within' | t }}</span>
      <div class="countdown_deadline"></div>
    </li>  

  </ul>

 

 I want to show this data from another page - the catalogue page, that contains a list of all my products. For this I have to edit the file 

product-item.liquid

I have added the same thing that was in my product.liquid file on my product-item.liquid file, like this:

 

  <ul class="shipping-time" data-deliverytime="{{ section.settings.delivery_time }}" data-deadline="{{ section.settings.deadline_day }}">

    <li class="delivery-time"></li>

    <li class="deadline">
      <span class="text">{{ 'products.product.order_within' | t }}</span>
      <div class="countdown_deadline"></div>
    </li>  

  </ul>

 

But Then on the front I don't see the variables delivery_time nor deadline_day  ...

Can someday help me?

Accepted Solution (1)
tim
Shopify Expert
3258 232 1178

This is an accepted solution.

@Paula2021  -- I see now. What happens is in your liquid you output an empty element which has data attributes assigned. This actually work properly now. 

However, on the product page there is a Javascript which pulls this data, converts it to date (and countdown) and outputs it on your product page. But it does not run on the collection page, so your element remains empty.

I briefly looked at the Javascript and it is designed to work on a single product per page and would need serious modification to have this info on your collection pages.

Also, having a countdown under every product in your collection would look a bit too much IMHO.

 

View solution in original post

Replies 11 (11)

MandasaTech
Shopify Expert
723 146 153

No, It's not possible to use Product Details Page Section setting on Collection page.

Instead you can do it using Product Tags or Metafields for this Delivery date setting.

☞ Helpful or Question answered? Please Click Like & Mark it Accepted Solution
☞ Want to modify or custom changes on store for affordable price? Click on Contact button here
☞ Email at info@mandasa.in
☞ Whatsapp at +918989609120 | Hire us at: Website Support Page
Paula2021
Excursionist
28 0 5

The data is not product detail...

This is the data in the product page - so the file Product.liquid

Captura de pantalla 2021-01-10 a las 19.24.08.png

 

And this is my catalogue page - where you can see that the variables of delivery_date and deadline_day aren't being shown - the file Product-item.liquid

Captura de pantalla 2021-01-10 a las 19.23.51.png

Liam
Shopify Staff
2731 297 760

Hi Paula, just to confirm, you're using the same section product-item.liquid on both the product page and on the collection page - and the section is displaying the correct data (day and time) on the product page, but they are not appearing on the collection page. Is that correct?

Could you create a separate section with unique section IDs for the day and time that is only added to the collection page? It's possible since the section is being used on both templates that this is causing an issue. 

Let me know if this works 🙂 

Liam | Developer Advocate @ Shopify 
 - Was my reply helpful? Click Like to let me know! 
 - Was your question answered? Mark it as an Accepted Solution
 - To learn more visit Shopify.dev or the Shopify Web Design and Development Blog

Paula2021
Excursionist
28 0 5

Hi Liam!
Nope i'm not using the same section for both templates. I'll re-explain;

I have a snippet that shows the order time and delivery date.

product-detail-order-shipping.liquid 

{% if section.settings.order_shipping_time %}
  <ul class="shipping-time" data-deliverytime="{{ section.settings.delivery_time }}" data-deadline="{{ section.settings.deadline_day }}">

    <li class="delivery-time"></li>

    <li class="deadline">
      <span class="text">{{ 'products.product.order_within' | t }}</span>
      <div class="countdown_deadline"></div>
    </li>  

  </ul>
{% endif %}

 

 

Then I have the section product-template.liquid linked to the snippet product-template.lquid. Essentially this is what in the front end I see as the product page.

In the SECTION product-template.liquid I have the variables for the shipping info like this:

 

,
      {
        "type": "header",
        "content": "Order and Shipping Time",
        "info": "Working days"
      },
      {
        "type": "checkbox",
        "id": "order_shipping_time",
        "label": "Enable Order and Shipping Time",
        "default": true
      },
      {
        "type": "range",
        "id": "deadline_day",
        "label": "Deadline each day",
        "default": 14,
        "min": 0,
        "max": 23,
        "step": 1,
        "unit": "h"
      },
      {
        "type": "range",
        "id": "delivery_time",
        "label": "Delivery time",
        "default": 2,
        "min": 1,
        "max": 7,
        "step": 1,
        "unit": "d"
      },

 



Then in my snippet  product-template.liquid page (which is what in the front is the product page), there's a combination of multiple snippets with info about the product - like this:

 

 {% include 'product-detail-stock' %}
 {% include 'product-detail-short-description' %}
{% include 'product-detail-size-chart' %}
{% include 'product-detail-wishlist-compare' %}
{% include 'product-detail-sku' %}
{% include 'product-detail-price' %}
{% include 'product-detail-deals' %}

 

 

And inside the snippet 

product-detail-price.liquid  I put the snippet to show the Shipping info, so the  product-detail-order-shipping.liquid at the end of the file .
So this is my
product-detail-price.liquid :

<meta itemprop="priceCurrency" content="{{ shop.currency }}" />
<meta itemprop="priceValidUntil" content="2020-11-05" />

<div id="purchase-{{ product.id }}" class="product-price">

  {% form 'product', product, class:'product-form product-action variants' %}

  <ul id="qty-atc-mobile" class="list-inline">
    <li style=" margin-inline-end: 10px;">
      <div class="detail-price" itemprop="price" content="{{ product.price | divided_by: 100.00 }}">
        {% if product.compare_at_price_max > product.price %}
          <span class="price-sale">{{ product.price | money }}</span>
          <del class="price-compare"> {{ product.compare_at_price | money }}</del>
        {% else %}
          <span class="price">{{ product.price | money }}</span>
        {% endif %}
      </div>
    </li>
    <li>
      
      <div class="qty-add-cart">
      	{% include 'product-detail-qty' %}
      </div>
     
    </li>
    <li>
      {% include 'product-detail-btn' %}
    </li>
    
    
  </ul>
  <div class="group-cw clearfix">
      
    {% include 'product-detail-variants' %}
    </div>
       {% endform %}
</div>
{% include 'product-detail-order-shipping' %}

 


Up until here aLL GOOD. This makes my product page have the shipping information as I want.

What I want now is to add this shipping information into my collection pages.

 

To do this the collection pages is made up of different snippets. I identified that the snippet with the product details is the snippet product-item.liquid

 

So I tried adding to the snippet product-item.liquid the snippet  product-detail-order-shipping.liquid . Like this: 

 

{% include 'product-detail-order-shipping' %}

 

 

But it is not working because the snippet product-detail-order-shipping.liquid has an IF statement at the beginning that does not correspond to the section of product-item.liquid . The section linked to the snippet product-item.liquid has none of the variables:


section.settings.order_shipping_time

 section.settings.delivery_time

section.settings.deadline_day

 

So basically what I think I need is to read form the snippet product-item.liquid some variables declared on the section product-template.liquid .

 

I tried to put the variables directly in in the product-item.liquid instead of adding  product-detail-order-shipping.liquid , like this - but it is not working:

product-item.liquid

 

<ul class="shipping-time" data-deliverytime="{{ section.settings.delivery_time }}" data-deadline="{{ section.settings.deadline_day }}">

    <li class="delivery-time"></li>

    <li class="deadline">
      <span class="text">{{ 'products.product.order_within' | t }}</span>
      <div class="countdown_deadline"></div>
    </li>  

  </ul>

 

 

I also tried like this but not working either

 

<ul class="shipping-time" data-deliverytime="{{ section.product-template.settings.delivery_time }}" data-deadline="{{ section.product-template.settings.deadline_day }}">

    <li class="delivery-time"></li>

    <li class="deadline">
      <span class="text">{{ 'products.product.order_within' | t }}</span>
      <div class="countdown_deadline"></div>
    </li>  

  </ul>

 

 

Does this clarify my issue @Liam?

 

tim
Shopify Expert
3258 232 1178

No, you cannot use section setting outside of section.

In your case, you need to move this setting to the theme settings (in the settings_schema.json config.

Paula2021
Excursionist
28 0 5

hi,thanks for your reply but how would i do this? I don't understand ...  if I move these variables to setting_schema.json where would the user set them up ? 

tim
Shopify Expert
3258 232 1178

Under theme settings?

Liam
Shopify Staff
2731 297 760

Hi again Paula, as Tim mentioned section settings are only accessible within that section, so recreating them as theme settings may be the best option here. Once added, merchants would be able to access the settings from Theme Settings on the Online Store Editor:

 

21-01-dg7yt-qc3wy

 Hope this helps! 

 

Liam | Developer Advocate @ Shopify 
 - Was my reply helpful? Click Like to let me know! 
 - Was your question answered? Mark it as an Accepted Solution
 - To learn more visit Shopify.dev or the Shopify Web Design and Development Blog

Paula2021
Excursionist
28 0 5

Hi Thanks  @tim and @Li 

I changed the variable to setting_schema.json, however it is still not working. I think the issue is that the styling pages that are loaded in the product page are not loaded in the catalogue page. Look at screenshot here: You can see that is says  "Order within (BLANK)" where BLANK should have the data. 

Captura de pantalla 2021-01-26 a las 20.24.25.png


So therefore the catalogue page doesn't know what the styling classes are  : "class="shipping-time" "class="delivery-time", class="deadline", class="countdown_deadline". These classes are defined in the Style.css file. I checked an it seems that this Style.css file IS being loading in the catalogue page ... So I have no idea of what to do next .. ?

Captura de pantalla 2021-01-26 a las 20.27.44.png




This is the code I have in the catalogue page for each product item:

Product-item.liquid

 <div  >
  <ul class="shipping-time" data-deliverytime="{{ settings.delivery_time }}" data-deadline="{{ settings.deadline_day }}">

    <li class="delivery-time"></li>

    <li class="deadline">
      <span class="text">{{ 'products.product.order_within' | t }}</span>
      <div class="countdown_deadline"></div>
    </li>  

  </ul>
        </div>

 

And this is a screenshot of how it is rendered:

Captura de pantalla 2021-01-26 a las 20.13.23.png

You can check here my WEBSITE
Temporary Password: Bdx2021

 the difference between the catalogue page:
https://piecesdetacheesfrigo-fr.myshopify.com/collections/accessories

and the product pages:
https://piecesdetacheesfrigo-fr.myshopify.com/collections/accessories/products/golddax-product-examp...


Do you know what I should try next? @Liam @tim  THANKS A LOT FOR YOUR TIME!

tim
Shopify Expert
3258 232 1178

This is an accepted solution.

@Paula2021  -- I see now. What happens is in your liquid you output an empty element which has data attributes assigned. This actually work properly now. 

However, on the product page there is a Javascript which pulls this data, converts it to date (and countdown) and outputs it on your product page. But it does not run on the collection page, so your element remains empty.

I briefly looked at the Javascript and it is designed to work on a single product per page and would need serious modification to have this info on your collection pages.

Also, having a countdown under every product in your collection would look a bit too much IMHO.

 

Paula2021
Excursionist
28 0 5

Thanks! 🙂 

I managed to do a work around by just showing the variable without the complicated javascript. 

 

 

If you'd have the time would you mind checking this other issue I'm having with encoding? https://community.shopify.com/c/Shopify-Design/weird-aphabet-on-text-when-I-share-my-product-on-andr...

 

Thanks