Forums / Templates, Stylesheets, Page Layout / Accordion Script - can I add this to my product pages?

Accordion Script - can I add this to my product pages?

Locked

Views: 4,097

Results 1 to 12 of 12
This thread is locked. New replies are disabled.
28 Jan 2009, 8:41 PM
#1
charinlasvegas avatar

charinlasvegas

Zen Follower

Join Date:
Jan 2009
Location:
Vegas Baby!
Posts:
311
Plugin Contributions:
0

Accordion Script - can I add this to my product pages?

How difficult would this be to implement in the product description?

dynamic-drive accordion script

I think it's a nice option if you have alot of info. It could slide down for additional images, product attributes, etc.

I know there is a mod for tabbed product display, but I'm looking at this as another possibility if it could be done.

Completed: BellaFavori.com
In Progress: WeddingDivasLV.com
Coming Soon: ???

29 Jan 2009, 8:40 AM
#2
dmfelder avatar

dmfelder

Zen Follower

Join Date:
Nov 2006
Posts:
102
Plugin Contributions:
0

Re: Accordion Script - can I add this to my product pages?

It's not really that difficult. Just a little tedious.

When I implement these types of scripts, I normally extract the CSS and add it to my stylesheet.css page. Then I take the javascript and drop it into my HTML (not the HEAD section) just above where it will be used.

