Sidebar column shopping cart for OpenCart Version 2/3

Hi, today we are publishing another free Opencart module “Sidebar Shopping Cart” and we made this for OpenCart version 2.0.3.1. Problem is we cannot edit js file with vQmod so you need to override the common.js file. But we have described where you need to put the extra code below in this post.

JS/CSS files are rendered at the browser level, not at the server level, so vQmod has no effect on these files. You can, however, create new files and use vQmod to alter the tpl files to point to these new CSS/JS files.

Output after installing the module is shown as in the image below:

You can see how we copied the header cart section and show it as a module inside the cart box or side shopping cart. You can show anywhere you like as this is a module so you can show at the left column, right column or top content or bottom content.

Download the module from here:

Download Sidebar shopping cart OpenCart free module

Installation:

1. Unzip the downloaded folder.
2. Upload the files in the root folder to your server, the common.js file is overwritten so if you have any kind of custom javascript used then please transfer to the file and upload the common.js.
3. Then activate the Shopping Cart module.

Activating the Sidebar Shopping Cart module:

1. After uploading files to servers, it’s time to install Sidebar shopping cart module
2. We are showing the sidebar shopping cart in the right column but you can show it wherever you like as this is acts as a normal module.
3. Go to Admin section
4. Then click on Extensions on the left menu
5. After that Click Modules and go to “Shopping Cart” in the modules list
6. Then click the green button to install the module (see the image below)

Then click the blue edit button

After that, you will see the form which has the status field, select “Enabled” and then click the Save button.

Your module is active and is ready to use in the layout.

Setup layout for the sidebar shopping cart at home page:

1. From the admin section go to System >> Design >> Layouts.
2. You will see a list of layouts, from which edit the “Home” layout.
3. Then click Blue add the button to add rows at module section which is shown in the image below:

Second, you choose the Shopping Cart in the module column and Column right in the Position column and insert the sort order as required.

Then click save button

Your custom sidebar shopping cart is showing in the right column of the home page. Likewise, you can show in many other layouts and pages.

Codes to added to common.js if you don’t want to override it:

1. Open catalog/view/javascript/common.js
2. Find the following lines of code

   $('#cart > ul').load('index.php?route=common/cart/info ul li');

3. Just below it add following lines of code

   $('#shoppingcart > span').load('index.php?route=module/shoppingcart/info span');

4. There are around 4 places where you have to add the above code.
5. Then save the common.js file and upload it to the server and the module works perfectly.
6. Your module is ready to use in other places except for the product detail page.

Making changes in the product detail page to make our module works:

1. Go to catalog/view/theme/YOURTHEMENAME/product/product.tpl
2. Find the following lines of code.

   $('#cart > ul').load('index.php?route=common/cart/info ul li');

3. Just below it add following lines of code

   $('#shoppingcart > span').load('index.php?route=module/shoppingcart/info span');

4. Then save and upload to the server and Sidebar shopping cart is ready to be used on the product page also.

Now click add to cart button and see how shopping cart animation changes the details with the use of Ajax functionality.

Let me know if you get any problem with performing the above tasks in the comment so that we can help if you have any.