やったら動いたって内容なんで、やっていいかどうか、ずっと使えるかは別の話。
正攻法
BASEにはiframeを使用したwidget機能がある。単純に商品を埋め込みたいならこっちを使うのが妥当。
<iframe frameborder="0" height="380" width="220" src="https://【ドメイン】/items/【商品ID】/widget" ></iframe>BASE側で埋め込み対応のための設定は必要なく、つまり、商品が公開されていれば誰でも勝手に埋め込めるということ。
widgetには3種類のサイズが用意されていて、公式で案内がある。
結局は商品ページへのリッチなリンクってだけなんで、これをクリックしても購入（カートに入れる）はできない。
結論
BASE上の内容を見るとdataで色々付いてたりinput:hiddenでなんか付いてたりするけど、必要最低限だけ抽出するとこうなる。
<form action="https://【ドメイン】/cart/add/【ショップID】" method="post">
<input type="hidden" name="shopID" value="【ショップID】">
<input type="hidden" name="id" value="【商品ID】">
<input type="hidden" name="amount" value="【数量】">
<button type="submit">送信</button>
</form>応用：購入商品選択ギミック
商品IDを変更すればカートに入れる商品を変更できる。
selectとか
<select name="id">
<option value="【商品01ID】">商品01</option>
<option value="【商品02ID】">商品02</option>
<option value="【商品03ID】">商品03</option>
</select>
radioとか
<input type="radio" name="id" value="【商品01ID】">
<input type="radio" name="id" value="【商品02ID】">
<input type="radio" name="id" value="【商品03ID】">商品別にformを作っても良い。
<form action="https://【ドメイン】/cart/add/【ショップID】" method="post">
<input type="hidden" name="shopID" value="【ショップID】">
<input type="hidden" name="id" value="【商品01ID】">
<input type="hidden" name="amount" value="【数量】">
<button type="submit">送信</button>
</form>
<form action="https://【ドメイン】/cart/add/【ショップID】" method="post">
<input type="hidden" name="shopID" value="【ショップID】">
<input type="hidden" name="id" value="【商品02ID】">
<input type="hidden" name="amount" value="【数量】">
<button type="submit">送信</button>
</form>
<form action="https://【ドメイン】/cart/add/【ショップID】" method="post">
<input type="hidden" name="shopID" value="【ショップID】">
<input type="hidden" name="id" value="【商品03ID】">
<input type="hidden" name="amount" value="【数量】">
<button type="submit">送信</button>
</form>同一form内に複数のsubmitを設置して、submitにそれぞれ商品を振り分けるって手もあるけどそこまで書くのはめんどくさいから割愛。
NG：複数種類商品の一括選択はできない
htmlが分かってるならcheckboxが思いつくけど、そういうのは対応してない。
<input type="checkbox" name="id[]" value="【商品01ID】">
<input type="checkbox" name="id[]" value="【商品02ID】">
<input type="checkbox" name="id[]" value="【商品03ID】">nameに”[]”を付けたら配列にできる訳だけど、BASEに配列から抽出する機能は無い。これはBASEの仕様によるものでバグじゃない。複数の商品を購入させたいならBASEでそういうセットを作ることになる。
注意点
冒頭の通り、勝手にやったら動いたってだけ。動かなくなってもBASEは何も悪くない。怒られても仕方ない。
で、本題。
BASE側から一切のデータを引っ張ってくることができないので、在庫状況、公開状態など、商品の情報を反映させることができない。手動で編集しなければいけない。めんどくさいだけなら良いけど金額表記が違っててクレームになるとかすると非常に厄介なことになる。BASEに限らないんだけどね。LPとかを作ったときにも気にしなきゃいけない点。
BASEのページ上に掲載すべき内容が、設置したページ上では不足していることになる。そう考えるとかなり黒寄りじゃないかな。
まとめ
BASE自体あまり長期的に使うもんじゃないというかそこまで凝ったことをするためのものじゃない感じだから、機能を求めるなら別のサービスを使った方がいい。それか、要望を出して機能を追加されるのを待つとか。使い分けが大事。
コメント