Product Color Chooser

Topics covered in this JavaScript & jQuery tutorial:

Creating a product color picker, Using jQuery’s attr() method, Using jQuery’s addClass() method, Using jQuery’s removeClass() method, Using jQuery’s hover() method

Exercise Preview

Exercise Overview

When products are available in multiple colors, users need to be able to choose the color they want to receive. In this exercise, you will use jQuery to make a product color picker that lets a user choose a color and then see a photo of the product with the color they selected.

Getting Started

1. Open your code editor if it isn’t already open.
2. Close any files you may have open.
3. For this exercise we’ll be working with the Product-Color-Chooser folder located in Desktop > Class Files > yourname-JavaScript jQuery Class. You may want to open that folder in your code editor if it allows you to (like Visual Studio Code does).
4. Open product.html from the Product-Color-Chooser folder.

5. Preview product.html in Chrome (we’ll be using its DevTools later).

   Notice the large product photo showing the chair in one of its available colors. There are color swatches showing the other colors, but if you click on them they won’t do anything yet. When a user clicks one of these color swatches, we want the photo to change to the color they clicked on.

6. Leave the page open in Chrome so we can come back to it later.
7. Switch back to your code editor.
8. Starting on line 21, notice that each of the four swatches have an ID for its color. We’ll make use of those IDs later.
9. On line 29, notice there is an img with an ID of product-photo.

10. Notice the product-photo’s source file is named chair-beige@2x.jpg. We have a total of 4 product images, which are named:

    • chair-beige@2x.jpg
    • chair-blue@2x.jpg
    • chair-red@2x.jpg
    • chair-yellow@2x.jpg
11. Notice that the color part of the image names listed above (beige, blue, red, and yellow), match the IDs we gave the swatch elements .
12. We’re ready to code the JavaScript functionality. To use jQuery, we must link to its script file. On line 32, notice that we’ve already linked to jQuery for you (and an empty script tag below it for you write your JavaScript/jQuery code in).

13. To ensure that the jQuery code will not run until the document is ready, add jQuery’s document ready code as shown below:

    <script)
       $(document).ready(function() {
    
       });
    </script)
    

Getting the Swatch Buttons to Work

1. When a user clicks one of the swatches we want to do something. Each of the swatches has a swatch class. Add the following bold code:

   $(document).ready(function(){
      $('.swatch').click(function(){
   
      });
   });
   

2. When a swatch is clicked we need to change the product photo by changing its src attribute to point to a different image path. We can change that attribute using jQuery’s attr() method. jQuery’s attr() takes two arguments: the attribute we’re changing, and the value we’re setting it to.

   Eventually we’ll need to figure out which color image to show, but for now let’s make sure we can change it to a different image. Add the following bold code:

   $('.swatch').click(function(){
      $('#product-photo').attr('src', 'img/chair-blue@2x.jpg');
   });
   

3. Save the file and reload the page in Chrome.

4. Currently the page is showing the beige chair. Click any color swatch and see that the photo changes to the blue chair.

   Now that we know we can change the image, we need to figure out which color the user clicked, and then show the appropriate photo.

Figuring Out Which Color the User Clicked On

In an earlier exercise we learned that we can detect which element was just acted upon using JavaScript’s keyword this. We can also use this in jQuery.

1. Switch back to your code editor.
2. On line 22, notice that we’ve given the yellow swatch an ID of yellow. If the user clicks on the yellow swatch, $(this) will refer to that element.
   

3. Near the bottom of the file, add the following bold code:

   $('.swatch').click(function(){});
      $('#product-photo').attr('src', 'img/chair-blue@2x.jpg');
      console.log( $(this) );
   });
   

4. Save the file and reload the page in Chrome.
5. Open the Console by hitting Cmd–Opt–J (Mac) or Ctrl–Shift–J (Windows).

6. Click on the yellow swatch and in the Console, notice that the whole element you clicked on is printed.

   We don’t want the whole element, we just want the ID (to use when we build our image’s file path).

7. Switch back to your code editor.

8. Add .attr('id') as shown below in bold:

   $('.swatch').click(function(){
      $('#product-photo').attr('src', 'img/chair-blue@2x.jpg');
      console.log( $(this).attr('id') );
   });
   

9. Save the file and reload the page in Chrome.

10. Click on the a few of the swatches and notice in the console that just the ID of the element you clicked on shows up in the console (beige, blue, red, or yellow).

11. Close the DevTools window.

12. Switch back to your code editor.

13. Instead of always switching the product photo to a specific image, we need to assemble the proper image path based on the color that was selected. In the file path img/chair-blue@2x.jpg only the color part (in this case blue) needs to change. Let’s make that color part dynamic.

    On the $('#product-photo') line, inside the .attr() method, delete the blue and replace it with the following bold code:

    $('.swatch').click(function(){
       $('#product-photo').attr('src', 'img/chair-' + $(this).attr('id') + '@2x.jpg');
       console.log( $(this).attr('id') );
    });
    

14. Save the file and reload the page in Chrome.

15. Click each of the color swatches to see that they’re working. The photo should change to the color you clicked on. Beautiful!

Change the Border Color of the Selected Element

Currently the first swatch (beige) has a black border around it to indicate it is selected. When the user clicks on a different swatch we need to move the border to that color swatch so they know which color is selected. We’ve applied the border with a selected class.

1. Switch back to your code editor.
2. We no longer need the console.log line of code, so delete it.

3. jQuery has an addClass() method that does just what we want. Add the following bold code:

   $('.swatch').click(function(){
      $('#product-photo').attr('src', 'img/chair-' + $(this).attr('id') + '@2x.jpg');
      $(this).addClass('selected');
   });
   

4. Save the file and reload the page in Chrome.
5. Click the red swatch and its border color should change to black.
6. Click on the blue color swatch and notice that its border also changes to black, but the red and beige borders are still “stuck” on black. We need them to revert to their original border color. Let’s fix that now.

7. Before we indicate which swatch gets the selected class, let’s remove that class from all of the swatches. Add the following bold code:

   $('.swatch').click(function(){
      $('#product-photo').attr('src', 'img/chair-' + $(this).attr('id') + '@2x.jpg');
         $('.swatch').removeClass('selected');
         $(this).addClass('selected');
      });
   

8. Save the file and reload the page in Chrome.

   Click through all the color swatches and notice that only the one you click on should get the black border. The others will return to their original border color. Perfect!

Using Hover Instead of Click

The product photo changes when the user clicks on a color swatch, but what if we wanted it to happen on hover?

1. Switch back to your code editor.

2. Change click to hover and shown in below in bold:

   $('.swatch').hover(function(){
   

3. Save the file and reload the page in Chrome.

4. Mouse over the color swatches and notice the photo changes on hover. You no longer need to click.

   We’re not saying this behavior is preferred, we just wanted to show you how to do both (and that it’s easy to change).

   NOTE: If you want to refer to our final code example, go to Desktop > Class Files > yourname-JavaScript jQuery Class > Done-Files > Product-Color-Chooser.