10.3 Insert "Add to cart" button

The Add to Cart functionality is one where when you have multiple products (eg: A company that sells a product with multiple addons which can added or removed from the cart) and you want your customers to add multiple products to cart.  

The below steps will explain to you how you can add the BluSynergy shopping cart iframe onto your webpage. 

1. Go to Edit plan and generate button code

Please refer http://docs.blusynergy.com/shopping-cart/configuration-setup

2. On your webpage, paste the Button code (that you generated in the previous step) to the subscriptions/products on your webpage which will be used to make the purchase

 Fig 1.0

The button will carry a BluSynergy Default CSS and can be customized by the Client to get look and feel of their webpage. 

The below example shows how "Add to Cart" can be used on a Client page. 

 Fig 1.1 Below is the sample "Add to Cart" button placed on a webpage.

3. The button created above will add the items to the cart which can be accessed by adding this hidden iframe [REQUIRED] 

This will display the message "Item Added" to the Cart

 <iframe src="empty" name="blusynergy" style="display:none;"></iframe>

Now an item is added to the cart.

NOTE: Do make sure that target="blusynergy" as below, in the form of tag generated in HTML. If not, a blank page will appear.

<form data-form="blusynergy_add_cart" target="blusynergy" action="https://[org_domain_name].blubilling-test.com/shoppingCart/add_to_cart" method="POST">

Please add the above tag where ever you add the "Add to Cart" button which will prevent the page opening in a new tab. 

<iframe src="" name="blusynergy" style="display:none;"></iframe>

4. Add a "View cart" or "My cart" button to your webpage (or as top header) as well which points to our below iframe to show the customers what they have placed in their cart. 

<iframe src="https://[org_domain_name].blubilling.com/shoppingCart/cart" name="blusynergy_cart" style="width:100%;height:80%; border:none;"></iframe>

 Fig 1.2 Below is an example page of the View cart button which redirects the customers to Fig 1.1 to view the items in the cart

Fig 1.3 Below is the sample Default BluSynergy shopping cart iframe placed on a webpage.

In the above page a sample product is added into the cart.

Using the above iframe, your customer can update cart, increase quantity, register or sign-up.   

If the customer likes to stop here and checkout, they can do that by clicking on the 'Checkout' button

Note that the view cart feature is not part of this shopping cart and is the client's responsibility to hyperlink it to our above iframe (Fig 1.3 ) 

You can also add a Continue Shopping link for your customers (post adding products into the cart) which can redirect your webpage to Fig 1.1 

6. After the Signup/Sign-in, the customer will see the Payment Page as below

Fig 1.5 Below fig shows page after SignUp/SignIn within the iframe