?
Solved

How do I show different variables for a product so that user can select variable and see it?

Posted on 2015-01-02
4
Medium Priority
?
37 Views
Last Modified: 2016-05-08
I am building an ecommerce site and have products. Each product may have different variables such as color. I want the shopper to be able to select a color from the side of the product, (says its a shirt) and then see the shirt in that color. This is a very common thing seen on ecommerce sites and I know that if I Was using an ecommerce solution such as shopify it would have that option, but I want to know how to do it so that I can use this in other sites that may not be ecommerce.

So, basically, how do I show an object on the left and have different colors on the right, and when a color is selected, it shows the object in that color?

I am pretty sure this can be done with HTML and CSS and maybe javascript, but I am  not sure.

Any help in this matter would be greatly appreciated.
0
Comment
Question by:helemark
[X]
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
  • 2
4 Comments
 
LVL 31

Accepted Solution

by:
Marco Gasi earned 2000 total points
ID: 40528797
Basically, you need a bit of images of the product, one per color. Then, with jQuery you can change the displayed image accordingly to the clicks.
Suppose to have three iImages: red.jpg, green.jpg, pink.jpg.

HTML
<img class="product" src="red.jpg" />
<a class="color red" href="#">Red</a>
<a class="color green" href="#">Green</a>
<a class="color pink" href="#">Pink</a>

Open in new window


JS
$(document).ready(function(){
	$('.color').on('click', function(){
		//we check the attribute
		var myclass = $(this).attr('class');
		// we split it into its components
		var values = myclass.split(' ');
		//we take the last of the two components in the variable color
		var color = values[1];
		$('img.product').attr('src', color+'jpg');
	});
});

Open in new window


I've not tested, but it should work :-)
Obviously, you can build a more sophisticated system, involving Ajax calls to php scripts in order to extract images from a database, but this is tha basic method.
Cheers
0
 
LVL 31

Expert Comment

by:Marco Gasi
ID: 40528805
Oh, I forgot to recommend to link jquery in your html:

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>

Open in new window

0

Featured Post

Moving data to the cloud? Find out if you’re ready

Before moving to the cloud, it is important to carefully define your db needs, plan for the migration & understand prod. environment. This wp explains how to define what you need from a cloud provider, plan for the migration & what putting a cloud solution into practice entails.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

FAQ pages provide a simple way for you to supply and for customers to find answers to the most common questions about your company. Here are six reasons why your company website should have a FAQ page
Australian government abolished Visa 457 earlier this April and this article describes how this decision might affect Australian IT scene and IT experts.
The viewer will learn how to use the return statement in functions in C++. The video will also teach the user how to pass data to a function and have the function return data back for further processing.
The viewer will learn additional member functions of the vector class. Specifically, the capacity and swap member functions will be introduced.

719 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question