Watch the screencast

Text Version

To start with, open up global.js, located in your theme folder /js. At the very end, add the following:

$(document).ready(function() {
	if($('body').hasClass('category'))
	{
		$('.product_img_link').click(function(e) {
			$.totalStorage('last_visited_category', window.location.href);
		});
	}
});

Then, in product.tpl, again in the theme folder, find a proper spot for the button, then add the following inside a <script> tag:

	$(document).ready(function() {
		if(previous_category = $.totalStorage('last_visited_category'))
		{
			$('#goback').attr('href', previous_category);
			$.totalStorage('last_visited_category', '');
		} else $('#goback').hide();
	});

Right after id, add our button:

<a href="javascript:void(0)" class="btn btn-default" id="goback">
	<i class="icon-chevron-left left"></i> {l s='Go Back to the last category'}
</a>

Here is the final code for product.tpl

<script>

	$(document).ready(function() {
		if(previous_category = $.totalStorage('last_visited_category'))
		{
			$('#goback').attr('href', previous_category);
			$.totalStorage('last_visited_category', '');
		} else $('#goback').hide();
	});
</script>

<a href="javascript:void(0)" class="btn btn-default" id="goback">
	<i class="icon-chevron-left left">{l s='Go Back to the last category'}</i>
</a>

Notice: If you want to keep a record of the visited category across pages, you can remove $.totalStorage(‘last_visited_category’, ”); from the code in product.tpl.

The post How to create a “Go back to the category” button in PrestaShop and thirty bees appeared first on NemoPS.

Watch the screencast

Text Version

All of the modifications need to be applied to AdminOrdersController.php, located in controllers/admin
Add to $this->_select (do not forget the comma!):

od.product_quantity_return as has_returned,

Add to $this->_join:

LEFT JOIN `'._DB_PREFIX_.'order_detail` od ON (od.`id_order` = a.`id_order`)

Right after the join variable is set, add:

$this->_group = 'GROUP BY a.id_order';

This way we avoid duplicates in the order list.

In the next step we will add the actual column, scroll down to around line 130, and add the following to the $this->fields_list variable:

                'has_returned'            => [
                    'title'      => $this->l('Return'),
                    'align'      => 'text-center',
                    'type'       => 'bool',
                    'callback'       => 'getIsReturned',
                ],

Lastly, out of the construct method (it can be anywhere, right after it or at the end of the file) we will add the callback function:

    public function getIsReturned($a, $order)
    {
        $has_returned = Db::getInstance()->getValue('SELECT product_quantity_return FROM '._DB_PREFIX_.'order_detail WHERE id_order =' .(int)$order['id_order'] .' AND product_quantity_return > 0');

        $class = $has_returned ? 'icon-check' : 'icon-remove';
        return '<i class="'.$class.'"></i>';

    }

The post Mark orders with returned products in the order list of ThirtyBees and PrestaShop appeared first on NemoPS.

Watch the screencast

Text Version

This tutorial can be applied to ThirtyBees as well!

To filter the PrestaShop order list we simply have to add conditions to the “where” clause of the AdminOrdersController.php, located at controllers/admin.
What we want to do is append the extra conditions to the construct method, around line 68:

if($this->context->employee->id_profile == 1)
        {
            $this->_where .= ' AND os.id_order_state = 2';
            $this->_where .= ' AND country.id_country = 21';
            $this->_where .= ' AND a.module = "bankwire"';
        }

The first condition will filter orders by current status, in this case “Payment Accepted”; The second will only display orders shipping to the United States; the third one will narrow the results to the ones paid by bank wire.
We are using the employee’s profile ID to trigger the conditions, so that only the selected department will be affected.

These snippets will be enough in most cases, but if you want to be extra careful, it’s better to also prevent direct access to the single order view, by editing the renderView method:

// At the beginning of the renderView method, after the $order variable has been validated, we can use this to prevent access if the order is not set to payment accepted. We can do the same with the bankwire method as we saw above, by simply changing the property name from current_state to module
if($this->context->employee->id_profile == 1)
        {

            if($order->current_state != 2)
            {
                $this->errors[] = Tools::displayError('You are not authorized to see this page.');
                return;
            }
        }

We can also do the same for the country condition, around line 1650, after $addressDelivery has been declared:

        if($this->context->employee->id_profile == 1) 
        {
            if($addressDelivery->id_country != 21)
            {
                $this->errors[] = Tools::displayError('You are not authorized to see this page.');
                return;
            }
        }

The post Filter orders by employee in the PrestaShop Back Office appeared first on NemoPS.

The post Display products from subcategories in PrestaShop 1.6 appeared first on NemoPS.

