AJAX Quick Look General Help

[Guest]

Hey everyone,

 

So I'm attempting to add a quick look to Prestashop's product list from any given category.

 

I'm trying to figure out the steps in general first..This is what I have so far.

 

1) Make an override on ProductController if I desire to display less information than currently displayed on product pages in the quick look.

 

2) Call the desired ProductController.php file using javascript in product-list.tpl based on a variable that is called via the a href link in the product page that will use AJAX to call the controller.

 

I attempted this code in product-list.tpl;

 

{if !isset($ajax_quick_look)}
<script type="text/javascript">
$.ajax({
                                       url: '{$base_dir}controllers/front/ProductController.php',
                                       type: 'get',
                                       data: 'ajax=true',
                                       success: function(data) {
                                               console.log('success');
                                               $('#ajax').text(data);
                                       }
                               });
</script>
{/if}

 

And then added the class "ajax_quick_look" to the link I want to lead to it, although I fee like I'm not defining the class correctly.

 

Any help in the right direction would be much appreciated.

 

eggo

[NemoPS]

Instead of calling the ProductController, call a 'bridge' file, like ajax.php. Inside, you can have it call the product controller and fetch data from there. BUT in my opinion, it would be better to create a separate module by replicating the controller's code with only the needed snippets

[Guest]

Nemo, thanks so much for your help. I'm new to creating modules so I'm giving it a try but I could use a little guidance.

 

I understand a lot of big picture (I think!), but I'm struggling with a lot of the small stuff.

 

So I have created module "quicklook" in the modules folder with quicklook.php and quicklook.tpl.

 

quicklook.php

class QuickLook extends Module {

private $_html= '';

function __construct() {
   $this->name = 'quicklook';
   $this->tab = 'other';
   $this->version = '0.2.0';
   $this->author = 'Carl';
   parent::__construct();
   $this->displayName = $this->l('Quick Look');
   $this->description = $this->l('AJAX Quick Look onClick.');
}

public function install() {
   parent::install();
   if(!$this->registerHook('header')) return false;
   return true;
}


public function displayAjax() {

               $this->smartyOutputContent($this->getTemplatePath() . 'quicklook.tpl');
       }                                                                            
}

 

I'm not sure if I should be extending ProductControllerCore..or copying parts of ProductController into quicklook.php?

 

Also once I do that, should I be using a code similar to this in product-list.tpl to my a href link for a product?

 

<script>
$.ajax({
                                       url: '{$base_dir}module/quicklook',
                                       type: 'get',
                                       data: 'ajax=true',
                                       success: function(data) {
                                               console.log('success');
                                               $('#ajax').text(data);
                                       }
                               });
</script>

 

Really appreciate it Nemo! Any guidance would be greatly appreciated.

 

eggo

[NemoPS]

From that ajax function, I would call the bridge file I mentioned. Here is an example taken from the layered navigation block

 

include(dirname(__FILE__).'/../../config/config.inc.php');
include(dirname(__FILE__).'/../../init.php');
include(dirname(__FILE__).'/blocklayered.php');
$blockLayered = new BlockLayered();
echo $blockLayered->ajaxCall();

 

Therefore, in your case it would be:

include(dirname(__FILE__).'/../../config/config.inc.php');
include(dirname(__FILE__).'/../../init.php');
include(dirname(__FILE__).'/quicklook.php');
$quicklook= new QuickLook();
echo $quicklook->ajaxCall();

 

Ajaxcall() should execute the required code and get product information, returning the fetched tpl file which will then be shown in the ajax's success function if data is returned

[NemoPS]

And this costed you another warning man

[Jiten rash (away)]

can't u simply tell >remove this line and add this code>to tell simple things u will confuse people

[Guest]

Hey Jiten, not sure what you mean by that, sorry.

 

Nemo, thanks once again for the help. I think I am better understanding this process now. However, I cannot quite get it to work.

 

quicklook.php is the same.

 

quicklook-ajax.php is as follows:

 

include(dirname(__FILE__).'/../../config/config.inc.php');
include(dirname(__FILE__).'/../../init.php');
include(dirname(__FILE__).'/quicklook.php');

$quicklook = new QuickLook();
echo $quicklook->ajaxCall();

 

For now I have copied product.tpl into quicklook.tpl.

 

And on the top of product-list.tpl I have placed the following javascript.

 

