• Version used: Prestashop 1.7.2.4

In this tutorial we will see how to apply my previous guide on Creating a “Clear cart” button in PrestaShop to PrestaShop 1.7, as it doesn’t work out of the box because of the new template.

The basic code still works, and the process is more or less the same, though the files needing modifications are totally different. For this tutorial, I will be using the classic (or standard) template, so wherever you read “themename”, just put classic. As a side not, please notice some files might be different if you use a custom PrestaShop theme.

Adding the button to the cart page in PrestaShop 1.7

The PrestaShop 1.7 template structure is quite different from 1.6, so we need to account for that. The main view for the cart is now located at themes/*themename*/templates/checkout/, and it’s called cart.tpl. Open it up, and locat the following block:

      {block name='cart_overview'}
        {include file='checkout/_partials/cart-detailed.tpl' cart=$cart}
      {/block}

This represents the products list block, and we want to add the button right after it:

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

At this point, unlike 1.6 where we could add our code directly to the template, with PrestaShop 1.7 we have to use a new file, named custom.js.

Adding new javascript to a PrestaShop 1.7 template

Open up custom.js, located in themes/*themename*/assets/js.
It’s empty by default, so if not (as in the case of custom templates), just add the code at the end.

This file is loaded on all pages, and since we only want to run it on the cart one, we have to wrap our snippet with a condition:

if(prestashop.page.page_name == 'cart')
{}

The prestashop javascript variable is a new global available in all pages of the shop, which contains a number of useful data that can be used in scripts. In this case, we use the current page name.

Here is all the rest of the code we need:

$(document).ready(function() {

	    $('#removeAll').click(function(e) {
	        e.preventDefault()
	        $.ajax({
	            type: 'POST',
	            headers: { "cache-control": "no-cache" },
	            url: prestashop.urls.base_url + "cart",
	            async: true,
	            cache: false,
	            data: 'deleteAll=1&token=' + prestashop.token + '&ajax=true',
	            success: function(data){	
	                window.location.reload();
	            }
	        })
	    });
	});	

Explanation: we are using the prestashop variable again, this time to fetch the base url. The cart controller, which we will be editing shortly, can be accessed at /cart by default, so we pass this url to the ajax call.
For the querystring, we pass in deleteAll, to make sure we can refer to this action in the next step, a token required by PrestaShop 1.7, and ajax=true, so that the cart know the action has to be run in ajax mode.
If the call is successful, we refresh the page to show that the cart is now empty.

Editing the CartController

PrestaShop 1.7 discourages the use of overrides, but we will use one in any case
Create a new file in override/controllers/front, and name it cartController.php. Reach back the original cart controller in the main controllers/front, and copy the whole updateCart method, pasting it into our new file:

    protected function updateCart()
    {
        // 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 (CartRule::isFeatureActive()) {
                if (Tools::getIsset('addDiscount')) {
                    if (!($code = trim(Tools::getValue('discount_name')))) {
                        $this->errors[] = $this->trans('You must enter a voucher code.', array(), 'Shop.Notifications.Error');
                    } elseif (!Validate::isCleanHtml($code)) {
                        $this->errors[] = $this->trans('The voucher code is invalid.', array(), 'Shop.Notifications.Error');
                    } else {
                        if (($cartRule = new CartRule(CartRule::getIdByCode($code))) && Validate::isLoadedObject($cartRule)) {
                            if ($error = $cartRule->checkValidity($this->context, false, true)) {
                                $this->errors[] = $error;
                            } else {
                                $this->context->cart->addCartRule($cartRule->id);
                            }
                        } else {
                            $this->errors[] = $this->trans('This voucher does not exist.', array(), 'Shop.Notifications.Error');
                        }
                    }
                } elseif (($id_cart_rule = (int)Tools::getValue('deleteDiscount')) && Validate::isUnsignedId($id_cart_rule)) {
                    $this->context->cart->removeCartRule($id_cart_rule);
                    CartRule::autoAddToCart($this->context);
                }
            }
        } elseif (!$this->isTokenValid() && Tools::getValue('action') !== 'show' && !Tools::getValue('ajax')) {
            Tools::redirect('index.php');
        }
    }

All we have to do now is add our condition, as part of all those ELSEIFs:

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

