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

Pocket

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

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

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

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

<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’ または ‘insertAfter’ を指定できます。
  14. data-provider-display – ショップ名の表示について指定します。‘none’ を指定することで非表示にできます。
  15. data-discount-display – 割引率の表示・非表示。‘none’ を指定することで非表示にできます。
  16. data-show-more-display – 「もっと見る」ボタンの表示・非表示。‘none’ を指定することで非表示にできます。
  17. data-stock-count – 表示する商品の数を指定できます。’15’ のように数字で指定できます。
  18. data-item-label – アイテムタブに、アイテムのタグを並べて表示するか、カテゴリー名を表示するかを選べます。”category” を指定することでカテゴリー名指定となります。
  19. data-image-width – 画像のサイズを指定できます。”100px” などのpx指定で変更できます。
  20. data-webfont-links – プラグイン内のフォントを指定できます。現在はgoogleフォントのみに対応しています。”https://fonts.googleapis.com/css?family=Noto+Sans+JP:400,700&amp;subset=japanese” のように指定いただくことで反映されます。
  21. data-categories – data-categories = ‘tops bottoms hat’ のように空白区切りでプラグインに表示するカテゴリを指定できます。指定した場合、指定のカテゴリ以外はプラグインに表示されなくなります。カテゴリの一覧はカテゴリマスタをご覧ください。
  22. data-category-order – ‘fixed’ を指定することで、上記「data-categories」で指定したカテゴリの順番通りにプラグインのアイテムタブを並び替えて表示することができます。例えばdata-categories = ‘tops bottoms hat’ data-category-order=’fixed’ と指定したとき、対象の画像内にバッグ、ボトムス、トップスが含まれていた場合、トップスが1番目のタブに、ボトムスが2番目のタブに表示され、バッグは表示されません。これらを指定しなかった場合、デフォルトではカテゴリマスタの並び順通りに優先付けされて表示されます。
  23. data-cbk-keyword – 追加的にキーワードを指定することで、テイスト、ブランドなどの絞り込みを恣意的にかけることができます。例えばdata-cbk-keyword = ‘”COMME de Garcons” モード’ のように指定いただくと、「COMME de Garcons」の「モード」なアイテムの中から類似アイテムを検索するということが可能になります。キーワードはスペース区切りで、ブランド名などスペースを含む一つのキーワードを認識させる場合はダブルクォーテーションで囲います。

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

表示のテスト

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

手順は次のとおりです。

  1. google chromeでプラグインを埋め込みたいページを開く
  2. 「右クリック」→「検証」よりデベロッパツールを表示し、「Console」タブを開いて、下記コードをコピペして、Enter
!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’ という部分については実際に解析をかける画像をセレクタ指定する必要があります。

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