<script type="text/javascript">
function QuickLook() {
$.ajax({
                                       url: '{$base_dir}modules/quicklook/quicklook-ajax.php',
                                       type: 'get',
                                       data: 'ajax=true',
                                       success: function(data) {
                                               console.log('success');
                                               $('#ajax').text(data);
                                       }
                               });
return false;
}
</script>

 

And finally placed the onclick in the product link on product-list.tpl:

 

<a data-lightbox="{$product.name|escape:'htmlall':'UTF-8'}" onclick="QuickLook();"  title="{$product.name|escape:'htmlall':'UTF-8'}" >{$product.name|escape:'htmlall':'UTF-8'|truncate:26:'...':true}</a>

 

What am I missing? I'm a little confused in that the product-list uses the javascript to call quicklook-ajax.php via AJAX which then calls the quick-look.php but quick-look.php in my case doesn't extend ProductController so where does ProductController get called from. I think I am a little confused in that regard.

 

Would appreciate some guidance again!

[NemoPS]

I think you're only missing the ajaxCall() function in quicklook.php. it's what will give you the output

[Guest]

Hey Nemo,

 

Thanks again for the quick reply! I have tried my best to do what you have said (or at least how I have interpreted it).

 

class QuickLook extends Module {

private $_html= '';

function __construct() {
   $this->name = 'quicklook';
   $this->tab = 'other';
   $this->version = '0.2.0';
   $this->author = 'Carl';
   parent::__construct();
   $this->displayName = $this->l('Quick Look');
   $this->description = $this->l('AJAX Quick Look');
}

public function install() {
   parent::install();
   if(!$this->registerHook('header')) return false;
   return true;
}



public function ajaxCall() {

               $this->smartyOutputContent($this->getTemplatePath() . 'quicklook.tpl');
       }

} 

 

Still getting undefined and Internal 500 error. Any more guidance would be much appreciated.

 

eggo

[NemoPS]

Undefined?

 

First, turn errors on as described in my signature (always keep them on when developing! )

 

Secondly, to check if it works, try this

 

public function ajaxCall() {
return('here I am!');
    }

 

 

 

then, check you ajax call from the network tab inside the developer tools (f12 on any browser, chrome is preferred) and see if here I am is echoed as a response. If so, you're good to go and you can perform further operations from AjaxCall!

[Guest]

Hey Nemo,

 

Thanks again for the help. Unfortunately I don't get anything in the network tab. All I get are two errors in the console.

 

Failed to load resource: the server responded with a status of 404 (Not Found) http://www.site.com/panda/undefined

 

And also a success given for the

 