Here is the final code:

    protected function updateCart()
    {
        // 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('deleteAll')) { /* Nemo */
                $this->context->cart->delete();
                $this->context->cookie->id_cart = 0;
                die(1);
            } elseif (CartRule::isFeatureActive()) {
                if (Tools::getIsset('addDiscount')) {
                    if (!($code = trim(Tools::getValue('discount_name')))) {
                        $this->errors[] = $this->trans('You must enter a voucher code.', array(), 'Shop.Notifications.Error');
                    } elseif (!Validate::isCleanHtml($code)) {
                        $this->errors[] = $this->trans('The voucher code is invalid.', array(), 'Shop.Notifications.Error');
                    } else {
                        if (($cartRule = new CartRule(CartRule::getIdByCode($code))) && Validate::isLoadedObject($cartRule)) {
                            if ($error = $cartRule->checkValidity($this->context, false, true)) {
                                $this->errors[] = $error;
                            } else {
                                $this->context->cart->addCartRule($cartRule->id);
                            }
                        } else {
                            $this->errors[] = $this->trans('This voucher does not exist.', array(), 'Shop.Notifications.Error');
                        }
                    }
                } elseif (($id_cart_rule = (int)Tools::getValue('deleteDiscount')) && Validate::isUnsignedId($id_cart_rule)) {
                    $this->context->cart->removeCartRule($id_cart_rule);
                    CartRule::autoAddToCart($this->context);
                }
            }
        } elseif (!$this->isTokenValid() && Tools::getValue('action') !== 'show' && !Tools::getValue('ajax')) {
            Tools::redirect('index.php');
        }
    }

We are done! Reach the back office, Advanced Parameters, Performance, and hit the clear cache button on the top right, so that the override takes place.

Should it not work, check that Disable all overrides is set to no, right below on the same page. If it still doesn’t, try editing the core CartController.php.

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

Watch the screencast

The post Limit the total number of products in the cart – PrestaShop 1.6 appeared first on NemoPS.

The post Taking back the Add To Cart button in the Product list (Prestashop 1.7) appeared first on NemoPS.

• Version used: Prestashop 1.6

« Save Prestashop Custom fields on “Add to cart” – Part 1

Demo here  

Continuing from what we did in the previous tutorial, instead of modifying the ajax-cart.js file, this time we will handle product.js, located in the theme folder /js/. To make things easier we will also add atrigger button to fire the upload event, and modify our previously amended tools.js.

Before starting, it’s important to notice this kind of upload will not work for older browsers (like ie9), so you might want to add some kind of warning, or completely hide the ajax button in this case.

Handling ajax file uploads in Prestashop – product.js

First off, let’s create our small trigger. Locate product.tpl in your theme’s folder, open it up and right before this

						</div>
					{/if}
					{if $product->text_fields|intval}

Add the following

<a class="btn btn-default" href="javascript:void(0)" id="uploadTrigger">Upload</a>

If your theme looks different, make sure it’s inside this conditional, at least:

{if $product->uploadable_files|intval}
...
{/if}

Then, let’s deal with Javascript.

