Announcement

**TraceyG** · 12-Jan-2009, 03:50 PM

Hi,

1. Is there any way to add "Shop by product", "Shop by brand" and "Shop by designer" in the relevant droplists instead of the word "Any"? The problem is that they're all generated by the same variable so I imagine this won't be possible.

You're right in the fact that because they are generated by the same variable you can't add do this through the automatic generation of the drop-downs. All you can do here is to hard-code the generated drop-downs into the overall layout (by copying and pasting the relevant code from your online search page) - however, this means that you would have to update the overall layout each time a new option needed to be added to the list(s).

2. I'm sure this impossible too... could the items in the droplists be linked to their relevant urls so that the Go! button could be hidden? I've seen Javascript actions that could do this with a conventional droplist but I can see any way to merge it with the way Actinic does things

If you can post the javascript then I could take a look to see if I could implement it into Actinic for you.

**Artisan** · 12-Jan-2009, 04:47 PM

Hi Tracey, thanks for replying.

Here's one that I found:

Head:

Code:

<SCRIPT LANGUAGE="JavaScript">
<!--
function JumpToIt(list) {
    var newPage = list.options[list.selectedIndex].value
    if (newPage != "None") {
        location.href=newPage
    }
}
//-->
</SCRIPT>

Body:

Code:

<FORM>
<SELECT WIDTH=20 onChange="JumpToIt(this)">
<OPTION VALUE="None">Shop by website
<OPTION VALUE="http://www.actinic.co.uk/">Actinic
<OPTION VALUE="http://www.google.co.uk/">Google
<OPTION VALUE="http://www.artinet.co.uk/">Artisan Internet
</SELECT>
</FORM>

Malcolm

**leehack** · 12-Jan-2009, 04:54 PM

I implemented a drop down jump list (shop by brand) on a site for a client, but had to have the products manually duplicated into the relevant sections. I then had the jump list read all sub-sections within the specified parent section automatically (using php). Processing the product list if you have lots of products just grinds things to a halt otherwise I found. Gotta go manual IMO.

**TraceyG** · 13-Jan-2009, 01:58 PM

I couldn't get it to work with the javascript you provided because of the way the search properties work, however, the AUG does give some code for creating a jump list (around page 53) and have been able to adapt that to work in the following way (and it does allow you to have the titles inside the drop-down boxes too):

- have three top level sections - Product, Brand and Designer
- have sub-sections containing the relevant info (may be duplicated products etc)

- put the following in the <head> section of your overall layout (or the 'Standard Javascript Header Functions' layout):

Code:

<actinic:variable value="All Data From All Sections" name="JavaScriptArray" />
<SCRIPT LANGUAGE="JavaScript" TYPE="text/javascript">
<!--
/***********************************************************************
*
* ACT_DropListBox -	returns a string containing the HTML for the SELECT listbox
*
************************************************************************/

function ACT_DropListBoxProduct(ar)
	{
	var strIDs = '<SELECT SIZE="1" NAME="ACT_droplstbox" onClick="if(options[selectedIndex].value) window.location.href=(options[selectedIndex].value)">'
  	var sel = " SELECTED"
  	strIDs += '<OPTION ' + sel + ' VALUE="">Shop By Products</OPTION>'
	
		if (ar[1].sURL !=null)
			{
			
	      if (ar[1].pChild)
        {
        for (var j=1;j<=ar[1].pChild.length;j++)
          {
          strIDs += '<OPTION VALUE="' + ar[1].pChild[j].sURL + '">' + '- ' + ar[1].pChild[j].sName + '</OPTION>';
			}
			}
			
  		}
	strIDs+='</SELECT>'
  	return strIDs
  	}


