How to show “spend X to get Free Shipping” in Prestashop

In this Prestashop tutorial, we will see how to boost our sales by letting customers know how much they still have to spend in order to be eligible for free shipping.

 

Version used: Prestashop 1.6

Setting the Free Shipping amount

To keep thing simple, in this tutorial we will only consider the “Free shipping starts at” value that we can configure in the back office, instead of dealing with all the 0-fee weight or price ranges that it’s possible to setup for each carrier.

Therefore, before starting, head to Shipping -> Preferences and set “Free shipping starts at” to any value you like. Please notice this represent the price in the default currency, and it’s not possible to set up one for each, at the time being.

Continue reading How to show “spend X to get Free Shipping” in Prestashop

How to add new Color Schemes to the Prestashop 1.6 Theme

The Prestashop 1.6 theme configurator comes with 8 built in color schemes. That said, it might be worth knowing how to add new ones, when needed! Let’s see how to do it manually, and also with the help of a free module I created.

DOWNLOAD HERE – Prestashop Theme Extender module

Prestashop 1.6 color schemes structure

As a first step, it is fundamental to understand the file structure of color schemes in Prestashop 1.6. They are not located in the default-bootstrap theme folder, as we might think, but come as part of the Theme Configurator module. Therefore, to locate all the default ones, we must reach out the /css/ folder inside /modules/themeconfigurator/.

By default, it will contain one css file for each of the default fonts, and one for each of the color schemes. Notice that, if you want to use SASS, it worth having a look at the /scss folder instead, and create a ruby compiler in the main module’s folder, as it’s missing. In this tutorial we will be editing .css files anyway.

Before proceeding: color schemes are named theme# where # is a number, but notice number 1 is missing, and, for that reason, we have 8 themes, instead of 9.

Adding a new color scheme

The scheme’s file

The easiest way to add a new color scheme is, of, course, to clone one of the existing ones. Therefore, grab the one you wish to use as a starting point (I will use theme9), clone and rename it theme10.

The database entry: 2 routes

Now that we have the file in place, we need the configurator to know it’s actually there. How to? If we inspect the source code, we will see it grabs the selectable variation from a serialized array, added to the database upon install:

 $themes_colors = array( 'theme1', 'theme2', 'theme3', 'theme4', 'theme5', 'theme6', 'theme7', 'theme8', 'theme9' ); ... !Configuration::updateValue('PS_TC_THEMES', serialize($themes_colors)) || ...

We are facing two routes at this point: we can manually edit the array, and reset the module so that the database entry is updated. Or, we can directly modify the serialized array. Please notice that this second way is risky, and if you edit it the wrong way, you will not be able to use the theme switcher unless you reinstall the theme configurator module. That said, resetting the module means losing all of the other customizations that might have been added, and I will therefore cover both methods.

METHOD 1: Modifying the php file, and resetting the module

Head over to /modules/themeconfigurator/ and open themeconfigurator.php. Find the array mentioned above, and add the name of the .css file you cloned. In this case, theme10:

 $themes_colors = array( 'theme1', 'theme2', 'theme3', 'theme4', 'theme5', 'theme6', 'theme7', 'theme8', 'theme9', 'theme10' );

How to add new Color Schemes to the Prestashop 1.6 Theme - Resetting the live configurator module

Save, login to the back office and hit Reset on the right hand side dropdown menu. Doing this will erase your current customizations and images added using this module! Therefore, make sure you have a backup, if you need them.

METHOD 2: Manually editing the database entry

Login to your database and reach the ps_configuration table (your prefix might be other than ps_). Look for the entry named PS_TC_THEMES, and click to modify it. At this point, the value column will look like this:

a:9:{i:0;s:6:"theme1";i:1;s:6:"theme2";i:2;s:6:"theme3";i:3;s:6:"theme4";i:4;s:6:"theme5";i:5;s:6:"theme6";i:6;s:6:"theme7";i:7;s:6:"theme8";i:8;s:6:"theme9";}

How does a serialized array works? It’s important to understand it, in order to avoid breaking serialization, making it impossible to use it later. a:9 declares the size of the array. It contains 9 elements, so we need to change it to a:10 as we are adding another one.

Then, let’s take a closer look at the last element:

i:8;s:6:"theme9";

i:8 represents the index of this entry, which is 8; s:6 means it’s a 6-chars long string; “theme9″ is the value of this array entry.

Make sure to copy and save the original value somewhere, before modifying it!

Now that we know it, we can add our new element after the last semicolon:

i:9;s:7:"theme10";

Explanation: i:9 means that this element has 9 as index; s:7 indicates the length of it, as it’s one more character compared to the other ones, it needs to be 7, not 6. Lastly, the name of our file.

The final entry:

a:10:{i:0;s:6:"theme1";i:1;s:6:"theme2";i:2;s:6:"theme3";i:3;s:6:"theme4";i:4;s:6:"theme5";i:5;s:6:"theme6";i:6;s:6:"theme7";i:7;s:6:"theme8";i:8;s:6:"theme9";i:9;s:7:"theme10";}

Once more, this is a risky procedure, so if you have doubts, you can follow method 1 instead!

Editing CSS files

At this point, it’s time for some pure CSS fun! Click on the shop link from the back office to activate the live configurator, it should look like this:

How to add new Color Schemes to the Prestashop 1.6 Theme - Live Configurator

That last black entry is our new color scheme! Why is it dark? Because the color is (sadly) saved in a separate file: /modules/themesconfigurator/css/live_configurator.css. It’s not strictly necessary to add it, but in case you want, locate the following:

