カートボタンを好きな場所に設置する

カートボタンを好きな場所に設置する
＜目次＞
1 自店舗のカートＵＲＬを調べる・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・ 2
2 カートボタンの設置方法・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・ 3
リンクを利用する方法
フォームを利用する方法
「カートをみる」リンクを設置する方法
「在庫を確認する」リンクを設置する方法
商品個数を選択させる方法
バリエーションを選択させる方法
オプションを利用する方法
名前などの任意の情報を取得する方法
異なる商品を選択させる方法
まとめ買いをさせる方法
1 / 11
1 自店舗のカートＵＲＬを調べる
カートボタンを設置するためには、自身に割り当てられている「カートＵＲＬ」をあらかじめ調べておく必要があります。
カートＵＲＬの書式
https://cart(*).shopserve.jp/-/ドメイン/cart.php
（*）に入る数字とドメインが、店舗さんによって異なります。
独自ドメインを利用していなければ「https://cart(*).shopserve.jp/ショップＩＤ/cart.php」です。
ここでご案内しているカートＵＲＬは、２０１１年１１月１１日以前にご案内していたＵＲＬと異なりますが、従来のままでも動作には問題ありません。
しかし、理論上、新しいＵＲＬの方が高速に動作するため、こちらのカートＵＲＬをお奨めします。
■ＵＲＬを確認します
「カートをみる」欄に記載されているＵＲＬをメモしておきます。
独自ドメインの利用開始前と後では表記されているＵＲＬが異なるので、
ご注意ください。
利用開始前： https://cart(*).shopserve.jp/ショップ ID/cart.php
利用開始後： https://cart(*).shopserve.jp/-/ドメイン/cart.php
・自作ページにカートボタンを設置する場合、
カスタムテンプレート利用時 → 文字コード「UTF-8」
ベーシックテンプレート利用時 → 文字コード「EUC-JP」
で作成してください。
それぞれの文字コード以外で作成されたページからでは、
カートに商品が入らない恐れがあります。
・URL の一覧では拡張子が「.php」になっていますが、ベーシックテンプレ
ートで自動生成されるお店ページでは「.cgi」になっています。どちらでも
表示できますが「.php」の方がより高速で表示できるため、推奨していま
す。
2 / 11
2 カートボタンの設置方法
例示してある html ソースの、青字部分をお店の情報に書き換えてください。
また、html ソース中に書かれているそれぞれの特殊記号については、以下の通りです。
カートボタン設置用の特殊記号一覧
記号名
説明
ITM
商品台帳に登録した商品の商品番号を指定します。
CNT
同時に購入する商品数を指定します。
VAR1～3
バリエーションに登録した選択肢を指定します。
事前準備として、商品の登録時にバリエーションを設定しておく必要があります。
OPTION1～10
オプションに登録した選択肢を指定します。
事前準備として、オプションを設定しておく必要があります。
OPT1～30
バリエーションやオプションであらかじめ登録しておけない選択肢や登録する必要がない選択肢、
または名前などの任意情報を入力させる場合などに指定します。
リンクを利用する方法
文字、もしくはボタンなどの画像をクリックするとカートへ商品が入ります。
■文字リンクを利用する記述
独自ドメイン
<a href="https://cart(*).shopserve.jp/-/ドメイン/cart.php?ITM=商品番号&CNT=購入数">
カゴへ</a>
ショップ ID
<a href="https://cart(*).shopserve.jp/ショップＩＤ/cart.php?ITM=商品番号&CNT=購入数">
カゴへ</a>
■ボタンなどの画像リンクを利用する記述
独自ドメイン
<a href="https://cart(*).shopserve.jp/-/ドメイン/cart.php?ITM=商品番号&CNT=購入数">
<img src="画像ファイルのＵＲＬ" border="0">
</a>
ショップ ID
<a href="https://cart(*).shopserve.jp/ショップＩＤ/cart.php?ITM=商品番号&CNT=購入数">
<img src="画像ファイルのＵＲＬ" border="0">
</a>
「画像ファイルのＵＲＬ」は、使用するカートボタンの画像をあらかじめ画像
台帳に登録しておき、そのＵＲＬを記述してください。
3 / 11
フォームを利用する方法
フォームタグを使って、カートボタンを設置する方法です。
■フォームを利用する記述
独自ドメイン
<form method="post" action="https://cart(*).shopserve.jp/-/ドメイン/cart.php">
<input type="hidden" name="ITM" value="商品番号">
<input type="submit" value="カゴへ">
</form>
ショップ ID
<form method="post" action="https://cart(*).shopserve.jp/ショップＩＤ/cart.php">
<input type="hidden" name="ITM" value="商品番号">
<input type="submit" value="カゴへ">
</form>
フォームを利用しつつ、画像ボタンを利用したい場合は、
× <input type="submit" value="カゴへ">
↓ ↓ ↓
○ <input type="image" src="画像ファイルのＵＲＬ">
へ差し換えてください。
フォームタグを利用する場合、開始タグの<form>と終了タグの</form>は
同じタグの中に配置してください。異なるタグを跨っていると正常に動作し
ません。
正しい記述
<p >
<form method="post" action="https://cart(*).shopserve.jp/ショップＩＤ/cart.php">
<input type="hidden" name="ITM" value="商品番号">
<div>
<img src="http://～～">
<input type="submit" value="カゴへ">
</div>
</form>
</p>
開始の<form>も終了の</form>も赤い<p>タグの中に配置されている。
間違った記述
<p>
<form method="post" action="https://cart(*).shopserve.jp/ショップＩＤ/cart.php">
<input type="hidden" name="ITM" value="商品番号">
<div>
<img src="http://～～">
<input type="submit" value="カゴへ">
</form>
</div>
</p>
開始の<form>は赤い<p>タグの中だが、終了の</form>がさらに下層である
緑の<div>の中に配置されている。
4 / 11
「カートをみる」リンクを設置する方法
カートに入っている商品を確認するリンクを設置する方法です。
■「カートをみる」リンクを設置する記述
独自ドメイン
<a href="https://cart(*).shopserve.jp/-/ドメイン/cart.php">カートをみる</a>
ショップ ID
<a href="https://cart(*).shopserve.jp/ショップＩＤ/cart.php">カートをみる</a>
カートボタン設置方法の「リンクを利用する方法」との違いは、「ITM」や
「CNT」のパラメーターを付与せずにリンクしている点です。
よってパラメーターを付与しなければ、通常のカートボタンの設置と同じ
く、文字リンクではなく画像ボタンにしたりフォームボタンにしたりすること
もできます。
「在庫を確認する」リンクを設置する方法
商品の在庫数を確認するリンクを設置する方法です。
■「在庫を確認する」リンクを設置する記述
独自ドメイン
<a href="http://ドメイン/SHOP/stock.cgi?ITEM_NO=商品番号">在庫を確認する</a>
ショップ ID
<a href="http://ショップＩＤ.shopserve.jp/SHOP/stock.cgi?ITEM_NO=商品番号">在庫を確
認する</a>
「リンクを利用する方法」と同様に、文字リンクではなく画像ボタンにする
こともできます。また「フォームを利用する方法」を応用してフォームボタ
ンにすることもできます。
5 / 11
商品個数を選択させる方法
商品の個数をプルダウンから選択して、カートへ商品を入れる方法です。
■商品の個数を選択させる記述
独自ドメイン
<form method="post" action="https://cart(*).shopserve.jp/-/ドメイン/cart.php">
<input type="hidden" name="ITM" value="商品番号">
<select name="CNT">
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
</select>
<input type="submit" value="カゴへ">
</form>
ショップ ID
<form method="post" action="https://cart(*).shopserve.jp/ショップＩＤ/cart.php">
<input type="hidden" name="ITM" value="商品番号">
<select name="CNT">
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
</select>
<input type="submit" value="カゴへ">
</form>
商品の個数を選択式ではなく、直接入力させたい場合は、
<select name="CNT">～</select>の記述を以下に変更してください。
<input type="text" name="CNT" size="5">
6 / 11
バリエーションを選択させる方法
商品のバリエーションを選択して、カートに商品を入れる方法です。
選択肢ごとに在庫を管理する必要があるなら、オプションよりもバリエーションの方が便利です。
事前準備として、あらかじめ商品のバリエーションを登録しておく必要があります。
バリエーションの設定については、他のページでご案内していますのでそちらをご覧ください。
>> オンラインサポートで検索「292」
■バリエーションを選択させる記述
独自ドメイン
<form method="post" action="https://cart(*).shopserve.jp/-/ドメイン/cart.php">
<input type="hidden" name="ITM" value="商品番号">
色：
<select name="VAR1">
<option value="レッド">レッド</option>
<option value="オーシャンブルー">オーシャンブルー</option>
<option value="モスグリーン">モスグリーン</option>
<option value="ターコイズ">ターコイズ</option>
</select>
布地：
<select name="VAR2">
<option value="スエード">スエード</option>
<option value="本革レザー">本革レザー</option>
<option value="アニリンレザー">アニリンレザー</option>
</select>
座高：
<select name="VAR3">
<option value="35cm">35cm</option>
<option value="40cm">40cm</option>
</select>
<input type="submit" value="カゴへ">
</form>
ショップ ID
<form method="post" action="https://cart(*).shopserve.jp/ショップＩＤ/cart.php">
<input type="hidden" name="ITM" value="商品番号">
色：
<select name="VAR1">
<option value="レッド">レッド</option>
<option value="オーシャンブルー">オーシャンブルー</option>
<option value="モスグリーン">モスグリーン</option>
<option value="ターコイズ">ターコイズ</option>
</select>
布地：
<select name="VAR2">
<option value="スエード">スエード</option>
<option value="本革レザー">本革レザー</option>
<option value="アニリンレザー">アニリンレザー</option>
</select>
座高：
<select name="VAR3">
<option value="35cm">35cm</option>
<option value="40cm">40cm</option>
</select>
<input type="submit" value="カゴへ">
</form>
7 / 11
オプションを利用する方法
商品のオプションを選択して、カートに商品を入れる方法です。直接入力させることもできます。
選択肢ごとに価格は変わるが在庫を管理する必要はなければ、バリエーションよりもオプションの方が便利です。
事前準備として、あらかじめオプションを設定しておく必要があります。
オプションの設定については、他のページでご案内していますのでそちらをご覧ください。
>> オンラインサポートで検索「310」
■オプションを選択させる記述
独自ドメイン
<form method="post" action="https://cart(*).shopserve.jp/-/ドメイン/cart.php">
<input type="hidden" name="ITM" value="商品番号">
柄：
<select name="OPTION1">
<option value="ブラウン">ブラウン</option>
<option value="グレー">グレー（+300 円）</option>
</select>
レビュー：
<select name="OPTION2"><br>
<option value="書く">書く（-100 円）</option>
<option value="書かない">書かない</option>
</select>
名入れ：
<input type="text" name="OPTION3" value="" size="10">
<input type="submit" value="カゴへ">
</form>
ショップ ID
<form method="post" action="https://cart(*).shopserve.jp/ショップＩＤ/cart.php">
<input type="hidden" name="ITM" value="商品番号">
柄：
<select name="OPTION1">
<option value="ブラウン">ブラウン</option>
<option value="グレー">グレー（+300 円）</option>
</select>
レビュー：
<select name="OPTION2"><br>
<option value="書く">書く（-100 円）</option>
<option value="書かない">書かない</option>
</select>
名入れ：
<input type="text" name="OPTION3" value="" size="10">
<input type="submit" value="カゴへ">
</form>
8 / 11
名前などの任意の情報を取得する方法
自由に入力してもらった情報とともに、カートに商品を入れる方法です。こちらで選択肢を用意することもできます。
選択肢は、事前の登録や設定は必要ありません。
入力内容や選択肢によって価格は変わらず在庫も管理する必要がなければ、バリエーションやオプションよりも便利です。
■任意の情報を取得する記述
独自ドメイン
<form method="post" action="https://cart(*).shopserve.jp/-/ドメイン/cart.php">
<input type="hidden" name="ITM" value="商品番号">
名入れ：
<input type="text" name="OPT1" size="半角数字（テキストエリアの幅）">
柄：
<select name="OPT2">
<option value="ブラウン">ブラウン</option>
<option value="グレー">グレー</option>
</select>
<input type="submit" value="カゴへ">
</form>
ショップ ID
<form method="post" action="https://cart(*).shopserve.jp/ショップＩＤ/cart.php">
<input type="hidden" name="ITM" value="商品番号">
名入れ：
<input type="text" name="OPT1" size="半角数字（テキストエリアの幅）">
柄：
<select name="OPT2">
<option value="ブラウン">ブラウン</option>
<option value="グレー">グレー</option>
</select>
<input type="submit" value="カゴへ">
</form>
特殊記号「OPT」は、最大３０個（OPT1～OPT30）まで指定できます。
9 / 11
異なる商品を選択させる方法
異なる商品を選択して、カートに商品を入れる方法です。
在庫管理を分ける、価格を変えるだけであればバリエーションの選択でできますが、商品名自体が異なるものを選択させたい場合に利用できます。
■異なる商品を選択させる記述
独自ドメイン
<form method="post" action="https://cart(*).shopserve.jp/-/ドメイン/cart.php">
<select name="ITM">
<option value="商品番号 01">チェック柄テーラードジャケット</option>
<option value="商品番号 02">ピンストライプカジュアルジャケット</option>
</select>
<input type="submit" value="カゴへ">
ショップ ID
<form method="post" action="https://cart(*).shopserve.jp/ショップＩＤ/cart.php">
<select name="ITM">
<option value="商品番号 01">チェック柄テーラードジャケット</option>
<option value="商品番号 02">ピンストライプカジュアルジャケット</option>
</select>
<input type="submit" value="カゴへ">
</form>
10 / 11
まとめ買いをさせる方法
複数の商品をまとめてカートに入れる方法です。
他のカートボタン設置方法と違い、特殊記号の後に「-」（ハイフン）を付け、続けて「A、B、C・・・」など任意の文字列を付与します。
例） ITM-A CNT-A VAR1-A
ITM-B CNT-B VAR1-B
まとめ買いでは１つのフォームの中に複数の特殊記号が混在するため、例えば「CNT」だけではどの商品の個数を指定しているのか判別できません。
そこで、「-A」や「-B」の付与されたグループごとで１セットの商品情報として認識し、処理されます。
■まとめ買いをさせる記述
独自ドメイン
<form method="post" action="https://cart(*).shopserve.jp/-/ドメイン/cart.php">
<input type="hidden" name="ITM-A" value="商品番号Ａ">
個数：
<select name="CNT-A">
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
</select>
<input type="hidden" name="ITM-B" value="商品番号Ｂ">
個数：
<select name="CNT-B">
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
</select>
<input type="submit" value="カゴへ">
</form>
ショップ ID
<form method="post" action="https://cart(*).shopserve.jp/ショップＩＤ/cart.php">
<input type="hidden" name="ITM-A" value="商品番号Ａ">
個数：
<select name="CNT-A">
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
</select>
<input type="hidden" name="ITM-B" value="商品番号Ｂ">
個数：
<select name="CNT-B">
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
</select>
<input type="submit" value="カゴへ">
</form>
こちらのサンプルは、スタイルシートでレイアウトを調整してあります。
まとめ買い時の特殊記号一覧
通常時の特殊記号
まとめ買い時の特殊記号
ITM
ITM-A、ITM-B、ITM-C
CNT
CNT-A、CNT-B、CNT-C
VAR1～3
VAR1-A、VAR1-B、VAR1-C、VAR2-A、VAR2-B、VAR2-C
OPTION1～10
OPTION1-A、OPTION1-B、OPTION1-C、OPTION2-A、OPTION2-B、OPTION2-C
OPT1～30
OPT-A-1、OPT-B-1、OPT-C-1、OPT-A-2、OPT-B-2、OPT-C-2
11 / 11

Download Report