Adding shopfront components to your online store
This article outlines the steps to add shopfront components to your online store. Basket2go shopfront components technology enables your site to provide your customers more information about their order.
What is Shopfront Components
You can use Basket2go innovative shopfront components to display information about the customer's purchases in your site. These components are:
- View basket link
- Total number of items in their cart
- Number of items in the cart
- Total cost of items in the cart
- A summary list of the cart items
These components can be placed anywhere convenient in your webpage and merge together with your other content. This component will be updated dynamically when the shopping cart contents have changed. Go to our demo shop to see a demonstration; add products to the shopping cart and see how the information in "Your shopping basket" section at left column of the demo shop updates dynamically.
Difficulity level - simple. Basic HTML knowledge required.
Include Basket2go script
Make sure the following script has been added into your <head> tag for any webpages. This script should already be present if you have already set-up add-to-cart links.
Remember to replace your-shop-id with your own shop id.
Add shopfront components
The following components can be added anywhere to your code.
View Basket
Add a class tag and name it "thickbox" to your view basket link.
Display number of items
Insert a pair of span or div tag within your code where you want to display the total number of items in the shopping cart. The data will be updated and inserted into the tag.
Display total price
Insert a pair of span or div tag within your code where you want to display the total price of items in the shopping cart. The data will be updated and inserted into the tag.
Display cart summary
Insert a pair of span or div tag within your code where you want to display a list of all items in the shopping cart. The field will be populated with item name, quantity, and price for each item in the cart respectively. Make sure there are sufficient space to display the information.
Display last item that has been added
You can also display a summary of last item that has been added to the shopping cart. This method works best when you do not want to show the shopping basket whenever the customer click "add-to-cart" link.
The following will display the name of the last item that has been added to the cart:
The following will display the option of the last item that has been added to the cart:
The following will display the quantity of the last item that has been added to the cart:
The following will display the price of the last item that has been added to the cart:
Conclusion
Shopfront components can help keep your customer inform about their orders throughout your webpage and leading to more sales conversion.
