Shopping Cart‎ > ‎

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 add ons 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 changed by the Client to carry the look and feel of the 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, is in the form tag of generated 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 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 so 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 



5. The iframe will redirect the customer to a registration page where the customer either Signs Up/Signs In

Fig 1.4 Below fig shows the page after Checkout within the iframe

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


Comments