Use product attributes for cart items
CREATED FOR:
- Beginner
- Developer
Learn how to customize and extend the Adobe Commerce shopping cart. In this demonstration, there are three updates. The demo begins by displaying delivery timelines for back-order products, showing returnable and final sale notices, and applying a 25% discount for carts with a subtotal of $75 or more. By leveraging product attributes and slots, adding these features into the shopping cart enhances the overall user experience.
What you’ll learn
Learn 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?
- E-commerce Businesses looking to enhance the shopping cart with delivery timelines, sale information, and discounts.
- Developers who need to learn how to implement these customizations for cart items.
- Merchandisers to understand what options are available using native features to enhance the customer experience.
Video content
- Customization of product detail and display customized delivery timelines for back-order products in the shopping cart.
- Returnable and Final Sale Information examples using out of the box functionality for the cart items.
- Coupon discount displayed using cart rules and footer slots to display this information effectively.
- Using product attributes and Slots to extend and customize the shopping cart functionality, ensuring that all project requirements are met.

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. I’m going to show you how it’s possible to customize and extend the shopping cart. Each line item with the customized product attributes and applied discounts in the cart can be done as extensions to the software. So, developer Ali and I both work for the Acme brand, and we have a few project requirements that involved adding some custom information to each product in the shopping cart. The first project requirement is that we need to show a delivery timeline for each of the products that would happen to be on backorder. And our merchandiser, Emma, wants to show the estimated shipping times for these backordered products in the cart to provide transparency on delivery times. We have another project requirement that would show the returnable and final sale information to cart items to help prevent customer dissatisfaction. And once again, our merchandiser, Emma, has set up a few products on the back end, and this particular one is for the customized delivery timelines. She used product attributes, which is a great way to accomplish this task. So, we’re going to look at the developer experience now. And first, we’re going to show you that there’s a couple of products that have already had some delivery timelines added to the back end, and we went ahead and added them to our shopping cart. And those two products are great. They’re already on sale, and we can tell by the default configurations that they don’t currently show the delivery timelines or those final sale notifications right out of the box. However, we did find in the documentation a few ways to accomplish this. So, we’re going to look here, and we’re going to use something called cart slots. And in the documentation, I can see that the cart summary list has a couple of things called slots, and that is what we’re going to use to extend and show this information. So, what I want to do is I want to use our product attributes, and we’re going to look at the documentation, and this gives us a little bit of a code sample for exactly how to do this using slots. So, we’re going to copy that, and we’re going to head back to our code base, and we’re going to go to the section for the commerce block. And we’re going to go to the shopping cart, and this is where it’s going to be rendered. So, we’re going to look here at the cart in the container. Okay, that’s good. And this is where it’s rendered on the page. This is the section that we’re going to adjust. This is the cart summary list containers. This renders all the customizable options here, and I can add a slot. And doing this, I’m using the following example in the documentation. Okay, there we go. Great. I can see that the product attributes is sending over a context, and this is all the data for the cart item. So, what I want to do is I want to find the product attributes from here. So, I’m going to iterate over it, and I can see here that it’s looking for the attribute fashion material, but that’s not exactly what I need. So, I’m going to make a change here and change it to delivery timelines, and everything looks good. And now, as you can see, we’re able to finally render the final sale and the customized delivery timelines directly from the product attributes. Just like that, we’re able to make a few lines of code, demonstrating that we can add customized product attributes and make it look like the designs. So, we’re going to head back to the Acme brand project requirements, and we’re going to quickly review. We can see here that we were able to render the customized product attributes after reviewing the documentation. And now I’m left with my last project requirement, which is to add a coupon code, a discount for 25% off of carts that have a $75 or more subtotal.
In order to do this, we’re going to be using cart rules, and this is a great approach for this type of task. So, we’re going to look at the requirements once again, and we’re going to head back to the developer experience. And I already have a price rule already set up that gives us a discount for line items in the cart. And when you look at the front end, I can see that it’s not visible, at least not there by default. When we look at the documentation once again, in order to do this, we’re going to put this in the footer of each cart item. And luckily for me, there’s some documentation on how to do that. So, there’s a thing called footer slots, and we can use this for our extension. So, we’re going to go ahead and we’re going to use that footer slot for this task. And this enables the custom information to be displayed. So, once again, if we look at the code, it’s going to be passing in the context. And this is the same context information that we just talked about a few minutes ago, the product attributes. So, this is where I can easily swap out that information that I need for this layout. And if we take a look and I add my coupon code and we apply it to the cart, it now renders the coupon information for each product in the cart right within the cart items footer. So, this is great. This has shown that I can use slots to customize and extend product information in the cart. And now I’m done. I’ve completed all my tasks, and I can wait for my next set of requirements in the next phase.
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