Preview option for online shop, help needed

[Fletchdad]

@ mods: I posted this in another subforum, but did not see the Phranque suggested I post here, so I apologize for the post twice.

First of all, I am not sure this is the right subforum. If not, please inform me where I should post this. Thanks in advance.

OK, I hope I can explain this right.

I am putting an online shop together and I want my potential customers to be able to choose between options and then see the results.
I posted a link to a random shop to show what I am trying to do but the post was refused because of the link, so I will try to describe it. I can do screen shots if someone feels this will help, and I will make sure the SS do not show any URL etc.

But I will try first to describe what I want to do:

I will use an example of a coffee cup, but I want to do this with multiple objects (t-shirts, banners etc.). I am also very new to coding and not good or experienced, but I have to start someplace, so why not right off the deep end?

The steps go like this, but they obviously change according to the site, and I am not looking to do exactly this rundown that I describe below, that is only to show what I am trying to accomplish in general terms. What I am looking for is how to do these choices and then have a preview.

You are looking to get a customized coffee cup. In the shop, you see a couple of options: No.1:Cup size. No. 2: color.

When you make these choices, more choices now appear, which may be different depending on your previous choices.

Now we chose a motif. In this example, I chose to have 2 people sitting side by side. When I chose "people" as my motif (there may be "dogs", "cats", etc.) then a new option appears "How many people" and I get a set number, i.e. 1-3.

Then, when I have the people, MORE options appear. "Male" "Female" and so on. And then I style the people. "Hair color" When I chose a color, "Hair style" appears (short, long etc.).

The different choices are not important. The ability to have options, and then further options that depend on your previous options, are important.

And here is the MAIN kicker, and the entire reason for my post: When I chose my options, I then have a "Preview" option and I can see what my final product looks like. This is what I want to do.

Is this a plugin? I am thinking it is a server side script, but do I have to have this written, write it myself, or is there a server subscription of some type (that a newbie can afford)?

I hope I described this correctly and thanks in advance for any help.

EDIT: Text options should also be included in the process and visible in the preview.

[not2easy]

The progressive selections that might change the appearance of a product can be handled with javascript or simple html forms. When you can see what is involved you can decide which you would prefer. If your own coding skills are not up to the task then the option becomes choosing which method you prefer to maintain and finding a competent coder (or an existing code) to reproduce that with your own custom options.

You can see (and try out) an example of a javascript version at w3schools: https://www.w3schools.com/howto/howto_custom_select.asp

The html version just opens a new page depending on which selection you select. The "pages" can be simple windows rather than actual new pages so you could show them on hover or click or as a thumbnail button to go to the next option step.

To keep things simple, where customization is an option, use icons or you will need far more processing and storage than any other part of the process. I have seen well established POD sites that can show actual previews of such product options, including the use of customer uploaded images - but unless you have the traffic and customers to pay for it, keep it affordable.

Your basic vanilla item can be used as the image background and options can be shown as image overlays of that background - OR they can be actual product images. Actual product images are easier to code (using one complete image rather than positioning and sizing to create the same appearance) but more difficult to obtain. For example, you would need an actual product showing each step of each of the options that might be available. This makes the virtual images preferable, and you can create them with imaging software and skills.

Often when you see a feature like this on an existing website you can view the page source and see exactly what they use to produce that feature. This is not an unusual way to expand your learning. You don't steal their work, but you see how it is being done and use that to create your own version. It depends on how advanced your skills are.

No matter what you plan to have online you can either learn or buy, so you can see that a good understanding of the coding required is basic to profitability. WP exists and there are plugins for almost everything but you are at the mercy of those "magic" tools to continue to be updated or replaced that can drive you out of business if you don't learn how it works first. Before going too far in any direction, create your plan, use due diligence on security and work on understanding the parts before pasting things into an unmanageable creature.

[Fletchdad]

@not2easy Thanks so much for your input. I really appreciate it. I am new and your detailed and informed reply helps me a lot!

[Fletchdad]

@not2easy:
I tried the w3schools link but it is only about custom select buttons. If you happen to know of any that show the following logistics: Options, when one is chosen, new options for that option appear, please post that as well, but this seems to be a very specific topic and your answer is one of the few I have gotten anywhere. Again, thanks for posting.

I am trying to figure out which code does what from the source code of sites that have this but I am way too inexperienced to see what is pertinent. But I am looking at it as a "learning by doing" task. It will just be a long task I suppose.

[phranque]

look up AJAX (Asynchronous JavaScript And XML) since that technology will probably be required for some part of the front end of your application.
there are lots of options for the server side programming and the rest of the user interface, but you should probably understand this concept first before diving in.

[not2easy]

That link takes you to a part of the process. All of the process is covered there, but it is up to you to see what you are comfortable with developing your skills by trying different possibilities. They offer several sections on javascript and the start point is here: https://www.w3schools.com/js/default.asp

Phranque's suggestion about AJAX is another option and you can read about that here: https://www.w3schools.com/js/js_ajax_intro.asp It will make more sense if you do have a basic understanding of both JavaScript and XML coding.

Learning by trying your hand at various techniques can move you into a better understanding so that when you do view source code of a similar tool you will see what more you need to know. We don't offer tutorials here, but that is why I suggest the w3schools site for learning the basics. We can try to point you to the learning resources, you decide what might do the job you want to do. They offer the same kind of learning for html, css, php and more. You can see that the sky is the limit once you start learning how to use the tools of the trade.

Not that we don't want to help, but in general, a custom script is beyond what we can reasonably supply in a discussion. You probably wouldn't want your code here to show up in the serps so we don't offer copy paste answers and discourage their use for the most part. If you don't know how the code fits together you can't keep it up to date. I learned that a long time ago and it has helped to pick up enough understanding to see how to do what I need to do. When I hit a bump in the road, WebmasterWorld has come to the rescue. For specific questions this is the place to get experienced answers from others who are using similar tools and techniques.

[Fletchdad]

@phranque, @not2easy.

thanks for the input and the information. I totally get what you are saying,nio2easy. It makes sense to me, especially the bit of me being able to look at the code and understand what I am seeing. I was seriously JUST looking at the page source of one of the pages that does what I want to do, and trying to find out what part of the code does what, and I see that I just do not know what a lot of it means, and I realized I need to understand the entire page in a flyover, at least as far as what is actually going on, before I can get detailed. I have always used WP and page builders and just had widgets and stuff, so knowing what those things actually code is new for me.

I am currently doing w3schools on a lot of stuff, and I like it a lot, and freecodingcamps certification course. I will continue to do these parallel, but I understand that I don't understand, yet, what I am doing.....

So my next step now is to change that.

I will take both of your suggestions and advice into consideration and will be in touch, hopefully, in a few months.