Shopify Question posted in
The Shopify help center can be found here.

Is it possible to initiate object as variable in liquid? – Shopify

I’m fairly new in Liquid environment and wonder if you could possibly initiate object variable in Liquid file as similar as JS?

let person = [{
    'name' : 'John Doe',
    'age' : '20'
}];

I’m aware that liquid is using {% assign %} so is it any working ways of doing

{% assign person = [{
    'name' : 'John Doe',
    'age' : '20'
}]; %}

This is directly initialise it without pull any data from the metafields.

Thanks in advance!

Tags:

4

Answers


  1. 0

    You cannot create a new custom object in Shopify unless you have saved the object data in a metafield that you have defined and created in the Shopify editor.

    The following is a way you can create and assign the object as a string and later on, use javascript to create a javascript object from the string.

    {% assign person = "[{'name' : 'John Doe','age' : '20'}]" %}

<script>
 var person = {{person}};
 //typeof(person) is object
</script>
    Login or Signup to reply.
  2. 0

    You might use sompething like that:

    {%- capture person -%}
name : John Doe , age : 20
{%- endcapture -%}
{% assign person = person | split:',' %}

    Person is now an array.

    {{ person.first }}

    or

    {{ person[0] }}

    will output: name : John Doe.

    Then, to go further:

    {% assign person_name = person.first | split:':' %}

    So

    {{ person_name.last }}

    or

    {{ person_name[1] }}

    will output: John Doe.

    etc.

    Login or Signup to reply.
  3. 0

    I’m using liquidjs in a non-shopify environment, one solution I came across is using a custom Filter:

    idk if you can declare custom Filters in shopify

    write your object inside a capture block

    {% capture table_data_json %}
  [
  {"key": "Marke", "value": "Audi"},
  {"key": "Größe", "value": "12m"}
  ]
{% endcapture %}

    then register a new Filter which can create a JS Object from JSON

    
let engine = new Liquid({
  root: "...",
  extname: ".liquid", 
  layouts: ...,
  globals: ...,
});

// register new Filter
engine.registerFilter("jsonToObject", (json) => JSON.parse(json));

    now you can use your new Filter to work with the returned Object

    {% capture table_data_json %}
  [
  {"key": "Marke", "value": "Audi"},
  {"key": "Größe", "value": "12m"}
  ]
{% endcapture %}

{% assign table_object = table_data_json | jsonToObject %}

{% for table_data in table_object %}
  {{ table_data.key }} : {{ table_data.value }}
{% endfor %}
    Login or Signup to reply.
  4. 0

    I actually managed to get a capture (string) into a JS-parsable state.

      {%- capture ecommerce_item -%}
{
  "currency": "{{ currency.name }}",
  "value": "{{ product.price }}",
  "items": [ {
    "item_id": "SKU_{{ product.variants[0].sku }}",
    "item_name": "{{ product.variants[0].title }}",
    "item_list_id": "list_name_example",
    "item_list_name": "List name example",
    "item_brand": "{{ product.vendor }}",
    "currency": "{{ currency.name }}",
    "location_id": "abc123def456",
    "quantity": 1,
    "index": 0,
    "affiliation": "{{ shop.name }}",
    {%- for collection in product.collections -%}
    "item_category{% if forloop.first != true %}{{ forloop.index }}{% endif %}": "{{ collection.handle }}",
    {%- endfor -%}
    "price": "{{ product.price }}"
  } ]
}
  {%- endcapture %}

    Later, you can render it in your HTML. Example:

    <div id="example" data-ecommerce='{{- ecommerce_item | strip_newlines | strip_html | json -}}'>

    It then can be fetched in JS:

    JSON.parse( document.getElementById( 'example' ).dataset.ecommerce );

    Note that the HTML itself in the page source will be converted, so you will find &quote tags. They do not prevent you from parsing it and using it in as JavaScript object.

    I understand that this does not fully answer the question, but as it’s related, I am leaving it here for later readers.

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search