You're viewing the documentation of an older Simple Commerce version. Consider upgrading to the latest for new features and bug fixes.

Simple Commerce provides a bunch of tags to help you to integrate it inside your templates.

Cart

The whole cart

Gets the customer's cart so you can get details from it. Say you wanted the id of the cart for some reason, here's how that would work.

1{{ sc:cart }}
2 <p>The ID of your cart is {{ id }}</p>
3{{ /sc:cart }}

Cart Check

This tag allows you to check whether or not the customer currently has a cart attached to their session, it returns a boolean.

1@{{ if {sc:cart:has} === true }}
2 ...
3{{ /if }}

Cart Items

Returns a loop of all the items in the customer's cart.

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

Items Count

Gives you a count of how many items are in the customer's cart.

1{{ sc:cart:count }}

Totals

Grand Total Returns the total of all the other totals. In fact, there's two ways of doing it.

1This... {{ sc:cart:total }}
2 
3Does exactly the same thing as this... {{ sc:cart:grand_total }}

Items Total Returns the total of every item in the cart.

1{{ sc:cart:items_total }}

Shipping Total Returns the shipping total of the cart.

1{{ sc:cart:shipping_total }}

Tax Total Returns the tax total of the cart.

1{{ sc:cart:tax_total }}

Coupon Total Returns the total of the coupons in the cart.

1{{ sc:cart:coupon_total }}

Add Cart Item

This tag allows you to add an item to your cart.

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

This tag allows you to update the items in the cart.

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 existing item 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 allows you to update data in the cart. Any form inputs will automatically be saved to the order entry.

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

This tag removes all the items in the cart.

1{{ sc:cart:empty }}
2 ...
3{{ /sc:cart:empty }}

Checkout

This tag allows you to checkout the cart. Inside the tag, you can use any of the data from your cart. The redirect parameter is recommended so you can redirect the customer to a success page when they're order has been confirmed.

Like with the update cart tag, you can also pass information to the customer entry. Don't forget the email field though as it's required.

1{{ sc:checkout redirect="/thanks" }}
2 {{ if is_paid }}
3 <p>Checkout complete! <a href="{{ receipt_url }}">Download</a> your receipt.</p>
4 {{ else }}
5 <input type="text" name="customer[name]" placeholder="Full Name">
6 <input type="email" name="customer[email]" placeholder="Email">
7 
8 <input type="text" name="gift_note" placeholder="Gift Note">
9 
10 <select name="gateway">
11 {{ simple-commerce:gateways }}
12 <option value="{{ class }}">{{ name }}</option>
13 {{ /simple-commerce:gateways }}
14 </select>
15 
16 <!-- deal with your gateway stuff -->
17 
18 <button type="submit">Checkout</button>
19 {{ /if }}
20{{ /sc:checkout }}

Coupons

Cart's Coupon

This tag lets you get the data for the coupon, if the customer has redeemed one for the cart.

1{{ sc:coupon }}
2 Current coupon: {{ slug }}
3{{ /sc:coupon }}

Check if coupon has been redeemed

This tag lets you check whether or not the customer has already redeemed a coupon.

1@{{ if {sc:coupon:has} === true }}
2 You've redeemed a coupon.
3{{ /if }}

Redeem a coupoon

This tag lets you redeem a coupon.

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

Remove a coupon

This tag allows you remove a redeemed coupon from the cart.

1{{ sc:cart:remove }}
2 <button type="submit">Remove coupon</button>
3{{ /sc:cart:remove }}

Customer

Get a customer

This tag allows you to get a customer by their ID. Remember to provide the id parameter which should be the ID of the customer.

1{{ sc:customer id="ff7ddbf2-cd01-4689-a57f-26cb2e7c96f9" }}
2 Your name is {{ name }} and your email is {{ email }}.
3{{ /sc:customer }}

Update a customer

This tag allows you to update an existing customer. Remember to provide the id parameter which should be the ID of the customer.

1{{ sc:customer:update id="ff7ddbf2-cd01-4689-a57f-26cb2e7c96f9" }}
2 <input type="text" name="name">
3{{ /sc:customer:update }}

Get orders by customer

This tag allows you to loop through orders created by a customer. Remember to provide the customer parameter which should be the ID of the customer.

1{{ sc:customer:orders customer="ff7ddbf2-cd01-4689-a57f-26cb2e7c96f9" }}
2 {{ title }} - {{ grand_total }}
3{{ /sc:customer:orders }}

Get order by customer

This tag allows you to get an order created by a customer. This tag has two parameters. id for the ID of the order you want to get and customer is the ID of the customer you want to get.

1{{ sc:customer:order customer="ff7ddbf2-cd01-4689-a57f-26cb2e7c96f9" id="84b28c73-3a04-478f-9447-68df026c44fe" }}
2 {{ title }} - {{ grand_total }}
3{{ /sc:customer:order }}

Gateways

All gateways

This tag returns a loop of the gateways setup for your store.

1{{ sc:gateways }}
2 {{ name }}
3{{ /sc:gateways }}

Get a gateway

This tag lets you get a particular gateway and its information, where stripe is the handle of the gateway.

1{{ sc:gateways:stripe }}
2 {{ name }}
3{{ /sc:gateways:stripe }}

Shipping

Get Shipping Methods

This tag can be used to give the user the option to select which shipping method they'd like their order to go through. The tag will loop through all of your configured shipping methods, see if they are available for the order's shipping address and if they are, the details and price will be outputted.

1<select name="shipping_method" value="{{ old:shipping_method }}">
2 <option value="" disabled selected>Select a Shipping Method</option>
3 {{ sc:shipping:methods }}
4 <option value="{{ handle }}">{{ name }} - {{ cost }}</option>
5 {{ /sc:shipping:methods }}
6</select>

Get countries

This tag lets you loop through countries.

1{{ sc:countries }}
2 <option value="{{ iso }}">{{ name }}</option>
3{{ /sc:countries }}

Get currencies

This tag lets you loop through currencies.

1{{ sc:currencies }}
2 {{ name }} - {{ symbol }}
3{{ /sc:currencies }}

And a few things...

If you're dealing with forms built by a Simple Commerce tag, there's a few cool things you can do.

Firstly, you can add a redirect param so you can redirect your user once they submit the form (and the validation is successful). In this example, the form will redirect to /cart.

1{{ sc:cart:addItem redirect="/cart" }}
2 <input type="hidden" name="product" value="{{ id }}">
3 <input type="hidden" name="quantity" value="1">
4 <button class="button-primary">Add to Cart</button>
5{{ /sc:cart:addItem }}

Also, if you don't like prefixing sc in the tags, you can use simple-commerce instead.

Last updated 3 months ago Improve this page on GitHub!