JavaScript on product page problems

27 Oct 2007, 9:23 PM

#1

Zen Follower

Join Date:: Oct 2007
Posts:: 106
Plugin Contributions:: 0

JavaScript on product page problems

I wanted to add the script below to a product page...and it works find when in "preview" mode but doesn't work on the live site found here:

http://www.vinashcoaching.com/store/index.php?main_page=product_info&products_id=180

Does anyone have any idea?

html>
<head>
<script language="javascript">
var imgMax = new Image(10,10);
imgMax.src = 'images/max_arrow.gif';
var imgMin = new Image(10,10);
imgMin.src = 'images/min_arrow.gif';
function dyntog(a,thisimg)
{
   if(a.style.display=="none")
   {
      a.style.display="inline";
      thisimg.src=imgMax.src;
   }
   else if(a.style.display=="inline")
   {
      a.style.display="none";
      thisimg.src=imgMin.src;
   }
   return false;
}
</script>
<title>Expand/Collapse the table using DIV</title>
</head>
<body>
<img src="max_arrow.gif" width="10" height="10" border="0" align="absmiddle" style="cursor:hand" onclick="dyntog(tbltog_1,this)" title="Click to Minimize/Maximize the table">
<span id="tbltog_1" style="display:inline">First Line<BR>Second Line<BR></span>
</body>
</html>

27 Oct 2007, 10:03 PM

#2

kuroi

Totally Zenned

Join Date:: Apr 2006
Location:: London, UK
Posts:: 10,475
Plugin Contributions:: 11

Re: JavaScript on product page problems

Your page structure is corrupt. You've taken the test page and just dropped it into the middle of your Zen Cart page, but you can't do this as the html tag was already open and re-opening it is an error, and you can't have two head tags.

In addition you have a ton of unrelated validation errors that corrupt the pages structure and could also make it more difficult to javascript to work out which elements they are supposed to be working on.

28 Oct 2007, 1:58 AM

#3

zidain

Zen Follower

Join Date:: Oct 2007
Posts:: 106
Plugin Contributions:: 0

Re: JavaScript on product page problems

is there another code I can use to accomplish the same thing? As far as all the things that are broken, I tried to fix some of them, but the ones I didn't are a product of my lack of programming knowledge hehe, so any help here would be great...especially if I have to go edit the .css doc.

Zidain

28 Oct 2007, 9:41 AM

#4

kuroi

Totally Zenned

Join Date:: Apr 2006
Location:: London, UK
Posts:: 10,475
Plugin Contributions:: 11

Re: JavaScript on product page problems

A quick glance at that code suggests that it should do the job, but it is actually two pieces of code, one of which needs to be called in your Zen Cart page's header file and two lines that need to be inserted into the body of the page.

Ideally you would place the javascript (the bit BETWEEN the script tags) in a file called jscript_{unique_name}.js (where {unique_name} can be anything you want). Then you place this file in your /includes/modules/pages/product_info/ folder and the javascript will be loaded automatically whenever this page is run.

Then you place the two lines between the body tag into your tpl_product_info_default.php file which is probably what you did with the code before.

28 Oct 2007, 12:15 PM

#5

zidain

Zen Follower

Join Date:: Oct 2007
Posts:: 106
Plugin Contributions:: 0

Re: JavaScript on product page problems

kuroi, thanks a lot for spending the time to go through it...I actually found a code which was more simple...here is it posted below for anyone that wants it...

The following goes in tpl_header.php

<script langauge="JavaScript" type="text/javascript"> function doMenu(item) { obj=document.getElementById(item); col=document.getElementById("x" + item); if (obj.style.display=="none") { obj.style.display="block"; col.innerHTML="[-]"; } else { obj.style.display="none"; col.innerHTML="[+]"; } } </script>

The following goes in the body of the prodcut desc pages (where you put in the content)

<a href="javascript:doMenu('main');" id=xmain>[+]</a> Main Item <div id=main style="margin-left:1em"> <a href=#>Item 1</a><br> <a href=#>Item 2</a><br> <a href=#>Item 3</a> </div> <br>

The only thing I can't figure out is how to increase the table from 3 lines to more...to work around this as you can see on http://www.vinashcoaching.com/store/index.php?main_page=product_info&products_id=180 I just added all the FAQ's to the first Item line, although it causes a weird indent in the content. Does anyone know how to increase the lines?

