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

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

Adding the button to the cart page

The first thing we need is, of course, a button to play with. The ideal place where to add it is shopping-cart.tpl, specifically right after the order summary table. Therefore, open up the file, located in the theme folder, and read the end of the table, around line 454 of the default template:

					{/foreach}
				</tbody>
			{/if}
		</table>

Right after the table, let’s add a simple button:

		<a class="btn btn-default pull-right" id="removeAll" href="javascript:void(0)">
			Empty Cart
		</a>

Then, we need it to do something. We could use a submit, inside a form, but modern standards require speed, and nothing beats ajax in this.
Right after the button, let’s add a script tag:

<script>
			$(document).ready(function() {
				$('#removeAll').click(function(e) {
				});
			});
				
</script>

We want to target the click event of our new button, and fire an ajax request to the cart controller:

$(document).ready(function() {
	$('#removeAll').click(function(e) {
		e.preventDefault()
		$.ajax({
			type: 'POST',
			headers: { "cache-control": "no-cache" },
			url: baseUri + '?rand=' + new Date().getTime(),
			async: true,
			cache: false,
			dataType : "json",
			data: 'controller=cart&deleteAll=1&token=' + static_token + '&ajax=true',
			success: function(data){
				$('.opc-main-block, .step-num, #HOOK_SHOPPING_CART_EXTRA').fadeOut('fast');
				$('#order-detail-content').fadeOut('fast', function() {
					$('#emptyCartWarning').fadeIn('slow');	
				});
				ajaxCart.refresh();
			}
		})
	});
});

Explanation: The url we call is simply the base one, plus a random value with the date, to avoid the request being cached. In terms of data, we need to pass in the controller (cart), and action (deleteAll, which doesn’t exist yet, but we will create in a second), the security token, and then ajax=true.
On success, we fade out the page content, making sure any stuff from the One Page Checkout is hidden as well, and we also refresh the cart block.

The next step is to create something to handle the new deleteAll command.

Editing the CartController

As always, instead of modifying the core file, make sure you use an override for this method. The function we are interested in is postProcess:

    public function postProcess()
    {
        // Update the cart ONLY if $this->cookies are available, in order to avoid ghost carts created by bots
        if ($this->context->cookie->exists() && !$this->errors && !($this->context->customer->isLogged() && !$this->isTokenValid())) {
            if (Tools::getIsset('add') || Tools::getIsset('update')) {
                $this->processChangeProductInCart();
            } elseif (Tools::getIsset('delete')) {
                $this->processDeleteProductInCart();
            } elseif (Tools::getIsset('changeAddressDelivery')) {
                $this->processChangeProductAddressDelivery();
            } elseif (Tools::getIsset('allowSeperatedPackage')) {
                $this->processAllowSeperatedPackage();
            } elseif (Tools::getIsset('duplicate')) {
                $this->processDuplicateProduct();
            }
            // Make redirection
            if (!$this->errors && !$this->ajax) {
                $queryString = Tools::safeOutput(Tools::getValue('query', null));
                if ($queryString && !Configuration::get('PS_CART_REDIRECT')) {
                    Tools::redirect('index.php?controller=search&search='.$queryString);
                }

                // Redirect to previous page
                if (isset($_SERVER['HTTP_REFERER'])) {
                    preg_match('!http(s?)://(.*)/(.*)!', $_SERVER['HTTP_REFERER'], $regs);
                    if (isset($regs[3]) && !Configuration::get('PS_CART_REDIRECT')) {
                        $url = preg_replace('/(\?)+content_only=1/', '', $_SERVER['HTTP_REFERER']);
                        Tools::redirect($url);
                    }
                }

                Tools::redirect('index.php?controller=order&'.(isset($this->id_product) ? 'ipa='.$this->id_product : ''));
            }
        } elseif (!$this->isTokenValid()) {
            Tools::redirect('index.php');
        }
    }

See all those elseifs? We need another condition to target our deleteAll command. Therefore, at the end of the stack, add another:

