📁

【Shopify.dev和訳】Themes/Architecture/Temp.../gift_cards.liquid

2021/09/18に公開約2,700字

この記事について

この記事は、Themes/Architecture/Templates/gift_cards.liquid"の記事を和訳したものです。

記事内で使用する画像は、公式ドキュメント内の画像を引用して使用させていただいております。

Shopify アプリのご紹介

Shopify アプリである、「商品ページ発売予告アプリ | リテリア Coming Soon」は、商品ページを買えない状態のまま、発売日時の予告をすることができるアプリです。Shopify で Coming Soon 機能を実現することができます。

https://apps.shopify.com/shopify-application-314?locale=ja&from=daniel

Shopify アプリである、「らくらく日本語フォント設定|リテリア Font Picker」は、ノーコードで日本語フォントを使用できるアプリです。日本語フォントを導入することでブランドを演出することができます。

https://apps.shopify.com/font-picker-1?locale=ja&from=daniel

gift_card.liquid

gift_card.liquidテンプレートは、購入時にお客様に発行されたギフトカードを表示する、ギフトカードページをレンダリングします。

gift_card オブジェクト

Liquid gift_card オブジェクトにアクセスして、ギフトカードの詳細を表示することができます。

QR コード

QR コードを生成する JavaScript を追加することで、お店への QR コードリンクを含めることができます。以下のスニペットを、ページの<head>要素と<body>要素にそれぞれ追加します。

{
  {
    ;"vendor/qrcode.js" | shopify_asset_url | script_tag
  }
}
<div id="qr-code"></div>

<script>
  new QRCode(document.getElementById('qr-code'), {
    text: '{{ gift_card.qr_identifier }}',
    width: 120,
    height: 120
  });
</script>

Apple Wallet の合格発表

以下のスニペットをページの<body>要素に追加することで、Apple Wallet Passesを組み込むことができます。

{% if gift_card.pass_url %}
  <a href="{{ gift_card.pass_url }}" >
    <img id="apple-wallet-badge"
      src="{{ 'gift-card/add-to-apple-wallet.svg' | shopify_asset_url }}"
      width="120"
      height="40"
      alt="Add To Apple Wallet">
    </a>
{% endif %}

ギフトカードの詳細のみを表示

ヘッダーやフッターなどのテーマ要素を含めたくない場合は、gift_card.liquidテンプレートをレイアウトなしでレンダリングするか、Liquidレイアウトオブジェクトを使用してカスタムレイアウトをレンダリングするかを選択できます。

例:

gift_card.liquid
{% layout 'none' %}

<!-- template content -->

Shopify アプリのご紹介

Shopify アプリである、「商品ページ発売予告アプリ | リテリア Coming Soon」は、商品ページを買えない状態のまま、発売日時の予告をすることができるアプリです。Shopify で Coming Soon 機能を実現することができます。

https://apps.shopify.com/shopify-application-314?locale=ja&from=daniel

Shopify アプリである、「らくらく日本語フォント設定|リテリア Font Picker」は、ノーコードで日本語フォントを使用できるアプリです。日本語フォントを導入することでブランドを演出することができます。

https://apps.shopify.com/font-picker-1?locale=ja&from=daniel

Discussion

ログインするとコメントできます