Shopping cart

The global Voog.ShoppingCart object is used to interact with the checkout flow, but generally handles everything internally. Some methods are exposed to allow adding products manually so that picking products can be custom-built without using any Buy Button content areas.

Methods

addProduct(productObject: Object, note: ?string, quantity: ?number)

This method either adds a new item or finds an existing item in the shopping cart, incrementing its count by the given quantity. If the note is given, it tries to merge objects with the same id and note.


productObject

— the whole product object, structurally the same as you would get from the API response
note — a note string (added to the end of the product name) (default: undefined)
quantity — the amount by which the item is incremented (default: 1)

addProductById(productId: number, note: ?string, quantity: ?number)

Functionally similar to the previous method, but takes a product id instead. An API request is then made, fetching the product information and the result (if found) is passed on to addProduct, together with the given note and quantity.

productId — the ID of the product
note — a note string (added to the end of the product name) (default: undefined)
quantity — the amount by which the item is incremented (default: 1)

flashCartButton()

This flashes the default shopping cart button just like when you click a Buy Button to add a product to the cart. Useful when you are using a custom interface to add products to the cart and would like to add a visual indicator.

removeProduct(productObject: {id: number, note: ?string})

This method tries to find a matching item from the cart and remove it, if possible. Only products that have the same id and note are removed.

getContents()

This method returns the shopping cart contents.

showCart()

This method makes the shopping cart visible, renders all cart items and calculates the tax amounts.

init(languageCode: string)

This method creates and initializes the shopping cart on the current page, attaching all relevant events and loading translations according to the given language code.languageCode — language code of the current page

Events

voog:shoppingcart:contentschanged
  detail: shoppingCartData — the whole shopping cart object

Emitted when something in the shopping cart changes - item quantities, product notes etc.

voog:shoppingcart:addproduct
  detail: product — the added product object

Emitted when a new or existing product is added to the cart

voog:shoppingcart:changequantity
  detail: product — the updated product object

Emitted when a product's quantity changes

voog:shoppingcart:removeproduct
  detail: product — the removed product object

Emitted when a product is removed from the shopping cart

voog:checkoutbutton:show

Emitted when the shopping cart button is shown, e.g. when adding the first product or navigating to another page.

voog:checkoutbutton:hide

Emitted when the shopping cart button is hidden, e.g. when the contents are cleared.

voog:shoppingcart:button:created

Emitted when the shopping cart button element is added to the DOM.

voog:shoppingcart:hide

Emitted when the shopping cart modal is closed.

voog:shoppingcart:show
  detail: {
    view: view,  — One of ("cart", "shipping_form", "review", "download_invoice", "redirect")
    [status: status]  — One of ("pending", "cancelled", "success", "failed"), added only to "redirect" views
  }

Emitted when a new view is rendered in the shopping cart modal.

voog:shoppingcart:checkout

Emitted when the checkout button is clicked.

voog:shoppingcart:recalculate

Emitted when the total price of the shopping cart is calculated again.

Translations

Currently there are no easy methods to add your own translations to the shopping cart. However, you can just overwrite values in the global Voog.ecommerceTranslations object.

Adding more required fields to the shopping cart