「再入荷通知」ボタンの位置を変更する方法
カラーミーショップの商品詳細ページに表示する「再入荷通知」ボタンの位置やデザインをを変更する方法です。
⑥再入荷通知を有効にするための設定で設定した「Poster for カラーミーショップスクリプト」は、
連携されたカラーミーショップに「LINEで再入荷通知を受け取る」ボタンを自動挿入します。
「LINEで再入荷通知を受け取る」ボタンは、在庫が「0」となった商品の詳細ページの「カートに入れる」ボタン付近に自動的に挿入されますが、使用しているテンプレートによって表示位置が異なる場合がございます。
希望する位置に表示されない場合は下記の方法でボタンの表示位置を指定して下さい。
1.ボタンの位置を変更する場合
カラーミーショップの商品詳細ページの編集画面へ移動し、ボタンを表示したい箇所に以下のタグをコピーして、追加してください。
<div id="poster_app_element"></div>
2.ボタンのテキストを変更する場合
ボタンに表示するテキストを変更する場合は以下のように、タグに
data-label属性を追加して下さい。<div id="poster_app_element" data-label="再入荷通知をLINEで受け取る"></div>
3.ボタンのデザインを変更する方法
追加されるボタンのHTMLは以下のようなクラスが設定されています。
<div class="poster_notification_wrap"> <button class="poster_notification_btn">LINEで再入荷通知を受け取る</button> </div>クラスに対してスタイル（CSS）を追加する事でデザインを変更する事が出来ます。
挿入されるHTMLに任意のクラスを設定する事も可能です。ボタンの位置を変更する場合 で案内したHTMLタグに、
data-wrapClassdata-btnClass属性で、設定したいクラス名を指定して下さい。例えば下記のように設定した場合
<div id="poster_app_element" data-wrapClass="btn-wrap wide" data-btnClass="btn btn-default"></div>表示される
<button> ~ </button>タグは以下のようにクラスが追加されます。 （デフォルトのクラスが削除されて指定したクラスのみが挿入されます）<div class="btn-wrap wide"> <button class="btn btn-default">LINEで再入荷通知を受け取る</button> </div>-
4.ボタンの表示位置を指定しない場合
ボタンの位置を指定しない場合には、以下の優先順に要素を検索して自動的にボタンが追加されます。
使用しているテンプレートによっては下記の要素が存在しな場合がありますので、 その場合はボタンの表示位置を直接指定してご利用下さい。
優先順 表示位置 1 <div class="product_spec_block"></div>の最後尾2 <table class="add_cart_table"></table>の直後3 <div class="product_link_area"></div>の先頭4 <p class="stock_error"></p>の直前5 <div id="container"></div>の最後尾6 <body></body>の最後尾
