英語版買い物かごタグ（商品タグ）の貼り付け方■ 右管理メニュー「PC用カートの作成・編集等」の「商品タグ作成」の『英語版商品タグ』で生成された商品タグHTML又はメールで送られた商品タグHTMLをhtmlファイルに貼り付けた場合は下記のようになります。
青字の部分が商品タグです。
青字の部分が商品タグです。
 |
|
ここでは、表の左側のセルに画像を、右側のセルに商品タグを挿入しています。
商品タグ部分のHTMLは、下記のようになっています。
商品タグ部分のHTMLは、下記のようになっています。
<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>
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>
「Glass Stationery Set
Price 735yen Quantity」のフォントのサイズや色は、自由に設定できます。設定したい文字の前後を<font size="*" color="*******">と</font>でくくってください。
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) |
＊ 上記 『Paperweight of Dolphin』 のソースは下記のとおりです。
青字部分が商品タグです。 赤字の部分を参照してください。
青字部分が商品タグです。 赤字の部分を参照してください。
<table cellpadding="2" cellspacing="0" width="100%">
<tr>
<td colspan="2">
<hr size="1" noshade>
</td></tr>
<tr>
<td>
<font size="2" color="#4169e1">『Paperweight of Dolphin』</font><br>
<img src="./bin/sample/dolphin.gif" width="100" height="75" alt="Paperweight of Dolphin"></a></td>
<td>
<font size="2" color="#696969">Size：Length 10cm・Height 5cm・Weight 750ｇ<br>
made with Glass<br>
Price：735yen(including sales tax)</font><br>
</tr>
<tr>
<td colspan="2">
<hr size="1" noshade>
</td>
</tr>
</table>
<tr>
<td colspan="2">
<hr size="1" noshade>
</td></tr>
<tr>
<td>
<font size="2" color="#4169e1">『Paperweight of Dolphin』</font><br>
<img src="./bin/sample/dolphin.gif" width="100" height="75" alt="Paperweight of Dolphin"></a></td>
<td>
<font size="2" color="#696969">Size：Length 10cm・Height 5cm・Weight 750ｇ<br>
made with Glass<br>
Price：735yen(including sales tax)</font><br>
<form method="POST" action="https://fibertrip.com/cgi-bin/ryo/ryo.cgi" target="blank">
<font size="2" color="#696969">Quantity</font><input type="text" name="Paperweight of Dolphin&&&735" maxlength="3" size="3">
<input type="submit" name="submit" value="Add to Cart">
</form>
</td><font size="2" color="#696969">Quantity</font><input type="text" name="Paperweight of Dolphin&&&735" maxlength="3" size="3">
<input type="submit" name="submit" value="Add to Cart">
</form>
</tr>
<tr>
<td colspan="2">
<hr size="1" noshade>
</td>
</tr>
</table>
＊ ボタンの名称を変えるには、上記商品タグ中
<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』です。
<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』です。
『Paperweight of Asteroid』 |
Size：width 5cm・Height 5cm・Weight 500ｇ made with Glass Price：525yen(including sales tax) |
商品タグ部分のソースは下記のとおりです。青太字部分を参照してください。
<form method="POST" action="https://fibertrip.com/cgi-bin/ryo/ryo.cgi" target="blank">
Quantity<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>
Quantity<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>
個数の箇所は、プルダウンメニューにしています。
■ 寸法や色など複数の属性がある商品を販売する場合は、標準で３つまで、属性を追加することができます。
<select>タグを使って属性を設定します。<selest name=option_1>を指定し、<option>タグを使って選択肢を設定します。
属性を２つ以上設定する場合は、順番に、<selest name=option_1>、<selest name=option_2>、<selest name=option_3>と設定してください。
下記の例では、サイズと色、タイプを設定しています。
<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） |
青字が商品タグです。青太字部分を参照してください。
<table cellpadding="2" cellspacing="0" width="100%">
<tr>
<td 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" alt="Color Clip a set of 5"></a></td>
<td 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>
</tr>
<tr>
<td colspan="2">
<hr size="1" noshade>
</td>
</tr>
</table>
<tr>
<td 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" alt="Color Clip a set of 5"></a></td>
<td 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>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>
</tr>
<tr>
<td 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を記載しています。
デフォルトで表示される選択肢のテキストは、<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="商品名&&&価格">の"商品名&&&価格"部分の価格は税抜き価格となります。
総額表示方式を選択した場合は、"商品名&&&価格"部分の価格も税込み価格にして下さい。
