[Liquid]ショートコード
ブログ記事内やページ内で特定の記述をした部分を特定のhtmlへ変換する機能。
https://github.com/culturekings/shopify-shortcodes
のshortcode-render.liquidとshortcode.liquidをassetsフォルダへ配置
templates/article.liquid の記事部分を下記へ書き換える
{% include 'shortcode' load:article.content %}
記事編集で下記コードを入力する。xxxxの部分は商品ハンドル
[product_in_blog handle="xxxx"]
「product_in_blog」という名称のショートコードを作成する時は、「shortcode-product_in_blog.liquid」というファイルを作成する。
引数「handle」を設定する場合、「shortcode-product_in_blog.liquid」で値を取得する処理は下記。
{%- capture product_handle -%}{%- include 'shortcode-render' render:'handle' default:'' -%}{%- endcapture -%}
[Liquid]公開日からxxxx秒以内の商品にNEWアイコン
{%- assign current = 'now' | date: '%s' -%} {%- assign published_at = tmp_product.published_at | date:'%s' -%} {%- assign gap = current | minus:published_at -%} {%- if gap < xxxx -%} //NEWアイコン {%- endif -%}
[Liquid]バリエーション選択select
<select name="id" class="js_variantsSelect" data-product="{{ product.id }}"> {%- for variant in product.variants -%} <option value="{{ variant.id }}">{{ variant.title | escape }}</option> {%- endfor -%} </select>
[Liquid]メニュー
{%- for link in linklists.sidemenu.links -%} {%- if link.links.size <= 0 -%} 子項目が無いとき {%- else -%} 子項目があるとき {%- for childlink in link.links -%} {%- endfor -%} {%- endif -%} {%- endfor -%}
[Liquid]capture
{%- capture 変数名 -%}dummy520x390.jpg{%- endcapture -%}
{%- capture html_params -%} data-product="{{ product.id }}" data-variant="{{ variant.id }}" style="{{ html_style }}"{%- endcapture -%}
[Shopify]shopify公式カスタムフィールド
設定 > メタフィールド
商品
定義を追加する
全ての項目へ入力する
入力後保存する
保存後
Liquidコード
<a href="{{ product.url | within: collection }}"> <div class="image"><img src="{{ product.featured_image.src | img_url: 'large' }}" alt="{{ product.featured_image.alt | escape }}"></div> <h3>{{ product.title | escape }}</h3> {%- if product.metafields.my_fields.cf_text -%} <p>{{ product.metafields.my_fields.cf_text.value | escape }}</p> {%- else -%} <p>あいうえお</p> {%- endif -%} </a>
商品管理画面でカスタムフィールドへ入力
出力結果
[Liquid]税込税抜切替
tax-text.liquid
{%- if shop.taxes_included -%}(税込){%- else -%}(税抜){%- endif -%}
管理画面「設定 > 税金」の「すべての価格を税込価格で表示する」チェックならばshop.taxes_includedはtrue
[Liquid]コレクションページネーション
コレクションページネーション
{%- paginate collections[handle].products by collections[handle].all_products_count -%} {%- for product in collections[handle].products -%} //処理 {%- endfor -%} {%- endpaginate -%}