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
14 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 30

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 30

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

IT, Stop Being Called Into Every Meeting

Highfive is so simple that setting up every meeting room takes just minutes and every employee will be able to start or join a call from any room with ease. Never be called into a meeting just to get it started again. This is how video conferencing should work!

Join & Write a Comment

The purpose of this article is to demonstrate how we can use conditional statements using Python.
Real-time is more about the business, not the technology. In day-to-day life, to make real-time decisions like buying or investing, business needs the latest information(e.g. Gold Rate/Stock Rate). Unlike traditional days, you need not wait for a fe…
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…
Learn how to set-up PayPal payment integration in your Wufoo form. Allow your users to remit payment through PayPal upon completion of your online form. This is helpful for collecting membership payments, customer payments, donations, and more.

760 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

Need Help in Real-Time?

Connect with top rated Experts

22 Experts available now in Live!

Get 1:1 Help Now