Extra Checkout Steps

Include extra steps (or exclude existing ones) to your checkout journey

Some stores prefer a single-page checkout, others a multi-step. The reality is that there is no one-size fits all. You should use what is best for your store.

With Ollie Shop you can configure your store to fit your needs. For example if you want to upsell your customer with a Warranty, instead of polluting the Cart page with more information you can create a dedicated step for the user to make the decision.

The Ollie Shop Default template has four steps:

• Contact
• Shipping
• Address (this is a step that only appears for the first time buyer or when an address is incomplete)
• Payment

Steps

A Step is composed of a few properties

id	string	Id of the step
name	string	Name of the step
page	string | undefined Note : If it is a default page, you don’t need to specify a page.	The property for setting a component to replace/insert on this page.
summary	string | undefined Note : If it is a default page, you don’t need to specify a summary.	The property for setting a component to replace/insert on this summary.
displayCondition	smart | required | byCondition	smart by default. When it is smart if the step has all the data selected, you will skip this step and be automatically redirected to the next step. If it’s required this step will always be displayed. If it’s byCondition the step will be displayed according to a condition defined in the step page.
displayMode	Default | Full	Default the new step will include two sections, left side for the custom component and right side for the Cart Summary. Full is for a blank page.

Default steps setup

"steps":[
   {
        "id": "contact",
        "name": "Contact",
		"page": null,
        "summary": "Contact",
        "displayCondition": "smart"
    },
    {
        "id": "shipping",
        "name": "Shipping",
		"page": "Shipping",
        "summary": "Shipping",   
        "displayCondition": "smart"
    },
    {
        "id": "address",
        "name": "Address",
        "page": "Address",
        "displayCondition": "byCondition"
    },
    {
        "id": "payment",
        "name": "Payment",
        "page": "Payment",
        "displayCondition": "smart"
    }
]

Adding a custom step

A Step must always include a page. In a new blank page there are no slots, so a way to think about a page is that it’s where you’ll upload a single component.

A page is a custom component

To make this easier, let’s use an example of an extra step where the user will be able to select a Warranty plan for one of the items in their cart.After clicking on “Proceed to Checkout” a new step will appear where they will be offered a warranty plan and can either select an option or move forward without it.

In order to include an extra step you’ll need to define all the steps as well as include the new custom step

[
   {
        "id": "contact",
        "name": "Contact",
        "summary": "Contact",
        "page": null,
        "displayCondition": "smart"
    },
    {
        "id": "warranty", // this step is a custom step
        "name": "Warranty",
        "page": "page-warranty",
        "displayMode": "Full"
    },
    {
        "id": "shipping",
        "name": "Shipping",
        "summary": "Shipping",
        "page": "Shipping",
        "displayCondition": "smart"
    },
    {
        "id": "address",
        "name": "Address",
        "page": "Address",
        "displayCondition": "byCondition"
    },
    {
        "id": "payment",
        "name": "Payment",
        "page": "Payment",
        "displayCondition": "smart"
    }
]

You can add a custom page to a native step, simply change the page and we’ll load your page.

You’ll make this configuration in a version via the admin

Display Condition

    {
        ...
        "displayCondition": "smart" | "required" | "byCondition" 
		...
    }

Smart

When you add a new step, this step will be "smart" by default. This means that if all of the required actions in a step have been done, the user will jump to the next step.

Required

To make a step always appear, change the displayCondition of any step to "required"

byCondition

The step will be displayed according to a condition defined in the page.

Display Condition and Custom Pages

When creating a new step, you’ll also have to create a new page. It is likely that your page will contain some fields, and depending if the user has taken a specific action in this page, you’d like the user to always have to go through this page until the action is completed.

To improve the user experience and skip steps that don’t require changes, you need to pass the information to the Ollie cart. To do this, you need to create a function and add a property, as shown in the example below.

ollieExtension: {
    checkoutSteps: {
        warranty: {
            isCompleted: true,
        }
    }
}

In the next example, we validate if we have a product with a “warranty.” If we do, the page will be marked as incomplete so the user can see this page in the checkout flow.
Function example:

index.js

import { CustomFunction } from "@ollieshop/sdk/functions";

type CustomOrderForm = OrderForm & {
  dataSettings?: Record<string, any>;
  url?: string;
  error?: string;
}

export const handler: CustomFunction<CustomOrderForm> = async (event, context) => {
  try {

    const categoryWarranty = "6"
    const hasProductWithWarranty = event.items.some(item => item.productCategoryIds.includes(`/${categoryWarranty}/`));

    return {
      ...event,
      ollieExtension: {
        checkoutSteps: {
          warranty: {
            isCompleted: !hasProductWithWarranty,
          }
        }
      },
    };
  } catch (error) {
    if (error instanceof Error) {
      event.error = error.message || "Erro ao obter customerContacts";
    }

    return event;
  }
};

Use versions to have different journeys at the same time