Is it possible to initiate object as variable in liquid?

Question

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!

Dotson

Answer 1

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.

Grenade

fantastic response, i'll give it a try :) – Dotson

Answer 2

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>

Vertebrate

Ahhh. I'll just wandering if it possible. Thank you :) – Dotson

Answer 3

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 %}

Glucoside

I'm also using liquidjs in a non shopify context, and this worked for me. Not sure how I forgot you can register your own filters! – Kingcup

Answer 4

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.

Gesso