Jump to content
Rémi

How to display a product with Ajax ?

Recommended Posts

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 ::wacko:

  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 by Rémi (see edit history)

Share this post


Link to post
Share on other sites
Posted (edited)

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

Edited by EvaF (see edit history)

Share this post


Link to post
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Reply to this topic...

×   Pasted as rich text.   Restore formatting

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.


×
×
  • Create New...

Important Information

Cookies ensure the smooth running of our services. Using these, you accept the use of cookies. Learn More