現在、Spartacus 3.2.2 と SAP Commerce 2011 と B2C アクセラレータを使用するプロジェクトに取り組んでいます。このプロジェクトは、従来のショッピング Web サイトには従いませんが、独自の目的のために Spartacus と SAP Commerce の機能を活用しています。Angular コンポーネントが読み込まれると、配送先住所、支払いの詳細、および配送モードがカートで設定される単一ページのゲスト チェックアウト フローがあります。
コンテキストは、ユーザーが電子メールなどの情報やその他の詳細を入力して [次へ] をクリックするフォームを持っていると仮定できるようにすることです。サンプル製品が追加されたカートが生成され、電子メールが関連付けられます。ユーザーは、送信したい情報を確認するページにリダイレクトされます。このページは、単一ページのゲスト チェックアウトです。このページが読み込まれると、支払いの詳細、配送先住所、配送モードが舞台裏で設定され、ユーザーは何も気付かない. 送信をクリックすると、バックグラウンドで注文が作成されます。フロントエンドは、確認ページに到達したときに別のユーザーを表示します。
問題は、ユーザーが情報を確認した後に送信すると、注文呼び出しが失敗し、「配信モードが設定されていません」というメッセージが表示され、矛盾していることです。
以下は、単一ページのゲスト チェックアウトに使用するサンプル コードです。
@Component({
selector: "review-details",
templateUrl: "./review-details.component.html",
host: { class: "template-component" },
})
export class ReviewDetailsComponent implements OnInit, OnDestroy, AfterViewInit {
hasSetAddress: BehaviorSubject<boolean> = new BehaviorSubject<boolean>(false);
hasSetDeliveryMode: BehaviorSubject<boolean> = new BehaviorSubject<boolean>(false);
hasSetPaymentDetails: BehaviorSubject<boolean> = new BehaviorSubject<boolean>(false);
subscriptions:any = [];
ngOnInit() {
// Just an example address. A proper valid dummy address and region is used for our project.
let address: Address = {
firstName: "No Name",
lastName: "No Name",
email: "NoName@noname.com",
line1: "XYZ Mason Street",
line2: "",
town: "yolotown",
postalCode: "12345",
country: { isocode: "US" },
defaultAddress: false,
region: {
countryIso: "US",
isocode: "US-CA",
isocodeShort: "CA",
name: "California",
},
titleCode: "",
};
let paymentDetails: PaymentDetails = {
cardNumber: "4111111111111111",
expiryMonth: "12",
expiryYear: "2025",
billingAddress: address,
cvn: "123",
accountHolderName: "No Name",
cardType: {
code: "visa",
name: "Visa",
},
defaultPayment: false,
saved: false,
};
}
this.subscriptions = this.subscriptions.concat(
{
key: 'setAddress',
value: this.checkoutDeliveryService.getDeliveryAddress().subscribe((addr: Address) => {
if (_isNil(addr) || (!_isNil(addr) && _isEmpty(addr))) {
this.checkoutDeliveryService.createAndSetAddress(address);
} else {
this.hasSetAddress.next(true);
}
})
},
{
key: 'setDeliveryModeStatus',
value: this.checkoutDeliveryService.getSupportedDeliveryModes().pipe(
withLatestFrom(
this.checkoutDeliveryService
.getSelectedDeliveryMode()
.pipe(map((deliveryMode: DeliveryMode) => deliveryMode && deliveryMode.code ? deliveryMode.code : null))
)
).subscribe(([deliveryModes, code]: [DeliveryMode[], string]) => {
if (_isNil(code)) {
if (!_isNil(deliveryModes) && !_isEmpty(deliveryModes)) {
code = this.checkoutConfigService.getPreferredDeliveryMode(deliveryModes);
if (code) {
this.checkoutDeliveryService.setDeliveryMode(code);
}
}
} else {
this.hasSetDeliveryMode.next(true);
}
})
},
{
key: 'setPaymentDetails',
value: this.checkoutPaymentService.getPaymentDetails().subscribe((paymentInfo: PaymentDetails) => {
if (_isNil(paymentInfo) || (!_isNil(paymentInfo) && _isEmpty(paymentInfo))) {
this.checkoutPaymentService.createPaymentDetails(paymentDetails);
} else {
this.checkoutPaymentService.paymentProcessSuccess();
this.hasSetPaymentDetails.next(true);
}
})
},
{
key: 'placeOrder',
value: this.checkoutService
.getOrderDetails()
.pipe(filter(order => Object.keys(order).length !== 0))
.subscribe(() => {
this.routingService.go({ cxRoute: 'orderConfirmation' });
})
}
)
}
質問は次のとおりです。
一貫性がない場合、この「配信モードが設定されていません」の根本的な原因を見つけるにはどうすればよいでしょうか? より詳細な説明として、支払い、住所、配送モードの要求呼び出しは正しく行われていますが、要求が行われた後に最終的なカート オブジェクトが返されたときに、配送コストが設定されていないことがあります。
発生する可能性のある競合状態を排除するためにコードを最適化する方法はありますか? 支払いの詳細、住所、および配送モードを追加するすべての操作が同じカートに対して非同期に設定されていることを考慮してください。
どんな助けでも大歓迎です。最適化のアイデアも大歓迎です。
ありがとうございました
参考文献: