Beginning Drupal 8

Chapter 22 ■ Building a Commerce Site
Figure 22-8. Product variations
The off-the-shelf product variation provides fields for title, SKU, price, and images. While this works well
for the coffee cups that we’ll be selling on the site, it doesn’t work quite as well for T-shirts, as we need the
ability to specify color and size, and for hats we need to specify color but not size. The solution is to create
two new product variations, one for hats and one for shirts.
To create a new product variation, click the “Add product variation type” button on the “Variation types”
page (see Figure 22-8) and give it a name of “shirts.” Leave checked both the “Default product variations of
this type to be saved as new revisions when edited” and “Create matching product display type” check boxes.
■■Note
A matching product display type is actually a content type that is used to display a product in the
store. By convention Drupal Commerce separates the presentation of products (merchandising) from the
storage of information about the product. What this means is that in order to view a product, you need to have
both a product variation and a content type that displays the product. Commerce Kickstart makes the process
a little easier in that by checking the “Create matching product display type” check box, Drupal will create the
content type to display the product automatically.
After clicking “Save and add fields,” the only thing we need to do is to add an image field, a select list
for color, and a select list for size on the Manage fields page as shown in Figure 22-9. Kickstart comes with
a preconfigured image field, so just pick that field from the Select and existing field select list in the “Add
existing field” area. To add the Color select list, create a new “List (text)” field to enable selecting a color.
After giving the field a name (Color) and selecting the “List (text)” field type, set the Widget column to
“Select list.” Click the Save button, and then enter the list of available options for color as a name-value pair
(e.g., white|White). Click the “Save field” settings button, and on the final configuration form for this field,
check the “Enable this field to function as an attribute field on Add to Cart form” check box so that shoppers
can specify the color when adding the product to their shopping cart. Finish the Color field by clicking the
“Save settings” button. Follow the same steps for creating the Size field. After adding the fields, the shirts
product type should look like Figure 22-9.
249