カスタム Commerce コンポーネントからのカート件数の更新

Spring '21 リリースにより、ユーザは Lightning Message Service (LMS) チャネルを使用して、Commerce カートの状態の変更に関する通知を一律に公開および登録できます。LMS チャネル「lightning__commerce_cartChanged」を使用すると、ユーザはカートの変更時にすべての標準 Commerce コンポーネントに通知できます。この通知により、関連するすべてのコンポーネントがトリガされ、それに合わせてデータが更新されます。LMS チャネルは、カスタムコンポーネントと OOTB のインテグレーションの推奨される長期的なソリューションです。

「cartchanged」DOM イベントは、今後のリリース (セーフハーバー) でサポートされなくなります。

詳細や詳しいガイダンスは、Lightning Message Service ドキュメントを参照してください。

 

LMS チャネルを使用して、カートの状況の変更時に他のコンポーネントに通知する簡単な例:

import { LightningElement, wire } from "lwc";
import {
 publish,
 MessageContext 
} from "lightning/messageService";

import cartChanged from "@salesforce/messageChannel/lightning__commerce_cartChanged";

export default class CartUpdatingComponent extends LightningElement {
 @wire(MessageContext) 
 messageContext;


 /**
  * Handles a user button click to add a product to their cart.
  */ 
 addToCart(event) { 
   addToCartAsync(...)
      .then(() => {
        publish(this.messageContext, cartChanged);
      }); 
 } 
}

以前に提供された暫定的な回避策 (下記) では、「cartchanged」イベントを使用して更新をトリガしていました。LMS チャネル「lightning__commerce_cartChanged」ソリューション (上記) は、「cartchanged」の代わりに使用されます。

this.dispatchEvent(new CustomEvent("cartchanged", {
  bubbles: true, 
  composed: true
}));

カートのバッジの Lightning Web Component (LWC) での更新イベントのトリガは、すでにサポートされています。そのため、(このスニペットで行われている) イベントの起動により、目的の更新がトリガされます。

ストアでは、ブラウザのデバッガコンソールから直接コードスニペットを実行できます。カート情報を取得するためのネットワークコールがコンソールに表示されていれば、スニペットは機能しています。

今後 (セーフハーバーの適用)、Salesforce は、ユーザがこのような更新をネイティブにトリガできるように作業を進めていきます。

コード例:

/**
* Handles a user button click to add a product to their cart.
*/ 
    addtoCart() {

        addToCartAsync(...)
            .then(result => {
                this.dispatchEvent(new CustomEvent("cartchanged", {
                    bubbles: true, 
                    composed: true
                }));
            });
    }