使ってる人いるんかね？
前置きとか
カラーミーショップは外部ページに商品購入枠を埋め込めるように、「どこでもカラーミー（カートJS）」という機能がある。商品名とか画像とかの表示・非表示項目を設定して生成されたjsを埋め込めば購入リンクが表示される。クリックすると直接カートに飛ぶ。
これはこれでいいんだけどデザインが完結してるので、LPに入れたい場合に見栄えが悪いってことがある。なので、jQueryで特定箇所のクリックを遠隔でsubmitするようにしたい。
こうする
jsと発火元をこんな感じにしておいて。
<div id="buyForm" style="display: none;"><script type='text/javascript' src='https://***.shop-pro.jp/?mode=cartjs&pid=*********&style=normal_gray&name=n&img=n&expl=n&stock=n&price=n&optview=n&inq=n&sk=n' charset='euc-jp'></script></div>
<a id="buySubmit">購入する</a>こうする。
$(function(){
$('#buySubmit').on('click',function(){
$('#buyForm form').submit();
})
})簡単。
備考
強制的にカートに入れる数は1個になる。個数指定したかったらそれ用のinputなりselectを用意して、自動生成の個数枠に反映させる感じで。そこまでしたいならそのまま使ったほうがいいと思うけど。
form自体にclassが付いてるからそれで指定してもいいんだけど、複数の埋込の可能性を考えたらユニークIDをつけた親要素を絡めた指定でちゃんと切り分けた方がいい。
注意点
.submit()は非推奨なんですかね？
jsによる自動生成なので完全にカラーミー任せのコンテンツになる。仕様が変わったら使えなくなる。たまごリピートだかサブスクストアだかは<form>じゃなかったと思うから別アプローチも可能ってことで、もしかしてを考えたら可能性は否めないなって。
気がかりな点
商品詳細ページに飛ばせば組み込む手間はないんだけど直接カートに飛ばせたほうがやっぱりいい。購入フローを削ったら売り上げに繋がるらしい。
カラーミー以外もそうだと思うけど、この手の購入ギミックは普通に商品ページにある「カートに入れる」動作なんで、何回も押せばその分注文個数が増える。「買おう」ってクリックして、「ちょっと待てよ」って一旦LPに戻って、「やっぱり買おう」ってまたクリックしたら注文数は2個になる。複数個購入禁止の制約をつけられるものもあるけど、そのへんは注意しておかないとなって。作る方も買う方も。
コメント