...
} elseif (Tools::getIsset('duplicate')) {
    $this->processDuplicateProduct();
} elseif (Tools::getIsset('deleteAll')) {

}
// Make redirection
if (!$this->errors && !$this->ajax) {
...

Inside it, we do not need fancy stuff, only:

elseif (Tools::getIsset('deleteAll')) {
                
    $this->context->cart->delete();
    $this->context->cookie->id_cart = 0;
    die(1);


}

This will clear the cart for good, and reset the id for the current user. You can also avoid resetting it, if you prefer.
Save and test the button now. Make sure you clear the class_index.php file inside cache/, if you used an override.
We are done!

The post Creating a “Clear cart” button in PrestaShop appeared first on NemoPS.

Watch the screencast

The post Adding page-specific CSS and Javascript in PrestaShop appeared first on NemoPS.

If you want to dive into Prestashop development, these are likely the first methods you’ll be needing.

NOTICE: Values with “=” in the declaration are optionals.

Managing Configuration values in Prestashop

// Updating a single/multiple value/s
Configuration::updateValue($key, $values, $html = false, $id_shop_group = null, $id_shop = null);

// Getting a single value
Configuration::get($key, $id_lang = null, $id_shop_group = null, $id_shop = null)

// Getting Multiple Values
Configuration::getMultiple($keys, $id_lang = null, $id_shop_group = null, $id_shop = null)

// Getting the same key in all languages
Configuration::getInt($key, $id_shop_group = null, $id_shop = null)

// Erase the given entry
Configuration::deleteByName($key)

These methods are used to interact with the *prefix_*configuration table. It’s the quickest way to store simple data in Prestashop.

Example Usage

// Saving a normal string
$my_text = 'This is some text';
Configuration::updateValue('MY_CONFIG_PARAMETER', $my_text);

// Saving an html string
$my_text = '<p>This is some text</p>';
Configuration::updateValue('MY_CONFIG_PARAMETER', $my_text, true);

// Saving multiple values, KEYS represend ID_LANG
$my_texts = array(
	1 => 'This is some text',
	2 => 'This is some text in another language'
	);
Configuration::updateValue('MY_CONFIG_PARAMETER_MULTILANG', $my_text);


// Getting a single value
$my_text = Configuration::get('MY_CONFIG_PARAMETER');

// Getting a single value for the current language only
$my_text = Configuration::get('MY_CONFIG_PARAMETER', $this->context->language->id);

// Getting Multiple Values
$keys_to_get = array('MY_CONFIG_PARAMETER', 'OTHER_CONFIG_PARAMETER');
Configuration::getMultiple($keys_to_get);

// Delete the given key
Configuration::deleteByName('MY_CONFIG_PARAMETER');

Getting POST and GET in Prestashop

Tools::getValue($key, $default_value = false)

Retrieves the current POST or GET variable with the given key

Example Usage

// Getting either POST or GET with the key 'myvalue', the second parameter is what to assign then nothing is found.
$value = Tools::getValue('myvalue', 4);
// If no 'myvalue' POST or GET variable is set, $value will be 4.

Checking for submitted data in Prestashop

Tools::isSubmit($key);

Check whether or not the given key has been submitted to the current page.

Example Usage

if(Tools::isSubmit('myvalue'))
{
	// do something
}

Displaying Errors in Prestashop

Tools::displayError($string = 'Fatal error', $htmlentities = true, Context $context = null)

Displays an error with proper formatting.

Example Usage

if($myvalue != 1)
{
	// will need to be displayed later on
	$error_string = Tools::displayError('It is different from 1');
}

Displaying Confirmations in Prestashop Modules

$this->displayConfirmation($string);

Displays a properly formatted confirmation message. $this refers to a module, it is therefore only available in module contexts only. Refer to the proper variable elsewhere.

// this is inside a module's method
if($myvalue == 1)
{
	// will need to be displayed later on
	$conf_string = $this->displayConfirmation('Updated!');
}

Adding CSS in Prestashop

ControllerCore::addCSS($css_uri, $css_media_type = 'all', $offset = null, $check_path = true)

Appends the given CSS file/s to the page

Example Usage

// this is inside a module's method
$this->context->controller->addCSS($this->_path.'css/myfile.css', 'all');

// this is inside a controller's method
$this->addCSS(_THEME_CSS_DIR_.'product.css');

// adding multiple files
$files = array(
	_THEME_CSS_DIR_.'product.css' => 'all',
	_THEME_CSS_DIR_.'other_css.css' => 'all'
);
$this->addCSS($files);

Adding Javascript in Prestashop

ControllerCore::addJS($js_uri, $check_path = true);

Appends the given JS file/s to the page

Example Usage

// this is inside a module's method
$this->context->controller->addCSS($this->_path.'css/myfile.css', 'all');

// this is inside a controller's method
$this->addCSS(_THEME_CSS_DIR_.'product.css');

Adding jQuery Plugins in Prestashop

ControllerCore::addJqueryPlugin($name, $folder = null, $css = true)

Appends the given jQuery Plugin/s to the page

Example Usage

// this is inside a module's method, multiple files
$this->context->controller->addjqueryPlugin('fancybox');

// this is inside a controller's method
$this->addjqueryPlugin('fancybox');

// this is inside a controller's method, multiple values
$this->addjQueryPlugin(array('scrollTo', 'alerts', 'chosen', 'autosize', 'fancybox' ));

// this is inside a controller's method, without loading the plugin's CSS
$this->addjQueryPlugin('growl', null, false);

Adding jQuery UI Components in Prestashop

ControllerCore::addJqueryUI($component, $theme = 'base', $check_dependencies = true);

Appends the given jQuery UI component/s to the page

Example Usage

// this is inside a module's method, single file
$this->context->controller->addjQueryUI(ui.datepicker');

// this is inside a controller's method, multiple files
$this->addJqueryUI(array('ui.slider', 'ui.datepicker'));

Wrapping it up

We saw quite a number of useful PrestaShop Functions today, which are enough to start coding your own, simple module. Apart from trying to remember them all, I suggest creating code snippets with some text expander, so you can quickly drop them in, without having to remember the exact syntax.

Additional Resources

• Essential Prestashop Functions – Day 2
• Essential Prestashop Functions – Day 3
• Essential Prestashop Functions – Day 4
• Essential Prestashop Functions – Day 5

The post Essential Prestashop Functions – Day 1 appeared first on NemoPS.

Introduction

In this short tutorial we will add a fancy popup box that notifies the customer when a product is adedd to the cart. Something similar to the one I have in my Prestashop Addons store.

First of all, the shop must be configured to use ajax animation. This option is activated by default, but in case you disabled it, be sure it’s turned on by going to the back office, Modules -> Cart Block in Front office features, and set Ajax Cart to on.

Step 1 – Introduction to the Add to cart animation

Now that we’re sure ajax is on, let’s go to our root Prestashop folder, then modules/blockcart. The file where the evil code is stored is ajax-cart.js. As always, it’s not good practice to edit core files directly, as any update can destroy our changes, therefore copy ajax-cart.js in your theme’s folder, then js/modules/blockcart/. Create any necessary folder, of course. The structure is pretty much redundant, but needed by the system. We can now start editing our file.

What we’re interested in is the add function of th cart object. It’s located at about line 176. What we really want to mess with, anyway, is the actual animation, not the whole Add to Cart process. Therefore, we will be editing this piece of code only, from line 208 to 232:

	// add the picture to the cart
	var $element = $(callerElement).parent().parent().find('a.product_image img,a.product_img_link img');
	if (!$element.length)
		$element = $('#bigpic');
	var $picture = $element.clone();
	var pictureOffsetOriginal = $element.offset();

	if ($picture.size())
		$picture.css({'position': 'absolute', 'top': pictureOffsetOriginal.top, 'left': pictureOffsetOriginal.left});

	var pictureOffset = $picture.offset();
	if ($('#cart_block').offset().top && $('#cart_block').offset().left)
		var cartBlockOffset = $('#cart_block').offset();
	else
		var cartBlockOffset = $('#shopping_cart').offset();

	// Check if the block cart is activated for the animation
	if (cartBlockOffset != undefined && $picture.size())
	{
		$picture.appendTo('body');
		$picture.css({ 'position': 'absolute', 'top': $picture.css('top'), 'left': $picture.css('left'), 'z-index': 4242 })
		.animate({ 'width': $element.attr('width')*0.66, 'height': $element.attr('height')*0.66, 'opacity': 0.2, 'top': cartBlockOffset.top + 30, 'left': cartBlockOffset.left + 15 }, 1000)
		.fadeOut(100, function() {
			ajaxCart.updateCartInformation(jsonData, addedFromProductPage);
		});
	}
	else

We don’t want all this junk: get rid of everything, so that the ajax call’s success function looks like this:

success: function(jsonData,textStatus,jqXHR)
	{
		// add appliance to whishlist module
		if (whishlist && !jsonData.errors)
			WishlistAddProductCart(whishlist[0], idProduct, idCombination, whishlist[1]);
		ajaxCart.updateCartInformation(jsonData, addedFromProductPage);
	},

If you now refresh the page, you’ll notice the product is being added to the cart without animation. Already feels better!

Step 2 – Adding the floating box

Let’s add some valuable information to let our customers know they just added a product to the cart. We will first create the box with javascript, and in a second stage move some styling to the css file. Add the following just before ajaxCart.updateCartInformation(jsonData, addedFromProductPage);:

EDIT: There was a small mistake here, Marius pointed out in the comments: all of the following code MUST be enclosed within

if(!jsonData.errors)
{
}

Otherwise, the box will trigger even if customers add quantities exceeding products’ stocks! Thanks Marius!

				/* Creating the dark overlay */

				var overlay = $('<div></div>')
								.addClass('dark-overlay')
								.css({
									position: 'fixed',
									backgroundColor: 'black',
									'z-index': 99,
									display: 'none',
									opacity: .5,
									width: '100%',
									height: '100%',
									left: 0,
									top: 0
								});

				overlay.appendTo($('body')).fadeIn();

Explanation: basically, every time we now click on add to cart, a dark overlay will fade in the screen, preparing the field to give our popup more prominence. We also need to take it away once we are done though! Let’s add the following code after the previous one:

				$('.dark-overlay').click(function(){
					$(this).fadeOut(function(){
						$(this).remove()
					});
				})

And we can now toggle the dark overlay by clicking on it. Finally, let’s create our floating box:

				/* Creating the floating box */

				var floating_box = $('<div></div>')
									.addClass('add-to-cart-popup')
									.css({
										position: 'fixed',
										left: '50%',
										top: '30%',
										display: 'none',
										width: '450px',
										height: '160px',
										'margin-left': '-225px',
										backgroundColor : 'white',
										'z-index' : 100
									})

				floating_box.appendTo($('body')).fadeIn();

Explanation: We basically do what we did for the overlay, but with one difference: we want this box to have specific dimensions, and to be centered. To achieve this, we’ve got to add half on the width of the box as a negative left margin, while keeping the left positioning at 50%. This way, the box will be perfectly centered.

Step 3 – Populating the box

We have our not-so-informative box; it’s now time to make it useful. We’ve got a problem though! If we write our informative text inside the javascript file itself, it won’t be multilanguage by any mean. This is okay for single-language stores, but for all the others it will cause big troubles. How to deal with it? We will use a trick: we will add the translatable variables inside our template.

In your theme folder, navigate to modules/blockcart/blockcart.tpl and open it. If you can’t find that, because it’s not present, copy in this very same location the original one that you find in the module’s folder. At about line 35, there should be a javascript block with the following content:

<script type="text/javascript">
var customizationIdMessage = '{l s='Customization #' mod='blockcart' js=1}';
var removingLinkText = '{l s='remove this product from my cart' mod='blockcart' js=1}';
var freeShippingTranslation = '{l s='Free shipping!' mod='blockcart' js=1}';
var freeProductTranslation = '{l s='Free!' mod='blockcart' js=1}';
var delete_txt = '{l s='Delete' mod='blockcart' js=1}';
</script>

At the end of this, so right after delete_txt, add the following variables:

var added_txt = '{l s='Product added to the cart' mod='blockcart' js=1}';
var checkout_txt = '{l s='Proceed to checkout' mod='blockcart' js=1}';
var continue_txt = '{l s='Continue shopping' mod='blockcart' js=1}';

Now we can reference these in the javascript file. Basically, we assigned to those variables texts that change when the language changes, thus offering us a nice way to implement multiple languages in our box. Let’s deal with the actual box content. Go back to ajax.cart.js and add the following at the end of our last modifications, but before appending the floating box to the body:

				/* getting the checkout link */

				var checkout_link = $('#button_order_cart').attr('href');

				/* Populating the box */

				floating_box.append('<p>'+ added_txt+'</p>');
				floating_box.append('<a href="'+checkout_link+'" class="exclusive">'+ checkout_txt+'</a>');
				floating_box.append('<a class="close-popup button">'+ continue_txt+'</a>');

Then, after appending it

				$('.close-popup').click(function(){
					$(this).parent().fadeOut(function(){
						$(this).remove()
					});
					$('.dark-overlay').fadeOut(function(){
						$(this).remove()
					});
				})	

Explanation: First of all, we need to know where to direct users once they want to procees to the checkout. Instead of creating a new link, we can make use of the existing one in the cart. Therefore, we first assign that link to a variable (checkout_link).
Then, in this order, we append the text that informs an item has been added to the cart, the checkout link, and the link to continue shopping. This last one needs to close the current dialog, therefore, in the end we register its clicks: we remove both the dialog and the overlay.

As a last step in the javascript file, we need to amend the previous overlay click to be sure we also remove the new dialog:

				$('.dark-overlay').click(function(){
					$(this).fadeOut(function(){
						$(this).remove()
					});
					$('.add-to-cart-popup').fadeOut(function(){
						$(this).remove()
					});					
				})

And we are basically done with javascript. Test it out, you’ll notice it behaves as it should…but it looks ugly. In the next step, we will style it nicely to make it a bit more appealing.

Step 4 – Styling our new Add to cart dialog

First of all, since we added classes to our overlay and floating box, we can get rid of those javascript styling. We will override blockcart.css, therefore go to your module’s folder, blockcart/ and copy blockcart.css. reach your theme’s folder, then create this folder structure, if not present: css/modules/blockcart/. If that blockcart folder is already there, the stylesheet is likely to be found inside, and you can add to that directly. If not, paste in the one we just copied, and open it up in a code editor.

At the very end of the file, add the following:

/* Floating box modification */

.dark-overlay {
	position: fixed;
	background-color: black;
	z-index: 99;
	display: none;
	opacity: .5;
	width: 100%;
	height: 100%;
	left: 0;
	top: 0;
}

.add-to-cart-popup {
	position: fixed;
	left: 50%;
	top: 30%;
	display: none;
	width: 450px;
	height: 160px;
	margin-left: -225px;
	background-color : white;
	z-index : 100;
}

It’s just a copy/paste of those rules we previously applied. We can now remove them from the javascript, so that our previous objects now look like this:

/* this the overlay*/
	var overlay = $('<div>').addClass('dark-overlay');
/* And the box */
	var floating_box = $('<div>').addClass('add-to-cart-popup')

Refresh and check that it behaves as before.

Let’s now add a bit of spice to the box, by adding some other lines of css inside the popup’s class:

.add-to-cart-popup {
	position: fixed;
	left: 50%;
	top: 30%;
	display: none;
	width: 450px;
	height: 160px;
	margin-left: -225px;
	background-color : white;
	z-index : 100;
	border: 1px solid #f0f0f0;
	box-shadow:         0px 0px 10px rgba(50, 50, 50, 0.75);
	border-radius: 5px;
}

So, we’ve got some nice shadow and rounded corners, let’s space out those buttons, and give them some difference (we don’t want them to be the same, but rather the checkout one to be more prominent):

.add-to-cart-popup p {
	font-weight: bold;
	font-size: 18px;
	width: 100%;
	padding-top: 30px;
	text-align: center;
}

.add-to-cart-popup .exclusive {
	margin-left: 80px;
	margin-top: 20px;
}

.add-to-cart-popup .button {
	margin-left: 40px;
	color: #ccc;
	border: 1px solid black;
	background-image: -ms-linear-gradient(top, #404040 0%, #272727 100%);
	background-image: -moz-linear-gradient(top, #404040 0%, #272727 100%);
	background-image: -o-linear-gradient(top, #404040 0%, #272727 100%);
	background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0, #404040), color-stop(1, #272727));
	background-image: -webkit-linear-gradient(top, #404040 0%, #272727 100%);
	background-image: linear-gradient(to bottom, #404040 0%, #272727 100%);	

}

.add-to-cart-popup .button:hover {
	background:#272727;
}

And there it is! Of course, it can be even prettier, but this gives it a nice neutral style that can be further enhanced, and adapted to your needs. here is the final result:

Our new “add to cart” animation for Prestashop

The post A better “Add to Cart” animation for Prestashop (Updated) appeared first on NemoPS.

Introduction: the 3 files we need to edit

You might think that it can be simple enough to add a small thumb for each product in the ajax cart. Opening the tpl file, adding the same code you find in the product list. Done.
Not exactly. As with many other things, Prestashop badly mixes up javascript and html in the cart too, and creates a hybrid to be served on the fly, right after the product is added to the cart, but before a page refresh. The mentioned process might work if you reload the page after adding the product, but otherwise no picture will be shown. We need to edit more than the cart template file. Specifically, 3 files: blockcart.tpl, blockcart-json.tpl and ajax-cart.js.

Before starting, it is vital to avoid any direct modification, so create a folder named blockcart in your theme’s folder, /modules. Copy blockcart.tpl, and the json counterpart inside it. Lastly, inside the theme folder /js, create another blockcart folder, but this time paste ajax-cart.tpl inside.

NOTE: If those files are already in place, use those, instead of overwriting.

The basic markup

Open up blockcart.tpl. It has a really sad structure to deal with, as each product is not entirely separated from the next, if it has attributes. Therefore, I won’t focus on specific styling, but rather on the overall process. Look for the following block of code:

<span class="quantity-formated"><span class="quantity">{$product.cart_quantity}</span>x</span>

We want to insert our image right before this tag. So, before it, add the following:

<span style="display: inline-block; float:left"><img src="{$link->getImageLink($product.legend, $product.id_image, 'small_default')}" alt=""></span>

Note that I’m using inline css to float the image block. I am also assigning an inline-block property to it, so that you can further style it with dimensions at your discretion.

At this point, if you have products in the cart, and refresh the page, the picture will display. However, the float will make it… float – outside of the container. It’s contained inside a dt, and the line right above the one we just added should look like:

<dt id="cart_block_product_{$product.id_product}_{if $product.id_product_attribute}{$product.id_product_attribute}{else}0{/if}_{if $product.id_address_delivery}{$product.id_address_delivery}{else}0{/if}" class="{if $smarty.foreach.myLoop.first}first_item{elseif $smarty.foreach.myLoop.last}last_item{else}item{/if}">

Messy. We need this to clear every float, therefore let’s add a clearfix class to it:

<dt id="cart_block_product_{$product.id_product}_{if $product.id_product_attribute}{$product.id_product_attribute}{else}0{/if}_{if $product.id_address_delivery}{$product.id_address_delivery}{else}0{/if}" class="clearfix {if $smarty.foreach.myLoop.first}first_item{elseif $smarty.foreach.myLoop.last}last_item{else}item{/if}">

The tricky part

You might be happy with this, but most people would like to display pictures as soon as the user adds products to the cart. To do this in the javascript file, we first need the link variable assigned to the json retrieved in the ajax call, as there is no getImageLink function in Prestashop’s Javascript. Open up blockcart-json.tpl and locate the following:

		"price_float":   "{$product.total}",

Right after it, add:

	"imageLink":   "{$link->getImageLink($product.link_rewrite, $product.id_image, 'small_default')}",

This way, we can access the image link from inside the ajax call in the ajax-cart.js file. Open it up, and locate the following (there might be multiple instances of it, this should be about line 445 in Prestashop 1.5.4.1).

	content += '<span class="quantity-formated"><span class="quantity">' + this.quantity + '</span>x</span>';

Right before it, add:

	content += '<span style="display: inline-block; float:left"><img src="'+this.imageLink+'" alt=""></span>';

Again, we need to clear the floats in the previous line, turning this

	var content =  '<dt class="hidden" id="cart_block_product_' + domIdProduct + '">';

Into this

	var content =  '<dt class="clearfix hidden" id="cart_block_product_' + domIdProduct + '">';

Save, remove all products from the cart and refresh the page. Now add a product, it should immediatly display its cover!

The post Quick Tip: display product images in the Prestashop Ajax Cart appeared first on NemoPS.