Adding custom banners to checkout
Previously, you created a checkout extension that renders some text in the checkout flow. Now you want to render the text as a banner.
In this tutorial, you'll use the
Checkout::Dynamic::Render extension point and checkout UI components to build the banner. You'll use configuration fields, so that merchants can configure the banner's title, text, and status level. You'll also provide support for static extension points. Merchants can use the checkout editor to render the extension in one of the supported locations in checkout.
TODO: A gif/visual of merchants setting the content for it within the checkout editor. It will start with an image or gif of what's being built, to orient Partners to what they can expect to end up with at the end of the tutorial.
What you'll learnAnchor link to section titled "What you'll learn"
In this tutorial, you'll learn how to do the following tasks:
Set up a banner to display to customers
Set up configuration fields that enable merchants to control the banner content
Support multiple extension points that enable merchants to choose where to render the banner
RequirementsAnchor link to section titled "Requirements"
- You've completed the getting started guide.
Sample CodeAnchor link to section titled "Sample Code"
The sample code imports the
Banner component to build the UI. The code uses configuration fields to provide the content that's rendered in the
Banner component. The code supports multiple extension points, including
You can copy and paste the following code into your
index file and add a few example values to get the extension to render in the browser. The rest of the tutorial walks through this sample code step-by-step.
Step 1: Set up the extension pointsAnchor link to section titled "Step 1: Set up the extension points"
Setting up the the extension points enables merchants to select which extension point they want to use and where it renders in checkout. You can place dynamic and static extension points in any location that's supported for the extension point type.
Set up the following extension points:
Checkout::Dynamic::Render: A dynamic extension point that merchants can place in any supported location.
Checkout::DeliveryAddress::RenderBefore: A static extension point that, in this example, renders above the shipping address form.
Set the extension points in the
Step 2: Set up configuration fieldsAnchor link to section titled "Step 2: Set up configuration fields"
Now that you've set up extension points, you can set configuration fields in the
extension.config.yml so that merchants can configure the banner. Configuration fields display in the checkout editor.
In this example, you'll set the following configuration fields:
title: The title of the banner.
description: The text in the body of the banner.
status: The status of the banner, which sets the banner's color and icon. You can set
statusto one of
TODO: Show how the fields are set up within
Step 3: Render the componentsAnchor link to section titled "Step 3: Render the components"
In this step, you'll use the
Banner component to render the banner with the content from the configuration fields that you set up.