Developers

Shopping cart

The shopping cart 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.

getShoppingCartData()
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:shoppingcart:choosepaymentmethod

detail: {
method: method, — payment method code, e.g. "seb"
gateway: gatewayCode — payment gateway code, e.g. "makecommerce"
}

Emitted when a payment method is selected for checkout

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:selectshipping

detail: method — the selected shipping method object

Emitted when a shipping method is selected from the dropdown.

voog:shoppingcart:selectshippingoption

detail: option — the selected shipping method option

Emitted when a new option is selected for the current shipping method.

voog:shoppingcart:checkout

Emitted when the checkout button is clicked.

voog:shoppingcart:changeshippinginfo

Emitted when the shipping info form is submitted

voog:shoppingcart:paymentcompleted

detail: {
status: status
}

Emitted in the last view, when the user is redirected back after payment.