shopify学習記録【Liquidフィルターの使用方法】

shopifyのliquidフィルターの使用方法についてまとめます！
フィルターとはオブジェクトの値を変更して出力することを言います。
WordPressでいうフックみたいな感じのイメージで合ってるかと思います。

フィルターの例

downcase（全て小文字になる）

{{product.title -> Health potion}}
{{product.title | downcase}}

出力結果
health potion

upcase（全て大文字になる）

{{product.title -> Health potion}}
{{product.title | downcase}}

出力結果
HEALTH POTION

remove(設定した値を削除)

{{product.title -> Health potion}}
{{product.title | remove:'potion'}}

出力結果
health 

prepend(設定した値を削除)

{{product.title -> Health potion}}
{{product.title | prepend:'block'}}

出力結果
block Health potion

split(接待した値で区切る)

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

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

出力結果
John
Paul
George
Ringo

商品の値段の割り引き価格の値引き%を表示

{% for item in collection.products %}
{% if item.title contains 'KIDS'%}
  <br>
    <img src="{{ item.featured_image | image_url :width:300 }}"><br>
    {{item.title}}<br>
    {{item.price | money}}<br>
    {{item.compare_at_price | money}}

    {% assign discount-price = item.compare_at_price | minus:item.price | times:100 | divided_by:item.compare_at_price %}
    
    <p class="liquid-font">{{discount-price}}%</p>
  
  
{% endif %}

{% endfor %}

{{collection.products | money}}
商品の値段を日本円で表示させる。

{{collection.products.compare_at_price | money}}
商品の値引き前の値段を表示させる。

times
掛け算を実行

divided_by
割り算を実行

その他フィルターにはたくさん種類が存在しており、
一覧は公式サイトに説明が載っています。
全て英語なのがネックですね。。。

Liquid filters

TwitterやInstagramやってます！
仕事はフリーで主にweb制作をしております。
台湾好きや興味がある人とお友達になりたいです。
DMお待ちしております。
よろしくお願いいたします！

Twitter:@trizolyuta
Instagram:@yuta208817
portoforio:https://nakamayuuta.sakura.ne.jp/