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
24 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
  • 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

Announcing the Most Valuable Experts of 2016

MVEs are more concerned with the satisfaction of those they help than with the considerable points they can earn. They are the types of people you feel privileged to call colleagues. Join us in honoring this amazing group of Experts.

Question has a verified solution.

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

Suggested Solutions

Title # Comments Views Activity
Best practice for a landing page 3 65
Math Equation 23 91
Forms that calculate points for wordpress 10 32
Downside of adding characters set in ASP pages 6 26
Boost your ability to deliver ambitious and competitive web apps by choosing the right JavaScript framework to best suit your project’s needs.
An enjoyable and seamless user experience can go a long way on an eCommerce site. While a cohesive layout and engaging copy play roles in creating a positive user experience, some sites neglect aspects that seem marginal but in actuality prove very …
The goal of the video will be to teach the user the difference and consequence of passing data by value vs passing data by reference in C++. An example of passing data by value as well as an example of passing data by reference will be be given. Bot…
The viewer will learn additional member functions of the vector class. Specifically, the capacity and swap member functions will be introduced.

825 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