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