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