We are modifying the opencart eCommerce platform, the module popup the color box on clicking the add to cart button. It shows the mini shopping cart as shown in the mouse hover. This helps with confirmation of adding and easy navigation to the checkout or shopping cart and some visual effect to the site.

You can easily download the file from below and it is free. The Version I have tested for this module is 1.5.4.1

Right now two files are overridden common.js and the product.tpl. If you have customized these files then you have to add one line to each file manually.
Find the following line and insert it

	$.colorbox({href:"index.php?route=module/popupcart"});

At common.js
Find the function addToCart(product_id, quantity) { and below the following line insert the above line:

if (json['success']) {
$('#notification').html('< div style="display: none;">' + json['success'] + '>img src="catalog/view/theme/default/image/close.png" alt="" /> </div>');

Likewise at product.tpl
Find the line $(#button-cart).bind(click, function() { and just after this line finds the line below and insert the code just below this.

if (json['success']) {
$('#notification').html('< div style="display: none;">' + json['success'] + '>img src="catalog/view/theme/default/image/close.png" alt="" /> </div>');

Enjoy the module and let me know if there is something that I need to do to improve it.

Opencart tips and tricks post which shows you how we can show or insert the “you save” price. For the demo, you can check the site http://www.starpetshub.com/

We have managed to show the You Save in modules as well but we have hard-code it so we have to change in the controller of each module and in the product controller and the category controller. To make it work we have to Edit or insert product >> Click on Special tab >> Add your special price amount >> then Save it. Go to your site and click on the product. You will see a regular and discounted value with the discounted amount and You save as shown in the above image.

First, we are going to show how to insert the “You Save” on the category page.

Find the following line of codes in the catalog/controller/product/category.php

if (($this->config->get('config_customer_price') && $this->customer->isLogged()) || !$this->config->get('config_customer_price')) {
    $price = $this->currency->format($this->tax->calculate($result['price'], $result['tax_class_id'], $this->config->get('config_tax')));
} else {
    $price = false;
}

and paste the following code after if (($this->config->get(‘config_customer_price’) && $this->customer->isLogged()) || !$this->config->get(‘config_customer_price’)) {

$save =$this->currency->format($this->tax->calculate($result['price'], $result['tax_class_id'], $this->config->get('config_tax')) -$this->tax->calculate($result['special'], $result['tax_class_id'], $this->config->get('config_tax')));

and on the same page find the following code and add ‘save’ => $save in the product array

$this->data['products'][] = array(
 'product_id' => $result['product_id'],
 'thumb' => $image,
 'name' => $result['name'],
 'description' => utf8_substr(strip_tags(html_entity_decode($result['description'], ENT_QUOTES, 'UTF-8')), 0, 100) . '..',
 'price' => $price,
 'special' => $special,
 'save' => $save,
 'tax' => $tax,
 'rating' => $result['rating'],
 'reviews' => sprintf($this->language->get('text_reviews'), (int)$result['reviews']),
 'href' => $this->url->link('product/product', 'path=' . $this->request->get['path'] . '&product_id=' . $result['product_id'])
 );

Now go to the catalog/view/theme/default/template/product/category.tpl and replace the price section and paste the following and things work out in the category page.

<?php if ($product['price']) { ?>
 <div class="price">
 <?php if (!$product['special']) { ?>
 <?php echo $product['price']; ?>
 <?php } else { ?>
 <span class="price-old">Retail Price: <?php echo $product['price']; ?></span><br /> <span class="price-new"><b>Our Price:<?php echo $product['special']; ?></b> <br />You Save:<?php echo $product['save']; ?> </span>
 <?php } ?>
 <?php if ($product['tax']) { ?>
 <br />
 <span class="price-tax"><?php echo $text_tax; ?> <?php echo $product['tax']; ?></span>
 <?php } ?>
 </div>
 <?php } ?>

How to show you save price in the featured module of Opencart?

Find the following line of codes in the catalog/controller/module/featured.php

if (($this->config->get('config_customer_price') && $this->customer->isLogged()) || !$this->config->get('config_customer_price')) {
 $price = $this->currency->format($this->tax->calculate($product_info['price'], $product_info['tax_class_id'], $this->config->get('config_tax')));
 } else {
 $price = false;
 }

and paste the following code

$save =$this->currency->format($this->tax->calculate($product_info['price'], $product_info['tax_class_id'], $this->config->get('config_tax')) -$this->tax->calculate($product_info['special'], $product_info['tax_class_id'], $this->config->get('config_tax')));

and on the same page

$this->data['products'][] = array(
 'product_id' => $product_info['product_id'],
 'thumb' => $image,
 'name' => $product_info['name'],
 'price' => $price,
 'special' => $special,
 'save' => $save,
 'rating' => $rating,
 'reviews' => sprintf($this->language->get('text_reviews'), (int)$product_info['reviews']),
 'href' => $this->url->link('product/product', 'product_id=' . $product_info['product_id']),
 );

insert the ‘save’ => $save, as in the above in the product array.

Now go to the catalog/view/theme/default/template/module/featured.tpl and replace the price section and paste the following and things work out in the category page.

<?php if ($product['price']) { ?>
 <div class="price">
 <?php if (!$product['special']) { ?>
 Our Price:<?php echo $product['price']; ?>
 <?php } else { ?>
 <span class="price-old">Retail Price: <?php echo $product['price']; ?></span><br /> <span class="price-new"><b>Our Price:<?php echo $product['special']; ?></b> <br />You Save:<?php echo $product['save']; ?> </span>
 <?php } ?>
 </div>
 <?php } ?>

Likewise, you can make the changes in the latest module, category module, special module, make some changes as in the featured module and things will work like in the demo site.

We have not made the language and other settings, for now, we will make the free module for you all till then take care of the above coding style.

This forum post may be helpful for you as well

http://forum.opencart.com/viewtopic.php?f=131&t=39597

You can directly download the module here

http://forum.opencart.com/download/file.php?id=6861

Hope you liked this post, let us know if you have any questions or suggestions. Please subscribe to our YouTube Channel for Opencart video tutorials. You can also find us on Twitter and Facebook. Enjoy!

the amount that customer saves, right under the price, when there is a special price for the product, shows the amount in an amount that customer saves, customer save modules, You save this module for all modules, discount % or amount of $ right under the picture on front page modules