function ACT_DropListBoxBrand(ab)
	{
	var strIDs = '<SELECT SIZE="1" NAME="ACT_droplstbox" onClick="if(options[selectedIndex].value) window.location.href=(options[selectedIndex].value)">'
  	var sel = " SELECTED"
  	strIDs += '<OPTION ' + sel + ' VALUE="">Shop By Brand</OPTION>'
	
		if (ab[2].sURL !=null)
			{
			
	      if (ab[2].pChild)
        {
        for (var k=1;k<=ab[2].pChild.length;k++)
          {
          strIDs += '<OPTION VALUE="' + ab[2].pChild[k].sURL + '">' + '- ' + ab[2].pChild[k].sName + '</OPTION>';
			}
			}
			
  		}
	strIDs+='</SELECT>'
  	return strIDs
  	}
  	
  	function ACT_DropListBoxDesigner(ad)
	{
	var strIDs = '<SELECT SIZE="1" NAME="ACT_droplstbox" onClick="if(options[selectedIndex].value) window.location.href=(options[selectedIndex].value)">'
  	var sel = " SELECTED"
  	strIDs += '<OPTION ' + sel + ' VALUE="">Shop By Designer</OPTION>'
	
		if (ad[3].sURL !=null)
			{
			
	      if (ad[3].pChild)
        {
        for (var l=1;l<=ad[3].pChild.length;l++)
          {
          strIDs += '<OPTION VALUE="' + ad[3].pChild[l].sURL + '">' + '- ' + ad[3].pChild[l].sName + '</OPTION>';
			}
			}
			
  		}
	strIDs+='</SELECT>'
  	return strIDs
  	}
//-->
</SCRIPT>

- put the following into the main design where you want the jump lists to appear:

Code:

<form name="Act_SectionDroplistProduct">
        <script language=Javascript1.1>document.write(ACT_DropListBoxProduct(section_tree))</script>
</form>
<form name="Act_SectionDroplistBrand">
        <script language=Javascript1.1>document.write(ACT_DropListBoxBrand(section_tree))</script>
</form>
<form name="Act_SectionDroplistDesigner">
        <script language=Javascript1.1>document.write(ACT_DropListBoxDesigner(section_tree))</script>
</form>

Just to clarify what this is doing, I've created three different functions, one for each jump list. The 'All Data From All Sections' variable creates a javascript file (Act_section_tree.js) that contains all the details from all sections in the store, which have their own IDs. The first function looks for everything in the 1st top-level section (for me that is 'products' and have the ID of 1) and lists the sub-sections in that section. The second function does the same for the 2nd top-level section (Brand - ID of 2) and so on.

The sections are listed in the js file in the order they appear in the content tree so if you move sections around the IDs will change. Also, as Lee mentions, a large js file may slow the site down so if it is a big site then this may not be the right solution.

I hope this is helpful.

**Artisan** · 17-Jan-2009, 05:13 PM

Excellent, Tracey, you have a brain the size of a planet

There's a demo here.

It does mean creating sections full of duplicates, although that's not a huge job and with around 250 (original) products on the job I'm quoting, it hopefully shouldn't slow things down noticeably.

The droplists on the client's existing site have coloured outlines and backgrounds, which wouldn't be any problem with ordinary <ul> droplists, but is it possible to add a style reference (div ID or whatever) somewhere in this instance?

Malcolm

**TraceyG** · 19-Jan-2009, 09:24 AM

The droplists on the client's existing site have coloured outlines and backgrounds, which wouldn't be any problem with ordinary <ul> droplists, but is it possible to add a style reference (div ID or whatever) somewhere in this instance?

You could add the styles to the 'SELECT' statements in the javascript, ie:

Code:

<SELECT style="background: red;" SIZE="1" NAME="ACT_droplstbox" onClick="if(options[selectedIndex].value) window.location.href=(options[selectedIndex].value)">

or you could put the styles in the stylesheet and add a class to the select statement.

**Artisan** · 19-Jan-2009, 12:04 PM

Excellent, working a treat!

I ended up adding the styles to the stylesheet and using an ID in the select tag:

Code:

<SELECT id="nav_droplist" SIZE="1" NAME="ACT_droplstbox" onClick="if(options[selectedIndex].value) window.location.href=(options[selectedIndex].value)">

There's a border colour in the styles, which is fine in Firefox, but it seems IE7 doesn't support it.

Malcolm

Announcement

"Shop by" droplists

"Shop by" droplists

Comment

Comment

Comment

Comment

Comment

Comment

Comment