カートの中身ボタンを追加する [HTML5テンプレート用]

2018-06-21 14:12

カートの中身ボタンを自由記入欄やhtmlタグ利用可能エリアに設置できます。

STEP1 htmlタグをコピーする

5パターンhtmlタグがあります。

表示サンプル: https://cafe0101.ocnk.net/page/1

マウスオーバー時のポップアップなし

<div class="shopping_cart_button" data-empty-text="">
<div class="cartbtn">
<a href="https://demo.ocnk.net/cart"><span class="cartquantity"></span>カートの中身</a>
</div>
</div>

マウスオーバー時に右寄せのポップアップ

<div class="shopping_cart_button has_cart_popup" data-empty-text="">
<div class="cartbtn">
<a href="https://demo.ocnk.net/cart"><span class="cartquantity"></span>カートの中身</a>
</div>
</div>

マウスオーバー時に、左寄せのポップアップ

<div class="reverse_cartcontent">
<div class="shopping_cart_button has_cart_popup" data-empty-text="">
<div class="cartbtn">
<a href="https://demo.ocnk.net/cart"><span class="cartquantity"></span>カートの中身</a>
</div>
</div>
</div>

マウスオーバー時に、中央寄せのポップアップ

<div class="center_cartcontent">
<div class="shopping_cart_button has_cart_popup" data-empty-text="">
<div class="cartbtn">
<a href="https://demo.ocnk.net/cart"><span class="cartquantity"></span>カートの中身</a>
</div>
</div>
</div>

カートの中身が空の場合に表示される、マウスオーバー時ポップアップ内の表示文字変更

<div class="shopping_cart_button has_cart_popup" data-empty-text="現在、買い物かごには商品が入っていません。ぜひお買い物をお楽しみください。 ">
<div class="cartbtn">
<a href="https://demo.ocnk.net/cart"><span class="cartquantity"></span>カートの中身</a>
</div>
</div>

STEP2 htmlタグを貼り付ける

コピーしたhtmlタグを、[デザイン管理]→[配置/画像/コメント設定]画面から [自由記入欄][htmlタグ利用可能エリア]に貼り付けてください。

・URLについて
貼り付け後、aタグ内のURLをご自身のサイトURLに変更してください。
<a href="https://demo.ocnk.net/cart">


例)https://cafe0101.ocnk.net/の場合

<a href="https://demo.ocnk.net/cart">

<a href="https://cafe0101.ocnk.net/cart">


例)https://www.ocnk.net/の場合
<a href="https://demo.ocnk.net/cart">

<a href="https://www.ocnk.net/cart">

※共用ドメイン、独自ドメインどちらでも利用可能です。

・文言について
ボタンに表示される「カートの中身」はご自身で変更可能です。
<a href="https://demo.ocnk.net/cart"><span class="cartquantity"></span>カートの中身</a>