Simple Commerce Logo

Cart

Cart Information

{{ sc:cart }} returns an augmented version of the Cart entry.

1{{ sc:cart }}
2 <h2>Order {{ title }}</h2>
3 <p>Your order has been successful and will be fulfilled shortly.</p>
4{{ /sc:cart }}

Cart Items

This is probably the most common use case for the sc:cart tag, fetching items from the cart.

The variables available in this tag are also augmented. Allowing you to get data on the attached product, like this: {{ product:short_description }}.

1{{ sc:cart:items }}
2 {{ product:title }} - {{ quantity }} - {{ total }}
3{{ /sc:cart:items }}

To get a count of the items in the customers' cart, use {{ sc:cart:count }}.

To get the total quantity of products in the customers' cart, use {{ sc:cart:quantityTotal }}.

Check if customer has a cart

This tag allows you to check if the current customer has a cart attached to them. It'll return a boolean, meaning you can use it in one of Antlers' if statements.

1{{ if {sc:cart:has} === false }}
2 <p>There's nothing in your cart. <a href="#">Start shopping</a>.</p>
3{{ /if }}

Totals

There's tags for each of the different totals in a cart.

  • {{ sc:cart:total }} - Returns the overall/grand total of the cart
  • {{ sc:cart:grand_total }} - Does the same thing as sc:cart:total
  • {{ sc:cart:items_total }} - Returns the total of all cart items.
  • {{ sc:cart:shipping_total }} - Returns the shipping total of the cart.
  • {{ sc:cart:tax_total }} - Returns the tax total of the cart.
  • {{ sc:cart:coupon_total }} - Returns the total amount saved from coupons.

If you need the 'raw' value for any of these totals, meaning the integer, rather than the formatted currency amount, you can do this: {{ sc:cart:raw_grand_total }}

Add Item to Cart

This tag allows you to add a product/variant to your cart. It's a form tag so you need to provide a couple of parameters (form fields) when submitting:

  • product - The ID of the product you want to add to the cart.
  • variant - If applicable, the key of the variant you wish to add to the cart. Bear in mind, you will also need to provide the product with this.
  • quantity - The quantity of the cart item you're adding.
1{{ sc:cart:addItem }}
2 <input type="hidden" name="product" value="{{ id }}">
3 <input type="number" name="quantity" value="2">
4{{ /sc:cart:addItem }}

Update Cart Item

With this tag, you can update a specific item in your cart. It's a form tag.

The tag itself requires an item parameter which should be the ID of the specfic cart item you wish to update. You may then provide the parameters you wish to update on the item as input fields, like the below example:

1{{ sc:cart:updateItem :item="id" }}
2 <input type="number" name="quantity" value="2">
3{{ /sc:cart:updateItem }}

Remove Cart Item

This tag allows you to remove an item from the cart. It's a form tag and the only required parameter is on the tag itself: the item parameter should be the ID or the specific cart item you wish to remove from the cart.

1{{ sc:cart:removeItem :item="id" }}
2 <button type="submit">Remove item from cart</button>
3{{ /sc:cart:removeItem }}

Update Cart

This tag can be used to update any field values in the cart, kinda like Workshop, but just for carts. You can send whatever parameters you want, just ensure they are added to the entry blueprint for your orders.

1{{ sc:cart:update }}
2 <input type="text" name="delivery_note">
3{{ /sc:cart:update }}

🔥 Hot Tip: If you want to also update the customer at the same time, something like the below should work. Remember the email, it's required.

1<input type="text" name="customer[name]">
2<input type="email" name="customer[email]">

Empty Cart

If you want to empty all the items from the cart and start from scratch. You can use the {{ sc:cart:empty }} tag. It doesn't accept any parameters.

1{{ sc:cart:empty }}
2 <button>I messed up.. there's too much in my cart. I need a fresh start.</button>
3{{ /sc:cart:empty }}

Need some help?

There's plenty of ways of getting help: either via opening a GitHub Issue, starting a conversation on the Statamic Discord or directly emailing me.