ホームページにカートボタンを置こう！

WordPressで作成されたホームページであれば、「WooCommerce」や「Welcart」のプラグインを使うことでホームページ自体をショップ化することは比較的容易ですが、決済システムの導入やセキュリティ管理など考え始めるとなかなか難しい点もあります。

そこで、先の記事で書いたYahooショップを用意して、そのカートをホームページやブログに置いてショップ化することと頻繁に商品内容が変わらないのであれば、運用はYahooショップに絞れますので簡単になります。

ただ、これには欠点があり、複数種類の商品を1つのカートに入れるような購入方法が難しくなります。（できるのかもしれませんが、現時点（2020年2月）のYahooカートに「お買い物を続ける」ボタンがないので、購入元に戻れません。）

STORESのストアボタンだとこれができてしまいます。その代わりにカートに入れる前に熨斗の設定など購入オプションはつけられません。個数はカートページで、熨斗などオプションは備考で記載して頂く形になります。

STORESを始める

STORESから必要事項を登録していくことで簡単に作成することができます。

登録は簡単ですが、注意しないとあとで後悔することがあります。

特に独自ドメインを設定される方は、気をつけないといけません。

（なんで、こんな大事なこと、FAQを読まないと書いてないんだ！と思ってしまいましたが）

独自ドメインを設定してもカートのドメインは、元々の「https://?????.store.jp」となります。

そして、独自ドメインを申請後はこの「https://?????.store.jp」を変更することはできません。

なので、

独自ドメインを設定する場合でも「https://?????.store.jp」でお客さんが見てもおかしくない設定を事前にしておきましょう。

クレジット決済の審査は、指示される手順通りに進めてショップの基本設定が入力できた時点で審査が始まります。特に別途提出書類はありません。審査には通過したのがわかるのが２W程度、実際に使えるようになるのが１M程度となるようです。AmazonPayの申請は、3日程度で完了するようです。

ストアボタン機能を使い、カートボタンを貼り付ける

ショップがオープンできたら、いよいよストアボタンを作成設置します。

ストアボタンの作成は、STORESのストア設定（管理ページトップの右上のショップ名の所をクリックしたメニューにあります。）を開くと

「ストアボタンを設置」の設置をクリックすると、設定画面となります。

大きさ、デザインなど必要に応じて設定して、作成したい商品を選択して、ストアボタン（Javascript）を作成します。

作成できたストアボタンを設置したい場所に貼り付けて完了となります。

赤の元気のケチャップの購入はこちら↓

こんな感じ….本当に購入できます。

このケチャップは、有名メーカ品に比べお高いですが、リピータも多く、たくさんの方に価値ある商品と認めて頂いています。

Yahooショップカートを外部に貼り付けてみました

ここから

ここまで

ソースコードは、

<style type="text/css">
.item_pic {
width:70%;
max-width:300px;
}
.item_name {
font-size:large;
}
.item_price{
font-size:large;
}
.item_opt {
padding-bottom:5pt;
}
.opt_name {
white-space: nowrap;
}
</style>
</p>
<table class="cart" cellspacing="0" cellpadding="0">
<tbody>
<tr>
<td class="item_name">食塩無添加 濃厚 トマトジュース 赤の元気 夏獲れ秋獲れ 180ml 各6本</td>
</tr>
<tr>
<td>
<p><img class="item_pic" src="https://item-shopping.c.yimg.jp/i/l/hyakujyu_218253156-2" /></p>
<p class="item_price">3,720円</p>
</td>
</tr>
<tr>
<td>
<form accept-charset="EUC-JP" action="https://order.shopping.yahoo.co.jp/cgi-bin/cart-form" method="post" name="addCart"><span class="hidden"> <input name="vwcatalog" type="hidden" value="hyakujyu" /> <input name="vwitem" type="hidden" value="218253156-2" /> <input name="のし" type="hidden" value="なし" /> <input name="vwquantity" type="hidden" value="1" /> <input name=".autodone" type="hidden" value="https://www.himeport.co.jp" /> </span>
<div class="item_opt"><span class="opt_name">のし：<select name="のし" data-cart-option-select="">
<option selected="selected" value="なし" data-calcoptionprice-priceoption="0">なし</option>
<option value="内祝" data-calcoptionprice-priceoption="0">内祝</option>
<option value="御祝" data-calcoptionprice-priceoption="0">御祝</option>
<option value="お歳暮" data-calcoptionprice-priceoption="0">お歳暮</option>
<option value="寒中御見舞い" data-calcoptionprice-priceoption="0">寒中御見舞い</option>
<option value="御年賀" data-calcoptionprice-priceoption="0">御年賀</option>
<option value="お中元" data-calcoptionprice-priceoption="0">お中元</option>
<option value="暑中御見舞い" data-calcoptionprice-priceoption="0">暑中御見舞い</option>
<option value="残暑御見舞い" data-calcoptionprice-priceoption="0">残暑御見舞い</option>
<option value="御見舞" data-calcoptionprice-priceoption="0">御見舞</option>
<option value="(無地)" data-calcoptionprice-priceoption="0">(無地)</option>
</select></span></div>
<div class="pt1"><input alt="カートに入れる" src="/wp-content/uploads/2020/02/e_company_523.png" type="image" /></div>
</form>
</td>
</tr>
</tbody>
</table>

同じようなことを他のページでも紹介されているのですが、日本語オプションがあったりするとうまく動かなかったりします。

その原因は文字コード！！

カートを貼り付けるポイントだけ書くと

<form name="addCart" method="post" action="https://order.shopping.yahoo.co.jp/cgi-bin/cart-form" accept-charset="EUC-JP">
<input name="vwcatalog" type="hidden" value="サイト名(ショップurlの最後)">
<input name="vwitem" type="hidden" value="商品コード">
<input name="のし" type="hidden" value="なし" >
<input name="vwquantity" type="hidden" value="数量">
<input name=".autodone" type="hidden" value="戻り先URL">
<input type="image" src="カートボタン画像" alt="カートに入れる" border="0">
</form>

これを飾り付けしたり、数量やオプションを変更できるようにします。

多少の手間はかかりますが、yahooショップをお持ちであれば、ホームページに立派な無料カートが掲載できます。

※ 掲載時に「このカートはYahooショップカートを使用しています」とかの記載があったほうが良いかもしれません。