success: function(data) {
                                               console.log('success');
                                               $('#ajax').text(data);

 

In the javascript. Do you have any idea where else I could look to try to find the problem?

 

Thanks in advance,

 

eggo

[NemoPS]

Can you check the real output of that tpl (the one with the ajax function)? Also, try with baseDir as a javascript variable to target the site's url in your script

[Guest]

Hey Nemo,

 

Thanks again for your help.

 

I tried changing the URL to the actual URL, and also specifying base varDir. Both yielded the same results.

 

<script type="text/javascript">
var baseDir = '{$content_dir}';
function QuickLook() {
$.ajax({
                                       url: '{$base_dir}modules/quicklook/quicklook-ajax.php',
                                       type: 'get',
                                       data: 'ajax=true',
                                       success: function(data) {
                                               console.log('success');
                                               $('#ajax').text(data);
                                       }
                               });
return false;
}
</script>

 

I'm not sure what you mean by checking the real output of that tpl, sorry, can you elaborate further?

 

Also if you want to see anything for yourself, see here.

 

http://cornerstone-montessori.ca/panda/index.php?id_category=3&controller=category

 

The quick look is seen by clicking on the product link.

 

Thanks so much Nemo!

 

eggo

[NemoPS]

Uhm, this is what I meant

 

<script type="text/javascript">
function QuickLook() {
$.ajax({
								    url: baseDir +'modules/quicklook/quicklook-ajax.php',
								    type: 'get',
								    data: 'ajax=true',
								    success: function(data) {
										    console.log('success');
										    $('#ajax').text(data);
								    }
						    });
return false;
}
</script>

[Guest]

Hey Nemo,

 

Just tried that. Unfortunately same error. Any other avenues I should look into?

 

eggo

[NemoPS]

I'm clueless, can you check which url is being called in the network tab of chrome?

 

This one

 

[Guest]

Hey Nemo,

 

I've been banging my head over why this isn't working for past few days. I am now using Fancybox that is built into Prestashop in an attempt to remove any problems but I'm still seeing the same problem of the content not being loaded. Although the 400 error is gone, and now I just get the success problem.

 

In the network tab I load the url of choice.

 

quicklook-ajax.php?ajax=true

/panda/modules/quicklook

 

Which is

 

http://www.mysite.com/panda/modules/quicklook/quicklook-ajax.php?ajax=true

 

However in Fancybox I get

 

The requested content cannot be loaded.
Please try again later.

 

Is there something I'm missing. I feel like I'm not extending the right things..do I need to be including the ProductControllerCore somewhere? 

 

Thanks in advance Nemo, appreciated.

[NemoPS]

Do you get any response from that file in the network tab?

 

Fabio

[Guest]

Hey Fabio,

 

In further checking..this is the response that I see.

 

Fatal error: Call to undefined method QuickLook::smartyOutputContent() in/home2/user434/public_html/panda/modules/quicklook/quicklook.php on line 51

 

So in regards to that I changed line 51 from

[code]$this->smartyOutputContent($this->getTemplatePath() . 'quicklook.tpl');[/code]

to

[code]return $this->display(__FILE__, 'quicklook.tpl');[/code]

Now I get a response that shows part of quicklook.tpl which was taken from product.tpl, however the product attribute is 0.

[code]<!-- MODULE Quick Look -->

<script type="text/javascript">
// <![CDATA[
 
// PrestaShop internal settings
var currencySign = '';
var currencyRate = '0';
var currencyFormat = '0';
var currencyBlank = '0';
var taxRate = 0;
var jqZoomEnabled = false;
 
//JS Hook
var oosHookJsCodeFunctions = new Array();
 
// Parameters
var id_product = '0';
var productHasAttributes = false;
var quantitiesDisplayAllowed = false;
var quantityAvailable = 0;
var allowBuyWhenOutOfStock = false;
var availableNowValue = '';
var availableLaterValue = '';
var productPriceTaxExcluded =[/code]

Now I am still getting the "Content cannot be loaded. Please try again later." message but I am assuming that is because of the var id_product being 0. How should I go about getting it to load the correct product? 

 

Thanks for your help Fabio!

 

eggo

Edited September 4, 2013 by Guest (see edit history)

[NemoPS]

Hi there!

to get the correct product you should pass the post/get data from your ajax to the function that returns the tpl to it.

 

Just be sure you use $this->context->smarty->assign() with the proper variable names before fetching it (returning it)

[Guest]

Hey Fabio,

 

Thanks for the advice, much appreciated. I'm trying to figure out how to go about this.. how would I pass the data from the AJAX function to the quicklook.php? 

 

Do I need to create a override for ProductController.php and use $this->context->smarty->assign to assign the variables, which will then be called by the quicklook.php? 

 

Do I have that right?

 

Thanks so much! 

 

eggo

[NemoPS]

well, first grab data from your page in the javascript, pass it to the ajax call like

 

var id = $(this).parent().attr('id); // just an example

 

then in the ajax call pass it as data

$.ajax({
				type: 'GET',
				data: 'my_id=' + id.
				url: 'your url',
				success: function(data){

						alert(data);
				}
			})

Then, since it's $_GET data, in the ajax page do something like

 

$quicklook->doSomething($_GET)

 

 

and then you can access data in the original file

[Guest]

Hey Fabio,

 

Thanks so much for the pointers. I have done my best but I'm not sure how to grab the product ID based on how Prestashop defines it. I found 'id_product='+productId in cart-summary.js so I thought maybe that is how it is defined?

$(document).ready(function() {
 
            $(".ajaxquicklook").click(function() {
                var productId = $(this).attr('productId');
                //alert($(this).attr('productId'));
                $.ajax({
                    type: 'GET',
                    url: baseDir +'modules/quicklook/quicklook-ajax.php',
                    data: 'id_product=' + productId,
cache: 'false',
                    success: function(data)
                    {
                        alert("success!");
 
                    }
                });
            });
        });

Then in quicklook-ajax.php I try to do this...

 

 

$quicklook = $_GET['productId'];
echo $quicklook->ajaxCall();

Edited September 7, 2013 by Guest (see edit history)