Shopping Cart Module

This module is a pre-built shopping cart that allows you (the developer) to not have to worry about integrating into POS systems, payment providers or loyalty platforms. You customize the website design we handle the integrations and and checkout process, making it a simple development experience.

There are 2 ways to include this module, the first example allow you to customize node IDs and include your own CSS file to customize the shopping cart apearance. The second example shows the default setup that utilizes our IDs and existing styles.

{
    Buddi.setUp({
    	storeId: 137,
    	modules: {
      		cart: {
        		previewNodeId: '',	//ID of the <div> where the cart preview should be mounted to. default = 'buddi-cart-preview'
        		checkoutNodeId: '',	//ID of the <div> where checkout should be mounted to. default = 'buddi-cart-checkout'
			cssFiles: [],		//default = ['css/ropis/tailwind.css', 'css/seo-ecommerce/modules/cart.css']. Do not want to use our styles? Override them with your own style files. Pass an array of the needed css files which will automatically be imported by the main module. The file names must contain http:// or https:// prefix. Example: cssFiles: ['https://mysite.com/css/buddi-cart-styles.css']
      		},
    	},
    });
}

Or if you don’t mind using the default values:

{
    Buddi.setUp({
    	storeId: 137,
    	modules: {
      		cart: true
}
    });
}

Adding products to cart

There are 2 ways to add a product to the cart:

• Using the Buddi.addToCart call (See docs: Add to Cart)
• Or to simplify the process - you can add a class labelled .buddi-add-to-cart to the add to cart button. In this case you’ll also need to add 2 additional data-attributes to the button:
  • data-buddi-ri-id="<riId>" (the attribute has to contain a retailer inventory option ID which the products call returns. (See docs: All Products)
  • data-buddi-ri-qty="1" (the quantity of units of the product you’d like to add to the cart)