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
33 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 500 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

[Webinar] Learn How Hackers Steal Your Credentials

Do You Know How Hackers Steal Your Credentials? Join us and Skyport Systems to learn how hackers steal your credentials and why Active Directory must be secure to stop them. Thursday, July 13, 2017 10:00 A.M. PDT

Question has a verified solution.

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

These days, all we hear about hacktivists took down so and so websites and retrieved thousands of user’s data. One of the techniques to get unauthorized access to database is by performing SQL injection. This article is quite lengthy which gives bas…
This article will inform Clients about common and important expectations from the freelancers (Experts) who are looking at your Gig.
The viewer will learn how to user default arguments when defining functions. This method of defining functions will be contrasted with the non-default-argument of defining functions.
Learn how to create flexible layouts using relative units in CSS.  New relative units added in CSS3 include vw(viewports width), vh(viewports height), vmin(minimum of viewports height and width), and vmax (maximum of viewports height and width).

623 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