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:
<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>
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.
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" />
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 />