FROM CACHE - jp_header

特定のコレクション(collection)のみ価格表示を「〇〇円」→「〇〇円~」と「~」を付け加えたい

解決済
n_ogawa3
観光客
12 0 4

現在、無料テーマ「Craft」を利用しています。

 

イベントのチケット販売をShopifyで作成していて、コレクションページ(商品一覧ページ)だと、価格は1種類の設定なので通常だと「〇〇円」と表示されるのですが、こちらを価格が1種類でも「〇〇円~」という表記にしたいです。

 

というのも、チケット1枚で価格を設定しているのですが、親子セットだったりすることもあるので、基本2枚以上での購入となるためです。

 

ただ通常の物販とかでは基本通りの表示にしたいので、一部のコレクション限定で価格の表示方法を変更したいです。

良い方法があれば教えていただきたいです。

 

 

<やりたいこと>

  • 「event」というコレクションについて商品の一覧ページ(https://******/collections/event)で、価格が1種類のみの設定でも、価格表示に「~」を付けたい(例:「〇〇円~」という表示にしたい)
  • 金額が0円の場合は「~」なしの「〇〇円」のままとしたい
  • 通常のコレクションの設定は変更したくないので、「event」コレクションのみ表示設定を変更したい

 

よろしくお願いいたします。

 

 

2 件の受理された解決策
福水正太
Shopify Expert
63 24 22

成功

初めまして。

株式会社ファイブビットの福水と申します。

 

やりたいことは下記の流れで実現できるかと思います。

 

------------------------------------------------------------------------

1. event 用のコレクションテンプレートを作成

2. 1で作成したテンプレート内で、価格の後ろに[〜]が表示されるコードを付与

------------------------------------------------------------------------

 

下記、詳細です。

 

1. event 用のコレクションテンプレートを作成

=流れを動画にまとめたので、下記をご覧ください。

https://gyazo.com/65da9ce63fc6fb98a274cbc01da8192c

この作業をこなすことで、2の作業内容がeventコレクション以外には反映されないようになります

 

2. 1で作成したテンプレート内で、価格の後ろに[〜]が表示されるコードを付与

=下記のコードを、管理画面の「オンラインストア」→「テーマ」→「カスタマイズ」→eventコレクションに移動し、左サイドバー内の「セクションを追加」→「カスタマイズされたLiquid」の中に、下記のコードを入力してください。

<style>
span.price-item.price-item--regular:not(.price-free)::after {
    content: "〜";
}
</style>
<script>
document.addEventListener('DOMContentLoaded', (event) => {
  const prices = document.querySelectorAll('.price-item');
  const newClassName = 'price-free';

  prices.forEach(function(price) {
    if (price.textContent.trim().includes('¥0')) {
      price.classList.add(newClassName);
    }
  });
});
</script>

上記の流れを動画にまとめているので、ご参照下さい。

https://gyazo.com/fe9464802a89c70673ab91dd07ad4acf

 

もし、こちらの手続きで意図した動作にならなかった場合は、

お手数ですが、具体的な内容や画面のスクショなどをいただけると嬉しいです。

国内5番目の個人Shopifyエキスパート|Shopifyストア構築100以上|Shopifyアプリ開発5個|Shopify専門メディア運営|自社ECをShopifyで立ち上げ~運用|法人2社経営|Shopify漬けの日々|主にShopify関連の役立つ情報を発信します

https://5-bit.jp/

元の投稿で解決策を見る

福水正太
Shopify Expert
63 24 22

成功

[0円]だと、例えば[1500円]の後ろ2文字の[0円]も拾ってしまうので、不具合が生じていたようです。

修正版のコードを作りましたので、こちらでお試しください。

<style>
span.price-item.price-item--regular:not(.price-free)::after {
    content: "〜";
}
</style>
<script>
document.addEventListener('DOMContentLoaded', (event) => {
  const prices = document.querySelectorAll('.price-item');
  const newClassName = 'price-free';

  prices.forEach(function(price) {
    if (price.textContent.trim().startsWith('0 円')) {
      price.classList.add(newClassName);
    }
  });
});
</script>

もし、この回答で解決できた場合は、この回答にもいいねとベストソリューションをいただけると嬉しいです!

 

よろしくお願い致します。

 

国内5番目の個人Shopifyエキスパート|Shopifyストア構築100以上|Shopifyアプリ開発5個|Shopify専門メディア運営|自社ECをShopifyで立ち上げ~運用|法人2社経営|Shopify漬けの日々|主にShopify関連の役立つ情報を発信します

https://5-bit.jp/

元の投稿で解決策を見る

6件の返信6
福水正太
Shopify Expert
63 24 22

成功

初めまして。

株式会社ファイブビットの福水と申します。

 

やりたいことは下記の流れで実現できるかと思います。

 

------------------------------------------------------------------------

1. event 用のコレクションテンプレートを作成

2. 1で作成したテンプレート内で、価格の後ろに[〜]が表示されるコードを付与

------------------------------------------------------------------------

 

下記、詳細です。

 

1. event 用のコレクションテンプレートを作成

=流れを動画にまとめたので、下記をご覧ください。

https://gyazo.com/65da9ce63fc6fb98a274cbc01da8192c

この作業をこなすことで、2の作業内容がeventコレクション以外には反映されないようになります

 

2. 1で作成したテンプレート内で、価格の後ろに[〜]が表示されるコードを付与

=下記のコードを、管理画面の「オンラインストア」→「テーマ」→「カスタマイズ」→eventコレクションに移動し、左サイドバー内の「セクションを追加」→「カスタマイズされたLiquid」の中に、下記のコードを入力してください。

<style>
span.price-item.price-item--regular:not(.price-free)::after {
    content: "〜";
}
</style>
<script>
document.addEventListener('DOMContentLoaded', (event) => {
  const prices = document.querySelectorAll('.price-item');
  const newClassName = 'price-free';

  prices.forEach(function(price) {
    if (price.textContent.trim().includes('¥0')) {
      price.classList.add(newClassName);
    }
  });
});
</script>

上記の流れを動画にまとめているので、ご参照下さい。

https://gyazo.com/fe9464802a89c70673ab91dd07ad4acf

 

もし、こちらの手続きで意図した動作にならなかった場合は、

お手数ですが、具体的な内容や画面のスクショなどをいただけると嬉しいです。

国内5番目の個人Shopifyエキスパート|Shopifyストア構築100以上|Shopifyアプリ開発5個|Shopify専門メディア運営|自社ECをShopifyで立ち上げ~運用|法人2社経営|Shopify漬けの日々|主にShopify関連の役立つ情報を発信します

https://5-bit.jp/
n_ogawa3
観光客
12 0 4

「解決した!」と言ったそばからすみません。

コレクションページでは金額を「円」表記にしておりまして、その関係で、0円にも「~」が付いてしまいました。

質問1.png

 

 

素人感覚で、ご教示いただいたコードの

「 if (price.textContent.trim().includes('¥0'))」を「 if (price.textContent.trim().includes('0 円'))」にしてみたのですが、今度は全ての「~」が消えてしまいました……。

 

金額表記は、Shopify管理画面>設定>ストアの詳細>ストア通貨で添付の通り設定しております。

n_ogawa3_0-1699277487060.png

 

この場合、コードはどのようにすればいいでしょうか?

それとも全て「¥」表記に設定した方がいいのでしょうか?

 

度々申し訳ございませんが、また教えていただけると助かります。

よろしくお願いいたします。

福水正太
Shopify Expert
63 24 22

成功

[0円]だと、例えば[1500円]の後ろ2文字の[0円]も拾ってしまうので、不具合が生じていたようです。

修正版のコードを作りましたので、こちらでお試しください。

<style>
span.price-item.price-item--regular:not(.price-free)::after {
    content: "〜";
}
</style>
<script>
document.addEventListener('DOMContentLoaded', (event) => {
  const prices = document.querySelectorAll('.price-item');
  const newClassName = 'price-free';

  prices.forEach(function(price) {
    if (price.textContent.trim().startsWith('0 円')) {
      price.classList.add(newClassName);
    }
  });
});
</script>

もし、この回答で解決できた場合は、この回答にもいいねとベストソリューションをいただけると嬉しいです!

 

よろしくお願い致します。

 

国内5番目の個人Shopifyエキスパート|Shopifyストア構築100以上|Shopifyアプリ開発5個|Shopify専門メディア運営|自社ECをShopifyで立ち上げ~運用|法人2社経営|Shopify漬けの日々|主にShopify関連の役立つ情報を発信します

https://5-bit.jp/
n_ogawa3
観光客
12 0 4

こんなに早く教えていただきありがとうございます!

さっそく試してみたところ、希望通りできました!!!

 

本当に助かりました!

ありがとうございます!!!

n_ogawa3
観光客
12 0 4

先日は色々と丁寧に教えていただきありがとうございました。

何度も質問してしまい申し訳ございません…。

 

現在、希望通りの表示ができているのですが、商品で複数価格(1,320円と1,980円)を設定した場合以下の添付のような「〇〇円から~」表示になってしまいました。

tempsnip20231117.png

チェックアウト言語のFrom設定は「から」のまま残しつつ、「event」コレクションページでは「から」は非表示としたいのですが、そのような設定を追加することは可能でしょうか。

 

▼設定>チェックアウト>チェックアウト言語の設定状況

(こちらの設定はそのまま残したい)

n_ogawa3_0-1700188190857.png

 

何度も申し訳ないのですが、また教えていただけますでしょうか。

 

よろしくお願いいたします。

 

n_ogawa3
観光客
12 0 4

お返事遅くなりすみません。

 

動画まで付けていただいて、とても分かりやすく、しかも簡単な方法で教えていただきありがとうございます!

(コード編集から色々操作するようなものを想像していたので、素人の私にはとても助かりました!)

 

教えていただいた通りに設定したら綺麗にできました!

本当にありがとうございました。

 

また不明点が出てきたら教えてもらえたら嬉しいです。

お忙しい中ありがとうございました!