Back to North Commerce

Cart Item Attributes

This documentation is for creating pages, designs or layouts for the items in a customer cart. E.g: Cart drawer, cart list on checkout and can be added to any where on the front end of your website.

With North Commerce attributes you are essentially creating a template that can be used by the North Commerce system. This isn't your traditional query loop setup so feel free to add placeholder data to help you envison what your final design will look like

Adding Cart Item Images

  1. Add a Bricks Image element to your canvas.

  2. Add a placeholder image from your media library

    1. Style the placeholder image as you see fit

  3. In the content section of the image component scroll down until you see North Commerce Attributes

    1. Flow: Cart Items

    2. Name: image

    3. Value: Leave this blank

    4. Link: src

You should also add the cart image urls to srcset

Adding Cart Item Title (Product Name)

  1. Add a Bricks Heading or Basic Text element to your canvas.

  2. Add a placeholder text with one of your product names

    1. Style the placeholder text as you see fit

  3. In the content section of the image component scroll down until you see North Commerce Attributes

  4. Flow: Cart Items

  5. Name: title

  6. Value: Leave this blank

  7. Link: innerHTML

Adding Cart Item Price (Product Price)

  1. Add a Bricks Heading or Basic Text element to your canvas.

  2. Add a placeholder text with one of your product prices

    1. Style the placeholder text as you see fit

  3. In the content section of the image component scroll down until you see North Commerce Attributes

  4. Flow: Cart Items

  5. Name: price

  6. Value: Leave this blank

  7. Link: innerHTML

Adding Cart Item Quantity (Total # of each product in cart)

  1. Add a Bricks Heading or Basic Text element to your canvas.

  2. Add a placeholder text with one of your product prices

    1. Style the placeholder text as you see fit

  3. In the content section of the image component scroll down until you see North Commerce Attributes

  4. Flow: Cart Items

  5. Name: quantity

  6. Value: Leave this blank

  7. Link: innerHTML

Adding Cart Items Total Price (Total for all items in cart)

  1. Add a Bricks Heading or Basic Text element to your canvas.

  2. Add a placeholder text with one of your product prices

    1. Style the placeholder text as you see fit

  3. In the content section of the image component scroll down until you see North Commerce Attributes

  4. Flow: Cart Items

  5. Name: total-price

  6. Value: Leave this blank

  7. Link: innerHTML

PreviousAttributesNextOxygen

Last updated

Was this helpful?