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
29 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

Resolve Critical IT Incidents Fast

If your data, services or processes become compromised, your organization can suffer damage in just minutes and how fast you communicate during a major IT incident is everything. Learn how to immediately identify incidents & best practices to resolve them quickly and effectively.

Question has a verified solution.

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

Australian government abolished Visa 457 earlier this April and this article describes how this decision might affect Australian IT scene and IT experts.
Dramatic changes are revolutionizing how we build and use technology. Every company is automating, digitizing, and modernizing operations. We need a better, more connected way to work together as teams so we can harness the insights from our system…
Use Wufoo, an online form creation tool, to make powerful forms. Learn how to choose which pages of your form are visible to your users based on their inputs. The page rules feature provides you with an opportunity to create if:then statements for y…
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).

751 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