North Commerce
Back to North Commerce
  • 🚀Getting Started
    • Welcome to North Commerce
    • Installation
  • ⛰️Core Concepts
    • Orders
    • Products
      • Create a product
      • One Time Products
      • Subscription Products
      • Payment Plan Products
  • 💳Payment Gateways & Merchants
    • Stripe
    • PayPal
  • 📄Single Page Checkout Forms & Funnels
    • Single Page Checkout
  • 🎨Styling
    • Global CSS Variables
  • Builders
    • Beaver Builder
      • Building With Beaver Builder
    • Bricks
      • Query Loop
      • Attributes
        • Cart Item Attributes
    • Oxygen
  • Shortcodes
    • Product Collections
    • Product Collection Slider
    • Product Page
    • Cart Page
    • Checkout Page
    • Cart Drawer
    • Cart Icon
    • Customer Registration
    • Customer Account
  • Settings
    • General
  • For Developers
    • Flows
      • Add To Cart
      • Flow Events
      • Custom Functions In Flows
    • PHP "API"
      • Basic Entity Access Usage
    • Hooks & Actions
      • View Admin Hook Names
    • REST API
      • Getting Started
      • Adding Test Data
      • Filtering
  • Integrations
    • Create an integration
Powered by GitBook
On this page
  • Adding Cart Item Images
  • Adding Cart Item Title (Product Name)
  • Adding Cart Item Price (Product Price)
  • Adding Cart Item Quantity (Total # of each product in cart)
  • Adding Cart Items Total Price (Total for all items in cart)

Was this helpful?

  1. Builders
  2. Bricks
  3. Attributes

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.

PreviousAttributesNextOxygen

Last updated 1 month ago

Was this helpful?

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