Dynamic Dropdown on Home Page (not stock by attributes).

**Axeman** · 27 May 2015, 11:16 AM

Hi Diva. Thanks for your response.

However, I have been playing with the code that I have and have had a measure of success. I can now dynamically populate all of the dropdown from txt files. The coding is crude and could be better I am sure but it does work. My problem is that I need my last option to link to a product page and this doesn't happen. I am using onchange to achieve this but it will not work for some reason.

My coding is as follows -

index.html:

<!DOCTYPE html>
<head>
<meta charset='UTF-8'>
<title>Dynamic Dropdown</title>
<link rel='stylesheet' href='css/style.css'>
<script src="js/jquery.min.js">
</script>

<script>
$(function()
{
$("#manufacturer").change(function()
{
$("#type").load("textdata/type/" + $(this).val() + ".txt");
});
});
</script>
</head>

<body>
<div id="page-wrap">
<h1>Pulls from text files</h1>
<select id="manufacturer">
<option selected value="base">Please Select</option>
<option value="brother_type">Brother</option>
<option value="canon_type">Canon</option>
<option value="epson_type">Epson</option>
<option value="hp_type">Hewlett Packard</option>
</select>
<br />
<select id="type">
<option>Please choose from above</option>
</select>
<br />
<select id="series">
<option>Please choose from above</option>
</select>
<br />
<select id="models">
<option>Please choose from above</option>
</select>
</div>
</body>
</html>

This has populated the first box and links to the data from the text to gives options for the second one. Next I need to populate the third from another text file -

textdata/type/brother_type.txt:

<head>
<script>
$(function()
{
$("#type").change(function()
{
$("#series").load("textdata/series/" + $(this).val() + ".txt");
});
});
</script>
</head>

<option selected value="base">Please Select</option>
<option value="brother_toner">Brother Toner Cartridges</option>
<option value="brother_ink">Brother Ink Cartridges</option>

Now to populate the next box -

textdata/series/brother_ink.txt:

<head>
<script>
$(function()
{
$("#series").change(function()
{
$("#models").load("textdata/models/brother/ink/" + $(this).val() + ".txt");
});
});
</script>
</head>

<option selected value="base">Please Select</option>
<option value="dcp1">Brother DCP 1</option>
<option value="dcp2">Brother DCP 2</option>

Now to populate and link to my product -

textdata/models/brother/ink/dcp1.txt:

<select onchange="if (this.value) window.location.href=this.value">
<option selected value="base">Please Select</option>
<option value="www.yahoo.co.uk">Brother DCP test 1</option>
<option value="www.google.co.uk">Brother DCP test 2</option>
</select>

Unfortunately the onchange is not working and no link is made to the page that I am trying to get to. It basically does nothing from here.

The onchange code works on my current site with no issues and links automatically to my selected product when the option is chosen. I am not sure why this won't work and I have tried variations of this found on other coding websites but nothing I have tried has worked so far.

I know most would say as you have Diva, to go get help (and believe me a Psychiatrist probably would be useful), but I want to make a plugin for others to be able to download this or at least get the solution and update this thread so that others can use it if it helps them. I will still need to get to grips with styling this but I would like to get the functionality to it first. The css that is linked in the index page is only basic positioning on the page and nothing worthy of pasting into this thread.

Thanks again for your suggestion Diva but I do hope that someone has a solution to this issue as I know it could be of help to many people and a useful contribution to the Zen Cart community.

I look forward to any help that anyone can give and thanks again in advance.

**DivaVocals** · 27 May 2015, 02:06 PM

Originally Posted by Axeman

Hi Diva. Thanks for your response.

However, I have been playing with the code that I have and have had a measure of success. I can now dynamically populate all of the dropdown from txt files. The coding is crude and could be better I am sure but it does work. My problem is that I need my last option to link to a product page and this doesn't happen. I am using onchange to achieve this but it will not work for some reason.

My coding is as follows -

index.html:

Code:

<!DOCTYPE html>
<head>
<meta charset='UTF-8'>
<title>Dynamic Dropdown</title>
<link rel='stylesheet' href='css/style.css'>
<script src="js/jquery.min.js">
</script>

<script>
$(function() 
{
$("#manufacturer").change(function() 
{
$("#type").load("textdata/type/" + $(this).val() + ".txt");
});
});
</script>
</head>

<body>
<div id="page-wrap">
<h1>Pulls from text files</h1>
<select id="manufacturer">
<option selected value="base">Please Select</option>
<option value="brother_type">Brother</option>
<option value="canon_type">Canon</option>
<option value="epson_type">Epson</option>
<option value="hp_type">Hewlett Packard</option>        
</select>
<br />
<select id="type">
<option>Please choose from above</option>
</select>
<br />        
<select id="series">
<option>Please choose from above</option>
</select>
<br />
<select id="models">
<option>Please choose from above</option>
</select>
</div>
</body>
</html>