Also I got the code from here
http://www.namepros.com/code/67426-javascript-expand-collapse.html
...want to give the guy that wrote it the credit :smile:
Zidain

28 Oct 2007, 12:46 PM

#6

kuroi

Totally Zenned

Join Date:: Apr 2006
Location:: London, UK
Posts:: 10,475
Plugin Contributions:: 11

Re: JavaScript on product page problems

Although that will work, it's rather illogical. I think you're confusing the visible header on the screen (which is controlled by tpl_header.php) with the page's html header (which is where you should really place your javascript).

If you wanted to force it in by brute force, then the appropriate place would be the html_header.php file.

But this would have the disadvantage of including it for every page, even when it's not needed. This is why I showed you the proper Zen Cart way to load your javascript for a specific page, which is still applicable to your new code.

28 Oct 2007, 8:18 PM

#7

zidain

Zen Follower

Join Date:: Oct 2007
Posts:: 106
Plugin Contributions:: 0

Re: JavaScript on product page problems

Can you do me a favor and tell me the exact steps I need to take now that I have it in the wrong place in order to put it in the right one...I'm kinda new at this and don't want to bog it up. Thanks.

Zidain~

28 Oct 2007, 10:43 PM

#8

zidain

Zen Follower

Join Date:: Oct 2007
Posts:: 106
Plugin Contributions:: 0

Re: JavaScript on product page problems

this is another code I wanted to add...can you walk me through the specific steps...

<SCRIPT LANGUAGE="JavaScript">  </script>
<A HREF="javascript:popUp('http://www.vinashcoaching.com/pages/icupfaq.php')">Open the Popup Window</A>

28 Oct 2007, 10:50 PM

#9

kuroi

Totally Zenned

Join Date:: Apr 2006
Location:: London, UK
Posts:: 10,475
Plugin Contributions:: 11

Re: JavaScript on product page problems

zidain:

this is another code I wanted to add...can you walk me through the specific steps...I suggest re-reading post #4 where I do exactly this.

28 Oct 2007, 11:03 PM

#10

zidain

Zen Follower

Join Date:: Oct 2007
Posts:: 106
Plugin Contributions:: 0

Re: JavaScript on product page problems

Well here is what I did with this code...and sorry for being such a noob here but I do want to get this right...

I took the quote below and created a file named:
jscript_header.js and placed it in the following directory:
/includes/modules/pages/product_info/

<SCRIPT LANGUAGE="JavaScript">  </script>

Then I took the following code and put in into the HTML editor on the product page in the admin tool ...

<A HREF="javascriptopUp('http://www.vinashcoaching.com/pages/icupfaq.php')">Open the Popup Window</A>

Here is the page live: http://www.vinashcoaching.com/store/index.php?main_page=product_info&products_id=180

as you can see this code isn't working...so what am I doing wrong? Sorry for being so noobie hehe :smile:

Thanks for your help and patience kuroi.

Zidain~

28 Oct 2007, 11:05 PM

#11

kuroi

Totally Zenned

Join Date:: Apr 2006
Location:: London, UK
Posts:: 10,475
Plugin Contributions:: 11

Re: JavaScript on product page problems

Try deleting the first two and last two lines from your javascript file, so that you are left with just the javascript.

28 Oct 2007, 11:26 PM

#12

zidain

Zen Follower

Join Date:: Oct 2007
Posts:: 106
Plugin Contributions:: 0

Re: JavaScript on product page problems

wow that worked great...thanks so much. OK so last question. Do I add additional java codes to the same "header" page if I want to have additional codes or should I create a separate one for each code?

28 Oct 2007, 11:33 PM

#13

kuroi

Totally Zenned

Join Date:: Apr 2006
Location:: London, UK
Posts:: 10,475
Plugin Contributions:: 11

Re: JavaScript on product page problems

Be careful not to confuse Java with Javascript - they're very different languages.

If the additional javascript is for the same page, put it in the same file.

28 Oct 2007, 11:48 PM

#14

zidain

Zen Follower

Join Date:: Oct 2007
Posts:: 106
Plugin Contributions:: 0

Re: JavaScript on product page problems

