Adjust transactional flow for checkout
CREATED FOR:
- Beginner
- Developer
Learn how to adjust the transactional flow for checkout using Edge Delivery Services cart drop-in.
What you’ll learn
Gain an understanding on how to use Adobe Commerce cart drop in and adjust the transactional flow to show customers a new set of features by changing a few lines of code. Also learn how to convert these changes to be managed from Sharepoint to conduct AB testing.
Who is this video for?
- Developers and store owners learning about Edge Delivery Services with a need to change some cart drop-in elements.
- Marketers and others who are interested in using SharePoint to manage features and AB testing.
Video content
- Quantity Selector Update. Update the product quantity selector from an incrementor to a dropdown, customized to display values from 1 to 20.
- Discount Display. Implemented features to show discount percentages and dollar amount discounts for sale items in the cart.
- A/B Testing Flexibility. Enabled configurations through SharePoint, empowering marketers to control and test these features.
- Enhanced Marketing Control. Easily manage and test configurations, improving user experience and marketing effectiveness.

Transcript
When we consider the Adobe eCommerce experience, these personas are used and they help tell the story. You will hear one or more of them referenced. In this tutorial, we’re going to help front-end developers who are supporting storefronts implemented with Edge Delivery Services. We’ll show you how to customize and extend what is offered out of the box to fit brand and business requirements. We’ll help you explore how to make these changes in the product line items in the cart. And this will allow marketers to localize elements and run A-B testing for different aspects of its behavior. So, developer Ollie and I, we work for the Acme brand, and we just got our first project update to change the transactional flow for Edge Delivery Services. We have a request from the UX team, and they want to add a product quantity selector to be used instead of the dropdown that comes out of the box. The good news is, is we checked the developer documentation, and it can be implemented with just a simple change in the code by enabling the corresponding configurations provided in the cart drop-in.
So, to start, we’re going to open up the code, and we’re going to see what the cart summary provides out of the box. And we’re going to review that code, and the first thing we’ll do is we’ll check the default setup. And we’ll notice that it uses the quantity stepper, and we need to switch that to using a dropdown. So, let’s dive into the code and see what’s happening. So, let’s navigate to the commerce cart block, and we’re going to find the cart summary list container. This is what’s currently rendered on the page. And it appears that just with a simple adjustment, we just need to make a change here and set it to dropdown. And now we’ve done that. We have another task related to this section, and it’s to customize the dropdown values according to the UX markup. And what they want is to display values from one to a maximum of 20. So, let’s go ahead and get started.
We’re going to go ahead and generate a little bit of code. And this is going to create values from one to 20. And next, we need to pass this down to the options presented in another list found on the customer list container. So, I’m going to go ahead and get that and save it. And let’s go ahead and take a look at the results. And there I have it. Just like that, with a few lines of code, we’re able to make a switch from the default stepper to a dropdown, fully customizing the quantity selector as specified in the UX design. So, now that we’ve done that, we can tackle the next request from the team. And this is to help customers realize what a good deal they’re getting from time to time. So, the Acme brand, they run various deals and promotions throughout the year. And, you know, that type of stuff obviously helps drive sales. So, our merchandiser, Jessica, she wants to show the percentage discount for each item in the cart, making sure that the discounts are clearly visible to customers. And this will also help customers quickly realize the value for each deal. Although this is not what happens currently out of the box, we did review the documentation, and it looks like it can be done with just a few lines of changes in the configuration provided in the cart drop-in. So, let’s take a look at the requested changes. And so, for this, we want to show the discount amount. So, if you look here in my cart at the Savvy shoulder tote, it’s a discounted item. And you’ll notice aside from the new drop-in and the quantity selector, everything else is what happens out of the box. So, now we need to show the discount for each sale item. And as mentioned before, this is the Commerce Cart Summary Container, and we need to open up our code base, and we’re going to navigate to the Commerce Cart block and find the Cart Summary Container. And we’re going to enable the Show Discount Configuration setting and make it to true. And now that it’s done, if we look at the results in our live cart, you can see with just one simple line of code, we’re able to display the discount percentage just as requested. So, now our merchandiser, Jessica, asks us to implement showing the dollar amount per discount for each line item in the cart. This way, they can do some A-B testing, and they can test how these two options are working. So, to do this, we’re going to show the dollar amount is pretty much exactly what we just did. So, we’re going to go ahead and look at the code. And once it’s popped open, we’re going to do a little bit of code cleanup here. I’m going to go ahead and comment out the discount percentage that we just added, and we’re going to enable another configuration to show the savings. And then we’re going to set that to true. And now that we’re done, we could take a look at the change, and the savings amount is displayed with just one simple line of code. But why don’t we just take this one step further? We can make these configurations a bit more flexible, and this will allow our merchandiser to turn them on and off in SharePoint for A-B testing.
What we’re going to do is we’re going to show you how to achieve this. So, let’s open up the code base, and we’re going to jump in, and we’re going to comment out our changes that we just made. This way, we can reset everything back, make sure that the UI is back to its default state. So, now that it’s done, we can go back and check to make sure that it’s there, and everything is back to being, and it looks good. So, our first step is to add the show discount property. And we’re going to do this in the configuration list. So, for this, we need the property name, and this is what’s going to be used in SharePoint. So, we want to make sure that we note it, and we use it properly. So, let’s remember what we’ve just chosen. And we’re going to change it to show discount. That’s a good name. So, we’re going to set it to false, because we want the default action to be not displayed. And then after that, we’re going to add the show discount configuration to the cart summary list container. But instead of, for this time, instead of checking it to true, we’re going to actually see if it’s equal to true. And that way, now that we’re done, we can save it and go back to the page. And as expected, the percentage is not being displayed, because the default was false. So, now let’s show you how to edit this in SharePoint. Our first task is we need to insert a new row into the e-commerce cart. And we’re going to insert this new configuration that we just made. And this will allow us the complete control. So, we’re going to do the show availability for show discount. And this way, we can make sure we use the same name that we used in our code, make sure it’s consistent, and everything matches. So, so far, everything looks great. So, we’re going to set this to true here, and we want to enable it and show it on the page. So, let’s go ahead and do that now. And we’re going to open up the page and do a quick preview. And let’s refresh the cart. And yes, we do see the discount percentage being displayed. Now, this is configurable in SharePoint, which makes it very, very awesome. So, our next task, we want to enable the show dollar amount. And it’s basically just like we did for the percentage. The process is very similar. And then once we’ve done that, this will allow marketers the complete control over the configurations for A-B testing. And we’ve done all of our tasks, and now we can just wait for our next round of updates.
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