This has populated the first box and links to the data from the text to gives options for the second one. Next I need to populate the third from another text file -

textdata/type/brother_type.txt:

Code:

<head>    
<script>
$(function() 
{
$("#type").change(function() 
{
$("#series").load("textdata/series/" + $(this).val() + ".txt");
});
});
</script>
</head>

<option selected value="base">Please Select</option>
<option value="brother_toner">Brother Toner Cartridges</option>
<option value="brother_ink">Brother Ink Cartridges</option>

Now to populate the next box -

textdata/series/brother_ink.txt:

Code:

<head>    
<script>
$(function() 
{
$("#series").change(function() 
{
$("#models").load("textdata/models/brother/ink/" + $(this).val() + ".txt");
});
});
</script>
</head>

<option selected value="base">Please Select</option>
<option value="dcp1">Brother DCP 1</option>
<option value="dcp2">Brother DCP 2</option>

Now to populate and link to my product -

textdata/models/brother/ink/dcp1.txt:

Code:

<select onchange="if (this.value) window.location.href=this.value">
<option selected value="base">Please Select</option>
<option value="www.yahoo.co.uk">Brother DCP test 1</option>
<option value="www.google.co.uk">Brother DCP test 2</option>
</select>

Unfortunately the onchange is not working and no link is made to the page that I am trying to get to. It basically does nothing from here.

The onchange code works on my current site with no issues and links automatically to my selected product when the option is chosen. I am not sure why this won't work and I have tried variations of this found on other coding websites but nothing I have tried has worked so far.

I know most would say as you have Diva, to go get help (and believe me a Psychiatrist probably would be useful), but I want to make a plugin for others to be able to download this or at least get the solution and update this thread so that others can use it if it helps them. I will still need to get to grips with styling this but I would like to get the functionality to it first. The css that is linked in the index page is only basic positioning on the page and nothing worthy of pasting into this thread.

Thanks again for your suggestion Diva but I do hope that someone has a solution to this issue as I know it could be of help to many people and a useful contribution to the Zen Cart community.

I look forward to any help that anyone can give and thanks again in advance.

Okay.. saying this one last thing, then moving on..

Paying a developer to create/finish this for you does not preclude you from contributing it to the community.. Many of the large popular modules have their roots in these kinds of engagements.. (someone paid for the code to be developed and it was contributed to the community). Wish you luck..

Also when posting code here on the forum, you should REALLY use the forum code tag to post code.. makes code MUCH easier to read.. (note I changed previously posted code so you can see what I mean)

**Axeman** · 27 May 2015, 04:57 PM

Thanks Diva for your input. I understand where you are coming from but if someone knows the answer to the problem then this is the first place to ask. As for paying and sharing I have no problem with it but I will always ask if others have ideas that I haven't tried.

I have to say I have never posted code before so I didn't know about the coding tag so apologies for the ignorance. At least I can say I have learned a bit about the forum if not the solution to the problem.

Returning to the problem that I am trying to solve, if anyone has suggestions for how I might be able to get this to work I am open to it.

Thanks again Diva.

**Axeman** · 28 May 2015, 11:27 AM

For anyone interested, I have now found a way to do this and it all works. There are a few bugs and I still need to style this but I am confident that this is just a small task compared to making it all work. If anyone wants the code as is then PM me.

**Axeman** · 29 May 2015, 12:45 AM

Another quick update. Although I have found that styling the dropdowns is a lot harder than I expected, they are now responsive and good for mobiles and tablets. Still a way to go but I will clean up the code as best I can and post the code and directory tree as soon as I can.

**Axeman** · 29 May 2015, 05:37 PM

If anyone would like to see the dropdown at work, go to http://techfixsouthampton.co.uk/test/sample
You can download the files by going to http://techfixsouthampton.co.uk/test/sample/sample.RAR

Please virus scan before you upload to your servers.

Any questions, please reply to this thread and I will get back to you as soon as I can.

Thread: Dynamic Dropdown on Home Page (not stock by attributes).

Thread Tools

Search Thread

Display

Hybrid View

Re: Dynamic Dropdown on Home Page (not stock by attributes).

Re: Dynamic Dropdown on Home Page (not stock by attributes).

Re: Dynamic Dropdown on Home Page (not stock by attributes).

Re: Dynamic Dropdown on Home Page (not stock by attributes).

Re: Dynamic Dropdown on Home Page (not stock by attributes).

Re: Dynamic Dropdown on Home Page (not stock by attributes).

Similar Threads

Dynamic drop downs for stock by attributes Help?

Dynamic drop downs for stock by attributes

Help needed to merge a file for attributes/dynamic dropdown

Dynamic Stock by Attributes

Dynamic Dropdowns For Stock By Attributes

Posting Permissions