Re: How input metafield on theme become liquid code

Solved

How input metafield on theme become liquid code

tokito
Shopify Partner
38 2 2

Hi guy,

Im trying to create an app. I just wanna ask about how can a simple liquid code like this one in product review :

 

<div id="shopify-product-reviews" data-id="{{product.id}}">{{ product.metafields.spr.reviews }}</div>

 can turn into

<div class="spr-container">
  <div class="spr-header">
    <h2 class="spr-header-title">Customer Reviews</h2><div class="spr-summary" itemscope itemprop="aggregateRating" itemtype="http://schema.org/AggregateRating">
        <meta itemprop="itemReviewed" content="Striped Pareo Towel">
        <span class="spr-starrating spr-summary-starrating">
          <meta itemprop="bestRating" content="5">
          <meta itemprop="worstRating" content="1">
          <meta itemprop="reviewCount" content="1">
          <meta itemprop="ratingValue" content="2.0">
          <i class="spr-icon spr-icon-star"></i><i class="spr-icon spr-icon-star"></i><i class="spr-icon spr-icon-star-empty"></i><i class="spr-icon spr-icon-star-empty"></i><i class="spr-icon spr-icon-star-empty"></i>
        </span>
        <span class="spr-summary-caption"><span class='spr-summary-actions-togglereviews'>Based on 1 review</span>
        </span><span class="spr-summary-actions">
        <a href='#' class='spr-summary-actions-newreview' onclick='SPR.toggleForm(2336778911792);return false'>Write a review</a>
      </span>
    </div>
  </div>
  <div class="spr-content">
    <div class='spr-form' id='form_2336778911792' style='display: none'></div>
    <div class='spr-reviews' id='reviews_2336778911792' ></div>
  </div>
</div>
</div>

 I have read about metafield in this .

Can someone tell more detail about this? I see all metafield app can do that.  Also in snippets I see none of those liquid code

Accepted Solution (1)

Jason
Shopify Partner
11206 226 2314

This is an accepted solution.

A metafield can hold a string and in this case the value is html code.

 

{{ product.metafields.spr.reviews }}

^ That code pulls the value of the metafield from the product and adds in to the page. The review app populates the metafield as needed so Liquid is able to grab it later. 

 

The API docs for metafield will also be of use to you:
https://help.shopify.com/en/api/reference/metafield

 

★ I jump on these forums in my free time to help and share some insights. Not looking to be hired, and not looking for work. http://freakdesign.com.au ★

View solution in original post

Replies 3 (3)

Jason
Shopify Partner
11206 226 2314

This is an accepted solution.

A metafield can hold a string and in this case the value is html code.

 

{{ product.metafields.spr.reviews }}

^ That code pulls the value of the metafield from the product and adds in to the page. The review app populates the metafield as needed so Liquid is able to grab it later. 

 

The API docs for metafield will also be of use to you:
https://help.shopify.com/en/api/reference/metafield

 

★ I jump on these forums in my free time to help and share some insights. Not looking to be hired, and not looking for work. http://freakdesign.com.au ★
tokito
Shopify Partner
38 2 2

Hi Jason,

Thank for your help,

May I ask one more thing? I have put a html string inside the metafield and call it successful in product-template.liquid but the liquid code not work it just print liquid code like some words.

If I put the liquid directly not via a metafield it work fine. Do you know how to make it possible?

 

The liquid look like this : <div>{{shop.metafields.xyz.xyz}}</div> it represent:

{% unless shop.metafields.cmld == blank %}
{%- assign cmld = shop.metafields.cmld -%}
<div class="slider">
{%- for field in cmld -%}
<div><img src="{{ field | last }}" /></div>
{% endfor %}
</div>
{% endunless %}

 

tokito
Shopify Partner
38 2 2

I want to ask also about this case too:

 

<div data="scmBannerSlider" data-id="14916" style="display: none;"></div>

 

 I dont know how it work too?