Description
Display the amount of total savings on all cart summary blocks This module is flexible and customizable, with its "message template" feature and "Custom position" feature, you use a way which perfectly matches your site design to display the total savings.
1. Where the total saving can be shown.
- Shopping cart page
- Popup cart
- The dropdown cart & sidebar cart of Transformer theme/Panda theme
- Checkout page
- Easycheckout page
2. Fully customizable
This module is fully customizable, you can decide how & where to show the total savings to perfectly match your site design without edting any files. Basic html knowledge is requied, we can provide free help for that.
Message template and Custom position are the two key features to make this total savings amount module be flexiable and customizable.
2.1 Message template
You can use basic text messages to show the total savings out. To better match the design of your theme, you can format messages using HTML. Here are two examples:
1. A basic text message to show the total savings on the Classic theme.
2. The text and the price are shown on either side to match the design of the Panda theme.
To change the design of message, there are options like "text color", "price code", "background color", "font size", "Alignment", "paddings", "margin" for you. If you need more changes, then use the custom css code feature.
2.2 Positions
Two types of positions:
- Native hooks
- Custom positions
For example, they are 4 native hooks around the cart summary block on the shopping cart page. You can choose to show the total savings on any of them.
If you want to show the total savings on a position where has no hooks, then you can use the custom position feature, all you need to do is to fill in a jQuery selector of where you want to the total savings to be shown. We can provide free help on that. With the "Custom position" feature, you can show the total saving on anywhere to perfectly match your design.
3. Compatibility.
- Prestashop 8 & 1.7.
- Transformer theme v4, Panda theme v2, Classic theme and all other standard themes.
- Comaptible with the Easycheckout module v2.7.0 and later.
Define standard theme? A standard theme contains all hooks from the Classic theme, it uses the /themes/core.js file to use the same ways as the Classic theme to handle the add-to-cart event, changing combination event, etc. All most all paid themes are standard ones.
How to install and upgrade.
The "Total savings amount module" can be installed easily without editing any files.
How to install? Use the "Upload a module" button on "BO > Modules" page to install the module.
How to upgrade? Use the "Upload a module" button on "BO > Modules" page to upload the new version to your site, it's the same as how to install, don't worry all your data will be safe, PrestaShop will just upload updated files to your site, it won't reinstall this module.
How to get support.
If you have any questions with this module, post them out on the PrestaShop module support forum, we'll help you out.
Documentation.
Probably due to conflicts with your theme or due to the HTML structure of the message template. For example, if your theme force all prices being in red, then the price color setting in this module probably can't work, in which case contact us, we will guide you to use a piece of custom CSS code to change the price color.
It could also be an issue of the message template, for example, if you use a custom message template and your forget to add a st_totals_price class name to the price, then the price color setting can't work.
You can use any messages with or without html code, do remember to put in ### which will be replaced by the amount of total savings. For example, you can use a simple message like this.
1 | You have saved ### |
Color settings and space settings won't take effect for a simple message like that.
Here are two key points to create a better message.
- Add a class name like "st_totals_cart" to the wraper html tag. You can find the class name needed on the description section of message field.
- Wrap ### with a html tag which contains a "st_totals_price" class name.
Here are two examples.
1 | <div class="st_totals_cart">You have saved <span class="st_totals_price">###</span></div> |
1 | <div class="cart-summary-line clearfix st_totals_cart"><span class="label">You have saved</span><span class="value price st_totals_price">###</span></div> |
The jQuery selector is used to locate the position where you want the amount of total savings to be shown. It requires basic html knowledge to fill in this field. With the help of browsers' developer tools, it's possible to figure the correct value out by yourself. Feel free to contact us for help if you need it. Here is an example.
If you want to put the total savings right below the total price, then the jQuery selector you need is ".cart-detailed-totals .cart-total". That isn't the only correctly answer, there are several other electors for the same postion.
This field is important when you choose to use the "Custom position" option or the "Under the shipping fee in the cart summary section" option. A page may contain several different cart summary block, the "Block container jQuery selector" field is used to tell which block is the cart summary block in the popup cart, which block is the cart summary block in the dropdown cart. So the key point is to find unique selectors to distinguish different cart summary blocks. For example, you can use this selector #blockcart-modal for the cart summary block in the popup cart window. Because the parent divs of other cart summary blocks don't have a "blockcart-modal" ID.
It requires basic html knowledge to fill in this field. Feel free to contact us for help if you need it.
Disable the "Use HTMLPurifier Library" setting on the "BO>Preferences>General" page.
It works perfectly ! like all the modules of this team!