Dawn 商品ページ

[takkaer]

初投稿の為、不備がありましたらご容赦ください。

テーマはDawnを使用しております。

商品ページの金額欄に、税込価格と税抜価格を表示させたいです。

ex）10,000 (11,000税込)

お手数なのですが、ご教示いただけますと幸いです。
何卒よろしくお願いいたします。

[st_mh · Accepted solution]

念のため調べましたが、商品詳細ページでは税金に関するプロパティもフィルタも存在しないようでした。

●商品のオブジェクト

https://shopify.dev/docs/api/liquid/objects#product

●価格のフィルター

https://shopify.dev/docs/api/liquid/filters/money-filters

となると、単に数値の計算をする他方法が無いでしょう。

商品管理にて、税込価格か税抜き価格、どちらかで設定されていると思います。
税込み価格を登録しているなら

税抜き：{{ product.price | divided_by: 1.1 }} ※小数点以下の処理が別途必要かもしれません
税込み：{{ product.price }}

 税抜き価格を登録しているなら

税抜き：{{ product.price }}
税込み：{{ product.price | times: 1.1 }}

 上記のように、税率10％を加えたり、引くしかないのでしょう。

今後税率が変わった時、再度計算しないといけないですが。

ちなみに、少数点以下のフィルターは以下を参考にしてください。

https://shopify.dev/docs/api/liquid/filters/math-filters

価格にしても、通貨あり、小数点以下表示させないなどのフィルターもあります。
https://shopify.dev/docs/api/liquid/filters/money-filters

[takkaer]

st_mh様

ご回答頂きありがとうございます。

一度試してみます。

また、2週間ほど前に始めたばかりでして、今はテンプレートに当てはめていくだけの作業を主にしています。

そのためコードを入れる場所が分かりません。

youtubeなどで調べていますが分からないです。

もしよろしければコードを貼り付ける場所を、教えて頂いてもよろしいでしょうか？

[st_mh]

デフォルト設定のままであれば、「スニペット > price.liquid」です。

（コード編集の際、左上の検索窓から「price」を入力すると出てきます。）

このスニペットファイルは、商品詳細ページ内などから呼び出します。

その際、商品情報オブジェクトを引数に渡し、その商品情報をもとに価格などを出力させます。

●金額等の設定エリアは以下です。

• 13行目
  • liquidコード宣言
• 14～18行目
  • 商品オブジェクト用変数「target」を定義
  • 引数use_variantが有効なら、一番目の有効な商品を
  • 引数use_variantが無効なら、引数の商品を
• 21行目
  • 変数「price」に、「target」の価格を定義（デフォルト1999などと設定している）
• 23行目、25行目、29行目
  • 最終的に出力させる価格の変数「money_price」を定義
  • 条件次第で、「price」に対しMoney filterを分岐
    • （23行目）「テーマのカスタマイズ > テーマ設定 > 通貨コード」より、「通貨コードを表示する」のチェックが無い時
      • 「1100 → 1,100」
    • （25行目）上記のチェックがある時
      • 「1100 → ￥1,100」
  • オマケで29行目
    • 全商品バリエーションで価格幅がある時は、設定済みの価格に文言を追加
      • 「￥1,100→ ￥1,100から」

■ Money filter

https://shopify.dev/docs/api/liquid/filters/money-filters

ーー

最終的な出力先は、52行目と70行目です。

（70行目のほうは、セール時に表示されるエリアです）

価格を二つ並べるなら、こちらに追記すると良いでしょう。

ただし、このスニペットファイルの設定は、商品ページ以外にもコレクションページ、サーチページにも設定が反映されるはずです。

そこで、商品ページ限定で出力させることも可能です。

{% if template == 'product' %}商品ページの時のみ出力{% endif %}

例えば、商品ページの時のみ、税抜き価格を併記するならこのようにします。

（13行目の変数定義エリアの最後に追記）
{%- liquid
  ．．．

  # 独自追記 税抜き価格を定義
  assign price_without_tax = price | devided_by: 1.1
  assign money_price_without_tax = price_without_tax | money
  if settings.currency_code_enabled
    assign money_price_without_tax = price_without_tax | money_with_currency
  endif

  if target == product and product.price_varies
    assign money_price_without_tax = 'products.product.price.from_price_html' | t: price: money_price_without_tax
  endif
-%}

....

（52行目）
{{ money_price }}（{% if template == 'product' %}税抜き{{ money_price_without_tax }}{% endif %}）

 出力結果は以下のいずれかになります。
1,100（税抜き1,000）
￥1,100（税抜き￥1,000）
￥1,100から（税抜き￥1,000から）

税込み価格にする場合は、数値計算を「 | devided_by: 1.1」から、「 | times: 1.1」に変更すれば可能です。