Configure Checkout Step Properties...

TL;DR Opening

This article outlines how to configure checkout step properties in SuiteCommerce, enhancing the user experience by managing navigation elements and button functionalities effectively.

What Properties Are Available for Configuration?

When configuring each checkout step, various properties can be set in the relevant Checkout Steps configuration file. Here’s a detailed breakdown of each property and its function:

Property Name	Type	Description
`name`	string	The literal name displayed in the breadcrumb for the step.
`getName`	function	A function to output the dynamic name for the step. Defaults to the `name` property if not set.
`url`	string	The unique URL for the step; required for configuration.
`continueButtonLabel`	string	The label for the Continue button; defaults to "Continue" if not specified.
`hideBackButton`	boolean	If true, the Back button is hidden for this step; defaults to false.
`hideContinueButton`	boolean	If true, the Continue button is hidden for this step; defaults to false.
`hideSecondContinueButtonOnPhone`	boolean	If true, hides the second Continue button on smartphones; defaults to false.
`hideSummaryItems`	boolean	If true, the cart summary's items are hidden on this step; defaults to false.
`hideBreadcrumb`	boolean	If true, the breadcrumb is hidden on this step; defaults to false.
`headerView`	string	Defines the header for the step; uses a simplified version if not set.
`footerView`	string	Defines the footer for the step; uses a simplified version if not set.
`bottomMessage`	string	Custom message displayed at the bottom of the step; defaults to no message.
`isActive`	function	Custom function to determine if the step is active (visible). Defaults to true.
`save`	function	Custom function to handle the saving action of the configuration.
`present`	function	Custom function to perform actions at the step, such as triggering tracking.
`modules`	array	Contains modules used for the checkout step.

Best Practices

Incorporating the right properties effectively can significantly enhance the user's journey through the checkout process. Here are some best practices:

Ensure URL Uniqueness: Always assign unique URLs to each step to avoid conflicts in navigation.
Dynamic Naming: Utilize the getName function to create responsive names based on user actions or statuses.
Minimize Button Clutter: Use hideContinueButton and hideSecondContinueButtonOnPhone to eliminate unnecessary buttons, helping users focus on single actions.
Utilize Active States: Implement the isActive function to manage visibility based on conditions in your application logic.
Custom Messaging: Leverage bottomMessage to display important information to users at key points in the checkout process.

By carefully setting these properties, developers can maximize efficiency and improve user satisfaction throughout the checkout experience.

Who This Affects

This content is primarily relevant for:

Developers: who are customizing the SuiteCommerce checkout experience.
Site Administrators: responsible for maintaining and configuring ecommerce solutions.

Key Takeaways

Configure specific properties to enhance the user experience during checkout.
Ensure uniqueness of URLs and manage the visibility of buttons to reduce clutter.
Utilize custom functions to guide the active state and messaging effectively during the checkout process.

Frequently Asked Questions (4)

Can I hide the breadcrumb for a specific checkout step in SuiteCommerce?

Yes, you can hide the breadcrumb for a specific checkout step by setting the `hideBreadcrumb` property to true in the Checkout Steps configuration file.

How can I dynamically change the name displayed in the checkout step breadcrumb?

To dynamically change the breadcrumb name, use the `getName` function property. If not set, it defaults to the `name` property.

Is it possible to hide the second continue button on smartphones only?

Yes, you can hide the second continue button specifically on smartphones by setting the `hideSecondContinueButtonOnPhone` property to true.

What function can be used to determine if a checkout step is active?

The `isActive` function can be used to determine if a checkout step is active. This allows for conditional visibility based on your application logic.

Configure Checkout Step Properties in SuiteCommerce