テクいっちゃテクいけど基礎が分かってれば当たり前の話のやつ。
機能のおさらい
たまごリピートとかサブスクストアはECサービス内のページに限らず、別ドメイン・別サイトであっても購入タグを設置すればそこから直接カートに商品を突っ込める。
商品登録ができていれば勝手に追加されるので、該当のものをコピペするだけで使える。
単品だとこんな感じ。
<form action="https://【登録ドメイン】/api/cart_item.html" class="form-inline" method="post">
<input type="hidden" name="id" id="id" value="★" />
<input type="hidden" name="cart_item_type" id="cart_item_type" value="single_product" />
<div class="form-group">
個数
<select name="quantity" id="quantity" class="form-control"><option value="1">1</option></select>
</div>
<button name="button" type="submit" class="btn btn-primary">購入</button>
</form>
<pre class="html-tag-content"></pre>定期購入はこう。
<form action="https://【登録ドメイン】/api/cart_item.html" class="form-inline" method="post">
<input type="hidden" name="id" id="id" value="★" />
<input type="hidden" name="cart_item_type" id="cart_item_type" value="regular_course" />
<div>
個数
<select name="quantity" id="quantity" class="form-control"><option value="1">1</option></select>
</div>
<div>
<div>
<label><input type="radio" name="products[][variant_id]" id="products__variant_id_2" value="2" checked="checked" />【商品名】</label>
</div>
</div>
<button name="button" type="submit" class="btn btn-primary">購入</button>
</form>
<pre class="html-tag-content"></pre>★＝商品ID
最後の<pre>がマニュアルに載ってないし、タグ表示のポップアップにも消すなと書いてないから何なのこれっていうモヤモヤはある。
定期購入のタグはラジオボタン付いてるけど、これは定期商品登録時に複数のバリエーションを設定したらそっから選べってやつで、だから1個しかない場合は選ぶ必要ないんだけど機械的に設置されてるな。
数量指定のカスタマイズ
場合によっては1個ずつ売りたいとか、そもそもこれを複数買う酔狂はいないだろ的な、ショップ側が数量を指定しようって場合、<select>は不要。サブスクストア自体の設定で1回あたりの購入数を指定できるからそう珍しいケースでもないと思う。定期コースなら特にね。
ということで<select>を<input type=”hidden”>にして埋め込んでしまえという話。nameとかが合ってればhtmlタグ自体は変えてしまっても動くっぽい。
<select name="quantity" id="quantity" class="form-control"><option value="1">1</option></select>これを
<input type="hidden" name="quantity" id="quantity" class="form-control" value="1">こうする。
定期商品のバリエーションを指定する
数量のやつと同じ感じで、<input type=”radio”>を<input type=”hidden”>にする。
<label><input type="radio" name="products[][variant_id]" id="products__variant_id_2" value="2" checked="checked" />【商品名】</label>こうなら
<input type="hidden" name="products[][variant_id]" id="products__variant_id_2" value="2" />こうする。
画面上に表示されるのはbuttonだけになるのでスッキリする。
カートを挟むからワンクリック購入じゃないし、そもそもの用途は自社サイトだし、表示内容を一部伏せても悪用方面の心配はないね。
その他のなんちゃらについて
js読ませるどうこうとかないから、id・classは削除しても問題ないと思う。
コードがスッキリする。
コメント