Custom steps to the checkout journey

An Ollie Shop template is composed of steps, such as Cart, Contact Information, Shipping Selection and Payment.

The steps are part of a version and they can be configured, rearranged, excluded or even a new step can be added.

{  
  "steps": [  
    {
      "id": "contact",
      "name": "Contact"
    },
    {
      "id": "shipping",
      "name": "Delivery"
    },
    {
      "id": "payment",
      "name": "Payment"
    }
  ],
}

Creating a custom Step

Merchants often want to include an extra step which the customer must complete before placing an order.

For example, a big share of the revenue of a white-goods ecommerce derives from the upselling of warranty. Similarly to how a furniture company offers the assembly of the product as an add-on.

Traditionally the UX of the purchase flow is centered in the cart page, forcing the merchant to include a lot of information in a compact area.

With Custom Steps you can now explore other ways to promote this type of experience. For example adding a new step between the cart step and the contact information step if the cart has a product that is eligible for Extended Warranty.

How to include a step in a version

Include the new step in the steps array of the version

{  
  "steps": [  
    {
      "id": "warranty",
      "name": "warranty"
    },
    {
      "id": "contact",
      "name": "Contact"
    },
    {
      "id": "shipping",
      "name": "Delivery"
    },
    {
      "id": "payment",
      "name": "Payment"
    }
  ],
}

Now you have defined that there will be an extra step immediately after the cart step (the cart step is not required to be defined in the array)

However, this step will be empty. We must define what content to be displayed in this new page.

Adding content to the new step

Considering that this entire new step is a customization, it will only have a single slot and we can match the custom component with a parameter page.

{  
  "steps": [  
    ...
    {
      "id": "warranty",
      "name": "warranty",
      "page": "page-warranty"
    },
    ...
  ],
}

Hiding a step

To hide a page, you can set this page as "empty" and add a summary to this empty step.

{  
  "steps": [  
    ...
    {
      "id": "contact",
      "name": "Contact",
      "page":"empty",
      "summary": "custom-summary"
    },
    ...
  ],
}

Properties of a Step

Display Condition

A key feature of the Ollie Shop checkout is that a user can place an order in few clicks. This is possible due to our templates automatically identifying that all necessary data has been filled and the user can directly proceed to the last step of the checkout journey. Thus preventing the user having to navigate through all the steps everytime it reaches the checkout.

There might be situations where the merchant might want to change this behavior and force the user to go through a step, such as the Extended Warranty example in the beginning of this article.

If you want, you can change the displayCondition on any step to "required" thus making the user always go though this step in the checkout journey.

When you add a new step, this step will be "smart" by default, but you can set it to "required" if this step is not completed.

{  
  "steps": [  
    ...
    {
      "id": "warranty",
      "name": "warranty",
      "page": "page-warranty",
      "displayCondition": "required"
    },
    ...
  ],
}

Forcing the completion of a step

However there are scenarios where you would like to display the extra step only in specific situations.

Using the white-goods example from before, the ideal scenario would be to display the Extended Warranty only once and then only again if there is a modification to the cart.

To improve the user experience and skip steps based on external factors, you need to pass this information to the Ollie Cart. This can be achieved through a custom function that will determine that a specific step has been completed

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

The example bellow 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 the extra step page in the checkout journey.

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 || "Error obtaining customerContacts";
    }

    return event;
  }
};

These features allow you to edit the flow by doing the following:

• Create new pages custom
  • Example: Add a new step warranty
  • Change the order of pages custom
• Create new summaries
  • Example: Improve the contact summary adding organization name
• Change a default page to a custom page
  • Example: Replace default contact page to a custom page
• Edit the default summary
  • Example: Replace default contact summary to a custom summary
• Hide a page
  • Example: I just need to show a summary of a step
• Change your display condition
  • Example: I can add a conditional to show an step

To see the configuration steps, you can check the version properties on Supabase. If your version doesn't have a property called "steps" the configuration is the default configuration.

Example of default configuration: