Prestashop surface product based on personnalized fields

in these few steps we will explain how to make prestashop support sell of surface product without making major changes.
In this case we will use personnalized fields.

First of all
we start by adding
our REQUIRED two fields
1- width
2- height

next
we will need to change the design of product page (product.tpl) under template folder to make the web page more beautiful
other method is to create two other mirror fields, each time they change the real fields in the customization form change (at the end of this article i'll explain a method to do that)

Now what we need ?
we need to hide the register button of customization and make the add to cart button do the job of register customization and then adds the product to the cart.

Note that the problem with the register customization is that it posts the whole page to the cart controller to save the customization, the idea is to do that in async. mode using ajax,  the we call the real code under add to cart button.
wel will change the code in ajax-car.js
$('.ajax_add_to_cart_button').unbind('click').click(function(){ ....
to

     $('body#product p#add_to_cart input').unbind('click').click(function(){
                var ids = new Array();
$("#customizationForm textarea.customization_block_input").each(function(){
ids.push($(this).attr("id"));
});
                     

   $('#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);
   });

   var temp = 'quantityBackup='+$('#quantity_wanted').val()+'&submitCustomizedDatas=1';
   $.each(ids, function(key, val) {
temp += '&'+$('#'+val).attr('name')+'='+encodeURIComponent($('#'+val).val());
console.log(temp);
        console.log(customAction);
   });
   $.ajax({
url: customAction + '?rand=' + new Date().getTime(),
global: false,
type: "POST",
        headers: { "cache-control": "no-cache" },
data: temp,
dataType: "html",
async:false,
success: function(msg){    
    ajaxCart.add( $('#product_page_product_id').val(), $('#idCombination').val(), true, null, $('#quantity_wanted').val(), null);        
   }
   })

   return false;
  });

sometimes the message you have to save your customization before add to cart appears ...
that's because checkCustomizations method in tools.js file
the try to change the if to
if (parseInt(customizationFields[i][1]) == 1 && ($('#' + customizationFields[i][0]).html() == '')

now it should work

in the link in google docs you will find a not clean code that works on two
surface categories mm for millimeter surface et surface for cm surfaces...
the surface is counted in meter square, and the each surface product has a combination called
surface or surface-mm
download link

fancy product designer move element by API

i've been searching for how to move an item (text, image, design ...) by API; not using drag and drop.
(JQuery Plugin fancy product designer)

here is a fonctionnal code:

bgObject.canvas.setBackgroundImage(bgObject.canvas.source, bgObject.canvas.renderAll.bind(bgObject.canvas), {

  x:bgObject.params.x - 1,

  y:bgObject.params.y   

});

bgObject.params.x --;

where is bgObject is the object loaded by the plugin, you can get it by firing the elementAdded event
example:

var bgObject= null;

          $('#clothing-designer')

.bind('elementAdded', function(evt, obj)  {

   if(obj.title == "Default Image") {

                                            bgObject = obj; 

                                        }

});

Note that if you try to understand the code, we are moving a canvas object.
Canvas and many other objects are parts of fabric framework.
 readingits  documentation may be very helpful :
http://fabricjs.com/docs/
http://fabricjs.com/docs/fabric.Canvas.html (canvas)

that's all !