Drupal Commerce - Product Display layouts

By shane
Wed, 2013-05-22 19:33
Daily Dose of Drupal Episode #141

Share with Others

In this episode we continue learning about Drupal Commerce and dive into some of the layout aspects of building out Drupal Commerce product displays.

In this episode you will learn:

  • How to modify the layout of a Drupal Commerce product display
  • How fields are used to control the Drupal Commerce product display layout

Hello everyone and welcome to another Daily Dose of Drupal, today we’re on Episode Number 139 and we’re going to be continuing learning on Drupal Commerce. We’re going to be focusing on the Product Displays today.

As always I am Shane Thomas, you can follow me on Twitter at smthomas3, also go to codekarate.com sign up for the newsletter if you haven’t already and learn how you can support Code Karate.

So last time if you remember we created two product types; one called Hats and one called Shirts and we also added four different hat products, a white, pink, yellow and red hat.

Today we’re going to be going over product displays which basically is how the end user sees the products so when they go to a specific product page on your website that is controlled through a Product Display.

If one Product Display could reference multiple products so for instance we may have one hat product that actually allows a user through a series of dropdowns or select boxes to select which product in the back end whether it’s the white, pink, yellow or red hat they’re actually going to be purchasing.

So they see one display and based on the selections on that page they are actually selecting which skew or which individual unique product they’re going to be adding into their cart.

So as you can see the products section has its own entity called Product Type but Product Display is a Content Type. So we’re going to have to start by adding a new Content Type and we’re just going to create one called Product Display.

The important thing to note here is we could have a specific product display for each different type of product and maybe we want a Hats Product Display and a T-Shirts Product Display but since we want our Product Displays to look pretty much the same it doesn’t really matter what type of product they’re buying, they’re going to have the same layout.

We’re just going to use a single Product Display to keep it simple and to keep the actual display without having to manage multiple different display pages. So you can think of this as the Product Display is the actual front end user facing the product types are actually the back end what products are actually being purchased from the system and hopefully you’ll be able to understand a little bit more if it’s still little blurry on what that exactly means once we get through this example.

So we’re going to create a Product Display Content Type, we can set whatever else we want here for settings I’m going to uncheck this, I will turn comments off and I’ll go ahead and save the content type. The important field here that you need for any Product Display Content Type is something called the Product Reference Field and you need to make sure you have the Drupal Commerce Product Reference Module on in order for this to work.

I’m going to go ahead and just call this Product so it’s going to be field_product and this is the Product Reference Field and we could use an autocomplete, the select list or checkboxes and radio buttons.

I’ll use the select list to start and we will click Save, click Save on the page and now we get to select … first we’ll got through these options; this is the label, we do want this to be required because they have to actually reference a product. Here we want render fields from reference products when viewing this entity and this is something we do want to keep checked.

For Product Types that can be referenced we’re going to go ahead and say we can reference Hat and Shirt products. If we wanted to set a default value we could and also we want to set how many products we can reference and in this case we’re going to set Unlimited because as I mentioned before we could have one hat that has four different products that need to be referenced.

Maybe there are four different colors of the same hat so we would only want one display but we want four different products to be referenced. So we’re going to go ahead and hit Save there and now we have a title, a body and a product. We could add any other fields we want to this Product Display.

The important thing to keep in mind here, the difference between the Product Display and the Product Type and where you would add specific fields is basically I’ve think it this way; if it’s going to be different for each unique product whether it’s that specific pink hat or white hat, if there’s going to be a difference on each individual product you would need to add the field to the products type.

If it’s something you’ll only need to add on the product display and not necessarily to each individual product then you can add the field to of course this product display content type. So now we can go ahead and we’re going to come back to the homepage and we’re going to add a product display and for right now I’m going to reference each product 1 to 1 so basically I’m going to have a product display for the white hat, the pink hat, the red hat and the yellow hat just so we have something to get started with.

We’re eventually going to change that and show you how you can reference multiple products as well. So if I want to start with the pink hat and give it a description and now here I can select which product I want to reference. As I mentioned before you could select multiple, I’m going to start with just selecting the pink hat and we’re going to go ahead and click Save.

Now you can see there’s a nice pink hat and everything shows up the way we would expect, it has the product reference, it pulls in the price from the product that is referenced and it also pulls in the image so you notice we didn’t have those fields on that product display content type but because we referenced that product it was pulled in.

The next thing we want to do is … well I’ll go ahead and I’ll finish adding these other product displays just so we have them. I’m not going to bother adding a description for all of these but of course if you’re actually creating products for a live story you’re going to need to probably have descriptions so I created the white hat, we’ll create one for yellow hat and then last but not least the red hat.

Okay so now we have our four different products that have been created. We’re going to come in and turn on some more Drupal Commerce modules, we’re going to make sure we turn on the cart and the checkout because we want customers to actually be able to start buying these products, we’re also going to create customer or turn on Customer or Customer UI as well as line Item UI, Order and Order UI and I think that’s enough to get as going into the next step.

Each one of these is pretty self-explanatory on what it does and you can read the description and it will tell you what each of these checkboxes is actually doing to your Drupal Commerce website so for instance you cannot create Orders until you turn on the Order Module and the Order UI has the user interface for actually managing and editing orders.

So now that we have those selected we’re going to save and this will of course turn those modules on and we’re going to come back to this page you’ll see that nothing is changed yet but what we really want here is to get the Add to Cart form to show up and so the Add to Cart form is going to allow the user of the site of whoever is looking at the product to actually add the product to their cart and then eventually proceed with the checkout process.

So in order to do that we need to come back into our product display and we’re going to go to manage display and remember we added this product reference field. The format by default is just to provide the title and the link, you could of course select to show the skew with a link or without a link, you could display the actual rendered product but what we are interested in is this Add to Cart Form.

Once you select Add to Cart Form you have a couple of different options. So if we want to allow a quantity widget text field we can check this box which in this case we will so the user can actually select or enter in how many hats in this case they want to purchase.

We can have it attempt to combine like products on the same line item on the cart, we’ll leave that checked and you can have it show attribute widgets even if the Add to Cart Form only represents one product and because we don’t have any attribute widgets in this case we’re not going to select that.

So we’ll go ahead and hit update and we’ll scroll down and hit save and now we will come back here and now you can see we have the Quantity Box added at the cart button so if we come in and we leave it at quantity of 1 and click Add to Cart you’ll notice that it said red hat has been added to your cart, I come to the cart and you can see that it says I have a red hat.

The price, here is the quantity, an option to remove and the total amount. So you can see now we product page working and you can now add those products to your cart. If we come in and look at some of the other hats such as the yellow hat and I want to add two yellow hats I can go ahead and add to cart there, you can see that now we have two yellow hats.

If i come to the red hat and add another item when we come back in you’ll see that these have been combined and now the quantity has changed from 1 to 2. You can of course remove it by using this Remove buttons and you have your basic working Product Display.

You’ll notice that it doesn’t necessarily look pretty yet, there’s not a lot of thought that’s been putted to how this is laid out yet and that’s something we’ll cover in the next few episodes on the Daily Dose of Drupal.

Next time we’re actually going to go over how to add Product Attributes to specific product displays and then from there we’ll continue on how to make this page look a little bit nicer. So that’s it for this time on the Daily Dose of Drupal, we’ll see you next time.