The post Images in PrestaShop 1.6’s Ajax Search appeared first on NemoPS.

Watch the Screencast

The post Update price on quantity change in PrestaShop 1.6 appeared first on NemoPS.

Last Week, forum user alexdee2007 posted an interesting override: it allows us to extend PrestaShop Modules’ controllers. Previously, we would have had to hardcode any modification within the originals, because the core system didn’t allow for such overrides. You can find a link to the original thread at the end of the tutorial.

What does the override do?

Its concept is very simple, yet smart. It extends the Dispatcher class’ Dispatch() method, modifying what the system looks for, once loading modules front controllers. Here is the core part:

if (file_exists(_PS_OVERRIDE_DIR_ . 'modules/' . $module_name . '/controllers/front/' . $this->controller . '.php')) {
    include_once(_PS_OVERRIDE_DIR_ . 'modules/' . $module_name . '/controllers/front/' . $this->controller . '.php');
    $controller_class = $module_name . $this->controller . 'ModuleFrontControllerOverride';
} else {

    $controller_class = $module_name . $this->controller . 'ModuleFrontController';
}

Basically, it looks for the existence of any file, in the override directory, with the same path and name of the original controller. If it exists, it assigns the name plus “Override” to the current class name (which is what PrestaShop does already, for modules).
This way, to extend any Module’s controller, we can simply create a file inside override/modules/*modulename*/controllers/front, named the same as the original, and then append Override to its Class name.

Video – A practical example

Additional Recources

• PrestaShop Modules Course
• The original Forum Thread

The post Overriding Modules Controllers in PrestaShop 1.6 appeared first on NemoPS.

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.

Retrieving the Free shipping value – 2 approaches

When dealing with an MVC pattern, the best approach is usually to keep logic and display code separated. Prestashop, however, allows us to retrieve the previously set configuration value in templates too, saving us the trouble to create an override and extend the default OrderController, in order to assign the value we need.

Therefore, given that the best way to go would be to create an override, grab the configuration value, and assign it to the template, for simplicity reasons I will get it directly in the template, so it’s ready to use.

Amending the template: shopping-cart.tpl

Reach your theme folder and open up shopping-cart.tpl. We will be adding our small advertisement right below the cart summary. This is the perfect chance to apply some cross-selling principles; therefore, if you use the cross-selling module in the cart page, the best spot to maximize your cross-selling rate is right above it, before the shopping cart hook .

Locate:

<div id="HOOK_SHOPPING_CART">{$HOOK_SHOPPING_CART}</div>

And right before it, add the following

{assign var='freeshipping_price' value=Configuration::get('PS_SHIPPING_FREE_PRICE')}

Explanation: as I mentioned before, I am grabbing the free shipping value directly from the tpl file, and assigning it to a variable that can be used within our Prestashop template.

Then, we need to check if it is actually holding a value

	{assign var='freeshipping_price' value=Configuration::get('PS_SHIPPING_FREE_PRICE')}
	{if $freeshipping_price}
		{assign var='freeshipping_price_converted' value={toolsConvertPrice price=$freeshipping_price}}	
	{/if}

Explanation: if the value exists, we need to convert it to the current currency (which might be other than the default). Therefore, we use the very handy toolsConvertPrice method to make sure the value is correctly set to the actual customer currency.

What’s next? We need to compare the total cart value without shipping to the free shipping one, and display a message in case it’s positive:

	
	{assign var='freeshipping_price' value=Configuration::get('PS_SHIPPING_FREE_PRICE')}

	{if $freeshipping_price}
		{assign var='freeshipping_price_converted' value={toolsConvertPrice price=$freeshipping_price}}


		{math equation='a-b' a=$total_price b=$total_shipping assign='total_without_shipping'}
		{math equation='a-b' a=$freeshipping_price_converted b=$total_without_shipping assign='remaining_to_spend'}

		{if $remaining_to_spend > 0}
			<p>{l s='Your total (without shipping) is'} {convertPrice price=$total_without_shipping}</p>
			<p><strong>{l s='You will be eligible for free shipping if you spend another'} {convertPrice price=$remaining_to_spend}</strong></p>
		{/if}
	

	{/if}

Explanation: first, we subtract the total shipping price from the overall total, which is the value taken in consideration by Prestashop when deciding if a cart is eligible or not, and then we simply subtract it from our minimum free shipping threshold. If the result is positive, we tell our customers how much is left to get rid of the shipping charge!

The post How to show “spend X to get Free Shipping” in Prestashop appeared first on NemoPS.

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'
		);

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:

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

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 NemoPS.

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.

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!

The post Quick Tip: Add product features to the Prestashop 1.6 Quick View box appeared first on NemoPS.