商品グループでバリエーションのある商品を取り扱う

色やサイズによって価格が異なったり、在庫数の管理を行いたいという商品を取り扱う事があります。

その時は商品グループという機能を利用し、

色やサイズといった規格は子商品として扱うことで実現出来ます。

商品グループの説明の前に規格の管理は商品規格プラグインを利用すると自動で商品グループと子商品の設定を行うため便利です。

SOY Shopで商品規格毎に在庫数と価格を設定する - saitodev.co

以後は商品規格プラグインを利用しないで設定する方法を記載します。

grop1

はじめに規格を持つ商品を登録します。

商品グループの項目は商品グループとして追加を選択しておきます。

group2

商品追加後に表示される商品詳細画面で子商品の追加をクリックして、

group3

小商品の登録画面を開きます。

追加の際、商品グループの項目でグループの子として追加がチェックされているか確認した上で追加ボタンを押します。

子商品の登録後に公開状態を必ず公開にしてください。

group4

追加した子商品の詳細画面で親商品の項目が追加され、親商品名が正しいことを確認します。

以上の手順で子商品をいくつか追加した後に親商品の詳細画面を開くと、

group5

子商品の項目が追加され、登録した子商品がリストとして表示されています。

続いて、商品グループでも表示出来る商品詳細ページ(公開側)の準備を行います。

商品詳細ページで商品情報とカートに入れるボタンを設置するで作成したテンプレートに対して、

表示した商品が商品グループであった場合の記述をします。

テンプレートを開き、で囲った箇所を下記のように修正します。

<!-- block:id="item" -->
<section class="item_cart clearfix">
	<h1 cms:id="item_name">苔オブジェ</h1>
	<div class="item_cart_text">
		<form cms:id="item_cart_form">
			<table cellspacing="0" cellpadding="0">
				<tr>
					<th scope="row">商品コード：</th>
					<td cms:id="item_code">123456</td>
				</tr>
				<tr>
					<th scope="row">販売価格：</th>
					<td class="price"><span cms:id="item_price">2,750</span>円</td>
				</tr>
				<tr>
					<th scope="row">ご購入個数：</th>
					<td><label for="textfield2"></label>
					<select name="select" id="select" cms:id="item_cart_select"></select>個</td>
				</tr>
			</table>
			<p class="cart" cms:id="is_stock"><input type="image" src="/shop/themes/common/images/btn_cartin_off.png" width="152" height="57" alt="カートに入れる"></p>
		</form>
	</div>
	<p class="item_cart_photo"><img src="/shop/themes/photos/detail1_cart.jpg" cms:id="item_large_image" width="400" height="300" alt="苔オブジェ"></p>
</section>

<!-- cms:id="type_group" -->

<!-- block:id="child_item_list" -->
<section class="item_cart clearfix">
	<h1 cms:id="item_name">ナノブロック（フレンチブルドッグ）</h1>
	<div class="item_cart_text">
		<form cms:id="item_cart_form">
			<table cellspacing="0" cellpadding="0">
				<tr>
					<th scope="row">商品コード：</th>
					<td cms:id="item_code">123456</td>
				</tr>
				<tr>
					<th scope="row">販売価格：</th>
					<td class="price"><span cms:id="item_price">2,100</span>円</td>
				</tr>
				<tr>
					<th scope="row">ご購入個数：</th>
					<td>
						<!-- cms:id="is_stock" -->
						<select name="select" id="select" cms:id="item_cart_select"></select>個
						<!-- /cms:id="is_stock" -->
						<!-- cms:id="no_stock" -->在庫切れ<!-- /cms:id="no_stock" -->
					</td>
				</tr>
			</table>
			<!-- cms:id="is_stock*" -->
			<p class="cart"><input type="image" src="/shop/themes/common/images/btn_cartin_off.png" width="152" height="57" alt="カートに入れる"></p>
			<!-- /cms:id="is_stock*" -->
		</form>
	</div>
	<p class="item_cart_photo"><img src="" cms:id="item_large_image" width="400" height="300" alt="ナノブロック（ダックスフンド）"></p>
</section>
<!-- /block:id="child_item_list" -->

<!-- /cms:id="type_group" -->
<!-- /block:id="item" -->