• Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 978
  • Last Modified:

Zen cart header and head tag

HI, On this site:
http:// the dessert lovers dot com

I'm using a new installation of zen cart. The client wants the top row of dessert pictures to scroll endlessly. I'm not sure I agree with her, but I need to show it to her.

I can find the javascript to do this, but I need to know where to to access the code for the header, both head tag and then I would need to replace logo.gif with the javascript. I may need more help than this because I am not proficient in php and I don't want to break anything. Thanks!
0
mel200
Asked:
mel200
  • 5
  • 4
1 Solution
 
SilhouetteCommented:
Hi,

The code you are looking for is inside tpl_header.php which for the template you are using should be in the following directory:
includes\templates\apple_zen\common\tpl_header.php

The exact code you are looking for is wrapped by <div id="logo">
0
 
mel200Author Commented:
OK, thanks! Will work with that later today and close this if I don't need any more help.
0
 
mel200Author Commented:
Ok, I didn't think it would be that easy. I put this in between the head tags, so this:<script type="text/javascript">

/***********************************************
* Conveyor belt slideshow script- © Dynamic Drive DHTML code library (www.dynamicdrive.com)
* This notice MUST stay intact for legal use
* Visit Dynamic Drive at http://www.dynamicdrive.com/ for full source code
***********************************************/


//Specify the slider's width (in pixels)
var sliderwidth="300px"
//Specify the slider's height
var sliderheight="150px"
//Specify the slider's slide speed (larger is faster 1-10)
var slidespeed=3
//configure background color:
slidebgcolor="#EAEAEA"

//Specify the slider's images
var leftrightslide=new Array()
var finalslide=''
leftrightslide[0]='<a href="#"><img src="/images/cupcake1.jpg" border=1></a>'
leftrightslide[1]='<a href="#"><img src="/images/cupcake2.jpg" border=1></a>'
leftrightslide[2]='<a href="#"><img src="/images/cupcake3.jpg" border=1></a>'
leftrightslide[3]='<a href="#"><img src="/images/cupcake4.jpg" border=1></a>'
leftrightslide[4]='<a href="#"><img src="/images/cupcake5.jpg" border=1></a>'

//Specify gap between each image (use HTML):
var imagegap=" "

//Specify pixels gap between each slideshow rotation (use integer):
var slideshowgap=5


////NO NEED TO EDIT BELOW THIS LINE////////////

var copyspeed=slidespeed
leftrightslide='<nobr>'+leftrightslide.join(imagegap)+'</nobr>'
var iedom=document.all||document.getElementById
if (iedom)
document.write('<span id="temp" style="visibility:hidden;position:absolute;top:-100px;left:-9000px">'+leftrightslide+'</span>')
var actualwidth=''
var cross_slide, ns_slide

function fillup(){
if (iedom){
cross_slide=document.getElementById? document.getElementById("test2") : document.all.test2
cross_slide2=document.getElementById? document.getElementById("test3") : document.all.test3
cross_slide.innerHTML=cross_slide2.innerHTML=leftrightslide
actualwidth=document.all? cross_slide.offsetWidth : document.getElementById("temp").offsetWidth
cross_slide2.style.left=actualwidth+slideshowgap+"px"
}
else if (document.layers){
ns_slide=document.ns_slidemenu.document.ns_slidemenu2
ns_slide2=document.ns_slidemenu.document.ns_slidemenu3
ns_slide.document.write(leftrightslide)
ns_slide.document.close()
actualwidth=ns_slide.document.width
ns_slide2.left=actualwidth+slideshowgap
ns_slide2.document.write(leftrightslide)
ns_slide2.document.close()
}
lefttime=setInterval("slideleft()",30)
}
window.onload=fillup

function slideleft(){
if (iedom){
if (parseInt(cross_slide.style.left)>(actualwidth*(-1)+8))
cross_slide.style.left=parseInt(cross_slide.style.left)-copyspeed+"px"
else
cross_slide.style.left=parseInt(cross_slide2.style.left)+actualwidth+slideshowgap+"px"

if (parseInt(cross_slide2.style.left)>(actualwidth*(-1)+8))
cross_slide2.style.left=parseInt(cross_slide2.style.left)-copyspeed+"px"
else
cross_slide2.style.left=parseInt(cross_slide.style.left)+actualwidth+slideshowgap+"px"

}
else if (document.layers){
if (ns_slide.left>(actualwidth*(-1)+8))
ns_slide.left-=copyspeed
else
ns_slide.left=ns_slide2.left+actualwidth+slideshowgap

if (ns_slide2.left>(actualwidth*(-1)+8))
ns_slide2.left-=copyspeed
else
ns_slide2.left=ns_slide.left+actualwidth+slideshowgap
}
}