#tool_customization #color-box .theme9 .color1{ border: 13px solid #f9f6ed;
}
#tool_customization #color-box .theme9 .color2{ background: #eea200;
} 

Clone these lines and rename them to match the new theme’s name, then change the color to something that will help you identify the new scheme (mine is an electric blue, leaving the lighter color as it was):

#tool_customization #color-box .theme10 .color1{ border: 13px solid #f9f6ed;
}
#tool_customization #color-box .theme10 .color2{ background: #3982ef;
} 

Then, open up the theme10.css file and start modifying colors! If you are happy to only change the main color, like in the example of the original theme9, #f9f6ed, locate all entries of it, and replace them with your hex.

Of course, a completely new world opens up now. It would be boring to go through all boxes and colors. Instead, as the current way is troublesome and might generate issues, let’s have a look at n easier (and FREE!) alternative to manual modifications, using a module I created!

Alternative method: Adding new color schemes using my Free Prestashop Theme Extender module

DOWNLOAD HERE – Prestashop Theme Extender module

How to add new Color Schemes to the Prestashop 1.6 Theme - Prestashop Themextender Module

Adding new color schemes using this module is as simple as editing a .css file. Because that is all you need to do, of course! My suggestion is, once more, to use one of the default color schemes as a basis. Once you are done with modifications, simply grab my module, install it, choose your .css file, and, optionally main and secondary colors (they have the only purpose of helping you recognize the scheme in the live configurator). Then, click add. And you have the new color scheme!

THis way, there will be no need or resetting the live configurator module, nor doing any complex modification in the database, or to any .php files. And of course, it’s completely free!

The post How to add new Color Schemes to the Prestashop 1.6 Theme appeared first on Nemo's PostScriptum.

Quick Tip: Add product features to the Prestashop 1.6 Quick View box

We already saw how to add features to the products list. It’s now time to implement then into the quick view box!

In a recent tutorial, we saw How to add features to the product list in Prestashop 1.6.

However, if you want to save some space, and take full advantage of Prestashop 1.6, you might want to add them to the QuickView box instead. The procedure is quite simple, and only involves editing one file!

Understanding the Quick View box in Prestashop 1.6

What is this Quick View box, exactly? Where is it pulling data from? Simply put, it fetches the product.tpl file by sending an ajax request to the ProductController, and returns a portion of the page, instead of the whole.
How does it do it? It uses the {$content_only} variable in Smarty, which allows Prestashop to know if we are trying to display the content inside a lightbox, or generally picking it using ajax. Therefore, to add content to the Quick View, it’s enough to use a condition in the product.tpl file.

Editing product.tpl

As always, it’s best practice not to edit files directly, but cloning the default template and proceeding from there. Once you have a clean copy, enable it, then open product.tpl.

The spot where to add feature is entirely up to your discretion, I chose the one right below quantities, as shown below.

Adding product features to quick view in prestashop 1.6, spot

To add them over there, locate the following inside product.tpl

 {if isset($HOOK_EXTRA_RIGHT) && $HOOK_EXTRA_RIGHT}{$HOOK_EXTRA_RIGHT}{/if}

Right before it, add

 {if $content_only} {if isset($features) && $features} <!-- Data sheet --> <section class="page-product-box"> <p><strong>{l s='Features'}</strong></p> {foreach from=$features item=feature} <div class="{cycle values="odd,even"}"> {if isset($feature.value)} {$feature.name|escape:'html':'UTF-8'} : {$feature.value|escape:'html':'UTF-8'} {/if} </div> {/foreach} </section> <!--end Data sheet --> {/if} {/if} 

Explanation: What are we doing here? As explained above, we need to tell prestashop to show this content only if it’s grabbing the template in “content_only” mode. Otherwise, the features list would be added to the normal product page as well. Then, we make sure there actually are features, and if so, we add the box with them inside. I used a slightly modified version of the original features table that you can find in the very same product.tpl file, so that it doesn’t look as big as that one. {cycle values=”odd,even”} allows you to style each row separately, in case you need to.

We are done!

Adding product features to quick view in prestashop 1.6, added

The post Quick Tip: Add product features to the Prestashop 1.6 Quick View box appeared first on Nemo's PostScriptum.

Prestashop Module: Search by Category updated!

I am pleased to announce my Search by category module for Prestashop has finally been updated to support 1.6 at its best, and multistore as well. It also comes with a great new feature!

BUY HERE

If you didn’t buy the module before, then now it’s the right time! It’s fully compatible with multistore, at last, will have the price cut down to 19.99 euros for a week and has an amazing new feature. If you hated the fact that prestashop forced you typing a product name that begun with the search query, then your pain is over! Since version 2.0, the search by category module supports a middle-of-a-word search on all Prestashop Versions.
What does it mean? Quite simply, if you have a product named Blouse, you had to search for Blou, Blouse or anything like that before. Now, you can simply turn on the back office option of this module to be able to find results with louse, ouse… whatever inbetween string! Here is a video demo of the module:

Subscribe Post Scriptum’s Youtube Channel

Core Features

  • Full Multistore support
  • 2 block positions
  • Easily manage categories included in search option from back-office
  • Instant search and Ajax search available if activated in your shop.
  • More accurate page result description based on category
  • Cuts down the number of clicks
  • Saves your customer’s time!
  • Filter by parent category in Back office, to easily find categories to add
  • Search in the middle of words

    The post Prestashop Module: Search by Category updated! appeared first on Nemo's PostScriptum.