Jump to content

Edit History

EvaF

EvaF

hello ,

You do not have to override ProductController, you can use ProductControllerCore.
I am newbie in Prestashop, here is my steps (maybe not elegant):
1) prepare in you main tpl modal div for inline fancybox:

<div style="display:none">
  <div id="product_dlg">
    {include file = 'modules/YOURNAMEOFMODULE/views/templates/front/product.tpl'}
  </div>
</div>
    

and of course your "product.tpl" file ( you can highly inspirate by "product.tpl" file from themes and little bit modificate it according your needness)
2) in javascript:

...
// variables id_product, id_product_attribute have value
var data;
var aurl;

if (showProduct){
 
//  aurl = PRODUCT_CONTROLLER_URL + '&id_product=' + id_product + '&id_product_attribute=' + id_product_attribute ;
//  or simply create from your controller url
  var lurl = YOUR_CONTROLLER_URL.split('?');
  var lang = lurl[1].split('id_lang=');
  aurl=lurl[0] +  '?controller=product&id_product=' + id_product + '&id_product_attribute=' + id_product_attribute + '&id_lang='+parseInt(lang[1]);
  data: {
      id_product: id_product,
      id_product_attribute: id_product_attribute,
      action: 'refresh',                // or 'quickview'
      controller:'product',
      ajax:true
      };
} else {
  aurl = YOUR_CONTROLLER_URL;
  data: {      
      action: YOUR_MODULE_ACTION,                
      controller: YOUR_AJAX_CONTROLLER,
      ajax:true,
      YOUR_DATA1:YOUR_DATA_VALUE1,   
      ..  
      };

}
$.ajax({
   url: aurl,
   data: data,
   type: 'POST',
   ..
  success: function (result) {
            },
  error: function (jqXHR, textStatus, errorThrown) {
           }
});

3) handle on success result:
 The result from ProductController is Javascript object.

if action is 'quickview' then success can look like:
(you don't need to prepare own product.tpl file)

 success: function (result) {                
    if (typeof result ==='object') {
      if (typeof result.quickview_html !== 'undefined') { 
          $("body").append(result.quickview_html);
	      $.fancybox({
              'type': 'inline',
              'href': "#quickview-modal-" + result.product.id + "-" + result.product.id_product_attribute
          });
    }
 },  

if action is 'refresh' then success can look like:

 success: function (result) {                
    if (typeof result ==='object') {
      if (typeof result.product_details !== 'undefined') { 
         // if you keep the same classes and ids as in theme product.tpl then you can simply
         $( "#id_page_title"  ).text( result.product_title);
         $( "#product_dlg .product-discounts" ).replaceWith( result.product_discounts );
         $( "#product_dlg .images-container" ).replaceWith( result.product_cover_thumbnails );
         $( "#product_dlg .product-prices" ).replaceWith( result.product_prices );
         $( "#product-details" ).replaceWith( result.product_details );
         // moreover in #product_details is attribute data-product that contains all product properties in JSON format
         var product_data = $('#product-details').attr('data-product');
         var pd = JSON.parse(product_data);

         $('#product-details').removeAttr('data-product');
         // using product properties
         $( "#description .product-description"  ).html( pd.description);
         $( "#id_product_description_short"  ).html( pd.description_short);
         ...
         $.fancybox({
           'type': 'inline',
           'href': '#product_dlg'
         });
      }
    }
 },  

Action 'refresh' result

productrefresh.PNG.66c76b0dc2706c45fab86d9e9ce3233a.PNG

dataproduct.thumb.PNG.f74fc675d230dd6c9206d7c9a647f69e.PNG

EvaF

EvaF

hello ,

You do not have to override ProductController, you can use ProductControllerCore.
I am newbie in Prestashop, here is my steps (maybe not elegant):
1) prepare in you main tpl modal div for inline fancybox:

<div style="display:none">
  <div id="product_dlg">
    {include file = 'modules/YOURNAMEOFMODULE/views/templates/front/product.tpl'}
  </div>
</div>
    

and of course your "product.tpl" file ( you can highly inspirate by "product.tpl" file from themes and little bit modificate it according your needness)
2) in javascript:

...
// variables id_product, id_product_attribute have value
var data;
var aurl;

if (showProduct){
 
//  aurl = PRODUCT_CONTROLLER_URL + '&id_product=' + id_product + '&id_product_attribute=' + id_product_attribute ;
//  or simply create from your controller url
  var lurl = YOUR_CONTROLLER_URL.split('?');
  var lang = lurl[1].split('id_lang=');
  aurl=lurl[0] +  '?controller=product&id_product=' + id_product + '&id_product_attribute=' + id_product_attribute + '&id_lang='+parseInt(lang[1]);
  data: {
      id_product: id_product,
      id_product_attribute: id_product_attribute,
      action: 'refresh',                // or 'quickview'
      controller:'product',
      ajax:true
      };
} else {
  aurl = YOUR_CONTROLLER_URL;
  data: {      
      action: YOUR_MODULE_ACTION,                
      controller: YOUR_AJAX_CONTROLLER,
      ajax:true,
      YOUR_DATA1:YOUR_DATA_VALUE1,   
      ..  
      };

}
$.ajax({
   url: aurl,
   data: data,
   type: 'POST',
   ..
  success: function (result) {
            },
  error: function (jqXHR, textStatus, errorThrown) {
           }
});

3) handle on success result:
 The result from ProductController is Javascript object.

if action is 'quickview' then success can look like:
(you don't need to prepare own product.tpl file)

 success: function (result) {                
    if (typeof result ==='object') {
      if (typeof result.quickview_html !== 'undefined') { 
          $("body").append(result.quickview_html);
	      $.fancybox({
              'type': 'inline',
              'href': "#quickview-modal-" + result.product.id + "-" + result.product.id_product_attribute
          });
    }
 },  

if action is 'refresh' then success can look like:

 success: function (result) {                
    if (typeof result ==='object') {
      if (typeof result.product_details !== 'undefined') { 
         // if you keep the same classes and ids as in theme product.tpl then you can simply
         $( "#id_page_title"  ).text( result.product_title);
         $( "#product_dlg .product-discounts" ).replaceWith( result.product_discounts );
         $( "#product_dlg .product-cover" ).replaceWith( result.product_cover_thumbnails );
         $( "#product_dlg .product-prices" ).replaceWith( result.product_prices );
         $( "#product_details" ).replaceWith( result.product_details );
         // moreover in #product_details is attribute data-product that contains all product properties in JSON format
         var product_data = $('#product-details').attr('data-product');
         var pd = JSON.parse(product_data);

         $('#product-details').removeAttr('data-product');
         // using product properties
         $( "#description .product-description"  ).html( pd.description);
         $( "#id_product_description_short"  ).html( pd.description_short);
         ...
         $.fancybox({
           'type': 'inline',
           'href': '#product_dlg'
         });
      }
    }
 },  

Action 'refresh' result

productrefresh.PNG.66c76b0dc2706c45fab86d9e9ce3233a.PNG

dataproduct.thumb.PNG.f74fc675d230dd6c9206d7c9a647f69e.PNG

×
×
  • Create New...