Solved

Zen cart header and head tag

Posted on 2010-08-25
9
947 Views
Last Modified: 2013-11-18
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
Comment
Question by:mel200
  • 5
  • 4
9 Comments
 
LVL 6

Expert Comment

by:Silhouette
Comment Utility
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
 

Author Comment

by:mel200
Comment Utility
OK, thanks! Will work with that later today and close this if I don't need any more help.
0
 

Author Comment

by:mel200
Comment Utility
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
 
LVL 6

Expert Comment

by:Silhouette
Comment Utility
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
Highfive Gives IT Their Time Back

Highfive is so simple that setting up every meeting room takes just minutes and every employee will be able to start or join a call from any room with ease. Never be called into a meeting just to get it started again. This is how video conferencing should work!

 

Author Comment

by:mel200
Comment Utility
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
 
LVL 6

Expert Comment

by:Silhouette
Comment Utility
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
 

Author Comment

by:mel200
Comment Utility
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
 
LVL 6

Accepted Solution

by:
Silhouette earned 500 total points
Comment Utility
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
 

Author Closing Comment

by:mel200
Comment Utility
Excellent answers, thanks!!
0

Featured Post

Threat Intelligence Starter Resources

Integrating threat intelligence can be challenging, and not all companies are ready. These resources can help you build awareness and prepare for defense.

Join & Write a Comment

Read about why website design really matters in today's demanding market.
I've been asked to discuss some of the UX activities that I'm using with my team. Here I will share some details about how we approach UX projects.
Any person in technology especially those working for big companies should at least know about the basics of web accessibility. Believe it or not there are even laws in place that require businesses to provide such means for the disabled and aging p…
The viewer will get a basic understanding of what section 508 compliance can entail, learn about skip navigation links, alt text, transcripts, and font size controls.

772 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question

Need Help in Real-Time?

Connect with top rated Experts

10 Experts available now in Live!

Get 1:1 Help Now