Liquid Snippets by ALSEL
🧬 メタフィールド/メタオブジェクト中級

商品バッジの色付けメタフィールド表示

メタフィールドのテキストと色情報を読み込んで、商品カード上にカスタムバッジを表示するスニペット。メタフィールド値は「テキスト|カラーコード」形式で、テーマ設定で namespace.key を指定する。

用途
商品ごとに異なるバッジ(限定商品、再入荷予定など)を管理画面のメタフィールドから動的に出し分けたいとき。テーマ設定で namespace と key を一度指定すれば、各商品の管理画面でテキストと色を自由に変更できる。
設置場所
snippets/product-custom-badge.liquid に配置し、商品カード(product-card.liquid など)の目立つ位置で `{% render 'product-custom-badge', product: product %}` で呼び出す。テーマ設定に「product_custom_badge_metafield」(例: custom.badge)と「product_custom_badge_bg_color」(デフォルト背景色クラス)を追加する。
注意点
メタフィールドが作成済みで、namespace.key 形式が管理画面の設定と正確に一致していることが前提。メタフィールド値の形式は必ず「テキスト|カラーコード」(パイプ区切り)にし、色コードが 16 進カラー(#RRGGBB)または rgb() 形式でないとスタイルが適用されない。color_darken フィルターは下枠の暗い色を自動生成するが、指定色によっては十分な視認性が出ない場合があるので、本番環境で複数色パターンをテストする。
タグ:metafieldproductbadgecustom-colordynamic-content

コード

19 行 / liquid
{% liquid 
  assign metafield_namespace = settings.product_custom_badge_metafield | split: '.' | first
  assign metafield_key = settings.product_custom_badge_metafield | split: '.' | last
  assign metafield = product.metafields[metafield_namespace][metafield_key]

  assign text = metafield | split: '|' | first
  assign color = metafield | split: '|' | last 
%}

{% if metafield != blank %}
  <span 
    class="product-custom-badge badge {{ settings.product_custom_badge_bg_color }}"
    style="{% if color != blank %}background: {{ color }} !important{% endif %}">
    {% if color != blank %}
      <span style="border-bottom-color: {{ color | strip | color_darken: 15 }}"></span>
    {% endif %}
    {{ text }}
  </span>
{% endif %}

出典・ライセンス

License:
MIT

このコードは kondasoft 著作の MIT ライセンスソースです。 原本の著作権は kondasoft が保有します。日本語訳は ALSEL によるものです。