HTML not working in ecwid, works perfectly in wordpress

squarescore · #1 06-19-2012, 06:46 AM

I've created product description tabs and the code works perfectly in a wordpress post but not in the ecwid editor.

Here's the code: http://jsfiddle.net/XbGck/

The code calls javascript and css in the beginning of the code.. and I'm guessing that's where something is getting messed up in the ecwid editor. What am I missing?

Maya · #2 06-19-2012, 11:34 AM

The thing is that Ecwid doesn't execute javascript, which is placed inside product description. In order to fix it you can place javascript code:

Code:

<script src="https://dl.dropbox.com/u/21499484/tabs/domtab.js" type="text/javascript" charset="UTF-8"></script>

outside the product description or add https://gist.github.com/977052 script on your site, which makes any scripts inserted in product description to work out of the box.

squarescore · #3 06-19-2012, 12:42 PM

Thanks for the prompt reply.

I tried your second option. Placed the script in my header file, keeping the html code in product description the same.... sadly it doesn't work. I'm using wordpress, is that why it's not working?

Your second option to place the .js outside the product description, how do I do that? (pardon my ignorance, I'm still learning.)

Jason Fazey · #4 06-21-2012, 11:08 PM

Hi Squarescore.

Your javascript code can be put within the <head> </head> tags on your header.php file for your current theme in wordpress.

Code:

<script src="https://dl.dropbox.com/u/21499484/tabs/domtab.js" type="text/javascript" charset="UTF-8"></script>

Then you should be able to write the description info within ecwid product description.

I did try and download the .js file and it came up 404 though. Could be cause its being hotlinked. I find its always best to have the actual .js file and upload it to your own domain and then include from there.

If you get it to work, please let me know as Id like to see one working

squarescore · #5 06-21-2012, 11:18 PM

oops.. sorry, was making some changes the other day and moved it by mistake. It's in place now so you can download it.

I'm gonna try your method, not now, later, and let you know how it goes.

Maya · #6 06-22-2012, 06:34 AM

Quote:

Originally Posted by squarescore

Thanks for the prompt reply.

I tried your second option. Placed the script in my header file, keeping the html code in product description the same.... sadly it doesn't work. I'm using wordpress, is that why it's not working?

Your second option to place the .js outside the product description, how do I do that? (pardon my ignorance, I'm still learning.)

I have checked your store and have not found the script from this page https://gist.github.com/977052 installed in your store.

In order to install this script on your site you should:
1. Save the https://raw.github.com/gist/977052/3... js-file somewhere on your server.
2. Put following code on the source page, where Ecwid is installed:

Code:

<script src="%PATH%"></script>

where %PATH% should be changed to the absolute path to the js-file with the script.

Once you do this, script, which you have added in product description will work as expected.

Quote:

Your second option to place the .js outside the product description, how do I do that? (pardon my ignorance, I'm still learning.)

You should remove following code from the product description:

Code:

<script src="https://dl.dropbox.com/u/21499484/tabs/domtab.js" type="text/javascript" charset="UTF-8"></script>

and place it, for example, after “</head>” tag in the source page, where Ecwid is installed.

Jason Fazey · #7 06-22-2012, 07:38 AM

Hi Maya, I did what you said about adding the ecwid-scripts-work.js into the head of my site. I just placed it onto header.php. It sort of made the tabs work, but it also broke the whole layout of my theme. Once I removed it, the site went back to normal.

Eugene Rimmer · #8 06-22-2012, 08:40 AM

Quote:

Originally Posted by Jason Fazey

Hi Maya, I did what you said about adding the ecwid-scripts-work.js into the head of my site. I just placed it onto header.php. It sort of made the tabs work, but it also broke the whole layout of my theme. Once I removed it, the site went back to normal.

Jason, if you take a closer look to this file: https://dl.dropbox.com/u/21499484/tabs/domtab.css that is being used in this solution, you may notice it declares some styles for the elements like h1, p or pre, without any specific prefixes, which basically means "please, change the properties of all such elements in page, no matter if they are in tabs or anywhere else". So, adding this exact file into the site will definitely brake mos of the themes. The code in that file should be prefixed with the correct classes in order to only affect some elements.

Jason Fazey · #9 06-22-2012, 08:52 AM

Hi Eugene, thanks for that. I did think of that when I was using the css. Pretty sure I dropped out anything that was relevant to the domtab classes

All I ended up using in the css was

Code:

		div.domtab{
			padding:0 3em;
			width:80%;
			font-size:90%;
		}
		ul.domtabs{
			float:left;
			width:100%;
			margin:2em 0 0 0;				
		}
		ul.domtabs li{
			float:left;
			padding:0 .5em 0 0;
		}
		ul.domtabs a:link,
		ul.domtabs a:visited,
		ul.domtabs a:active,
		ul.domtabs a:hover{
			width:8em;
			padding:.2em 1em;
			display:block;
			background:#666;
			color:#ccc;
			height:3em;
			font-weight:bold;
			text-decoration:none;
		}
		html>body ul.domtabs a:link,
		html>body ul.domtabs a:visited,
		html>body ul.domtabs a:active,
		html>body ul.domtabs a:hover{
			height:auto;
			min-height:3em;
		}
		ul.domtabs a:hover{
			background:#696;
		}
		div.domtab div{
			clear:both;
			width:auto;
			background:#696;
			color:#fff;
			padding:1em 3em;
		}
		ul.domtabs li.active a:link,
		ul.domtabs li.active a:visited,
		ul.domtabs li.active a:active,
		ul.domtabs li.active a:hover{
			background:#696;
			color:#fff;
		}
		#domtabprintview{
			float:right;
			padding-right:1em;
			text-align:right;
		}
		#domtabprintview a:link,
		#domtabprintview a:visited,
		#domtabprintview a:active,
		#domtabprintview a:hover{
			color:#fff;
		}
		div.domtab div a:link,
		div.domtab div a:visited,
		div.domtab div a:active
		{
			color:#fff;
			display:block;
			padding:1em .5em;
			font-weight:bold;
			font-size:1.3em;
		}
		div.domtab div h2 a,
		div.domtab div h2 a:hover,
		div.domtab div h2 a:active
		{
			color:#cfc;
			display:inline;
			padding:0;
			font-weight:normal;
			font-size:1em;
		}

Jason Fazey · #10 06-22-2012, 08:54 AM

I'll have a play around with a couple of different tab scripts Ive been looking at over the last 48 hours.

Now that Im aware of the ecwid javascript code, it may help me get the solution working