OK thanks so much for all your help kuroi, I really appreciate it...If you feel like helping with the other things please check these posts hehe...

The only issue on this one left if the white space problem in IE6 above the header logo
http://www.zen-cart.com/forum/showthread.php?t=78656

Next is the add to cart function problem. The 2 main things here is getting the top one to work and replacing "add to cart" text with the image below it...please see this post:
http://www.zen-cart.com/forum/showthread.php?t=78796

Finally, I'm having problems with UPS shipping XML, I don't know if this is your area at all but please see the post below:
http://www.zen-cart.com/forum/showthread.php?t=78786

I'm not sure what to do about the shipping, I followed all the directions from the devs. I have taken it down temp, to check other options but I would really prefer to use USPXML if I can get it up and running with some support.

So any help on these would be much appreciated but if you can't let me just give you a big hug and say thank you for helping with the java(script) :P code stuff.

Zidain~

1 Jan 2008, 12:22 AM

#15

veronika7747

Zen Follower

Join Date:: Nov 2007
Posts:: 270
Plugin Contributions:: 0

Re: JavaScript on product page problems

O.K. here is another "dense" person.. I have the following code saved in:
/includes/modules/pages/products_info/jscript_soldoriginals.js

var newsText = new Array();
newsText[0] = "If you wish to order a custom made Original of this painting or other African wildlife, please call the artist, Clive Kay at 1-705-454-9637. Clive will be pleased to discuss your request with you.";
var ttloop = 1;    // Repeat forever? (0 = True; 1 = False)
var tspeed = 50;   // Typing speed in milliseconds (larger number = slower)
var tdelay = 1000; // Time delay between newsTexts in milliseconds
// ------------- NO EDITING AFTER THIS LINE ------------- \\
var dwAText, cnews=0, eline=0, cchar=0, mxText;
function doNews() {
  mxText = newsText.length - 1;
  dwAText = newsText[cnews];
  setTimeout("addChar()",1000)
}
function addNews() {
  cnews += 1;
  if (cnews <= mxText) {
    dwAText = newsText[cnews];
    if (dwAText.length != 0) {
      document.news.news2.value = "";
      eline = 0;
      setTimeout("addChar()",tspeed)
    }
  }
}
function addChar() {
  if (eline!=1) {
    if (cchar != dwAText.length) {
      nmttxt = ""; for (var k=0; k<=cchar;k++) nmttxt += dwAText.charAt(k);
      document.news.news2.value = nmttxt;
      cchar += 1;
      if (cchar != dwAText.length) document.news.news2.value += "_";
    } else {
      cchar = 0;
      eline = 1;
    }
    if (mxText==cnews && eline!=0 && ttloop!=0) {
      cnews = 0; setTimeout("addNews()",tdelay);
    } else setTimeout("addChar()",tspeed);
  } else {
    setTimeout("addNews()",tdelay)
  }
}
doNews()

Now on the product I wish this script to run, I put the following:

<script src="jscript_soldoriginals.js" type="text/javascript"></script>
<form name="news">
<font color="#cc9900"><b>
<br /></b></font></form>

But nothing is happening..

Thanks in advance and Happy New Year!

1 Jan 2008, 6:37 PM

#16

veronika7747

Zen Follower

Join Date:: Nov 2007
Posts:: 270
Plugin Contributions:: 0

Re: JavaScript on product page problems

Now on the product I wish this script to run, I put the following:

<script src="jscript_soldoriginals.js" type="text/javascript"></script>
<form name="news">
<font color="#cc9900"><b>
<br /></b></font></form>

But nothing is happening..

Thanks in advance and Happy New Year![/QUOTE]

Ups, the second code is missing a line, it is as follows:

<script src="jscript_soldoriginals.js" type="text/javascript"></script>
<form name="news">
<font color="#cc9900"><b>
<textarea name="news2" cols="40" rows="6" wrap="virtual">
</textarea></b></font></form>

But I still don't see the text in the textarea...

When I went back to double check the code, it puts in extras:

<script type="text/javascript" src="jscript_soldoriginals.js"></script>
<form name="news">
<font color="#cc9900"><b>
<textarea wrap="virtual" rows="6" cols="40" name="news2"></body>
</html></HTML></textarea></b></font></form>

If this is my problem, how do I keep it from appearing in the text area??