How to display a product with Ajax ?

[Rémi]

Hi everyone,

I need your help !

If i summarize : I have a module (MyModule) with inside a controller :

class MyModuleCreationDevisModuleFrontController extends ModuleFrontController

 who displays mytemplate.tpl and a button with Ajax (my-button). -> I don't only display a button that's why i use ajax but i simplify for the post

I would like to know how i am suppose to process if i want to display the product with mytemplate.tpl without reloading the page when i click on my-button.

Should i process like this :

1. Add the id of the product in the data of my-button
2. Get the data when my-button is click with Jquery.
3. Thanks to AJAX send the data to the function DisplayAjax() of the override controller ProductController.php
4. Display the template product.tpl with the product's data 

 

<?php

class ProductController extends ProductControllerCore
{
    public function __construct()
    {
        parent::__construct();
    }

    public function initContent()
    {
        $this->ajax = true;
        parent::initContent();
    }

    public function displayAjax()
    {

        $id_product = Tools::getValue('id');
        $product = new Product($id_product);

        ob_end_clean();
        header('Content-Type: application/json');
        $this->ajaxDie(Tools::jsonEncode(array(
            'template' =>'catalog/product',
            'product' => $product,
            'entity' => 'product',
            'id' => $id_product,
        )));
    }
}

 

Or is there a cleaner way to do that ? The operation of the ProductController is hard to understand...

Your help is precious to me and I would be very grateful if you could help me to find a solution.

Rémi

Edited July 23, 2018 by Rémi (see edit history)

[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

Edited August 26, 2019 by EvaF (see edit history)