How external html file call in to product.tpl page

[arvind_ari]

Hello,

I am new to Prestashop and I have a issue related to design and development.

 

I have a html file with Javascript and .css files. 

Html file contains two javascript functions() which works over with if else rule like a CALC.

 

Now i tried to call this html file in my product.tpl page using the "include"  function.

 

I used the below code to call my html file in product.tpl :

<div>

    <script type="text/javascript" src="http://code.jquery.com/jquery-latest.min.js"></script>

    <script type="text/javascript">

        $("document").ready(function() {

            $('#container').load('/.../Calc.html');

        });

    </script>

 

    <div id="container"></div>

</div>

 

Using this code my html file function works fine BUT in product page the product Image ZOOM and Select Color product changes images will not works in PrestaShop™ 1.6.0.6

 

 

 

I use another method using CONTENT BOX module and HOOK this module to DISPLAY Product page (TAB CONTENT).

Now ZOOM and Select color image changes worked fine. BUT now the JAVASCRIPT function ()  not worked of html file.

first i tried to call CSS file under the html file using

<link href="/..../calc.css" rel="stylesheet" type="text/css" /> 

but this not worked so i write the whole CSS in same CONTENT BOX.

But After save the module JAVASCRIPT function not works. it converts to like below  code. 

<script>// <![CDATA[

function check() {....} // ]]></script>

 

Please suggest me how i can use my custom HTML file in product.tpl page so all function will work.

 

 

Thanks.

 

[vekia]

check browser console

do you see there some errors related to script that you used?

 

(to turn on console press ctrl+shift+j in chrome)

[arvind_ari]

Hello Vekia,

When i use the Content Box Module and checked in console i got the below error

Uncaught TypeError: Cannot set property 'innerHTML' of null .

but when i use the content box my CSS is not working. i place the link of CSS in header.tpl but it not work again.

 

 

 

Secondly, when i use the include function in product.tpl  using the jquery.js i got the below errors in console.

 

(anonymous function)            jquery.js:5951

jQuery.fn.extend.domManip       jquery.js:6155

jQuery.fn.extend.append         jquery.js:5949

(anonymous function)            jquery.js:6074

jQuery.extend.access            jquery.js:852

jQuery.fn.extend.html           jquery.js:6038

(anonymous function)            jquery.js:7581

fire                            jquery.js:1037

self.fireWith S                 jquery.js:1148

done                            jquery.js:8074

callback

 

 

 

Uncaught TypeError: undefined is not a function       15-jquery.uniform-modified.js:1073

(anonymous function)                                  15-jquery.uniform-modified.js:1073

n.event.dispatch                                     jquery-1.11.0.min.js:3

r.handle

 

 

Uncaught TypeError: undefined is not a function          product.js:111

(anonymous function)                                      product.js:111

j                                                      jquery-1.11.0.min.js:2

k.fireWith                                             jquery-1.11.0.min.js:2

n.extend.ready                                        jquery-1.11.0.min.js:2

K

 

 

Thanks.