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


クリスタル文具セット
クリスタル文具セット
価格 756円 個数

ここでは、表の左側のセルに画像を、右側のセルに商品タグを挿入しています。
商品タグ部分のHTMLは、下記のようになっています。
<form method="POST" action="https://fibertrip.com/cgi-bin/ryo/ryo.cgi" target="blank">
クリスタル文具セット
<br>価格 756円 個数<input type="text" name="クリスタル文具セット&&&756" maxlength="3" size="3"> <input type="submit" name="submit" value="購入">
</form>
「クリスタル文具セット
価格 756円 個数」のフォントのサイズや色は、自由に設定できます。設定したい文字の前後を<font size="*" color="*******">と</font>でくくってください。


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

『いるかのペーパーウエイト』
いるかのペーパーウエイト
大きさ:全長10cm・高さ5cm 重さ:750g
ガラス製
価格:756円(税込)

個数

 上記 『いるかのペーパーウエイト』 のソースは下記のとおりです。
青字部分が商品タグです。 赤字の部分を参照してください。
<table cellpadding="2" cellspacing="0" width="100%">
<tr>
<td colspan="2">
<hr size="1" noshade>
</td></tr>
<tr>
<td>
<font size="2" color="#4169e1">『いるかのペーパーウエイト』</font><br>
<img src="./bin/sample/dolphin.gif" width="100" height="75" alt="いるかのペーパーウエイト"></td>
<td>
<font size="2" color="#696969">大きさ:全長10cm・高さ5cm 重さ:750g<br>
ガラス製<br>
価格:756円(税込)</font><br>
<form method="POST" action="https://fibertrip.com/cgi-bin/ryo/ryo.cgi" target="blank">
<font size="2" color="#696969">個数</font><input type="text" name="いるかのペーパーウエイト&&&756" maxlength="3" size="3">
<input type="submit" name="submit" value="購入">
</form>
</td>
</tr>
<tr>
<td colspan="2">
<hr size="1" noshade>
</td>
</tr>
</table>

 ボタンの名称を変えるには、上記商品タグ中
<input type="submit" name="submit" value="購入">の部分を
<input type="hidden" name="submit" value="購入">
<input type="submit" value="xxxxx"> に変え、"xxxxx"にボタンの名称を入れます。
「カゴに入れる」に変えたのが、『ひとでのペーパーウエイト』です。

『ひとでのペーパーウエイト』
ひとでのペーパーウエイト
大きさ:幅5cm・高さ5cm 重さ:500g
ガラス製
価格:540円(税込)
個数

商品タグ部分のソースは下記のとおりです。青太字部分を参照してください。
<form method="POST" action="https://fibertrip.com/cgi-bin/ryo/ryo.cgi" target="blank">
個数<select name="ひとでのペーパーウエイト&&&540">
<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="購入">
<input type="submit" value="カゴに入れる">

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

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

『カラークリップ5個組』
カラークリップ5個組
サイズ:S(長さ2cm・幅1cm)
   :M(長さ4cm・幅2cm)
   :L(長さ7cm・幅3cm)
色:ピンク/黄色/緑/青/紫/ミックス

価格:540円(内消費税40円)
サイズ
個数

 上記 『カラークリップ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">『カラークリップ5個組』</font><br>
<img src="./bin/sample/dolphin.gif" width="100" height="75" border="0" alt="カラークリップ5個組"></td>
<td valign="top">
<font size="2" color="#696969"><font face="MS ゴシック">サイズ:S(長さ2cm・幅1cm)<br>
   :M(長さ4cm・幅2cm)<br>
   :L(長さ7cm・幅3cm)</font><br>
色:ピンク/黄色/緑/青/紫/ミックス<br>
価格:540円(内消費税40円)<br>
<form method="POST" action="https://fibertrip.com/cgi-bin/ryo/ryo.cgi" target="blank">
サイズ<select name="option_1">
<option>Sサイズ</option>
<option>Mサイズ</option>
<option selected>Lサイズ</option>
</select>
色<select name="option_2">
<option>ピンク
<option>黄色
<option>緑
<option>青
<option>紫
<option>ミックス
</select>
<select name="option_3">
<option selected>透明
<option>不透明
</select>
<br>
<div align="right">個数<input type="text" name="カラークリップ5個組&&&540" maxlength="3" size="3">組</font> <input type="hidden" name="submit" value="購入">
<input type="submit" value="カゴに入れる"></div>
</form>
</td>
</tr>
<tr>
<td colspan="2">
<hr size="1" noshade>
</td>
</tr>
</table>
<option>タグは、上記ソースのサイズの例のように、<option>と</option>で1つづつ選択肢をはさみます。色の例のように、</option>は省略もできます。
デフォルトで表示される選択肢のテキストは、<option selected>で指定します。 指定しない場合は一番上のテキストが表示されます。
上記『カラークリップ5個組』のケースでは、サイズから「カゴに入れる」ボタンまでが2段になってしまうので、個数の前で改行<br>を入れています。また、販売の単位がたとえば5個組で1セットとか100gいくらとかいったケースでは、お客様の混乱を避けるために、個数入力のテキストボックスや個数選択のプルダウンメニューの後に単位を記載すると、わかりやすいでしょう。
上記の例では、<input type="text" name="カラークリップ5個組&&&540" maxlength="3" size="3">の後ろに組を記載しています。

 ポイントは、<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="購入">または
<input type="hidden" name="submit" value="購入">
<input type="submit" value="xxxxx">
の"submit"ボタンを入れることです。

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


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

サービス管理メニュー


サービス案内