ショッピングカート英語版買い物かごタグ(商品タグ)の貼り付け方

 右管理メニュー「PC用カートの作成・編集等」の「商品タグ作成」『英語版商品タグ』で生成された商品タグHTML又はメールで送られた商品タグHTMLをhtmlファイルに貼り付けた場合は下記のようになります。
青字の部分が商品タグです。

Glass Stationery Set
Glass Stationery Set
Price 735yen Quantity

ここでは、表の左側のセルに画像を、右側のセルに商品タグを挿入しています。
商品タグ部分の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
Price 735yen Quantity」のフォントのサイズや色は、自由に設定できます。設定したい文字の前後を<font size="*" color="*******">と</font>でくくってください。


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

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

Quantity

 上記 『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 750g<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>
</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』です。

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

商品タグ部分のソースは下記のとおりです。青太字部分を参照してください。
<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>
個数の箇所は、プルダウンメニューにしています。

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

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

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

  1. <input type="text" name="商品名&&&価格" maxlength="3" size="3">または
    <select name="商品名&&&価格">
    <option>1
    <option>2
    <option>3
    <option>4
    <option>5
    </select>
    の商品名、価格、個数を送信するためのタグと、
  2. 属性を追加する場合は
    <select name="option_1">
    <option>S</option>
    <option>M</option>
    <option>L</option>
    </select>
    などの<select>タグ、
  3. 情報を送信するための <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="商品名&&&価格">の"商品名&&&価格"部分の価格は税抜き価格となります。
総額表示方式を選択した場合は、"商品名&&&価格"部分の価格も税込み価格にして下さい。


メールフォームもファイバートリップ

サービス管理メニュー


サービス案内