How do I do this with CSS, Javascript, and a database? Product Selection Guide

How do I make a product selection guide with CSS, Javascript, and a database (or without a database if that is possible). XML allowed.

What it would do is be 5 dropdowns and a submit button.

Say it's for shoes and, for simplicity, has 3 dropdown.

The first dropdown would be either running, walking, cross-train, casual, etc
The second dropdown would be color
The third dropdown would be size of foot

You would press submit and a div would pop out of the bottom under the submit button with all the products on our site that matched the dropdown choices.

Would love to do this with pure CSS or pure CSS and XML, but
if we need to add javascript we can
If we need to add a mySQL database we can

Let me know what the simplest way to set this up is. Not looking for CSS help, looking for general outline of how to do this.

Will gather code details later, just need a basic overview. Coding details is a plus if you want to offer it.

Thanks,

Bob
LVL 7
weikelbobAsked:
Who is Participating?

[Product update] Infrastructure Analysis Tool is now available with Business Accounts.Learn More

x
I wear a lot of hats...

"The solutions and answers provided on Experts Exchange have been extremely helpful to me over the last few years. I wear a lot of hats - Developer, Database Administrator, Help Desk, etc., so I know a lot of things but not a lot about one thing. Experts Exchange gives me answers from people who do know a lot about one thing, in a easy to use platform." -Todd S.

pcelbaCommented:
Forget about pure CSS. Even CSS+JavaScript is close to utopia but doable.
You'll need database for better products and other stuff handling.

So the easiest way is to search for some free or open source eShop. Many internet hosting providers offer some eShops today. Or you may install your own: https://ecommerce-platforms.com/articles/open-source-ecommerce-platforms

Of course if you like programming then look at PHP+MySQL:
http://www.informit.com/articles/article.aspx?p=30092  (no database here)
https://www.taniarascia.com/create-a-simple-database-app-connecting-to-mysql-with-php/

The app closer to your requirements is here:
https://netbeans.org/kb/docs/php/wish-list-lesson1.html 

And now you may use CSS+JavaScript to tune the app up.
weikelbobAuthor Commented:
Sorry for not being clear, we already have an online store. We are looking for a simple product selection guide to go along with the online store. The products that pop out can just be links to our already existing product pages.
pcelbaCommented:
So the code must comply to the eShop and database used where I cannot help without additional knowledge of your environment or due to the complexity of such solution.

Or, if you have fixed URLs to product pages which you would like to select then you may write it in JavaScript and CSS. The basic code is here:
https://www.w3schools.com/howto/howto_js_dropdown.asp
additional code is e.g. here: https://www.codeproject.com/Questions/429444/COMBO-BOX-in-HTML-JAVA-SCRIPT
It should give a starting point.
The 7 Worst Nightmares of a Sysadmin

Fear not! To defend your business’ IT systems we’re going to shine a light on the seven most sinister terrors that haunt sysadmins. That way you can be sure there’s nothing in your stack waiting to go bump in the night.

weikelbobAuthor Commented:
OK. It's for 3dcart. Site: www.idiaper.com

I already know how to write the dropdowns and buttons in javascript and CSS (easy), I just need to wrap my head around how to store the product pages links and how to get the right ones to drop down upon submit
pcelbaCommented:
The easiest thing could be to ask the eShop provider to implement some "Quick Selection" menu option based on your specification. They know the data structures so the effort to achieve this is relatively low.

You have two options:

1) Either study the data structures and find the place where the product URLs are defined. Then you need to write one stored procedure to which you may pass the three combo values and it will return the URL which you may display. Additional stored procedures may be created to populate combos.

2) Or you may hardcode all product URLs into the JavaScript code which is rather annoying work and you have to update the JS always when new product appears but you don't need to use the database at all.

I would implement the 1) which, of course, requires certain database knowledge and investigations but the solution is then much better and much more stable than 2). If the eShop provider could instruct you about the data structures then the 1) is definitely the way. To populate the combo based on some Stored Procedure or query call is simple. To investigate the data structures and write the correct SP is much more complex.
weikelbobAuthor Commented:
New products don't matter, I'll hard code it into JS code.

Can someone give me some resources on how this is done?
weikelbobAuthor Commented:
How close can I get to this with pure CSS? My eshop won't let me use javascript
pcelbaCommented:
CSS allows just output formatting (CSS = Cascading Style Sheets) so you cannot add elements to existing pages, you cannot do any programming in CSS. You will always need HTML or JavaScript.

More about CSS: https://www.w3schools.com/css/css_intro.asp

If you are allowed to write the HTML page containing CSS then you may look here for simple dropdown example:
https://www.w3schools.com/css/css_dropdowns.asp
You may display hyperlinks in the dropdown and it could do the job for you.
And you may test it on the w3schools web interactively.

Experts Exchange Solution brought to you by

Your issues matter to us.

Facing a tech roadblock? Get the help and guidance you need from experienced professionals who care. Ask your question anytime, anywhere, with no hassle.

Start your 7-day free trial
weikelbobAuthor Commented:
So I could drop down different products based on selections using only html and css?
weikelbobAuthor Commented:
I'm going to code this and then have the online store cart service (3dcart) add it.

Can you guys give me some suggestions on how to code this with html, css, and javascript?

Thanks
weikelbobAuthor Commented:
Want it to drop down 3 products based on dropdown choices. just looking for the nuts and bolts. Done some coding in the past, but don't know how to do this.
pcelbaCommented:
Look at the code in the link from my previous post (https://www.w3schools.com/css/css_dropdowns.asp).
It should show how to create drop-down with the products and hyperlinks to your regular web pages hardcoded.
If you need 3 drop-downs then you should place them into the HTML table.

Just remember the code on W3Schools web is for beginners and suitable for basic learning and testing. Any web pages developer can provide better results. Of course, answer to EE question does not provide complete code obviously. You may expect just proposals and links. I appreciate your decision to code it yourself!

If you have bugs in your HTML code or something does not work as expected then you may ask additional questions.
weikelbobAuthor Commented:
I got this for now. I'll be back when I dive into code. Sorry this took so long. It looks like this question will automatically close.
pcelbaCommented:
Nobody else pointed to basic code to achieve this requirement.
It's more than this solution.Get answers and train to solve all your tech problems - anytime, anywhere.Try it for free Edge Out The Competitionfor your dream job with proven skills and certifications.Get started today Stand Outas the employee with proven skills.Start learning today for free Move Your Career Forwardwith certification training in the latest technologies.Start your trial today
CSS

From novice to tech pro — start learning today.