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

[Axeman]

Hi,

I am looking to find coding for dynamic dropdown (3 or four tier) that will populate from an html or txt file, not the database. I have been searching for about a year for something like this but have found nothing that will work the way that I need it to. I have a two tier version that will populate from a txt file but it is not enough tiers for the search options that I have and it does not link to anything on the final selction.

The reason I need it to be from a txt (or html) is because I can keep the same structure that I have now and copy and paste it into the txt file. To recode from scratch for use with a database would take me about a year to do because of the amount of links this would require (unless someone has suggestions for including html <option> tags into a database without altering the html code in any way). Also, adding to a text file is easier for me to manage as adding to the file would be a simple task of finding the correct txt file that corresponds to the series selected.

I am trying to set up a cartridge finder that will allow you to select a manufacturer (Epson, Canon....) then type of cartridge (toner cartridge, ink cartridge, Ribbon...., based on first selection), then the Series (Stylus, Stylus Pro...., based on second selection) and then the model of printer (WF-2540...., based on the third selection). The final selection should take you to the product page.

I am about to make my site responsive so Zen Cart version is not so much of an issue as I am about to upgrade. The reason this would have to be a txt (or html) file is because I already have a crude version of this that does not auto-populate. On change each dropdown will take to a new page which then provides another option which again will take you to another page and so on until you get to the product you are needing. Extremely time consuming and long-winded, but a needed function on my website.

I would like to make it so that my customer stays on the home page until the last option that will take them to the correct product list or page. Links to pages are easy as they are just links to categories or products. Coding samples would be appreciated as I am not good with JavaScript or PHP. As I am making my site responsive it would be nice to have suggestions and tips on ways to go with this. Probably asking a little too much from you but I know that this would be very useful to many Zen Cart loyalists like myself.

If there is an plugin that could be created from this I would be happy to work on an idea then upload (after very careful scrutiny from other more experienced Zen Cart loyalists.

Thanks to anyone in advance for any suggestions, tips and coding that you may be able to provide.

P.S. I have tried the part of the site where you can ask for paid assistance but I found that totally confusing as it kept asking to post a job. I don't really want to go down that road so any help would be greatly appreciated.

[DivaVocals]

It is MOST likely that you are going to have to pay someone to code this for you.. This sounds like a module with a fair amount of complexity, and I'm not sure you are going to find anyone who will be sharing this code on a volunteer basis.. If you don't want to use the freelancer site that is linked here, and you want suggestions recommendations for community members who you could hire to build this code for you my vote goes to lat9 and bislewl.. You can reach out to both via private message.. If you do want to use the freelance website, you will have to post a job with your specific functional requirements for your module in order to get folks to submit bids for the work.. I am of the opinion that unless you are versed in writing specs and knowing how to screen and select developers, your better bet is to go with recommendations for developers made by folks here in this forum..

[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:

<!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]

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.

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]

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]

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]

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]

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.