【MR.POINT】商品ページに付与予定ポイントを表示する

MR.POINTでは、商品ページに特定の形式のタグを貼り付けるだけで、その商品が購入された際に付与される予定のポイントを表示させることが可能です。付与予定ポイントを表示されたい場合は、以下の手順にそって対応を進めてください。

商品ページに以下のタグを設置

商品ページのテンプレートに以下のコードを記載してください。「付与予定ポイント」や「pt」といった文言は自由に変更いただいて問題ございません。

<div
  data-mrpoint-award-point
  data-variant-id="{{ product.selected_or_first_available_variant.id }}"
>
  付与予定ポイント<span data-point-value></span>pt
</div>

商品ページのテンプレートは、Dawnの場合だと、セクション配下にあるmain-product.liquidが対象です。

上記のようにタグを追加いただければ、以下のように付与予定ポイントが表示されます。

バリエーション変更時に付与予定ポイントを更新する場合（開発者向け）

バリエーションごとに価格が変わる場合は、バリエーション切り替え時に、以下のカスタムイベントを設定することで、付与予定ポイントを更新することが可能です。

※高度な設定で、エラーが発生すると商品ページが適切に動作しなくなる可能性がございます。もし実施される場合は、Javascriptに知見のある開発者に依頼されることをお勧めします。

document.dispatchEvent(new CustomEvent("mrpoint:update-award-point", {
  detail: {
    variantId: {{ variant.id }},
  }
}));

以下がDawn(ver6.0.2)の場合の追加例です。

class VariantSelects extends HTMLElement {
  constructor() {
    super();
    this.addEventListener('change', this.onVariantChange);
  }

  onVariantChange() {
    this.updateOptions();
    this.updateMasterId();
    this.toggleAddButton(true, '', false);
    this.updatePickupAvailability();
    this.removeErrorMessage();
    this.updateAwardPoint();

  ~~ 省略 ~~

  updateAwardPoint() {
    document.dispatchEvent(new CustomEvent("mrpoint:update-award-point", {
      detail: {
        variantId: this.currentVariant.id,
      }
    }));
  }
}

上記のようなカスタムイベントを追加いただければ、バリエーション切り替え時に付与ポイントが更新されます。

上記タグを設置しても動作しない場合

上記タグを設置しても付与予定ポイントが表示されない場合、以下をご確認ください。

• MR.POINTをインストールしているか
• アプリの設定が有効になっているか

また、独自でカスタマイズを入れている場合、上記タグを設置しても付与予定ポイントが表示されない場合がございます。その場合はカスタマイズした内容を記載の上、こちらからお問合せください。