Add BOPIS to check out
CREATED FOR:
- Beginner
- Developer
Learn how to add the necessary components to the Edge Delivery Services checkout that accommodates a buy online and pickup in store otherwise known as BOPIS.
What you’ll learn
Learn how to use Adobe Commerce cart from Edge Delivery Services to provide BOPIS functionality.
Who is this video for?
- E-commerce Businesses looking to enhance the shopping cart with buy online and pickup in store.
- Developers who need to learn how to implement BOPIS.
Video content
- Update content fragments.
- Add UI elements for delivery and in-store pickup.
- Toggle between delivery and in-store pickup
- Fetching pickup locations

Transcript
When we consider the Adobe Commerce experience, these personas are used to help explain the story. You will hear one or more of them referenced. Today, we’re going to add a new feature to our checkout flow, the Buy Online, Pickup and Store, or Bopis for short. This feature is important for the Acme brand, which operates multiple physical stores. Their e-commerce leader, Emma, wants to create a seamless experience for her customers by offering them the ability to pick up their online orders in-store. To make this vision a reality, developer Ali and myself will be working together to implement this feature step-by-step. Ali has realized that the great thing about the checkout page for Edge Delivery Services is that each section is an independent container, which gives us a lot of flexibility. And thanks to that, Ali can take these components, put them together, and create exactly the flow that we need. Let’s jump right in and see how it’s done. Developer Ali has already started creating a new checkout block to support this new functionality. However, as you can see, there’s no Bopis selector, so we need to guide him through the necessary steps. So, we’re going to start off, and we need to make some modifications in the UI, and we’re going to introduce a new element that will allow customers to select between the delivery and the new Buy Online Pickup in Store. Our first step is to modify the Checkout Content fragment, and you’ll notice there that I’ve included some comments for each step in the code. And if you can see here, I’m on step one, and this allows us to easily navigate between them. So, now we’re going to start adding a new section for the delivery method, which includes buttons for toggling between delivery and in-store pickup.
So, in here, this is where I’ve included some elements for the buttons, and a placeholder that will later display the pickup locations. Also adding a few new selectors, allowing us to use them later to render the required components and content. And now, these elements are set up, and we’re ready to create the basic UI structure that we need as a first step. This next step is to display the two buttons, one for the delivery and the other for the in-store pickup. So, we’re going to jump into the code. And here we have the references, and for this section, we are going to be rendering two toggle buttons as drop-in UI components, and we’re linking them to the actions which we’ll define later. This allows customers to toggle between these two options.
Our next step, we’re going to help customers toggle between delivery and in-store pickup when we want to show or hide those respective forms. So, let’s switch back to the code. And this is managed by the toggle function, which updates the button state and hides or shows the appropriate actions. We also ensure that the default selected option, this one here, is set to delivery. And this, so that when the first time user gets to this page, this option is already selected. And this default selected option can be changed later. Now it’s time to incorporate the pickup locations into the flow. So, let’s switch back to the code, and we’re going to go to step number four. And so, this is where developer Ollie has seen in the API documentation that there’s a query that fetches the available pickup locations using GraphQL. So, we’re going to uncomment that, this little sample code. And now that it’s done, we’ve created a function to fetch the locations that we’ll call in the next step. This data will allow customers to choose the store that’s most convenient for them.
Our next step, after retrieving locations, is to display them to the customers. So, we’re going to go back to the code, and we need to render a list. And this is where each pickup location will be displayed as a radio button. And this allows customers to select their preferred store. So, we’re going to go ahead and do this, and we’re going to take a look at the result in the browser after applying these changes.
And now, you can see there’s this new delivery method, and this new section that we just created. So, with this set up, our customers can now easily toggle between delivery and in-store pickup. And when selecting the in-store pickup option, they can now select their preferred pickup location, and then continue through the checkout. So, that’s it for this Boppits feature and the integration. And we’ve now enabled customers to decide how they would like to receive their orders in an intuitive and user-friendly way. And the best part is, thanks to the modular design of our checkout page, developer Ollie and myself can easily extend or adjust the flow as needed. And now, we can just wait for our next round of tasks.
Additional Documentation
Commerce
- Commerce Tutorials
- Adobe Commerce Cloud
- Getting Started
- Global Reference Architecture
- Help and support
- Edge Delivery Services
- Webinars and events
- GraphQL and REST
- Adobe Developer App Builder
- Store Administration
- Customer Management
- Catalog Management
- Content Management
- Marketing Tools
- Orders and Fulfillment
- B2B for Adobe Commerce
- Tools and External services
- Commerce Intelligence
- Commerce Upgrades
- Back-end Development
- Native Front-end Luma Development
- Headless Architecture