こんにちは！もっくんです。
今回は、カラーミーショップのオプション周辺に関するカスタマイズについてです。
販売する商品の中には、オプションごとに価格が異なる場合があります。
しかし、各ページの商品価格は、商品登録の際に設定した販売価格が表示され、オプション価格は反映されていません。（※カラーミーキット（2カラム）テンプレートの場合）
これだと、
オプションを選んでも販売価格が変わらない。これってオプション価格を含んでるのかな？
カート内を確認したら、オプション価格が反映されてたよ。
販売価格の値段だと思って、気づかずに購入するところだった。。。
となる可能性があり、お客様にとって分かりにくいと感じました。
考えられる解決方法としては、以下の2つかと思います。
- JavaScriptで、ユーザーが選択したオプションに合わせて販売価格の表示を書き換える。
- 販売価格を「〇〇円〜〇〇円」と価格幅で表示することで、オプション次第で価格が異なることを伝える。
今回は、2つ目の商品価格を「〇〇円〜〇〇円（オプションの最小価格〜オプションの最大価格）」と価格幅で表示する方法で対処したので、その方法をご紹介します。独自タグのみの使用なので、カラーミーキット（2カラム）以外のテンプレートでも使えると思います。独自タグについて分からなくても変更できるように解説したので、ぜひご参考にしてください。
販売価格を「〇〇円〜〇〇円」と価格幅表示するには
流れとしては、以下の基本形をもとに、各ページHTML内の商品価格が表示される箇所を、そのページに合わせて書き換えるだけです。
基本形
独自タグとif文を用いて、価格幅表示にするコードです。
<{if $option_price.max != $option_price.min}>
<{$option_price.min}> 〜 <{$option_price.max}>
<{else}>
<{$product.sales}>
<{/if}>簡単に説明すると、
（1行目）もしオプション価格の最大値と最小値が異なる場合、
（2行目）「オプションの最小価格〜オプションの最大価格」と表示（「〜」は「〜」がベター）
（3行目）それ以外の場合
（4行目）販売価格を表示
といった感じです。異なるオプション価格が設定されている場合のみ価格幅表示します。
この基本形を、商品価格が表示される箇所（商品詳細ページ、商品一覧ページ、新着商品、おすすめの商品、最近チェックした商品、商品検索結果ページなど）にコピペしつつ、各ページに合わせた記述に変更して、書き換えます。
商品詳細ページを価格幅表示に書き換える（カラーミーキット（2カラム）の場合）
商品詳細ページの初期状態
「カラーミーキット（2カラム）」テンプレートの商品詳細ページにおける販売価格表示箇所はこのようになっていました。
価格を表示するためのタグは、「<{$product.sales}>」となっているので、基本形と同じでよさそうです。
商品詳細ページだけでなく、一覧ページなどの価格表示も価格幅に変更する必要がありますが、ページやエリアによって商品価格の表示に使用されているタグが異なります。そのため、この部分をそれぞれに合わせた記述にしていく必要があります。
では、赤枠部分を先ほどの基本形をコピペして、商品詳細ページの販売価格表示を書き換えます。
変更後の商品詳細ページ
赤枠部分を基本形のコードに置き換えました。
異なるオプション価格を設定した商品の商品詳細ページを見てみると、ちゃんと価格幅で表示されています。（※税表示などはショップごとの設定によります。）
オプションで異なる価格を設定していない商品は、通常通り、販売価格が単体で表示されます。
その他の価格表示も価格幅に書き換える
商品詳細ページは、先ほどの基本形に置き換えるだけでよかったのですが、その他のページでは、価格表示に使用されているタグに合わせて書き換える必要があります。
ここでは、カラーミーキット（2カラム）を中心に、その他のページの書き換え方法を説明します。
その他のテンプレートを使用されている場合は、HTML内で使用されている商品価格の表示に使用されているタグを確認した上で、それに合わせて書き換えてみてください。
例）商品一覧ページの変更
商品一覧ページを例に説明します。
商品詳細ページとは異なり、商品一覧ページの商品価格が表示されている箇所（商品リスト部分）には、価格表示に「<{$productlist[num].price}>」というタグが使用されていました。
そのため、同じ場所から価格情報を引っ張ってくるために、基本形を少し書き換える必要があります。
初期状態で使用されているタグをもとに、基本形を以下のように変更しました。
- オプションが設定されてない場合の表示（else以下）は、初期状態で使用されている「<{$productlist[num].price}>」タグにする。
- 基本形の「option_price〜」の前に、それぞれ「productlist[num].」を追加する。
その他の価格表示を価格幅に書き換えるには
上記の変更手順を一般化すると、
- else以下は、初期状態のタグを使用。
- 基本形の「option_price〜」の前に、初期状態のタグに則ってピリオド以前をそれぞれ追加。
といった感じです。
この要領で、その他の該当部分や他のテンプレートについても変更してみてください。
カラーミーキット（2カラム）の価格表示変更箇所
ちなみに、カラーキット（2カラム）では、以下の箇所を変更しました。
| 表示箇所（ページ） | 初期タグ | オプション価格のタグ |
|---|---|---|
| 最近チェックした商品（共通） | <{$history[num].price}> | $history[num].option_price |
| おすすめ商品（トップ） | <{$recommend[num].price}> | $recommend[num].option_price |
| 新着商品（トップ） | <{$new_item[num].price}> | $new_item[num].option_price |
| 売れ筋商品（トップ） | <{$seller[num].price}> | $seller[num].option_price |
| 商品リスト（商品一覧） | <{$productlist[num].price}> | $productlist[num].option_price |
| 販売価格（商品詳細） | <{$product.sales}> | $option_price |
| 商品リスト（商品検索結果） | <{$productlist[num].price}> | $productlist[num].option_price |
まとめ
いかがでしたか？
このように商品価格の表示を価格幅表示にして、オプション価格を反映することで、ユーザーは、価格がオプションによって異なることをあらかじめ予期できるようになります。
また、オプション価格は、表示がドロップダウン形式だと価格が表示されず、カートに入れて初めて分かるといった場合もあるようですので、丁寧に設定したいところです。
カラーミーショップのオプション周辺に関するカスタマイズ情報は、調べていても情報が少なかったので、今回記事にさせていただきました。
参考になれば嬉しいです。
