開発チームが連携を適用する際に参照するガイドです。管理画面の運用には必要ありません。

カートに追加: Shopify

Shopify プラットフォームのショートフォームプレーヤーの基本

Shopify プラットフォームを使う導入企業の場合、この内容を指定すると、ショートフォームプレーヤーでカート追加機能を使えます。

const config = {
  accessKey: 'CUSTOMER_ACCESS_KEY',
  platform: 'SHOPIFY', // add to cart を使う場合はプラットフォームを明示
};

cloud.shoplive.initShortform(config);

この内容を指定すると、ショートフォームプレーヤーで商品シートを開き、その場でオプションと数量を設定してカートに追加できます。

また、ショートフォームプレーヤーからカートに入っている商品の一覧を確認できます。

カートページのリンクを別途指定

const config = {
  accessKey: 'CUSTOMER_ACCESS_KEY',
  platform: 'SHOPIFY', // add to cart を使う場合はプラットフォームを明示
  shopify: {
    cartLink: 'YOUR_CUSTOM_LINK',
  },
};

cloud.shoplive.initShortform(config);

カートページのリンクを別途指定しない場合は、デフォルトで Shopify の /cart ページに移動します。

カート UI の更新リクエストの更新 id を指定

const config = {
  accessKey: 'CUSTOMER_ACCESS_KEY',
  platform: 'SHOPIFY', // add to cart を使う場合はプラットフォームを明示
  shopify: {
    cartLink: 'YOUR_CUSTOM_LINK',
    // it should be section id
    // e.g) if the tag's id is 'shopify-section-custom-bubble', the section id is 'custom-bubble'
    customUISections: ['custom-bubble'],
  },
};

cloud.shoplive.initShortform(config);

更新する UI を別途指定しない場合、リクエストする dom id は次のとおりです。

‘cart-drawer', 'cart-icon-bubble', 'cart-notification', 'cart-drawer-items', 'cart-drawer-footer'

オプション選択 UI で Shopify の価格に税金を加えた価格を表示したい場合

const config = {
  accessKey: 'CUSTOMER_ACCESS_KEY',
  platform: 'SHOPIFY', // add to cart を使う場合はプラットフォームを明示
  shopify: {
    tax: {
      displayTaxIncluded: true, // 価格に消費税を含めて表示するかどうか
      taxRate: 0.1, // 消費税率(例: 10% → 0.1)
    },
  },
};
cloud.shoplive.initShortform(config);

• 参考: ウォンと円の場合、税金加算後の価格の小数点以下は切り捨てられます。ドルの場合、税金加算後の価格の小数点第 3 位は切り捨てられます。