Yahooショップカートを外部に貼り付ける

掲載日: / 更新日:
Yahooショップカートを外部に貼り付ける
百寿健康工房 ひめぽーとYahooショップ

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

ここから


食塩無添加 濃厚 トマトジュース 赤の元気 夏獲れ秋獲れ 180ml 各6本

3,720円

のし:

ここまで

ソースコードは、

<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ショップカートを使用しています」とかの記載があったほうが良いかもしれません。

 

コメントを残す

メールアドレスが公開されることはありません。 が付いている欄は必須項目です

CAPTCHA