英語版買い物かごタグ(商品コード)のサイトへの貼り付け例

英語版買い物かごタグ（商品コード）の貼り付け方

基本
編集
ボタンの名称を変える
寸法や色などのオプションを追加
ポイント
別立て表示方式を選択する場合

■　右メニュー項目「ショッピングカートの作成・編集等」の「商品コード作成」の『英語版商品コード』で生成された商品コード又はメールで送られた商品コードをhtmlファイルに貼り付けた場合は下記のようになります。
青字の部分が商品コードです。


	Glass Stationery Set Price 735yen Quantity

ここでは、表の左側のセルに画像を、右側のセルに商品コードを挿入しています。
ソースは、下記のようになっています。

<table cellpadding="2" cellspacing="0" width="100%">
<tr>
<td colspan="2"><hr></td></tr>
<tr>
<td>
<img src="./bin/sample/stationery_set.gif" width="100" height="75" border="0" alt="Glass Stationery Set"></a></td>
<td align="left" valign="top">
<form method="POST" action="https://fibertrip.com/cgi-bin/globaldemo/globaldemo.cgi" target="blank">
Glass Stationery Set
<br>Price 735yen Quantity<input type=text name="Glass Stationery Set&&&735" maxlength=3 size=3> <input type="submit" name="submit" value="Add to Cart">
</form>
</td>
</tr>
<tr>
<td colspan="2"><hr></td></tr>
</table>

「Glass Stationery Set
Price 735yen Quantity」のフォントのサイズや色は、自由に設定できます。設定したい文字の前後を<font size="*" color="*******">と</font>でくくってください。

■　下記の例では、商品名の場所を変え、また、フォントのサイズを２に、色を商品名はロイヤルブルー、説明文は濃いグレーにしています。消費税は税込み表示にしています。ソース解説の赤字の部分を参照してください。


『Paperweight of Dolphin』	Size：Length 10cm・Height 5cm・Weight 750ｇ made with Glass Price：735yen(including sales tax) Quantity

『Paperweight of Asteroid』	Size：width 5cm・Height 5cm・Weight 500ｇ made with Glass Price：525yen(including sales tax) Quantity

＊　上記　『Paperweight of Dolphin』　のソースは下記のとおりです。

＊　ボタンの名称を変えるには、上記コード中
<input type="submit" name="submit" value="Add to Cart">の部分を
<input type="hidden" name="submit" value="Add to Cart">
<input type="submit" value="xxxxx"> に変え、"xxxxx"にボタンの名称を入れます。
「ADD TO BAG」に変えたのが、『Paperweight of Asteroid』です。
ソースは下記のとおりです。青太字部分を参照してください。

<table cellpadding="2" cellspacing="0" width="100%">
<tr>
<td valign="middle" width="100%" colspan="2">
<hr size="1" noshade>
</td></tr>
<tr>
<td>
<font size="2" color="#4169e1">『Paperweight of Asteroid』</font><br>
<img src="./bin/sample/hitode.gif" width="100" height="75" border="0" alt="Paperweight of Asteroid"></a></td>
<td align="left" valign="top">
<font size="2" color="#696969">Size：width 5cm・Height 5cm・Weight 500ｇ<br>
made with Glass<br>
Price：525yen(including sales tax) <br>
<form method="POST" action="https://fibertrip.com/cgi-bin/ryo/ryo.cgi" target="blank">
Quantity</font><select name="Paperweight of Asteroid&&&525">
<option selected>0
<option>1
<option>2
<option>3
<option>4
<option>5
<option>6
<option>7
<option>8
<option>9
</select>
<input type="hidden" name="submit" value="Add to Cart">
<input type="submit" value="ADD TO BAG">
</form>
</td>
</tr>
<tr>
<td valign="middle" width="100%" colspan="2">
<hr size="1" noshade>
</td>
</tr>
</table>

個数の箇所は、プルダウンメニューにしています。