To add the content, just find the desired page in your custom_template/templates folder and paste it right in, including the "onclick" statements. (Make sure you don't paste in between any PHP statements!)

It should be a piece of cake.

DMFelder | Visit GreatApparelForYou.com for Chicago Direct to Garment printing and Chicago Screen Printing and for Funny Tees and shirts go to gafy.com. We also have Eco-Friendly Printing services.

29 Jan 2009, 2:23 PM
#3
charinlasvegas avatar

charinlasvegas

Zen Follower

Join Date:
Jan 2009
Location:
Vegas Baby!
Posts:
311
Plugin Contributions:
0

Re: Accordion Script - can I add this to my product pages?

That sounds too easy, LOL.

Let's say you attributes for some products but not others, how would the tab only show up only in the instance when you have them?

Completed: BellaFavori.com
In Progress: WeddingDivasLV.com
Coming Soon: ???

30 Jan 2009, 7:39 AM
#4
dmfelder avatar

dmfelder

Zen Follower

Join Date:
Nov 2006
Posts:
102
Plugin Contributions:
0

Re: Accordion Script - can I add this to my product pages?

Well, now you're complicating things. LOL back at you!

I'm going to share with you my soon-to-be-live site and make some references: gafy.com/newweb. It's a total rebuild of the original gafy.com (funny tees) because the original was stand-alone with a zencart back-end. (Not for the faint of heart!!!) Anyway, I will now comment on a few things relative to the /newweb site.

First, implementing a retracting script is doable without too much effort. I use a different type of script, but it's more-or-less the same. Go to the FAQ page and you'll see it in action. Like any other site, you can right click and take a look at the code. I constructed this page from EZ pages, and the html and javascript are completely independent of the php.

Next, and much more complicated...how to handle product-specific components... In the gafy.com/newweb, click on any design. It takes you to a product selection page. As you mouse-over each of the 18 shirts, you'll see a pop-up description (alt/title). This is actually a built-in feature of zencart, so you can get this by typing in the proper product description, and voila.

Now, click on any of the shirts, and it takes you to an attribute selection page. Look at the color swatch, then mouse over it. These images change per product (go back and select another shirt, and see the different swatch). You'll notice on the mouse-over, the swatch expands. What's important here is that regardless of the selected product, zencart loads EXACTLY the same page construct. I programed it to dynamically load an image based on the model number.

I used a "smart" model number methodology that looks like this: product_style. I then used the php "explode" command to separate the model at the "_" leaving me with two variables: product & style. My page then loads "style.jpg" and "style_mouseover.jpg. This may confuse you, but it's somewhat clear and simple IF you use an intelligent model numbering system.

Finally, I used the attribute image swapper add-in (with some mods) to change the image each time you change the color. You'll notice that if an image exists for the attribute, it changes the image. For reference, if no image exists, it does nothing. What's important here is that when you click on the image, it pops-up another "larger" image. (I don't use this built-in feature.) So, imagine this solution: Use something that displays attribute images, then provide larger pop-up images in the LARGE image folder. IT DOESN'T HAVE TO BE AN IMAGE OF THE SHIRT! YOU CAN MAKE THE IMAGE ANYTHING YOU WANT.

OK...time for a breather...

Yes, this is probably a lot to digest, but it's all possible. My new site obviously has a lot of modifications, but most of them are formatting, not basic functionality.

Just experiment. Use the override system and always make a copy of your working file just in case you need to back up a few steps. (I like to regularly copy a file and rename it tpl_file.zphp.)

Now...if you're still reading this, you should stop and get to work!

Good luck!

DMFelder | Visit GreatApparelForYou.com for Chicago Direct to Garment printing and Chicago Screen Printing and for Funny Tees and shirts go to gafy.com. We also have Eco-Friendly Printing services.

30 Jan 2009, 3:11 PM
#5
charinlasvegas avatar

charinlasvegas

Zen Follower

Join Date:
Jan 2009
Location:
Vegas Baby!
Posts:
311
Plugin Contributions:
0

Re: Accordion Script - can I add this to my product pages?

Wow, I love the way you handled the image swatches and the way the t changes when you choose a color. Very cool.

Thanks for sharing, you gave me an idea or two :thumbsup:

Completed: BellaFavori.com
In Progress: WeddingDivasLV.com
Coming Soon: ???

30 Jan 2009, 6:58 PM
#6
rstevenson avatar

rstevenson

Totally Zenned

Join Date:
Nov 2006
Location:
Dartmouth, NS Canada
Posts:
2,400
Plugin Contributions:
0

Re: Accordion Script - can I add this to my product pages?

Actually, I don't see the T changing color when I select one -- in the newweb version of the site. Firefox 3.0.5, Mac OS X.

Such are the joys of writing code for web browsers. :frusty:

Rob

Breakfast: the most important donut of the day.

31 Jan 2009, 3:50 AM
#7
charinlasvegas avatar

charinlasvegas

Zen Follower

Join Date:
Jan 2009
Location:
Vegas Baby!
Posts:
311
Plugin Contributions:
0

Re: Accordion Script - can I add this to my product pages?

rstevenson:

Actually, I don't see the T changing color when I select one -- in the newweb version of the site. Firefox 3.0.5, Mac OS X.

Such are the joys of writing code for web browsers. :frusty:

Rob

I'm using FF and I see it. I must be special :D

Completed: BellaFavori.com
In Progress: WeddingDivasLV.com
Coming Soon: ???

31 Jan 2009, 5:43 AM
#8
yellow1912 avatar

yellow1912

Totally Zenned

Join Date:
Oct 2006
Posts:
5,422
Plugin Contributions:
0

Re: Accordion Script - can I add this to my product pages?

CharInLasVegas:

I'm using FF and I see it. I must be special :D
Note that is's FF on Mac, which is different from windows.

I no longer provide installation support on forum for all my modules. However, if there are real bugs with the modules please feel free to contact me

13 Feb 2009, 4:53 PM
#9
charinlasvegas avatar

charinlasvegas

Zen Follower

Join Date:
Jan 2009
Location:
Vegas Baby!
Posts:
311
Plugin Contributions:
0

Re: Accordion Script - can I add this to my product pages?

Well, I tried to add a simple accordion script to one of my defined pages but no luck. I put the css in my stylesheet, uploaded the js, and added the code to my pages in Plain Text mode, but all I got was the text and no accordion :(

Can this not be done on those pages? I'd rather use those than the EZ Pages because I want them to show up in my More Information sidebox.

Completed: BellaFavori.com
In Progress: WeddingDivasLV.com
Coming Soon: ???

14 Feb 2009, 6:19 AM
#10
dmfelder avatar

dmfelder

Zen Follower

Join Date:
Nov 2006
Posts:
102
Plugin Contributions:
0

Re: Accordion Script - can I add this to my product pages?

Well hello. I figured you had it worked out. I finally launched gafy.com our funny tee shirt website two nights ago, so you can see it in action. I am using a similar type of script on the FAQ page.

Can you provide a link to the page you're trying to work with? It seems that you did it right, so perhaps it's just the way it lays out in the html.

I'm sure the CSS is fine if it's in your stylesheet. Be sure your javascript call is looking at the right location (perhaps you could hardcode the location with the 'http' where you make the call). Also...you might not really need to upload the js file anyway. You could probably just take the code within (using notepad) and paste it right above the insertion point between <script> and </script>.

Let's see what you've got first...

DMFelder | Visit GreatApparelForYou.com for Chicago Direct to Garment printing and Chicago Screen Printing and for Funny Tees and shirts go to gafy.com. We also have Eco-Friendly Printing services.

14 Feb 2009, 2:19 PM
#11
charinlasvegas avatar

charinlasvegas

Zen Follower

Join Date:
Jan 2009
Location:
Vegas Baby!
Posts:
311
Plugin Contributions:
0

Re: Accordion Script - can I add this to my product pages?

dmfelder:

Well hello. I figured you had it worked out. I finally launched gafy.com our funny tee shirt website two nights ago, so you can see it in action. I am using a similar type of script on the FAQ page.

Can you provide a link to the page you're trying to work with? It seems that you did it right, so perhaps it's just the way it lays out in the html.

I'm sure the CSS is fine if it's in your stylesheet. Be sure your javascript call is looking at the right location (perhaps you could hardcode the location with the 'http' where you make the call). Also...you might not really need to upload the js file anyway. You could probably just take the code within (using notepad) and paste it right above the insertion point between <script> and </script>.

Let's see what you've got first...

Hi! Yeah, I saw the finished site, it looks great!

Well - here is my page. The only text that shows up on the page is what's in the first tab. I think the call for the js is in the wrong place because when I look at the source code it's the first lines. I added it to the top of includes/languages/english/page4.php.

This is the accordion script I'm using:
http://www.dezinerfolio.com/2007/07/19/simple-javascript-accordions

Thanks for looking!

Completed: BellaFavori.com
In Progress: WeddingDivasLV.com
Coming Soon: ???

16 Feb 2009, 2:58 AM
#12
dmfelder avatar

dmfelder

Zen Follower

Join Date:
Nov 2006
Posts:
102
Plugin Contributions:
0

Re: Accordion Script - can I add this to my product pages?

I can't quite tell what you're trying to do, but if you'd like it to function like the link in your message, this can be done by putting the CSS in your stylesheet (literally copy & paste it), and then put the javascript in the EZ Page just above the content. I have included a sample of how to do it, and I dissected the code from the example. You could put anything between the <DIV> elements.

The only real problem is the onload event. You could either generically put it in the body tag, or find another event that loads the code via a .document command. (I won't be any help with this issue. I'd probably just generically but it in my <body> tag.

You'll see what I'm talking about in this code. It requires no external files. Save this entire code as an HTML file and it would work.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "<http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd>"> <html xmlns="<http://www.w3.org/1999/xhtml>"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>Simple Javascript Accordions - by www.dezinerfolio.com</title> <style type="text/css"> * { margin:0; padding:0; list-style:none; } body { font-family: Arial, Helvetica, sans-serif; font-size: 11px; margin:10px; } #basic-accordian{ border:5px solid #EEE; padding:5px; width:350px; position:absolute; left:50%; top:50%; margin-left:-175px; z-index:2; margin-top:-100px; } .accordion_headings{ padding:5px; background:#99CC00; color:#FFFFFF; border:1px solid #FFF; cursor:pointer; font-weight:bold; } .accordion_headings:hover{ background:#00CCFF; } .accordion_child{ padding:15px; background:#EEE; } .header_highlight{ background:#00CCFF; } </style> </head> <body onload="new Accordian('basic-accordian',5,'header_highlight');"> <script> // Prototype Method to get the element based on ID function $(d){ return document.getElementById(d); } // set or get the current display style of the div function dsp(d,v){ if(v==undefined){ return d.style.display; }else{ d.style.display=v; } } // set or get the height of a div. function sh(d,v){ // if you are getting the height then display must be block to return the absolute height if(v==undefined){ if(dsp(d)!='none'&& dsp(d)!=''){ return d.offsetHeight; } viz = d.style.visibility; d.style.visibility = 'hidden'; o = dsp(d); dsp(d,'block'); r = parseInt(d.offsetHeight); dsp(d,o); d.style.visibility = viz; return r; }else{ d.style.height=v; } } /* * Variable 'S' defines the speed of the accordian * Variable 'T' defines the refresh rate of the accordian */ s=7; t=10; //Collapse Timer is triggered as a setInterval to reduce the height of the div exponentially. function ct(d){ d = $(d); if(sh(d)>0){ v = Math.round(sh(d)/d.s); v = (v<1) ? 1 :v ; v = (sh(d)-v); sh(d,v+'px'); d.style.opacity = (v/d.maxh); d.style.filter= 'alpha(opacity='+(v*100/d.maxh)+');'; }else{ sh(d,0); dsp(d,'none'); clearInterval(d.t); } } //Expand Timer is triggered as a setInterval to increase the height of the div exponentially. function et(d){ d = $(d); if(sh(d)<d.maxh){ v = Math.round((d.maxh-sh(d))/d.s); v = (v<1) ? 1 :v ; v = (sh(d)+v); sh(d,v+'px'); d.style.opacity = (v/d.maxh); d.style.filter= 'alpha(opacity='+(v*100/d.maxh)+');'; }else{ sh(d,d.maxh); clearInterval(d.t); } } // Collapse Initializer function cl(d){ if(dsp(d)=='block'){ clearInterval(d.t); d.t=setInterval('ct("'+d.id+'")',t); } } //Expand Initializer function ex(d){ if(dsp(d)=='none'){ dsp(d,'block'); d.style.height='0px'; clearInterval(d.t); d.t=setInterval('et("'+d.id+'")',t); } } // Removes Classname from the given div. function cc(n,v){ s=n.className.split(/\s+/); for(p=0;p<s.length;p++){ if(s[p]==v+n.tc){ s.splice(p,1); n.className=s.join(' '); break; } } } //Accordian Initializer function Accordian(d,s,tc){ // get all the elements that have id as content l=$(d).getElementsByTagName('div'); c=[]; for(i=0;i<l.length;i++){ h=l\[i].id; if(h.substr(h.indexOf('-')+1,h.length)=='content'){c.push(h);} } sel=null; //then search through headers for(i=0;i<l.length;i++){ h=l\[i].id; if(h.substr(h.indexOf('-')+1,h.length)=='header'){ d=$(h.substr(0,h.indexOf('-'))+'-content'); d.style.display='none'; d.style.overflow='hidden'; d.maxh =sh(d); d.s=(s==undefined)? 7 : s; h=$(h); h.tc=tc; h.c=c; // set the onclick function for each header. h.onclick = function(){ for(i=0;i<this.c.length;i++){ cn=this.c\[i]; n=cn.substr(0,cn.indexOf('-')); if((n+'-header')==this.id){ ex($(n+'-content')); n=$(n+'-header'); cc(n,'__'); n.className=n.className+' '+n.tc; }else{ cl($(n+'-content')); cc($(n+'-header'),''); } } } if(h.className.match(/selected+/)!=undefined){ sel=h;} } } if(sel!=undefined){sel.onclick();} } </script> <div id="basic-accordian" > <div align="center">Simple Accordions</div> <div id="test-header" class="accordion_headings header_highlight" >Home</div> <div id="test-content"> <div class="accordion_child"> Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Nunc ligula nisl, egestas non, pharetra vel, scelerisque accumsan, lacus. Vverra accumsan.<br /><br /> Quisque facilisis, ligula ut blandit hendrerit, purus neque rhoncus ipsum, sit amet ultrices mauris augue non arcu. Donec et sem nec libero viverra accumsan. </div> </div> <div id="test1-header" class="accordion_headings" >About Us</div> <div id="test1-content"> <div class="accordion_child"> Quisque facilisis, liue non arcu. Donec et sem nec libero viverra accumsan. </div> </div> <div id="test2-header" class="accordion_headings" >Downloads</div> <div id="test2-content"> <div class="accordion_child"> Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Nunc ligula nislDonec et sem nec libero viverra accumsan.<br /> </div> </div> </div> </body> </html>

DMFelder | Visit GreatApparelForYou.com for Chicago Direct to Garment printing and Chicago Screen Printing and for Funny Tees and shirts go to gafy.com. We also have Eco-Friendly Printing services.