Saiti Posted March 10, 2012 Share Posted March 10, 2012 Okay, I`m trying to put a independent slider script into my template. Decided to put it in my header file, so I`ve started to edit header.tpl file. Constructed a new div into, tested with clean background - went right. But when I try to put a jquery script here - it does not work. Text has been shown on page, but in wrong method. Just javascrpit files (indicated in <head> tag) cannot start. I`m not sure how to put it a correct way there. Tried to find solution, I`ve seen the {literal} tags, but also do not work. Now - i need your help. Here is the code of header.tpl file, where I started to run the script: {* * 2007-2011 PrestaShop * * NOTICE OF LICENSE * * This source file is subject to the Academic Free License (AFL 3.0) * that is bundled with this package in the file LICENSE.txt. * It is also available through the world-wide-web at this URL: * http://opensource.org/licenses/afl-3.0.php * If you did not receive a copy of the license and are unable to * obtain it through the world-wide-web, please send an email * to [email protected] so we can send you a copy immediately. * * DISCLAIMER * * Do not edit or add to this file if you wish to upgrade PrestaShop to newer * versions in the future. If you wish to customize PrestaShop for your * needs please refer to http://www.prestashop.com for more information. * * @author PrestaShop SA <[email protected]> * @copyright 2007-2011 PrestaShop SA * @version Release: $Revision: 6594 $ * @license http://opensource.org/licenses/afl-3.0.php Academic Free License (AFL 3.0) * International Registered Trademark & Property of PrestaShop SA *} <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="{$lang_iso}"> <head> <title>{$meta_title|escape:'htmlall':'UTF-8'}</title> {if isset($meta_description) AND $meta_description} <meta name="description" content="{$meta_description|escape:html:'UTF-8'}" /> {/if} {if isset($meta_keywords) AND $meta_keywords} <meta name="keywords" content="{$meta_keywords|escape:html:'UTF-8'}" /> {/if} <meta http-equiv="Content-Type" content="application/xhtml+xml; charset=utf-8" /> <meta name="generator" content="PrestaShop" /> <meta name="robots" content="{if isset($nobots)}no{/if}index,follow" /> <link rel="icon" type="image/vnd.microsoft.icon" href="{$img_ps_dir}favicon.ico?{$img_update_time}" /> <link rel="shortcut icon" type="image/x-icon" href="{$img_ps_dir}favicon.ico?{$img_update_time}" /> <script type="text/javascript"> var baseDir = '{$content_dir}'; var static_token = '{$static_token}'; var token = '{$token}'; var priceDisplayPrecision = {$priceDisplayPrecision*$currency->decimals}; var priceDisplayMethod = {$priceDisplay}; var roundMode = {$roundMode}; </script> {if isset($css_files)} {foreach from=$css_files key=css_uri item=media} <link href="{$css_uri}" rel="stylesheet" type="text/css" media="{$media}" /> {/foreach} {/if} {if isset($js_files)} {foreach from=$js_files item=js_uri} <script type="text/javascript" src="{$js_uri}"></script> {/foreach} {/if} {$HOOK_HEADER} [b] <!-- SAITI KOMBINUJE W HEADERZE --> <link rel="stylesheet" type="text/css" href="css/sliderlayout.css" /> <link rel="stylesheet" type="text/css" href="css/sliderstyle1.css" /> <script language="javascript" type="text/javascript" src="js/sliderjquery.js"></script> <script language="javascript" type="text/javascript" src="js/sliderjquery.easing.js"></script> <script language="javascript" type="text/javascript" src="js/sliderscript.js"></script> <script type="text/javascript"> $(document).ready( function(){ // buttons for next and previous item var buttons = { previous:$('#jslidernews1 .button-previous') , next:$('#jslidernews1 .button-next') }; $('#jslidernews1').lofJSidernews( { interval : 4000, direction : 'opacitys', easing : 'easeInOutExpo', duration : 1200, auto : true, maxItemDisplay : 4, navPosition : 'horizontal', // horizontal navigatorHeight : 32, navigatorWidth : 80, mainWidth : 974, buttons : buttons } ); }); </script> <!-- SAITI JUŻ NIE KOMBINUJE W HEADERZE -->[/b] </head> <body {if $page_name}id="{$page_name|escape:'htmlall':'UTF-8'}"{/if}> {if !$content_only} {if isset($restricted_country_mode) && $restricted_country_mode} <div id="restricted-country"> <p>{l s='You cannot place a new order from your country.'} <span class="bold">{$geolocation_country}</span></p> </div> {/if} <div id="page"> <!-- Header --> <div id="header"> <a id="header_logo" href="{$base_dir}" title="{$shop_name|escape:'htmlall':'UTF-8'}"> <img class="logo" src="{$img_ps_dir}logo.jpg?{$img_update_time}" alt="{$shop_name|escape:'htmlall':'UTF-8'}" {if $logo_image_width}width="{$logo_image_width}"{/if} {if $logo_image_height}height="{$logo_image_height}" {/if} /> </a> <div id="header_right"> {$HOOK_TOP} </div> <!-- Saiti kombinuje --> <div id="sliderskrypt"> <div id="container"> <!------------------------------------- THE CONTENT -------------------------------------------------> <div id="jslidernews1" class="lof-slidecontent" style="width:980px; height:340px;"> <div class="preload"><div></div></div> <!-- MAIN CONTENT --> <div class="main-slider-content" style="width:980px; height:340px;"> <ul class="sliders-wrap-inner"> <li> <img src="images/thumbl_980x340.png" title="Newsflash 2" > <div class="slider-description"> <div class="slider-meta"><a target="_parent" title="Newsflash 1" href="#Category-1">/ Newsflash 1 /</a> <i> — Monday, February 15, 2010 12:42</i></div> <h4>Content of Newsflash 1</h4> <p>The one thing about a Web site, it always changes! Joomla! makes it easy to add Articles, content,... <a class="readmore" href="#">Read more </a> </p> </div> </li> <li> <img src="images/thumbl_980x340_002.png" title="Newsflash 1" > <div class="slider-description"> <div class="slider-meta"><a target="_parent" title="Newsflash 2" href="#Category-2">/ Newsflash 2 /</a> <i> — Monday, February 15, 2010 12:42</i></div> <h4>Content of Newsflash 2</h4> <p>Joomla! makes it easy to launch a Web site of any kind. Whether you want a brochure site or you are... <a class="readmore" href="#">Read more </a> </p> </div> </li> <li> <img src="images/thumbl_980x340_003.png" title="Newsflash 3" > <div class="slider-description"> <div class="slider-meta"><a target="_parent" title="Newsflash 3" href="#Category-3">/ Newsflash 3 /</a> <i> — Monday, February 15, 2010 12:42</i></div> <h4>Content of Newsflash 3</h4> <p>With a library of thousands of free Extensions, you can add what you need as your site grows. Don't... <a class="readmore" href="#">Read more </a> </p> </div> </li> <li> <img src="images/thumbl_980x340_004.png" title="Newsflash 5" > <div class="slider-description"> <div class="slider-meta"><a target="_parent" title="Newsflash 4" href="#Category-4">/ Newsflash 4 /</a> <i> — Monday, February 15, 2010 12:42</i></div> <h4>Content of Newsflash 4</h4> <p>Joomla! 1.5 - 'Experience the Freedom'!. It has never been easier to create your own dynamic Web... <a class="readmore" href="#">Read more </a> </p> </div> </li> <li> <img src="images/thumbl_980x340_005.png" title="Newsflash 5" > <div class="slider-description"> <div class="slider-meta"><a target="_parent" title="Newsflash 5" href="#">/ Newsflash 5 /</a> <i> — Monday, February 15, 2010 12:42</i></div> <h4>Content of Newsflash 5</h4> <p>Joomla! 1.5 - 'Experience the Freedom'!. It has never been easier to create your own dynamic Web... <a class="readmore" href="#">Read more </a> </p> </div> </li> <li> <img src="images/thumbl_980x340_006.png" title="Newsflash 5" > <div class="slider-description"> <div class="slider-meta"><a target="_parent" title="Newsflash 6" href="#">/ Newsflash 6 /</a> <i> — Monday, February 15, 2010 12:42</i></div> <h4>Content of Newsflash 6</h4> <p>Joomla! 1.5 - 'Experience the Freedom'!. It has never been easier to create your own dynamic Web... <a class="readmore" href="#">Read more </a> </p> </div> </li> <li> <img src="images/thumbl_980x340_007.png" title="Newsflash 5" > <div class="slider-description"> <div class="slider-meta"><a target="_parent" title="Newsflash 7" href="#">/ Newsflash 7 /</a> <i> — Monday, February 15, 2010 12:42</i></div> <h4>Content of Newsflash 7</h4> <p>Joomla! 1.5 - 'Experience the Freedom'!. It has never been easier to create your own dynamic Web... <a class="readmore" href="#">Read more </a> </p> </div> </li> <li> <img src="images/thumbl_980x340_008.png" title="Newsflash 8" > <div class="slider-description"> <div class="slider-meta"><a target="_parent" title="Newsflash 8" href="#">/ Newsflash 8 /</a> <i> — Monday, February 15, 2010 12:42</i></div> <h4>Content of Newsflash 8</h4> <p>Joomla! 1.5 - 'Experience the Freedom'!. It has never been easier to create your own dynamic Web... <a class="readmore" href="#">Read more </a> </p> </div> </li> </ul> </div> <!-- END MAIN CONTENT --> <!-- NAVIGATOR --> <div class="navigator-content"> <div class="button-next">Next</div> <div class="navigator-wrapper"> <ul class="navigator-wrap-inner"> <li><img src="images/thumbs/thumbl_980x340.png" /></li> <li><img src="images/thumbs/thumbl_980x340_002.png" /></li> <li><img src="images/thumbs/thumbl_980x340_003.png" /></li> <li><img src="images/thumbs/thumbl_980x340_004.png" /></li> <li><img src="images/thumbs/thumbl_980x340_005.png" /></li> <li><img src="images/thumbs/thumbl_980x340_006.png" /></li> <li><img src="images/thumbs/thumbl_980x340_007.png" /></li> <li><img src="images/thumbs/thumbl_980x340_008.png" /></li> </ul> </div> <div class="button-previous">Previous</div> </div> <!----------------- END OF NAVIGATOR ---------------------> <!-- BUTTON PLAY-STOP --> <div class="button-control"><span></span></div> <!-- END OF BUTTON PLAY-STOP --> </div> <!------------------------------------- END OF THE CONTENT -------------------------------------------------> </div> </div> <!-- Saiti przestaje kombinować --> </div> <div id="columns"> <!-- Left --> <div id="left_column" class="column"> {$HOOK_LEFT_COLUMN} </div> <!-- Center --> <div id="center_column"> {/if} Of course, I did the test on a index file of this slider only - it works. So decided to copy the slider tags into tpl file, and all of the .js etc files to server - and boom boom crashed down So, can You tell me, where I did the mistake? Need your help, thanks! 1 Link to comment Share on other sites More sharing options...
CartExpert.net Posted March 10, 2012 Share Posted March 10, 2012 hi, You need to put this $(document).ready( function(){ // buttons for next and previous item var buttons = { previous:$('#jslidernews1 .button-previous') , next:$('#jslidernews1 .button-next') }; $('#jslidernews1').lofJSidernews( { interval : 4000, direction : 'opacitys', easing : 'easeInOutExpo', duration : 1200, auto : true, maxItemDisplay : 4, navPosition : 'horizontal', // horizontal navigatorHeight : 32, navigatorWidth : 80, mainWidth : 974, buttons : buttons } ); }); between {literal}{/literal} Link to comment Share on other sites More sharing options...
Saiti Posted March 10, 2012 Author Share Posted March 10, 2012 Does not work. Should I look how are coded other js files in the header? I mean <script> tags. Link to comment Share on other sites More sharing options...
CartExpert.net Posted March 11, 2012 Share Posted March 11, 2012 Does not work. Does it give an error? What is the error? Link to comment Share on other sites More sharing options...
webplus Posted March 12, 2012 Share Posted March 12, 2012 You might need to enable debug mode (search in forum if you dont know how) to see if there is any error. Also, it would be much better and easier to maintain, if you turn this into basic module. It doesn't need to have administration, just define hook and include js in php module file and put your html in tpl module file. This guide should help: http://www.prestashop.com/forums/topic/111725-guide-prestashop-development-guide/ Link to comment Share on other sites More sharing options...
Saiti Posted March 13, 2012 Author Share Posted March 13, 2012 Does it give an error? What is the error? Nope, just a blank text, without any js effect which I suppose. i set debug to true value, but where to find errors? Just starting to find a solution from last 2 post Will get an answer in a while Link to comment Share on other sites More sharing options...
Saiti Posted March 13, 2012 Author Share Posted March 13, 2012 Ok, I am pasting debug.tpl content, how to read that? {* * 2007-2011 PrestaShop * * NOTICE OF LICENSE * * This source file is subject to the Academic Free License (AFL 3.0) * that is bundled with this package in the file LICENSE.txt. * It is also available through the world-wide-web at this URL: * [url="http://opensource.org/licenses/afl-3.0.php"]http://opensource.or...ses/afl-3.0.php[/url] * If you did not receive a copy of the license and are unable to * obtain it through the world-wide-web, please send an email * to [email protected] so we can send you a copy immediately. * * DISCLAIMER * * Do not edit or add to this file if you wish to upgrade PrestaShop to newer * versions in the future. If you wish to customize PrestaShop for your * needs please refer to [url="http://www.prestashop.com"]http://www.prestashop.com[/url] for more information. * * @author PrestaShop SA <[email protected]> * @copyright 2007-2011 PrestaShop SA * @version Release: $Revision: 6594 $ * @license [url="http://opensource.org/licenses/afl-3.0.php"]http://opensource.or...ses/afl-3.0.php[/url] Academic Free License (AFL 3.0) * International Registered Trademark & Property of PrestaShop SA *} {* Smarty *} {* debug.tpl, last updated version 2.0.1 *} {assign_debug_info} {if isset($_smarty_debug_output) and $_smarty_debug_output eq "html"} <table border=0 width=100%> <tr bgcolor=#cccccc><th colspan=2>Smarty Debug Console</th></tr> <tr bgcolor=#cccccc><td colspan=2><b>included templates & config files (load time in seconds):</b></td></tr> {section name=templates loop=$_debug_tpls} <tr bgcolor={if %templates.index% is even}#eeeeee{else}#fafafa{/if}><td colspan=2><tt>{section name=indent loop=$_debug_tpls[templates].depth} {/section}<font color={if $_debug_tpls[templates].type eq "template"}brown{elseif $_debug_tpls[templates].type eq "insert"}black{else}green{/if}>{$_debug_tpls[templates].filename|escape:html}</font>{if isset($_debug_tpls[templates].exec_time)} <font size=-1><i>({$_debug_tpls[templates].exec_time|string_format:"%.5f"}){if %templates.index% eq 0} (total){/if}</i></font>{/if}</tt></td></tr> {sectionelse} <tr bgcolor=#eeeeee><td colspan=2><tt><i>no templates included</i></tt></td></tr> {/section} <tr bgcolor=#cccccc><td colspan=2><b>assigned template variables:</b></td></tr> {section name=vars loop=$_debug_keys} <tr bgcolor={if %vars.index% is even}#eeeeee{else}#fafafa{/if}><td valign=top><tt><font color=blue>{ldelim}${$_debug_keys[vars]}{rdelim}</font></tt></td><td nowrap><tt><font color=green>{$_debug_vals[vars]|@debug_print_var}</font></tt></td></tr> {sectionelse} <tr bgcolor=#eeeeee><td colspan=2><tt><i>no template variables assigned</i></tt></td></tr> {/section} <tr bgcolor=#cccccc><td colspan=2><b>assigned config file variables (outer template scope):</b></td></tr> {section name=config_vars loop=$_debug_config_keys} <tr bgcolor={if %config_vars.index% is even}#eeeeee{else}#fafafa{/if}><td valign=top><tt><font color=maroon>{ldelim}#{$_debug_config_keys[config_vars]}#{rdelim}</font></tt></td><td><tt><font color=green>{$_debug_config_vals[config_vars]|@debug_print_var}</font></tt></td></tr> {sectionelse} <tr bgcolor=#eeeeee><td colspan=2><tt><i>no config vars assigned</i></tt></td></tr> {/section} </table> </BODY></HTML> {else} <SCRIPT language=javascript> if( self.name == '' ) {ldelim} var title = 'Console'; {rdelim} else {ldelim} var title = 'Console_' + self.name; {rdelim} _smarty_console = window.open("",title.value,"width=680,height=600,resizable,scrollbars=yes"); _smarty_console.document.write("<HTML><TITLE>Smarty Debug Console_"+self.name+"</TITLE><BODY bgcolor=#ffffff>"); _smarty_console.document.write("<table border=0 width=100%>"); _smarty_console.document.write("<tr bgcolor=#cccccc><th colspan=2>Smarty Debug Console</th></tr>"); _smarty_console.document.write("<tr bgcolor=#cccccc><td colspan=2><b>included templates & config files (load time in seconds):</b></td></tr>"); {section name=templates loop=$_debug_tpls} _smarty_console.document.write("<tr bgcolor={if %templates.index% is even}#eeeeee{else}#fafafa{/if}><td colspan=2><tt>{section name=indent loop=$_debug_tpls[templates].depth} {/section}<font color={if $_debug_tpls[templates].type eq "template"}brown{elseif $_debug_tpls[templates].type eq "insert"}black{else}green{/if}>{$_debug_tpls[templates].filename|escape:html|escape:javascript}</font>{if isset($_debug_tpls[templates].exec_time)} <font size=-1><i>({$_debug_tpls[templates].exec_time|string_format:"%.5f"}){if %templates.index% eq 0} (total){/if}</i></font>{/if}</tt></td></tr>"); {sectionelse} _smarty_console.document.write("<tr bgcolor=#eeeeee><td colspan=2><tt><i>no templates included</i></tt></td></tr>"); {/section} _smarty_console.document.write("<tr bgcolor=#cccccc><td colspan=2><b>assigned template variables:</b></td></tr>"); {section name=vars loop=$_debug_keys} _smarty_console.document.write("<tr bgcolor={if %vars.index% is even}#eeeeee{else}#fafafa{/if}><td valign=top><tt><font color=blue>{ldelim}${$_debug_keys[vars]}{rdelim}</font></tt></td><td nowrap><tt><font color=green>{$_debug_vals[vars]|@debug_print_var|escape:javascript}</font></tt></td></tr>"); {sectionelse} _smarty_console.document.write("<tr bgcolor=#eeeeee><td colspan=2><tt><i>no template variables assigned</i></tt></td></tr>"); {/section} _smarty_console.document.write("<tr bgcolor=#cccccc><td colspan=2><b>assigned config file variables (outer template scope):</b></td></tr>"); {section name=config_vars loop=$_debug_config_keys} _smarty_console.document.write("<tr bgcolor={if %config_vars.index% is even}#eeeeee{else}#fafafa{/if}><td valign=top><tt><font color=maroon>{ldelim}#{$_debug_config_keys[config_vars]}#{rdelim}</font></tt></td><td><tt><font color=green>{$_debug_config_vals[config_vars]|@debug_print_var|escape:javascript}</font></tt></td></tr>"); {sectionelse} _smarty_console.document.write("<tr bgcolor=#eeeeee><td colspan=2><tt><i>no config vars assigned</i></tt></td></tr>"); {/section} _smarty_console.document.write("</table>"); _smarty_console.document.write("</BODY></HTML>"); _smarty_console.document.close(); </SCRIPT> {/if} Link to comment Share on other sites More sharing options...
CartExpert.net Posted March 13, 2012 Share Posted March 13, 2012 This is just the content of the debug.tpl Would you please post the link to your site? Link to comment Share on other sites More sharing options...
CartExpert.net Posted March 13, 2012 Share Posted March 13, 2012 Is the page displaying at all or only the slideshow doesn't work? You should try using FireBug (if you use FireFox) and it will display if there are any Javascript errors. Link to comment Share on other sites More sharing options...
Recommended Posts
Create an account or sign in to comment
You need to be a member in order to leave a comment
Create an account
Sign up for a new account in our community. It's easy!
Register a new accountSign in
Already have an account? Sign in here.
Sign In Now