Open up product.js and make sure you put your cursor inside the very first $(document).ready(function() block. The first thing we need to do is create a list of files that the user might want to upload, as soon as the file inputs change:

	var files = new Array();
	$('.customizationUploadLine').find('input[type="file"]').on('change', prepareUpload);
	function prepareUpload(event)
	{
	  files.push({'name' : event.target.name, 'file' :event.target.files[0]});
	}

Explanation: we are taking advantage of the ‘files’ property of the change event, which holds the file(s) currently being added to the clicked input. We want to record modifications to all our file customization fields, and push the files array with each of the possible uploads. We will need each entry to be named as the form field, so we use a new object for each file, holding the correct name in the ‘name’ property, and the actual file content in the ‘file’ one.

The original method I used came from this tutorial, in case you want to have a reference of the source code: Ajax file uploads with jQuery

Now, let’s target the upload button’s click;

	$('#uploadTrigger').click(function(e) {
		if(files.length > 0)
		{
			// here will be out ajax
		} // end checking files length
		else alert('Nothing to upload!');
	});

We have to make sure we have at least one file to upload; otherwise it’s useless to continue with the call.

Since we do not know how long the file upload will take, it’s better to prevent the user from taking further actions before it’s completed. Let’s add some feedback:

			$('<div class="myoverlay"></div>').css({

				'position' : 'fixed',
				'top' : 0,
				'left' : 0,
				'background' : 'black',
				'background' : 'rgba(0,0,0,.5)',
				'z-index' : 5999,
				'width' : '100%',
				'height' : '100%',
				'cursor' : 'pointer'
			}).appendTo('body');
			
			$('<div class="uploadingfiles">Your files are being uploaded...<img src="'+baseUri+'themes/default-bootstrap/img/ajax-loader.gif"></div>')
				.css({
					'position' : 'absolute',
					'top' : '30%',
					'left' : '50%',
					'width' : '300px',
					'margin-left' : '-150px',
					'text-align' : 'center',
					'padding' : '10px',
					'background' : 'white'
				})
				.appendTo('.myoverlay');

Now the tricky part. We will use the new HTML5, supported with XHR2 (that is why it will not work on old browsers!). Right after appending the box, add the following:

			var data = new FormData();

		    $.each(files, function(key, obj)
		    {
		        data.append(obj.name, obj.file);
		    });

		    data.append('submitCustomizedDatas', 1);
		    data.append('ajax', 1);

Explanation: as mentioned, we need a FormData object to hold our data. Then, we iterate through each of the files, assigning them to the respective name. The append method works like data.append(key, data). Lastly, since in the previous tutorial we only ran the customization scripts when having two specific queries sent to the server, we also append them to our form data. The value here is not important, as long as it’s more than 0.

The ajax call

Here is our code so far:

	var files = new Array();
	$('.customizationUploadLine').find('input[type="file"]').on('change', prepareUpload);
	// Grab the files and set them to our variable
	function prepareUpload(event)
	{
	  files.push({'name' : event.target.name, 'file' :event.target.files[0]});
	}
	

	$('#uploadTrigger').click(function(e) {

	
		if(files.length > 0)
		{

			$('<div class="myoverlay"></div>').css({

				'position' : 'fixed',
				'top' : 0,
				'left' : 0,
				'background' : 'black',
				'background' : 'rgba(0,0,0,.5)',
				'z-index' : 5999,
				'width' : '100%',
				'height' : '100%',
				'cursor' : 'pointer'
			}).appendTo('body');
			
			$('<div class="uploadingfiles">Your files are being uploaded...<img src="'+baseUri+'themes/default-bootstrap/img/ajax-loader.gif"></div>')
				.css({
					'position' : 'absolute',
					'top' : '30%',
					'left' : '50%',
					'width' : '300px',
					'margin-left' : '-150px',
					'text-align' : 'center',
					'padding' : '10px',
					'background' : 'white'
				})
				.appendTo('.myoverlay');


			var data = new FormData();

		    $.each(files, function(key, obj)
		    {
		        data.append(obj.name, obj.file);
		    });

		    data.append('submitCustomizedDatas', 1);
		    data.append('ajax', 1);
		 

		} // end checking files length
		else alert('Nothing to upload!');
	});

Pretty long already! But we need to tackle the most important part: the ajax call. Right after appending ‘ajax’, add the following:

$.ajax({
    url: $('#customizationForm').attr('action'),
    type: 'POST',
    data: data,
    cache: false,
    dataType: 'json',
    processData: false,
    contentType: false, 
    success: function(data, textStatus, jqXHR)
    {
      
    },
    error: function(jqXHR, textStatus, errorThrown)
    {
    }
});

Explanation: two parts of this call deserve a better explanation; first, we are telling jQuery not to process data. Otherwise, the files array will be converted into a string, making it impossible to be further processed; then, we are setting contentType to false as well, to prevent the script to send over a normally encoded form (without files).

At this point, it’s worth testing out the script. It will inevitably break at some point, but you can see the upload being successful or not by refreshing the page when you see the call is complete. Make sure you keep an eye on the Network Tab in the browser’s console for this, to also troubleshoot any eventual error.

When it’s done, refresh the page. If everything went smoothly, the image will appear at the top of the file input!

Giving some feedback to the user

If we were the only ones using the site, we could as well jump to the next step. But since it’s rarely the case, let’s give our customers a bit of feedback on what’s up with files. In the “success” method of the ajax call, add the following:

if(typeof data.errors === 'undefined')
{

	$.each(files, function(key, obj)
    {
        $('input[name="'+obj.name+'"]').addClass('filled');
        previewFile($('input[name="'+obj.name+'"]'), obj.file);

    });
    $('.uploadingfiles').text('Upload Complete!');
}
else
{
   $('.uploadingfiles').text('Error while uploading, please refresh the page and try again');
}
$('.myoverlay').click(function(){$(this).remove()});

Explanation: first off, we must check that we don’t have any error coming back from the call. If we do, we replace our “uploading” text with the error string. If everything is ok (if(typeof data.errors === ‘undefined’)) we iterate through our files list, and add a preview above the list. Notice I am calling a function named previewFile, which we do not have yet!

You might have noticed I added a “filled” class as well to the input. Why? We will see this shortly, when amending tools.js.

Make sure you always add

$('.myoverlay').click(function(){$(this).remove()});

So that users can get rid of the overlay when needed.

Adding an image Preview

We are almost done! let’s create the previewFile function. Right before this:

	$('#uploadTrigger').click(function(e) {

Add

	function previewFile(target, file) {

		$('#uniform-'+target.attr('id')).before($('<img id="preview-'+target.attr('id')+'"/>'));
		var preview = $('#preview-'+target.attr('id'));
		var reader  = new FileReader();

		preview.attr('width', 64);

		reader.onloadend = function () {
			preview.attr('src', reader.result);
		}

		if (file) {
			reader.readAsDataURL(file);
		} else {
			preview.attr('src', "");
		}
	}

Explanation: we are taking advantage of the FileReader class. First, we prepend an image tag to our input’s parent, making sure the preview box is no larger than 64 pixels. Then, we replace out image source after the reader has actually read the file, if it exists, passing in the one we got before, out of the original “files” array. It’s a bit confusing, but you can basically copy/paste to have it working. Here is the source: Image preview for ajax file uploads

As a finishing touch, we might want to handle failed ajax requests as well:

 error: function(jqXHR, textStatus, errorThrown)
{
   $('.uploadingfiles').text('ERRORS: ' + errorThrown);
    $('.myoverlay').click(function(){$(this).remove()});
}

Yet again, tools.js!

Back to our beloved tools.js! Here is where we left off:

function checkCustomizations()
{
    var pattern = new RegExp(' ?filled ?');
 
    if (typeof customizationFields != 'undefined')
        for (var i = 0; i < customizationFields.length; i++)
        {
            if (parseInt(customizationFields[i][1]) == 1 && ($('#' + customizationFields[i][0]).val() == ''))
  			return false;
        }
    return true;
}

Now, this will make it impossible to save our current files. In order to be able to do it, we need to modify the function as follows

function checkCustomizations()
{
    var pattern = new RegExp(' ?filled ?');
 
    if (typeof customizationFields != 'undefined')
        for (var i = 0; i < customizationFields.length; i++)
        {
            if (parseInt(customizationFields[i][1]) == 1 && $('#' + customizationFields[i][0]).val() == '' && !pattern.test($('#' + customizationFields[i][0]).attr('class')))
				return false;
        }
    return true;
}

Explanation: remember when we added the ‘filled’ class? Now we also want to make sure the class is not there, to return false. This way, the field will validate if it hass the ‘filled’ class!

Save and try it out, it should work!

The final code for product.js:

	var files = new Array();
	$('.customizationUploadLine').find('input[type="file"]').on('change', prepareUpload);
	// Grab the files and set them to our variable
	function prepareUpload(event)
	{
	  files.push({'name' : event.target.name, 'file' :event.target.files[0]});
	}
	


	function previewFile(target, file) {

		$('#uniform-'+target.attr('id')).before($('<img id="preview-'+target.attr('id')+'"/>'));
		var preview = $('#preview-'+target.attr('id'));
		var reader  = new FileReader();

		preview.attr('width', 64);

		reader.onloadend = function () {
			preview.attr('src', reader.result);
		}

		if (file) {
			reader.readAsDataURL(file);
		} else {
			preview.attr('src', "");
		}
	}


	$('#uploadTrigger').click(function(e) {

	
		if(files.length > 0)
		{

			$('<div class="myoverlay"></div>').css({

				'position' : 'fixed',
				'top' : 0,
				'left' : 0,
				'background' : 'black',
				'background' : 'rgba(0,0,0,.5)',
				'z-index' : 5999,
				'width' : '100%',
				'height' : '100%',
				'cursor' : 'pointer'
			}).appendTo('body');
			
			$('<div class="uploadingfiles">Your files are being uploaded...<img src="'+baseUri+'themes/default-bootstrap/img/ajax-loader.gif"></div>')
				.css({
					'position' : 'absolute',
					'top' : '30%',
					'left' : '50%',
					'width' : '300px',
					'margin-left' : '-150px',
					'text-align' : 'center',
					'padding' : '10px',
					'background' : 'white'
				})
				.appendTo('.myoverlay');


			var data = new FormData();

		    $.each(files, function(key, obj)
		    {
		        data.append(obj.name, obj.file);
		    });

		    data.append('submitCustomizedDatas', 1);
		    data.append('ajax', 1);
		    $.ajax({
		        url: $('#customizationForm').attr('action'),
		        type: 'POST',
		        data: data,
		        cache: false,
		        dataType: 'json',
		        processData: false,
		        contentType: false,
		        success: function(data, textStatus, jqXHR)
		        {
		            if(typeof data.errors === 'undefined')
		            {
		            	$.each(files, function(key, obj)
					    {
					        $('input[name="'+obj.name+'"]').addClass('filled');
					        previewFile($('input[name="'+obj.name+'"]'), obj.file);

					    });
					    $('.uploadingfiles').text('Upload Complete!');
		            }
		            else
		            {
		               $('.uploadingfiles').text('Error while uploading, please refresh the page and try again');
		            }
		            $('.myoverlay').click(function(){$(this).remove()});
		        },
		        error: function(jqXHR, textStatus, errorThrown)
		        {
		           $('.uploadingfiles').text('ERRORS: ' + errorThrown);
		            $('.myoverlay').click(function(){$(this).remove()});
		        }
		    });

		} // end checking files length
		else alert('Nothing to upload!');
	});

Taking it a step further

Given that the previous works for you, we can try taking it a step further. If you really (really!) think your customers will never hit the upload button, you can automate the process and build it inside the ajax-cart as well. How? Opening ajax-cart.js, locate the previous code we added in part1:

		if(addedFromProductPage && $('#customizationForm').length > 0)
		{
			...
		}

Right before it, add:

	$('#uploadTrigger').click();

Then, inside product.js, make sure you also add

	async: false,

As property of the ajax call, otherwise the add to cart will run before the upload is completed!

The post Save Prestashop Custom fields on “Add to cart” – Part 2 appeared first on NemoPS.

• Version used: Prestashop 1.6

Save Prestashop Custom fields on “Add to cart” – Part 2 »

Demo here  

We do need ajax

Before starting, it’s important to notice we do need to activate the ajax cart, as we will be catching the fields’ content and serialize it; then intercept the “add” method of the ajax cart and send another ajax request to the product controller, to save customized data before anything is added to the cart itself.
That said, we need to modify two javascript files, and one controller:

• ajax-cart.js
• tools.js
• ProductController.php

While we can use an override for the controller, and clone the template for the ajax-cart file, we really need to amend the original tools.js, located in the main js/ folder.

That said, in this first part we will only deal with text inputs, leaving the file upload to the next tutorial.

Ajax-cart.php

After reaching the product page (of a product having a text customization field, of course), open up themes/*yourthemename*/modules/blockcart/ajax-cart.js

Locate the following method

	add : function(idProduct, idCombination, addedFromProductPage, callerElement, quantity, whishlist)

It should be around line 271 in Prestashop 1.6.0.14

Inside it, at the very beginning, right before:

if (addedFromProductPage && !checkCustomizations())

Add the following:

		if(addedFromProductPage && $('#customizationForm').length > 0)
		{
	
			$('#quantityBackup').val($('#quantity_wanted').val());
			customAction = $('#customizationForm').attr('action');
			$('body select[id^="group_"]').each(function() {
				customAction = customAction.replace(new RegExp(this.id + '=\\d+'), this.id +'=' + this.value);
			});
			
		}

Explanation: first, we have to make sure we are adding to the cart from the single product view (it would make no sense in the list) and that the current item does have customization fields. What comes inside is almost a 1:1 copy of the saveCustomization() method we can find in the product.js file. We need to modify the action so that it considers attributes as well. customAction is the url we will send the ajax POST to.

Therefore, continuing from it:

		if(addedFromProductPage && $('#customizationForm').length > 0)
		{
	
			$('#quantityBackup').val($('#quantity_wanted').val());
			customAction = $('#customizationForm').attr('action');
			$('body select[id^="group_"]').each(function() {
				customAction = customAction.replace(new RegExp(this.id + '=\\d+'), this.id +'=' + this.value);
			});
			// ajax to product page with custom action
			var customization_entries = $('#customizationForm').serialize();
			$.ajax({
				async:false,
				type: 'POST',
				data: customization_entries+ '&ajax=1',
				dataType: 'json',
				url: customAction,
				success: function(data){
					
				}
			})	
		}

Explanation: after serializing the array’s entries (remember we are only using text fields for the time being), we send them over to the actionUrl (that is, the ProductController) so it can further take care of our data. Notice I also appended &ajax=1 as the controller will need to know it’s receiving an ajax request. Time to move to the override!

IMPORTANT! Make sure you set the ajax request as async:false, otherwise the add to cart will run before our customization is saved!

Note: do not try adding the product to the cart at this stage, it will not work, saying the customization field is required.

The Product Controller

Having our javascript all setup, let’s deal with the product controller. To make it quick, I will append the new method to the original file, but you can feel free to use an override instead. What it needs is a method that handles data before anything is outputted to screen. Fortunately, we don’t even need to create it, it’s built in, and it is named postProcess. The only issue is that the ProductController.php file doesn’t use, so we need to append it ourselves.

Open up controllers/front/ProductController.php, reach the end of the file, and add the following (make sure you are inside the class!)

	public function postProcess()
	{
		if (Tools::getValue('ajax') && Tools::isSubmit('submitCustomizedDatas'))
		{
			if (!$this->context->cart->id && isset($_COOKIE[$this->context->cookie->getName()]))
			{
				$this->context->cart->add();
				$this->context->cookie->id_cart = (int)$this->context->cart->id;
			}

			$this->pictureUpload();
			$this->textRecord();
			$this->formTargetFormat();

			if($this->errors)
			{
				$error_list = implode('; ', $this->errors);
				die(Tools::jsonEncode(array('errors' => $error_list)));
			} else 
				die(Tools::jsonEncode(array('success' => true)));
				
		}
	}

Explanation: We only need to run this method for our ajax call, and only when customization data is sent over. After checking it, we simply run the methods Prestashop uses when submitting a regular customization form:

			$this->pictureUpload();
			$this->textRecord();
			$this->formTargetFormat();

Please notice pictureUpload is currently not being used, as we are not uploading anything. Also, we need to create a new cart in case it does not exist, before adding the text to it, so it has an id to deal with.

Then, we check for errors, sending them back to the ajax-cart.js file if there are, otherwise returning success. Since we want to make sure data has been saved, let’s go back to our JS for a second, and do something on the “success” method of the ajax call:

		if(addedFromProductPage && $('#customizationForm').length > 0)
		{
	
			$('#quantityBackup').val($('#quantity_wanted').val());
			customAction = $('#customizationForm').attr('action');
			$('body select[id^="group_"]').each(function() {
				customAction = customAction.replace(new RegExp(this.id + '=\\d+'), this.id +'=' + this.value);
			});
			// ajax to product page with custom action
			var customization_entries = $('#customizationForm').serialize();
			$.ajax({
				type: 'POST',
				data: customization_entries+ '&ajax=1',
				dataType: 'json',
				url: customAction,
				success: function(data){
					if(typeof(data.errors) !== 'undefined')
					{
						alert('Error while saving customization data');
						return;
					}
						
				}
			})	
		}

We basically only added this part

if(typeof(data.errors) !== 'undefined')
{
	alert('Error while saving customization data');
	return;
}

To the success handler, that triggers when the ajax call is successful. Of course, you might want to expand this, and add a further level of checks to make sure data has really been saved. However, if the field is required, your product will not be added to the cart, in any case.

At this point, try writing something in the field, then click add to cart. What? Not working? Why? Prestashop can be nasty to deal with; we have to perform one last modification.

Tools.js

The last file we need to deal with might be a pain in case you upgrade. Therefore, make sure you keep a backup of the modification and/or write these steps somewhere, in case you need to apply them again. Open up js/tools.js. What we are interested in is the checkCustomizations method:

function checkCustomizations()
{
	var pattern = new RegExp(' ?filled ?');

	if (typeof customizationFields != 'undefined')
		for (var i = 0; i < customizationFields.length; i++)
		{
			/* If the field is required and empty then we abort */
			if (parseInt(customizationFields[i][1]) == 1 && ($('#' + customizationFields[i][0]).html() == '' ||  $('#' + customizationFields[i][0]).text() != $('#' + customizationFields[i][0]).val()) && !pattern.test($('#' + customizationFields[i][0]).attr('class')))
				return false;
		}
	return true;
}

Pay attention to the following line

function checkCustomizations()
{
	if (parseInt(customizationFields[i][1]) == 1 && ($('#' + customizationFields[i][0]).html() == '' ||  $('#' + customizationFields[i][0]).text() != $('#' + customizationFields[i][0]).val()) && !pattern.test($('#' + customizationFields[i][0]).attr('class')))
				return false;

This is what is currently preventing us from saving our customization. Actually, it gets saved, but the product is not added to the cart.
let’s get rid of a good portion of it

	if (parseInt(customizationFields[i][1]) == 1 && ($('#' + customizationFields[i][0]).val() == ''))
		return false;

The only thing we are doing to check it, is making sure it has a value. THat is all we need for now!
Refresh and test, it should be working now!

Next up…

Saving text customization fields when hitting the add to cart button was not too complicated. Things will get really nasty in the next tutorial, when we will deal with asynchronous file uploads! Stay tuned!

Save Prestashop Custom fields on “Add to cart” – Part 2 »

The post Save Prestashop Custom fields on “Add to cart” – Part 1 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.

• Compatibility: Prestashop 1.5 (all versions), Prestashop 1.4 with slight changes

What we will do

The main purpose of this tutorial will be to add checkboxes so that customers can select which products they want, and add them to cart with a single click (provided that they are on the same page!). However, since we are at it, we will also add a text input so that they can choose how many items they want to add as well. This new box will also work with the regular ‘Add to cart’, so feel free to follow the last step only if you want! Let’s get started.

The checkboxes and trigger button

The very first thing we need to do is add a couple of checkboxes so that people can choose which products they want. Of course, after they do this they need to be able to add them to cart as well, therefore we also need a trigger button.

As always, I will be using the default theme for the demonstration, and line numbers and contents might change if you use a custom one.

Open up product-list.tpl, located in your theme’s folder. Choose a suitable place for the checkbox; I decided to add it right above the normal ‘Add to cart’. So, after line 58, or wherever else you want inside the block, add:

<span class="checktoadd">
	{l s='Check to add to cart'} <input type="checkbox" value="{$product.id_product}" class="add_me_to_cart"/>
</span>

Save and refresh a category page, you should see something like this:

Yeah, it looks odd, but it’s only to demonstrate the purpose! As you can see, we are giving the checkbox a value equal to the product id, so that we know which ones are checked.

Let’s now add the trigger: At the very end of the file, right before this:

	<!-- /Products list -->
{/if}

Add this:

	<a href="javascript:void(0)" class="multi_add button">{l s='Add selected to cart'}</a>

Nothing special here, it’s a normal button without any anchor link. We have our ground ready: let’s move on!

As a final touch, we need a piece of text to inform our customers if no item is checked. Add the following at the very end of product-list.tpl

<script type='text/javascript'>
	var noSelectionTxt = "{l s='No items selected'}";
</script>

The multiple ‘Add to cart’ Javascript

In order to add those products to cart at once, we need, needless to say, javascript. We will simply extend the core ‘Ajax add to cart’ functionality; therefore, this method will not work for those who decided not to use ajax.

Depending on your theme, you might, or might not have the file we need in the theme’s folder. Reach it, then go to js/modules and look for blockcart. If it’s there already, access the folder and open ajax-cart.js. If not, as if you are using the default theme, go back to Prestashop’s root, then modules/blockcart, grab ajax-cart.js, copy and paste it in the previously mentioned folder. At the end, this is the file we need to edit: themes/THEMENAME/js/modules/blockcart/ajax-cart.js.

Open up the file, and locate the following snippet at the beginning of it:

	//for every 'add' buttons...
	$('.ajax_add_to_cart_button').unbind('click').click(function(){
		...
	}

Right before it, let’s start adding our code:

		$('.multi_add').unbind('click').click(function() {
				
			// get all checked items
			var checked_items = $('.add_me_to_cart:checked');

			if(checked_items.length == 0)
				alert(noSelectionTxt);
			else {
			}
			

		});

As a first step, target the click to out multi add button, and store all check items’ checkboxes inside a variable. If none is selected, we alert a message, else, let’s add them to cart!

		$('.multi_add').unbind('click').click(function() {
				
			// get all checked items
			var checked_items = $('.add_me_to_cart:checked');

			if(checked_items.length == 0)
				alert(noSelectionTxt);
			else {
				$.each(checked_items, function(i, item) {
					 var id_prd = $(item).val(); // val of the checkbox!
					 ajaxCart.add(id_prd, null, false, $(item).parent().parent().find('.ajax_add_to_cart_button'));
					 // uncheck current element
					 $(item).removeAttr('checked');
				});
			}
			

		});

For each of the items stored in the variable, we grab the val() attribute of the checkbox, which is the product id. Then, we simply call the default ajaxCart.add function to add them. Note the following:

$(item).parent().parent().find('.ajax_add_to_cart_button')

We passed it as fourth parameter to the function. It is referring to the default ajax add to cart button, so that the base script can grab the product image for the ‘add to cart’ animation.

In the end, we uncheck the box.

Save and test, we should already be done for this first step!

Adding multiple quantities to Prestashop’s cart

As we are done with the first step, let’s take care of adding the quantity input boxes. It’s far easier than it looks. Once more, locate a suitable place for the new content. I will get rid of the ‘view’ button of the default theme, to avoid overcrowding each product block.

Therefore, locate the following snippet in product-list.tpl:

	<a class="button lnk_view" href="{$product.link|escape:'htmlall':'UTF-8'}" title="{l s='View'}">{l s='View'}</a>

And replace it with:

<input size="1" type="text" class="multi_product_quantity" value="1" />

Messy. But once again, this is a simple demonstration.

Now, for the javascript part, go back to ajax-cart.js (if you haven’t followed the tutorial so far, refer back to the beginning of “The multiple ‘Add to cart’ Javascript”). let’s first add the quantity variable to the default button, locate the following:

	//for every 'add' buttons...
	$('.ajax_add_to_cart_button').unbind('click').click(function(){
		var idProduct =  $(this).attr('rel').replace('nofollow', '').replace('ajax_id_product_', '');
		if ($(this).attr('disabled') != 'disabled')
			ajaxCart.add(idProduct, null, false, this);
		return false;
	});

Store the chosen quantity as a variable right after the product id:

		//for every 'add' buttons...
		$('.ajax_add_to_cart_button').unbind('click').click(function(){
			var idProduct =  $(this).attr('rel').replace('nofollow', '').replace('ajax_id_product_', '');
			var qty = $(this).parent().find('.multi_product_quantity').val();

			// if quantity is 0 or NaN, return;
			if(qty == 0 || isNaN(qty))
				return false;

			if ($(this).attr('disabled') != 'disabled')
				ajaxCart.add(idProduct, null, false, this);
			return false;
		});

If quantity is 0, or a non-numeric value, we simply do not perform the action. Lastly, add the quantity as fifth parameter to the ajaxCart.add method

		//for every 'add' buttons...
		$('.ajax_add_to_cart_button').unbind('click').click(function(){
			var idProduct =  $(this).attr('rel').replace('nofollow', '').replace('ajax_id_product_', '');
			var qty = $(this).parent().find('.multi_product_quantity').val();

			// if quantity is 0 or NaN, return;
			if(qty == 0 || isNaN(qty))
				return false;

			if ($(this).attr('disabled') != 'disabled')
				ajaxCart.add(idProduct, null, false, this, qty);
			return false;
		});

And we are done! At this point, we can amend the previous section’s code, and allow adding multiple products and multiple quantities together.

		$('.multi_add').unbind('click').click(function() {
				
			// get all checked items
			var checked_items = $('.add_me_to_cart:checked');

			if(checked_items.length == 0)
				alert(noSelectionTxt);
			else {
				$.each(checked_items, function(i, item) {
					 $(item).parent().parent().find('.ajax_add_to_cart_button').click();
				});
			}

		});

There is no point in calling the same code 2 times, therefore we can simply trigger the default ajax add to cart button for each product.

The post Adding multiple products and quantities to Prestashop’s Cart appeared first on NemoPS.

Watch The Screencast (text below)

Hide shipping cost for non registered users

You might have come across this issue if you setup zones so that carriers have a different price depending on the customer’s address: a default shipping price, or even worse a free shipping label is shown for everybody who has not login yet.

This can be misleading at times, and some of your customers will definitely get angry if the price rises after adding shipping address details. Moreover, we do not want this.

First, let’s disable our carrier (remember to do it for all carriers if you use many) for visitors in the back office. Go to Shipping -> Carriers and click on a carrier. Then, disable it for visitors.

You can also do it for guests if you disabled the guest checkout.

Refresh and see it says free shipping! This is even more misleading but now we can target that label and still have the total match the products total price.

Let’s go to modules/blockcart and copy blockcart.tpl in the theme folder modules/blockcart. Open it and locate the second script block:

<script type="text/javascript">
var customizationIdMessage = '{l s='Customization #' mod='blockcart' js=1}';
var removingLinkText = '{l s='Please 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>

See where it reads free shipping? We need to change the block as follows

<script type="text/javascript">
var customizationIdMessage = '{l s='Customization #' mod='blockcart' js=1}';
var removingLinkText = '{l s='Please remove this product from my cart.' mod='blockcart' js=1}';

var freeProductTranslation = '{l s='Free!' mod='blockcart' js=1}';
var delete_txt = '{l s='Delete' mod='blockcart' js=1}';

//<![CDATA[[

	{if !$logged AND !$cart->id_customer}
		var freeShippingTranslation = '{l s='Login to see the shipping cost!' mod='blockcart' js=1}';		
	{else}
		var freeShippingTranslation = '{l s='Free shipping!' mod='blockcart' js=1}';
	{/if}

//]]>
</script>

As you can see, we removed the free shipping text and added it below. We used a small trick to target the unregistered customer. So, If the customer is not logged in, nor has added any shipping information (that is, no customer id exists for him), then show a different text. Else, it is okay to display the free shipping label.

It looks a bit ugly now, because the cart block is still displaying the shipping label. Let’s hide that as well! Locate the following at about line 154 of the same file:

<span>{l s='Shipping' mod='blockcart'}</span>

And change it the following way

{if $logged OR $cart->id_customer}
	<span>{l s='Shipping' mod='blockcart'}</span>
{/if}	

This time, the text will only be shown if the customer is logged or has already added shipping information.

As a finishing touch, we can add the little information to shopping cart.tpl as well (you can find it in the theme folder once again). Locate this:

<tr class="cart_total_delivery" style="{if !isset($carrier->id) || is_null($carrier->id)}display:none;{/if}">
	<td colspan="5">{l s='Shipping'}</td>
	<td colspan="2" class="price" id="total_shipping">{l s='Free Shipping!'}</td>
</tr>

And change it this way

<tr class="cart_total_delivery">
	<td colspan="5">{l s='Shipping'}</td>
	<td colspan="2" class="price" id="total_shipping">
		
		{if !$logged AND !$cart->id_customer}
			{l s='Login for the correct price'}
		{else}
			{l s='Free Shipping!'}
		{/if}
		

	</td>
</tr>

Note that other than adding the same condition as before, we also removed the display:none style. There is a little downside to this, as that block will always be shown, even if there are no carriers available for the destination. However, this won’t happen if you setup zones, countries and states the correct way.

The post Quick Tip: hide shipping cost for non registered users appeared first on NemoPS.