The Principles of Vae's eCommerce - June 05, 2009

Today we're going to do a brief summary of Vae's shopping cart flow. Vae's integrated eCommerce is a framework that is both flexible and powerful. We've outlined the shopping cart flow completely in our documentation, but this will serve as a brief run-through.

Adding Items to the Cart

The <v:store:add_to_cart> tag outputs a form that, when submitted, will add an item to the customer's shopping cart. You might wonder how Vae detects what information to pass along to the cart. The answer lies in this tag's attributes. Information like the item name, price, weight, and many other details can be passed on to the cart via attributes. See the <v:store:add_to_cart> documentation page for a full list of available attributes.

The Shopping Cart

The shopping cart itself can be rendered using the <v:store:cart> tag. Within these tags, a <v:store:cart:items> tag can be utilized to output the information about each item that has been added to the cart. Any information passed along through the <v:store:add_to_cart> tag is accessible by this tag. Here's some sample shopping cart code that would exist within <v:store:cart> tags:

...
<ul>
 <li>Remove</li>
 <li>Image</li>
 <li>Item Description</li>
 <li>Qty</li>
 <li>Price</li>
 <li>Total</li>
</ul>
<v:store:cart:items>
 <ul>
  <li><v:checkbox path="remove" /></li>
  <li><v:img path="image" /></li>
  <li><v:text path="name" /></li>
  <li><v:text path="option_value" />
  <li><v:text_field path="qty" size="1" /></li>
  <li>$<v:text path="price" number_format="2" /></li>
  <li>$<v:text path="total" number_format="2" /></li>
 </ul>
</v:store:cart:items>
...

It's that easy to list out your items. Notice that Vae lets you style our output any way you like. As with any page you code with Vae, no barriers exist between you and your CSS/HTML. 

Registration

It's usually necessary to collect billing and shipping information from your customers. This information will be sent along to the payment and shipping methods you set up in the Backstage. It will also appear on invoices that Vae creates. Within the <v:store:register> tag, Vae looks for appropriately named text fields which the customer enters their information. As an example, here's how you'd collect the customer's billing city information:

<v:text_field path="billing_city" required="true" />

Checkout

The <v:store:checkout> tag creates a form for the customer to confirm the order information, and also select from the available payment and shipping methods. You may again use <v:store:cart:items> to output the items in your cart. Also useful,  <v:store:payment_methods_select /> creates a select menu populated with the Payment Methods setup in the Backstage, while <v:store:shipping_methods_select /> is populated with the available Shipping Methods.

There's More

Vae's elegant solution to eCommerce doesn't stop here. Need to accept coupon codes? Want to save user registration so the user can login in the future? This and much more is possible. Browse our eCommerce documentation for a full review of what you can do with Vae's eCommerce power.