フッターのリッチテキストとメニュー
フッターセクション用のブロック型スニペット。リッチテキスト、ボタン、メニューを条件付きで描画する。block.settings で取得したテキスト・URL・メニューハンドルを組み合わせて柔軟なフッター構成を実現する。
コード
40 行 / liquid{% case block.type %}
{% when 'richtext' %}
{% unless block.settings.description == blank %}
<div class="description rte mt-2 mb-6">
{{ block.settings.description }}
</div>
{% endunless %}
{% unless block.settings.btn_primary_text == blank %}
<div class="m-n2">
{% unless block.settings.btn_primary_text == blank %}
<a
class="btn btn-sm m-2 {{ block.settings.btn_primary_color }}"
href="{{ block.settings.btn_primary_url }}">
{{ block.settings.btn_primary_text }}
</a>
{% endunless %}
{% unless block.settings.btn_secondary_text == blank %}
<a
class="btn btn-sm m-2 {{ block.settings.btn_secondary_color }}"
href="{{ block.settings.btn_secondary_url }}">
{{ block.settings.btn_secondary_text }}
</a>
{% endunless %}
</div>
{% endunless %}
{% when 'menu' %}
<ul
class="nav flex-column mb-0"
aria-label="{{ block.settings.title }}">
{% for link in linklists[block.settings.menu].links %}
<li class="nav-item">
<a
class="nav-link px-0 px-desktop-3 py-3 py-desktop-2"
href="{{ link.url }}">
{{ link.title }}
</a>
</li>
{% endfor %}
</ul>
{% endcase %}出典・ライセンス
- Repository:
- https://github.com/kondasoft/ks-bootshop
- License:
- MIT
このコードは kondasoft 著作の MIT ライセンスソースです。 原本の著作権は kondasoft が保有します。日本語訳は ALSEL によるものです。
関連項目
Alpine.js統合のメニュー開閉
Alpine.js の @click ディレクティブと :class バインディングを使ったメニュー開閉コンポーネント。ボタンクリックで open 状態を切り替え、ul 要素に expanded クラスを条件付きで付与する。
ヘッダーのレイアウト構造
Web Component のカスタムエレメント `<c-header>` でラップしたヘッダー要素。Tailwind CSS のユーティリティクラスを使い、レスポンシブなパディングとフレックスボックスレイアウトを実装している。
ナビゲーションバーのロゴ
ストアのロゴをナビゲーションバーに表示し、クリックでホームページに戻るコンポーネント。ロゴ画像がない場合はストア名をテキストで表示する。
決済方法アイコン
ストアで有効な決済手段のアイコンをリスト表示するスニペット。Shopify が提供する `payment_type_svg_tag` フィルタを使い、クレジットカード・Apple Pay・Google Pay などのロゴを自動的に描画する。
グローバルナビゲーションメニュー
Shopify 管理画面の「メインメニュー」リンクリストをループし、トップレベルメニュー + 1階層のサブメニューを描画するスニペット。link.title と sub_link.title を escape フィルターでエスケープして XSS 対策を施している。
フッター
ストア共通のフッターセクション。管理画面で設定したフッターメニュー（リンクリスト）をループ表示し、著作権表記を出す。