Breadcrumbs enhance navigation by providing users with a clear path through the checkout process. In SuiteCommerce Advanced (SCA), customizing breadcrumbs in the checkout pages ensures a seamless user experience. This article guides you through implementing custom breadcrumbs for the checkout process.
1. Understanding Default Breadcrumbs in SCA
SuiteCommerce Advanced uses the getBreadcrumbPages function to generate breadcrumbs dynamically. The checkout pages are managed through the OrderWizardStep components, which define the steps in the order process (e.g., Shipping, Billing, Review).
2. Implementing Custom Breadcrumbs in Checkout Pages
To customize breadcrumbs in the checkout pages, we extend the OrderWizardStep.prototype.getContext method. The following code dynamically constructs breadcrumbs for each step of the checkout process.
if (SC.CONFIGURATION.get(‘uiEnhancement.checkout’)) {
_.extend(OrderWizardStep.prototype, {
getContext: _.wrap(OrderWizardStep.prototype.getContext, function (fn) {
try {
const context = fn.apply(this, _.toArray(arguments).slice(1));
let customBredcrum = [
{ name: “Home”, hashtag: “#”, touchpoint: “home” },
{ name: “Shopping Cart”, hashtag: “#cart”, touchpoint: “home” }
];
if (this.wizard.currentStep === “shipping/address”) {
customBredcrum.push({ name: “Shipping”, hashtag: “#shipping/address”, disabled: true, touchpoint: “checkout” });
}
if (this.wizard.currentStep === “shipping/packages”) {
customBredcrum.push({ name: “Shipping”, hashtag: “#shipping/address”, disabled: false, touchpoint: “checkout” });
customBredcrum.push({ name: “Delivery”, hashtag: “#shipping/packages”, disabled: false, touchpoint: “checkout” });
}
if (this.wizard.currentStep === “billing”) {
customBredcrum.push({ name: “Shipping”, hashtag: “#billing”, disabled: true, touchpoint: “checkout” });
customBredcrum.push({ name: “Delivery”, hashtag: “#billing”, disabled: true, touchpoint: “checkout” });
customBredcrum.push({ name: “Payment”, hashtag: “#billing”, disabled: true, touchpoint: “checkout” });
}
if (this.wizard.currentStep === “review”) {
customBredcrum.push({ name: “Shipping”, hashtag: “#review”, disabled: true, touchpoint: “checkout” });
customBredcrum.push({ name: “Delivery”, hashtag: “#review”, disabled: true, touchpoint: “checkout” });
customBredcrum.push({ name: “Payment”, hashtag: “#review”, disabled: true, touchpoint: “checkout” });
customBredcrum.push({ name: “Review”, hashtag: “#review”, disabled: true, touchpoint: “checkout” });
}
return {
…context,
customBredcrum
};
} catch (error) {
console.error(“ERROR”, error);
}
})
});
}
With this approach, the checkout process now has clear, dynamic breadcrumbs guiding users through different steps. This enhances usability and improves navigation within the SuiteCommerce Advanced checkout flow.