sidebar_shopping_cart
sidebar_shopping_cart

Hi, today I am publishing another free Opencart module “Side bar Shopping Cart”and I 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 I 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:

sidebar_shopping_cart
Side bar Shopping Cart

You can see how I copied the header cart section and show it as module in side cart box or side shopping cart. You can show anywhere you like as this is module so you can show at 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 root folder to your server, 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 Side bar Shopping Cart module:

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

    installation_of_module
    installation_of_module
  7. Then click blue edit button
  8. After that you will see the form which have status field, select “Enabled” and then click Save button.
  9. You module is active and is ready to used in layout.

Setup layout for the side bar 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 button to add rows at module section which is shown in the image below:

    siderbar_shopping_cart_installation
    siderbar_shopping_cart_installation
  4. Second you choose the Shopping Cart in module column and Column right in Position column and insert the sort order as required.
  5. Then Click save button

Your custom side bar shopping cart is showing in the right column of 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 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 above code.
  5. Then save the common.js file and upload to server and module works perfectly.
  6. Your module is ready to use in other place except product detail page.

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

  1. Go to catalog/view/theme/YOURTHEMENAME/product/product.tpl
  2. Find 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 server and Sidebar shopping cart is ready to be used in 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 on performing above tasks in comment so that I can help if you have any.

 

Thanks
Rupak Nepali

 

15 COMMENTS

  1. hello works fine in opencart 2.0.1.1

    but when i click X icon to clean the shoppin cart i does not clear the ammoun on your module. It does clear the price though on the top shoppin cart function..can that be fixed? thanks

  2. hello works fine in opencart 2.0.1.1

    but when i click X icon to clean the shoppin cart i does not clear the ammount on your module. It does clear the price though on the top shoppin cart function..can that be fixed? thanks

  3. Hi, Thanks for great exten. i have one question about ajax adding problem, when i click “add to cart” button it’s not update cart total and a have to reload page to done it. how i can fix it?
    Thank you.

    • finally i solved my problem. my theme use common-rtl.js ! so if your theme runnig with rtl mode, you should customize the rtl’s files .

      • how to customize common-rtl.js , where i change code because i have a problem when add to cart then item not unless reload page.Please help me.Thanks

  4. Dear Rupak,
    Hi
    Thanks to your Side bar column shopping cart for OpenCart Version 2
    I have to use your module
    but unfortunately add & delete actions dose not works and it’s need to refresh page for view any changes;
    therefore the shopping card dose-not refreshed when I add /remove product
    Please Help me emergency

  5. Thanks for the module
    It worked but same problem as other users

    add & delete actions dose not works and it’s need to refresh page for view any changes;
    also when add the module in category page, it shows all undefined… undefined…. undefined..

    Please could you reply
    THANKS

    ANYONE PREVIOUS REVIEWER/USER DID YOU SOLVED IT, PLEASE COULD YOU LET ME KNOW
    THANKS

LEAVE A REPLY

Please enter your comment!
Please enter your name here