オプション価格を表示する

カラーミーショップのオプション表示形式は、プルダウン形式と表形式(横並び・ 縦並び)があります。
表形式は一覧性も高く選択しやすいです。プルダウン形式はオプション項目数が多くてもコンパクトに収まります。
表形式は表示上の不足はありませんが、プルダウン形式の場合は販売価格がページに表示されていないことが多いです(商品説明文内に記載しておく必要があります)。

ご依頼があって、オプション選択時に独自タグとJavaScriptで販売価格を反映するカスタマイズを行いました。

仕様について

ページ表示直後は「販売価格 ○○円~○○円」表示。
価格幅表示は独自タグがありますので、比較的簡単に各ページで表示可能です。


オプション項目を変更した際に、独自タグからオプション価格を取得して、JavaScriptで販売価格の表示を書き換えます。
下例では、カラーを赤→青に変更しました。

オプション価格と同様に在庫数も反映できます(ただし在庫数はページ表示直後に取得しますので、タイミングによっては売切れている場合もあります)。

注意点

オプション表示形式によって<{$option_view_date}>(=オプション価格を取得する独自タグ)の中身が異なる場合がありますので、どのオプション表示形式を使うのかで、実装するコードも変わってきます。

執筆者

えいじ@naeco.jp この記事を書いた人

メーカー系情報システム部門出身で、第一種情報処理技術者
個人事業主/カラーミー歴11年目/カラーミーショップ公認パートナー。
カスタマイズやモールへの出店作業 (CSV) をお手伝いしています。

ご相談・お問い合わせはこちら

よく読まれているプロダクト