ショートフォーム一覧の実装

Shortform Collectionのインストール方法を案内します。

初期化

ここでは、ユーザー認証なし、簡易認証、JWTトークン認証でShoplive Shortformを初期化する例を示します。

目的の認証タイプの初期化コードを、Webサイトの共通レイアウト(head領域など)にインストールします。

初期化でユーザ認証機能を使用するには、 User Authenticationを参照してください。

アクセスキー

アクセスキーとシークレットキーは、Shopliveの担当者から入手できます。

<script type="text/javascript" src="https://static.shoplive.cloud/shoplive-shortform.js"></script>
<script>cloud.shoplive.initShortform({ accessKey: 'YOUR ACCESS KEY HERE' });</script>

<!-- OR -->

//Simple auth
<script type="text/javascript" src="https://static.shoplive.cloud/shoplive-shortform.js"></script>
<script>
  cloud.shoplive.initShortform({ accessKey: 'YOUR ACCESS KEY HERE' });
  cloud.shoplive.setUserObject({userId: "USER_ID", userName: "USER_NAME"});
</script>

<!-- OR -->

//JWT auth
<script type="text/javascript" src="https://static.shoplive.cloud/shoplive-shortform.js"></script>
<script>
  cloud.shoplive.initShortform({ accessKey: 'YOUR ACCESS KEY HERE' });
  cloud.shoplive.setUserJWT("USER_JWT");
</script>

目的のテンプレートへのショートフォームコレクション一覧表示

ショートフォーム一覧を表示する場所に以下のコードを入力します。テンプレートの場所では、「GRID1」、「GRID2」、「HORIZONTAL」を選択してインストールできます。レイアウトは値によって異なります。

<div id="shoplive-shortform"></div>
<script defer >
  cloud.shoplive.setShortformCollection("shoplive-shortform", {template: "GRID1 | GRID2 | HORIZONTAL"} );
</script>

ショートフォームコレクションテンプレートの紹介

ショートフォームリストは、次の3つの形式で任意の場所に表示できます。また、「VIEW MORE」ボタンを使用するかどうかや、最大行数を指定することもできます。

• Grid1 - 垂直スクロール レイアウト (大きいサムネイル)

• Grid2 - 垂直スクロール レイアウト (小さいサムネイル)

• Horizontal - 水平スクロールレイアウト

Grid1 - 垂直スクロール レイアウト (大きいサムネイル)

以下のコードを挿入してください。

<div id="shoplive-shortform-1"></div>
<script defer>
  cloud.shoplive.setShortformCollection("shoplive-shortform-1", {template: "GRID1"} );
</script>

Grid2 - 垂直スクロール レイアウト (小さいサムネイル)

以下のコードを挿入してください。

<div id="shoplive-shortform-2"></div>
<script defer >
  cloud.shoplive.setShortformCollection("shoplive-shortform-2", {template: "GRID2"} );
</script>

Horizontal - 水平スクロールレイアウト

以下のコードを挿入してください。

<div id="shoplive-shortform-3"></div>
<script defer>
  cloud.shoplive.setShortformCollection("shoplive-shortform-3", {template: "HORIZONTAL"} );
</script>

設定

Grid1とGrid2のレイアウトでは、rows と hasMoreButton オプションを利用することができます。

<div id="shoplive-shortform-2"></div>
<script defer >
  cloud.shoplive.setShortformCollection("shoplive-shortform-2", {template: "GRID2" ,hasMoreButton:true, rows:4} );
</script>

Horizontal：横スクロールレイアウト

初期設定

<div id="shoplive-shortform-3"></div>
<script defer>
  cloud.shoplive.setShortformCollection("shoplive-shortform-3", {template: "HORIZONTAL"} );
</script>

高度な設定

• HORIZONTAL テンプレートでは、horizontalOption 設定による追加カスタマイズが可能です。

• このオプションを使用すると、スクロール操作ができるナビゲーション矢印の表示有無と、1行に表示するショートフォームの数を設定できます。

<div id="shoplive-shortform-3"></div>
<script defer>
  cloud.shoplive.setShortformCollection('shoplive-shortform-3', {
    template: 'HORIZONTAL',
    /** (The following options are optional.) */
    horizontalOption: {
      hasDirectionWhenHorizontal: true,
      lineItemCount: 4,
    },
  });
</script>

横スクロールレイアウトの設定オプション