if (iedom||document.layers){
with (document){
document.write('<table border="0" cellspacing="0" cellpadding="0"><td>')
if (iedom){
write('<div style="position:relative;width:'+sliderwidth+';height:'+sliderheight+';overflow:hidden">')
write('<div style="position:absolute;width:'+sliderwidth+';height:'+sliderheight+';background-color:'+slidebgcolor+'" onMouseover="copyspeed=0" onMouseout="copyspeed=slidespeed">')
write('<div id="test2" style="position:absolute;left:0px;top:0px"></div>')
write('<div id="test3" style="position:absolute;left:-1000px;top:0px"></div>')
write('</div></div>')
}
else if (document.layers){
write('<ilayer width='+sliderwidth+' height='+sliderheight+' name="ns_slidemenu" bgColor='+slidebgcolor+'>')
write('<layer name="ns_slidemenu2" left=0 top=0 onMouseover="copyspeed=0" onMouseout="copyspeed=slidespeed"></layer>')
write('<layer name="ns_slidemenu3" left=0 top=0 onMouseover="copyspeed=0" onMouseout="copyspeed=slidespeed"></layer>')
write('</ilayer>')
}
document.write('</td></table>')
}
}
</script>

Replaced:
<?php echo '<a href="' . HTTP_SERVER . DIR_WS_CATALOG . '">' . zen_image($template->get_template_dir(HEADER_LOGO_IMAGE, DIR_WS_TEMPLATE, $current_page_base,'images'). '/' . HEADER_LOGO_IMAGE, HEADER_ALT_TEXT, HEADER_LOGO_WIDTH, HEADER_LOGO_HEIGHT) . '</a>'; ?></div>
            <?php if (HEADER_SALES_TEXT != '' || (SHOW_BANNERS_GROUP_SET2 != '' && $banner = zen_banner_exists('dynamic', SHOW_BANNERS_GROUP_SET2))) { ?>
            <div id="taglineWrapper">
              <?php
              if (HEADER_SALES_TEXT != '') {
?>
              <div id="tagline"><?php echo HEADER_SALES_TEXT;?></div>
              <?php
              }
?>
              <?php
              if (SHOW_BANNERS_GROUP_SET2 != '' && $banner = zen_banner_exists('dynamic', SHOW_BANNERS_GROUP_SET2)) {
                if ($banner->RecordCount() > 0) {
?>
              <br class="clearBoth" /><div id="bannerTwo" class="banners"><?php echo zen_display_banner('static', $banner);?></div>
              <?php
                }
              }
?>

And the page became blank. Could you provide a little more direction? Thanks- I need to study php.
0
What does it mean to be "Always On"?

Is your cloud always on? With an Always On cloud you won't have to worry about downtime for maintenance or software application code updates, ensuring that your bottom line isn't affected.

 
SilhouetteCommented:
The reason why it displayed is because there was a mismatch in the }
I checked again and you actually need to replace the all the code in the first attached code block which is everything wrapped by <div id="logoWrapper">
I have attached a correct copy of the header file which should work

<div id="logo"><?php echo '<a href="' . HTTP_SERVER . DIR_WS_CATALOG . '">' . zen_image($template->get_template_dir(HEADER_LOGO_IMAGE, DIR_WS_TEMPLATE, $current_page_base,'images'). '/' . HEADER_LOGO_IMAGE, HEADER_ALT_TEXT, HEADER_LOGO_WIDTH, HEADER_LOGO_HEIGHT) . '</a>'; ?></div>
            <?php if (HEADER_SALES_TEXT != '' || (SHOW_BANNERS_GROUP_SET2 != '' && $banner = zen_banner_exists('dynamic', SHOW_BANNERS_GROUP_SET2))) { ?>
            <div id="taglineWrapper">
              <?php
              if (HEADER_SALES_TEXT != '') {
?>
              <div id="tagline"><?php echo HEADER_SALES_TEXT;?></div>
              <?php
              }
?>
              <?php
              if (SHOW_BANNERS_GROUP_SET2 != '' && $banner = zen_banner_exists('dynamic', SHOW_BANNERS_GROUP_SET2)) {
                if ($banner->RecordCount() > 0) {
?>
              <br class="clearBoth" /><div id="bannerTwo" class="banners"><?php echo zen_display_banner('static', $banner);?></div>
              <?php
                }
              }
?>
            </div>
            <?php } // no HEADER_SALES_TEXT or SHOW_BANNERS_GROUP_SET2 ?>

Open in new window

tpl-header.php
0
 
mel200Author Commented:
Hi- The tpl-header you supplied doesn't seem to be any different than the old one. I tried copying all the code you supplied there and replacing it with the java, but it also provides a blank page. Maybe I'm misunderstanding?
0
 
SilhouetteCommented:
The tpl-header file I uploaded already contains the javascript that you listed above, you should only have to replace your  tpl-header  file with that one to get it to work.
0
 
mel200Author Commented:
Oh, I'm sorry! I didn't notice that it was tpl-header instead of tpl_header. It's working! Can you also tell me how to make it either go the full width, or to just be centered above the navigation? Thanks so much!
0
 
SilhouetteCommented:
To get it to center with the navigation you need to change the css for #logoWrapperOuter back to width:70em;

The problem with full width is that the javascript only excepts pixels and em values not percentages you can try setting this

var sliderwidth="2000px"

if someone for some reason makes their browser bigger than 2000px it will look strange.
0
 
mel200Author Commented:
Excellent answers, thanks!!
0

Featured Post

Free Tool: Subnet Calculator

The subnet calculator helps you design networks by taking an IP address and network mask and returning information such as network, broadcast address, and host range.

One of a set of tools we're offering as a way of saying thank you for being a part of the community.

  • 5
  • 4
Tackle projects and never again get stuck behind a technical roadblock.
Join Now