Hi guys, Im new to htmlhelp.com and so far love what i see.
HTML & CSS coding is definitely not one of my strengths, so please excuse the poor language.
I have a product on my website that has 48 different possible variations, and due to the limitations of shopify i am required to figure this out on my own. I imagine the easiest way to display this to a user is to have dropdown menus that then lead to an appropriate product link that can be set.
The options should look like
(Dropdown menu 1 -( size of object))
Option a
B
C
(Dropdown menu 2 (side object))
A
B
C
D
(Dropdown menu 3 (back object))
A > link to product
B > link to product
C > link to product
D > link to product
So the first two dropdown menus should affect the result of the link depending on the option.
Is this possible at all?
Thanks in advance!
That can't be done with HTML alone, but you might use javascript (or a server-side script like PHP) to generate the third dropdown menu.
Here's an old example, though the last level doesn't take you anywhere: http://www.javascriptkit.com/script/script2/triplecombo.shtml
Thank you! Thats exactly what i am after, except ofcourse the last combo will take direct you to a link on user click. Ive never actually edited PHP do you know if thats possible with shopify? Normaly i can click on certain sections and edit the CSS for it and html in some cases
Also just found this. Would this be easier to work with?
Html & java script:
http://jsfiddle.net/v917ycp6/595/
Ok, Christian i released your code was better and has the functions that i need.
Although i couldnt get it running correctly and when i uploaded the code and saved it on JSFiddle it doesnt work their either:
https://jsfiddle.net/dge0a0js/
Any ideas.
PS. i managed to get the whole thing running with errors by pasting the entire code in the body and it seems like theres a dialogue that pops up as a result of all the selections. anyway we can change this to a link redirection instead?
Thanks.
Here's another idea. Add a submit button to the form, and make the form's ACTION attribute point to the URL of say a checkout page (I don't know how shopify works):
Thanks Christian!
I'm getting a error come up on each box, Ive tried both the original code and the update you showed.
I took some screenshots and attached. Any ideas why that's coming up?
https://ibb.co/jV1J88
https://ibb.co/jNYjFo
Do you think this piece of code would ever be able to have an individual link for each result. As in -
IF selection 1 = ?, selection 2 = ?, selection 3=? go to www.google.com.au?
Each variation would require a different link - but you mentioned each URL becomes the same?
PM'd you the details for access. For some reason it does work on JSfiddle but - all the code must be on the HTML part i realised. I did the same thing on the website, although getting those items come up aswell.
The sites hosted with shopify but you can add HTML code like any other side but in sections.
and
Update -
Good news:
Got this one working correctly - http://jsfiddle.net/mfuusp9p/551/
Now its just a matter of linking them to a URL on final selection. I'll keep you posted.
so i came up with this but it doesnt like it.. but i think if i could get that to work, then i can duplicate it for all the other variations and get individual links to work - right??
GOT IT!!
https://codepen.io/anon/pen/zjgqPr
Check out the code here.
I only have the California > Monterery > Gonzalas & Salina working. But I'm good from here.
Thanks again for the help christian!!
There are no locations added in the codepen sample, so it didn't work for me, but you're welcome.
BTW, be careful with window.onload since it may conflict with window.onload events in other scripts. If you instead use window.addEventListener together (with https://developer.mozilla.org/en-US/docs/Web/Events/load or better https://developer.mozilla.org/en-US/docs/Web/Events/DOMContentLoaded) you shouldn't get any such conflicts.
Powered by Invision Power Board (http://www.invisionboard.com)
© Invision Power Services (http://www.invisionpower.com)