ショップページを作ろう > タナページの作成 > 高度なタナページの作成方法

高度なタナページの作成方法

「カートURLと書式の説明」でご案内している「カートURL」と「パラメータ」を組み合わせることにより、買い物しやすいタナページが作成できます。

■タナページ作成 【上級編】

個数の入力欄を設置する方法
個数の指定は、「カートURLと書式の説明」でご案内しているパラメータ一覧の「CNT」を利用します。
赤字の箇所が個数の入力欄となります。

【注意】
タナページのhtmlファイルは、文字コードを「Shift_JIS」「EUC-JP」などで保存してください。
文字コードにUTF-8などを利用すると正常にショッピングカートを利用できない恐れがあります。
【HTMLソース】
<form action="https://shop.siteserve.jp/-/ドメイン名/cart.cgi" method="POST">
<input type="hidden" name="ITM" value="商品番号">
<input type="text" name="CNT" value="1">

<input type="submit" value="カートへ">
</form>
【完成イメージ】
選択肢(バリエーション)を設置する方法
選択肢(バリエーション)は、「カートURLと書式の説明」でご案内しているパラメータ一覧の「VAR」を利用します。 なお、選択肢(バリエーション)を利用する場合は、商品登録時にあらかじめバリエーションを設定しておく必要があります。
赤字の箇所が選択肢(バリエーション)となります。

【注意】
タナページのhtmlファイルは、文字コードを「Shift_JIS」「EUC-JP」などで保存してください。
文字コードにUTF-8などを利用すると正常にショッピングカートを利用できない恐れがあります。
【HTMLソース】
<form action="https://shop.siteserve.jp/-/ドメイン名/cart.cgi" method="POST">
<input type="hidden" name="ITM" value="商品番号">
サイズ :
<select name="VAR1">
<option value="S">S</option>
<option value="M">M</option>
<option value="L">L</option>
</select>
<br>
産地 :
<select name="VAR2">
<option value="熊本">熊本</option>
<option value="広島">広島</option>
<option value="バレンシア">バレンシア</option>
</select>
<br>
季節 :
<select name="VAR3">
<option value="春">春</option>
<option value="夏">夏</option>
<option value="冬">冬</option>
</select>
<br>
<input type="submit" value="カートへ">
</form>
【完成イメージ】
フリーテキストの入力欄の設置方法
選択肢のように固定の情報ではなく、任意の情報を取得したい場合は、「カートURLと書式の説明」でご案内しているパラメータ一覧の「OPT1〜30」を利用します。
また、「OPT1〜30」は入力欄だけでなく、リストボックス、チェックボックス、ラジオボタンなど、様々な場面で利用できます。
赤字の箇所がフリーテキストの入力欄となります。

【注意】
タナページのhtmlファイルは、文字コードを「Shift_JIS」「EUC-JP」などで保存してください。
文字コードにUTF-8などを利用すると正常にショッピングカートを利用できない恐れがあります。
【HTMLソース】
<form action="https://shop.siteserve.jp/-/ドメイン名/cart.cgi" method="POST">
<input type="hidden" name="ITM" value="商品番号">
お名前
<input type="text" name="OPT1" value="">
<br>
<input type="submit" value="カートへ">
</form>
【完成イメージ】
これまでの各項目を組み合わせた設置例
選択肢(バリエーション)、フリーテキスト、個数指定を組み合わせた場合の設置例です。
これらを参考に、お店のデザインや取扱商品にあったタナページを作成してください。

【注意】
タナページのhtmlファイルは、文字コードを「Shift_JIS」「EUC-JP」などで保存してください。
文字コードにUTF-8などを利用すると正常にショッピングカートを利用できない恐れがあります。
【HTMLソース】
<form action="https://shop.siteserve.jp/-/ドメイン名/cart.cgi" method="POST">
<input type="hidden" name="ITM" value="商品番号">
サイズ :
<select name="VAR1">
<option value="S">S</option>
<option value="M">M</option>
<option value="L">L</option>
</select>
<br>
お名前 :
<input type="text" name="OPT1" value="">
<br>
個数 :
<input type="text" name="CNT" value="1">
箱<br>
<br>
<input type="submit" value="カートへ">
</form>
【完成イメージ】