Shopping cart for an online store

As you know, ZOO component is a great content constructor from YooTheme. With its help you can easily create a catalog, a blog, FAQ… In fact, almost anything. To put it in just one word, Genuine constructor! (or as they say over there - CCK, Content Construction Kit).

The trouble is, сreators of the component have covered everything but most important things - shopping cart and a good website search with a filter. Today we’ll touch upon the issue of the shopping cart since it’s an essential part of any online store, being its profit-making component.

We decided to fill this gap and developed a shopping cart component for ZOO which we are happy to demonstrate you now.

Advantages of JBZoo shopping cart

Let’s not waste time and get right to business. What is so good about JBZoo shopping cart?

  • Special price element - JBZoo Price:
    • Feature to display the price of a product in different currencies. Conversion is made on-the-fly. The data is taken from www.cbr.ru.
    • This element is repeatable so you can specify several prices for different configurations of one and the same product. For example, it can be a tablet PC with either 32GB or 64GB memory.
    • Special field to enter SKU.
    • You can filter products by this element, for instance, via range slider.
    • This element has “Add to cart”.
    • Adding and removing from the cart is made without page reloading (AJAX).
    • Amount of products left in stock are recorded.
    • Support of CSV import with SKU as a key.
    • You can set a discount in percentages or in any currency.
    • Option to set “New” flag.
  • JBZoo cart module
    • Permament display of an actual state of the cart since it is automatically refreshed without page reloading.
    • Display of a brief information about total amount of products, lots and total price of an order.
    • In the settings you can set a currency used to display the total price.
  • List of products in the shopping cart
    • Separate page with a total list of products where you can change quantity or remove products from your order.
    • Everything works on-line with AJAX. You’ll agree that it’s not convenient to refresh the page after every click.
    • It’s easy to make orders only by authorized users.
  • JBZoo checkout form
    • This form is based on the ZOO item submission system so you can easily customize your own set of fields.
    • Pre-configured template of this form is made as a jQuery “accordion” so that few steps of an order fit in one page.
    • All information about your orders is stored as items in a separate ZOO catalog, so you have an archive of all completed purchases.
    • In the control panel you can manually change a status of an order or add a random comment visible only to administrators.
    • After submission of an order or a real payment via payment systems, Administrator will receive an e-mail, in its turn User will also receive an email if he/she was authorized.
    • Option to select different email templates for administrators and users.
    • Configuration of email templates is very similar to configuration of the checkout form - just drag necessary field to a desired position of a template.

On our demo website you can check how our shopping cart functions.

And now let’s go deeply into it.

“Add to cart” button and “Out of stock” label

Editing price in a product

For every product you can specify whether it is in stock or out of stock. If it is out of stock, corresponding label is displayed. If a product is in stock, “Add to cart” button is displayed respectively. When a user clicks it, a pop-up window with following information appears:

  • product name with a link to a detailed page
  • SKU (if it is not filled in, product ID is used. This can be disabled in the settings)
  • options to choose product configuration (or other conditions affecting the price)

After a product is added to the cart, “Remove from the cart” button appears. Everything occurs without page reloading.

All these fields are configured in the control panel. It looks like this.

Pop-up window for adding a product to the cart

Pop-up window for JBZoo shopping cart

Samples of different variants of displaying JBZoo Price

Price appearance exampleExample of a new product price

Price with different options

Cart status widget (module)

Empty cartCart with products

On the left there is a small widget describing a current status of the cart. Initially there is a label “Your cart is empty”. After the cart is filled, it displays a summary of the checkout.

The title is set in the module name - you can name it whatever.

Information is refreshed automatically without page reloading right after adding a product to the cart. A module displays:

  • Total number of products in the cart
  • Number of unique products in the cart
  • Total amount of the checkout
  • “Go to checkout” button which brings you to the checkout page

Checkout

List of products

List of products in the cart

You can see a “List of products in the cart” table on the checkout page. Main fields of a product are displayed here. You can change a quantity of products and the total price of an order will change accordingly without pressing any buttons or page reloading. Information in the previously described module will change as well. For your convenience, there are such buttons as “Remove” and “Remove all”.

Checkout form

The functionality of standard ZOO submission forms was adopted and significantly revised. As the result, bunch of different field types can be used in checkout forms (strings, radio-buttons, checkboxes or even file attachments...). They will be validated just like in standard item submission forms.

Default form is made as an “accordion” - after clicking on a tab the content of an active tab is revealed.

Checkout formFields validation

Editing checkout form

 

There are fields for delivery and payment method. Of course, you can edit them or add any other fields you need.

Sending letters

After the checkout form is filled and “Checkout” button is pressed, email messages are sent to a store manager (his email address is specified in the configuration) and to the customer. You can also enable email notifications after the real payment via payment systems is executed.

There is an “orderemail” template for email messages. You can configure it just by dragging any fields to needed positions (like everything else in ZOO).