■　寸法や色など複数の属性がある商品を販売する場合は、標準で３つまで、属性を追加することができます。
<select>タグを使って属性を設定します。<selest name=option_1>を指定し、<option>タグを使って選択肢を設定します。
属性を２つ以上設定する場合は、順番に、<selest name=option_1>、<selest name=option_2>、<selest name=option_3>と設定してください。
下記の例では、サイズと色、タイプを設定しています。青太字部分を参照してください。


『Color Clip a set of 5』	size: S(length 2cm・width 1cm) : M(length 4cm・width 2cm) : L(length 7cm・width 3cm) Color: Pink/Yellow/Green/Blue/Purple/Mixed Price: 525yen（including sales tax） Size Color Quantityset

＊　上記　『Color Clip a set of 5』　のソースは下記のとおりです。

<table cellpadding="2" cellspacing="0" width="100%">
<tr>
<td valign="middle" width="100%" colspan="2">
<hr size="1" noshade>
</td></tr>
<tr>
<td>
<font size="2" color="#4169e1">『Color Clip a set of 5』</font><br>
<img src="./bin/sample/dolphin.gif" width="100" height="75" border="0" alt="Color Clip a set of 5"></a></td>
<td align="left" valign="top">
<font size="2" color="#696969"><font face="ＭＳゴシック">size: S(length 2cm・width 1cm)<br>
    : M(length 4cm・width 2cm)<br>
    : L(length 7cm・width 3cm)</font><br>
Color: Pink/Yellow/Green/Blue/Purple/Mixed<br>
Price: 525yen（including sales tax）<br>
<form method="POST" action="https://fibertrip.com/cgi-bin/globaldemo/globaldemo.cgi" target="blank">
Size<select name="option_1">
<option>S</option>
<option>M</option>
<option selected>L</option>
</select>
Color<select name="option_2">
<option>Pink
<option>Yellow
<option>Green
<option>Blue
<option>Purple
<option>Mixed
</select>
<select name="option_3">
<option selected>Clear
<option>Opaque
</select><br>
<div align="right">Quantity<input type="text" name="Color Clip a set of 5&&&525" maxlength=3 size=3>set</font> <input type="hidden" name="submit" value="Add to Cart">
<input type="submit" value="ADD TO BAG"></div>
</form>
</td>
</tr>
<tr>
<td valign="middle" width="100%" colspan="2">
<hr size="1" noshade>
</td>
</tr>
</table>

<option>タグは、上記ソースのサイズの例のように、<option>と</option>で１つづつ選択肢をはさみます。色の例のように、</option>は省略もできます。
デフォルトで表示される選択肢のテキストは、<option selected>で指定します。指定しない場合は一番上のテキストが表示されます。
上記『Color Clip a set of 5』のケースでは、Sizeから「ADD TO BAG」ボタンまでが２段になってしまうので、Quantityの前で改行<br>を入れています。また、販売の単位がたとえば5個組で１セットとか100ｇいくらとかいったケースでは、お客様の混乱を避けるために、個数入力のテキストボックスや個数選択のプルダウンメニューの後に単位を記載すると、わかりやすいでしょう。
上記の例では、<input type="text" name="Color Clip a set of 5&&&525" maxlength=3 size=3>の後ろにsetを記載しています。

■　ポイントは、<form *** >から</form>までの間に

<input type="text" name="商品名&&&価格" maxlength=3 size=3>または
<select name="商品名&&&価格">
<option>1
<option>2
<option>3
<option>4
<option>5
</select>
の商品名、価格、個数を送信するためのタグと、
属性を追加する場合は
<select name="option_1">
<option>Ｓ</option>
<option>Ｍ</option>
<option>Ｌ</option>
</select>
などの<select>タグ、
情報を送信するための <input type="submit" name="submit" value="Add to Cart">または
<input type="hidden" name="submit" value="Add to Cart">
<input type="submit" value="xxxxx">
の"submit"ボタンを入れることです。

■　注意
事業者間お取引により別立て表示方式を選択される場合は、
<input type="text" name="商品名&&&価格" maxlength=3 size=3>または<select name="商品名&&&価格">の"商品名&&&価格"部分の価格は税抜き価格となります。
総額表示方式を選択した場合は、"商品名&&&価格"部分の価格も税込み価格にして下さい。