🧬 メタフィールド/メタオブジェクト中級
商品バッジの色付けメタフィールド表示
メタフィールドのテキストと色情報を読み込んで、商品カード上にカスタムバッジを表示するスニペット。メタフィールド値は「テキスト|カラーコード」形式で、テーマ設定で 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 フィルターは下枠の暗い色を自動生成するが、指定色によっては十分な視認性が出ない場合があるので、本番環境で複数色パターンをテストする。
コード
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 %}出典・ライセンス
- Repository:
- https://github.com/kondasoft/ks-bootshop
- License:
- MIT
このコードは kondasoft 著作の MIT ライセンスソースです。 原本の著作権は kondasoft が保有します。日本語訳は ALSEL によるものです。