フォーム一体型LP:「カートに入れる」ボタンの記述方法


LP内で「カートに入れる(購入)」ボタンを押した際に、入力フォーム先頭へ移動しかつ商品が選択された状態にするための記述です。

ボタンとなる要素に以下の記述を追加(+ページ内アンカーで移動先を指定)
class="easybuy_set" data-item_id="**" data-item_num="*"
「class=”easybuy_set”」この記述は固定です。クラス追加は可能です。
「data-item_id=”**”」対象となる商品IDです。(必須)
「data-item_num=”*”」上記商品を複数カゴに入れたい場合、数量を指定します。(省略可能)

ボタンとなる要素がaタグで囲まれていないとき、スタイルシートに以下の記述(一例)を追加することでマウスオン時のポインタ形状を変えてクリッカブル要素であることを示すことができます。
.easybuy_set:hover {cursor: pointer;}
参考画像

参考LP:https://designtest.web-store.jp/product-buy-form/btn_sample






なお従来の記述方法も引き続きご利用いただけます。

ボタンのリンク先にフォームへのアンカーを指定
ボタン画像のimgタグ内に以下の記述を追加
class="btn_b*" reg_val="**"
(定期購入商品の場合は”btn_b1″、通常商品では”btn_b2″とします。”**”は商品ID)

参考LP:https://designtest.web-store.jp/product-buy-form/regular_buy_sample