shopify가 만든 Liquid를 알아보자

https://shopify.github.io/liquid/

Liquid template language

Liquid는 쇼피파이에서 만든 템플릿 언어로 동적 콘텐츠를 가져오는데 사용됩니다

 

2006년부터 시작해서 지금은 꽤 많은 곳들이 liquid를 사용하고 있습니다

 

 

저도 shopify의 테마를 고칠때 쓰거나,

 

braze 를 통한 인앱메시지를 작성할때 liquid를 사용해보았는데요

 

 

 

 

자주쓰이는 문법을 정리해보겠습니다

 

 

제어문

 

전형적인 if, elseif, else 구문입니다

{% if customer.name == "kevin" %}
  Hey Kevin!
{% elsif customer.name == "anonymous" %}
  Hey Anonymous!
{% else %}
  Hi Stranger!
{% endif %}

 

 

특정 단어를 포함하고 있는지 

{% if product.tags contains 'healing' %}
This potion contains restorative properties.
{% endif %}

 

 

 

{% if product.title == "Awesome Shoes" %}
  These shoes are awesome!
{% endif %}

 

 

{% if {{targeted_device.${platform}}} == "ios" %}
{% assign link = "ios://link" %}
{% elsif {{targeted_device.${platform}}} == "android" %}
{% assign link = "android://link" %}
{% else %}
{% assign link = "https://web.link" %}
{% endif %}

 

 

 

그리고 값이 있는지 없는지를 파악하여 값이 없는 경우 default의 값을 출력합니다

{{ ${first_name} | default: '고객' }}

 

 

liquid는 배열을 생성하려면 문자열을 split 하여야 합니다 다른 방법이 없습니다

 

split를 하면 for in 구문을 사용할수 있습니다

{% assign beatles= "John, Paul, George, Ringo" |split: ", " %}

{% for member in beatles %}
  {{ member }}
{% endfor %}

 

 

배열의 갯수도 size 속성을 통해 가져올수 있습니다

{% assign my_array= "apples, oranges, peaches, plums" |split: ", " %}

{{ my_array.size }}

 

 

소문자로 만드는 유틸

{{ "Parker Moore" | downcase }}

 

 

숫자에 콤마를 찍는 유틸

{{ result.data.productDetail.salesPrice | number_with_delimiter }}

 

 

그리고 산술연산

{{ 4 | minus: 2 }}
{{ 16 | minus: 4 }}
{{ 183.357 | minus: 12 }}
{{ 16 | divided_by: 4 }}

 

 

그리고 string 조합

{{ "/my/fancy/url" | append: ".html" }}

// /my/fancy/url.html