類似アイテムプラグインの設定

アイテムフィードのご提供が完了した後には、該当ページにスクリプトを埋め込むだけで類似アイテムプラグインを表示することができます。

プラグインは、画像の四角枠で囲まれた部分のように表示されます。

画像内に複数アイテムが含まれる場合は、アイテムの数だけタブが並びます。

実際に設置するスクリプトは下記のようなものになります。

<script id=”cbk-stk” src=”https://plugin.cubki.jp/assets/stock/image_recognition.js” data-provider=”alinoma” data-container-class=”item-plugin” data-bg-color=”#ffffff” data-tint-color=”#c360b2″ data-container-border=”1px solid #dddddd” data-title=”類似アイテム” data-show-more-text=”類似アイテムをもっと見る” data-selector=“.coord-photo > img” data-insertion-target=“return this.parentNode.parentNode.nextElementSibling;” data-insertion-method=“insertAfter” data-additional-query-string=”link=CBK_COODINATE” defer></script>

ただし上記のスクリプトの中で実際に解析する画像やプラグインを表示させる位置などを指定しなければ、正常に動作しません。

設定方法については以下をご参照ください。

プラグインの設置・カスタマイズ

デザインのカスタマイズ方法等と合わせて、各項目の設定について下記にまとめます。

  1. data-height – 右の「data-height」部分の高さを指定します。pxで指定できます。auto指定すると、内容の高さに合わせて自動で調整できます。
  2. data-tint-color – 右の緑色部分(フォーカスされているタブ)の色を指定します。‘#ff0000’ のように色指定します。
  3. data-bg-color – 四角い枠の中の背景色を指定します。右の畫像はホワイトにしていされています。‘#dddddd’ のように色指定します。
  4. data-container-class – アイテムリコメンデーションエリアに任意のclassを指定できます。見た目には変わりません。
  5. data-container-border – アイテムリコメンデーションエリアの外枠線の色を指定できます。‘1px solid #dddddd’ のようにCSS指定するか’none’で非表示にできます。
  6. data-title – 「モデル着用の類似アイテム」の文言を任意のものにカスタマイズできます。
  7. data-show-more-text – 「もっと見る」ボタンの文言を指定できます。指定しないと「アイテム情報をもっと見る」と表示されます。
  8. data-keyword-delimiter – 「カーディガン / 無地 / コート / ホワイト」といったキーワードの区切り文字をしていできます。指定しないと半角スペースでの区切りになります。
  9. data-additional-query-string – アイテムのリンクに任意のパラメータを付与することができます。効果測定等にご利用いただけます。
  10. data-provider – アイテムを特定のECの商品に絞り込むための指定です。
  11. data-selector – ‘.coord-photo > img’ といった具合に、解析する対象の画像をセレクタ指定します。
  12. data-insertion-target – ‘return this.parentNode.parentNode;’ といった具合に、アイテムプラグインを挿入する位置を設定できます。
  13. data-insertion-method – 挿入ターゲットに対してどのようにアイテムプラグインを挿入するかを指定します。‘append’ または ‘insert’ を指定できます。
  14. data-provider-display – ショップ名の表示について指定します。‘none’ を指定することで非表示にできます。

これらを設定した上でスクリプトを埋め込むと、プラグインを表示できます。

表示のテスト

ウェブブラウザの開発ツールを利用することで、実際に表示される内容やデザインを事前に確認することができます。

手順は次のとおりです。

  1. google chromeでプラグインを埋め込みたいページを開く
  2. 「右クリック」→「検証」よりデベロッパツールを表示し、「Console」タブを開いて、下記コードをコピペする
!function(){
var old = document.getElementById(‘cbk-stk’);
if (old != null) { old.remove(); }
document.querySelectorAll(‘div>iframe’).forEach(function(elm){ elm.parentNode.remove(); });
var s = document.createElement(‘script’);
s.id = ‘cbk-stk’;
s.dataset.provider = ‘alinoma’;
s.dataset.selector = ‘.coord-photo > img’;
s.dataset.insertionTarget = ‘return this.parentNode.parentNode;’;
s.dataset.insertionMethod = ‘append’;
s.dataset.containerClass = ‘item-plugin’;
s.dataset.bgColor = ‘#ffffff’;
s.dataset.tintColor = ‘#c360b2’;
s.dataset.containerBorder = ‘#ffffff’;
s.dataset.title = ‘写真に近いアイテム’;
s.dataset.showMoreText = ‘もっと見る’;
s.dataset.additionalQueryString = ‘cid=cubki’;
s.src = ‘https://plugin.cubki.jp/assets/stock/image_recognition.js’;
document.body.appendChild(s);
}()

上記の ‘.cms_dataimage img’ という部分については実際に解析をかける画像をセレクタ指定する必要があります。

開発の関わるところのため、ご不明な際には担当者までお気軽にお問い合わせください!