表形式でSKU在庫商品を表現する

商品詳細ページにおいて、SKU在庫の状況をを分かりやすく表現するためのサンプルスクリプトをご紹介します。

設置後イメージ

- 全SKUの在庫情報が表形式で表現されます。
- オプション項目ラベルは自動取得されます。（管理画面内の設定が反映されます）
- SKU在庫がないものは「×」と表示され、当該SKUを選択するためのラジオボタンが表示されなくなります。
- ラジオボタンを選択し、かごに投入するボタンをクリックすることでカートへSKU単位の商品をを投入することができます。

設置手順

以下に従って作業を進めてください。

change_goods_optval_radio.jsのアップロード

このjavascriptファイルは、SKU商品それぞれの在庫状況を○×形式で表現する役割を持っています。

また、SKU商品が選択された際に、価格をそれぞれの値に切り替える役割を持っています。

１）本ページ下部からjsファイルをダウンロードをします。

２）１）で取得したファイルを店舗管理メニュー＞画像管理＞その他ファイル管理よりアップロードをします。

３）店舗管理メニュー＞デザイン設定＞テンプレート編集＞共通ヘッダ＞<head>～</head>内に以下を追記してください。

（追記場所は特に指定がありません。）

※(店舗ID)には店舗のIDを記入お願いします。

商品詳細テンプレートの編集 -- 表形式表現への変更

引き続き商品詳細テンプレートの以下の青字部分を置き換えてください。

※SKUオプションを１つのみ設定している場合も、２つ設定している場合も同様です。

元のテンプレート

（※以下は初期のテンプレートを想定しています。変更があった部分につきましては読み替えをお願いします。）

<form action="<{$cart_acturl}>" method="post">

<{$goods.cart_hidden}>

<{section name=key loop=$goods.opt}>

<{$goods.opt[key].name}>

<{html_options values=$goods.optv[key].id output=$goods.optv[key].name}>

</select><br>

<{/section}>

<{if $goods.zaiko_flag && $goods.zaikosu <= 0}>

*申し訳ございません。この商品は売り切れました。

<{else}>

注文数:<input type="text" name="kosu" size="4" value="<{$goods.min_kosu}>"><{$goods.tani}>

<{/if}>

</form>

</td></tr></table>

新しいテンプレート

<form action="<{$cart_acturl}>" method="post">

<{$goods.cart_hidden}>

<{if $goods.sku_goods_opt1}>

<{if $goods.sku_goods_opt2}>

<tr>

<{section name=key loop=$goods.optv[1].id}>

<{/section}>

</tr>

<{/if}>

<{section name=key loop=$goods.optv[0].id}>

<tr>

<{if $goods.sku_goods_opt2}>

<{if $goods.sku_flag == "1"}>

<{section name=key2 loop=$goods.optv[1].id}>

<input name="goods_opt"

id="<{$goods.sku_goods_key}>_<{$goods.optv[0].id[$smarty.section.key.index]}>-<{$goods.optv[1].id[key2]}>"

type="radio" value="<{$goods.optv[0].id[$smarty.section.key.index]}>-<{$goods.optv[1].id[key2]}>"

onclick="change_goods_optval_radio(this,'<{$goods.sku_goods_key}>')"

<{if $smarty.section.key.first && $smarty.section.key2.first}>checked<{/if}>> <span id="<{$goods.sku_goods_key}>_<{$goods.optv[0].id[$smarty.section.key.index]}>-<{$goods.optv[1].id[key2]}>_view"></span>

</label></td>

<{/section}>

<{else}>

<{section name=key2 loop=$goods.optv[1].id}>

<input name="goods_opt"

type="radio" value="<{$goods.optv[0].id[$smarty.section.key.index]}>-<{$goods.optv[1].id[key2]}>"

<{if $smarty.section.key.first && $smarty.section.key2.first}>checked<{/if}>>

</label></td>

<{/section}>

<{/if}>

<{else}>

<{if $goods.sku_flag == "1"}>

<input name="goods_opt"

id="<{$goods.sku_goods_key}>_<{$goods.optv[0].id[$smarty.section.key.index]}>"

type="radio" value="<{$goods.optv[0].id[$smarty.section.key.index]}>"

onclick="change_goods_optval_radio(this,'<{$goods.sku_goods_key}>')"

<{if $smarty.section.key.first}>checked<{/if}>> <span id="<{$goods.sku_goods_key}>_<{$goods.optv[0].id[$smarty.section.key.index]}>_view"></span>

</label></td>

<{else}>

<input name="goods_opt"

type="radio"

value="<{$goods.optv[0].id[$smarty.section.key.index]}>" <{if $smarty.section.key.first}>checked<{/if}>>

</label></td>

<{/if}>

</tr>

<{/section}>

</table>

<{if $goods.sku_flag == "1"}>

×…売り切れ<br>

<{/if}>

<{if $goods.zaiko_flag && $goods.zaikosu <= 0}>

<{if $goods.sku_flag == "1"}>

注文数:<input type="text" name="kosu" size="4" value="<{$goods.min_kosu}>"><{$goods.tani}>

<input type="submit" value="カートに入れる" id="<{$goods.sku_goods_key}>_cart_button" disabled="true">

<{else}>

<span id="<{$goods.sku_goods_key}>_zaiko_message">*申し訳ございません。この商品は売り切れました。</span>

<{/if}>

<{else}>

注文数:<input type="text" name="kosu" size="4" value="<{$goods.min_kosu}>"><{$goods.tani}>

<input type="submit" value="カートに入れる" id="<{$goods.sku_goods_key}>_cart_button">

<{/if}>

</form>

</td></tr>

</table>

ここまでの手順で一度店舗側の商品詳細ページを開き、以下のように変更されていることを確認してください。

変更前

変更後

商品詳細テンプレートの編集 -- 商品価格表現の変更

２において変更されたSKUのラジオボタンを選択した際に対応する商品価格を変更したい場合は、以下のようにテンプレートを変更してください。

元のテンプレート

<tr><td class="cell_t">日本国内価格</td><td class="cell_d"><b><{$goods.price}> <{$tsuka_tani}></b></td></tr>

<tr><td class="cell_t">日本国外価格</td><td class="cell_d"><b><{$goods.price2}> <{$tsuka_tani}></b></td></tr>

</table>

新しいテンプレート

<tr><td class="cell_t">日本国内価格</td><td class="cell_d"><b><span id="<{$goods.sku_goods_key}>_price"><{$goods.price}></span> <{$tsuka_tani}></b></td></tr>

<tr><td class="cell_t">日本国外価格</td><td class="cell_d"><b><span id="<{$goods.sku_goods_key}>_price2"><{$goods.price2}></span> <{$tsuka_tani}></b></td></tr>

</table>

※青字部分のSpanタグが追加されています。span内のIDは変更しないようにしてください。

ここまでの手順でラジオボタンが変更された際に、価格がSKU毎の値に切り替わることを確認してください。（2013/12/18）

Page updated

Report abuse