Create a configurable product

Transcript

creating a configurable product in Adobe Commerce. For this demo, we’re gonna first level set on a couple of areas before we dig into how to actually create them via the API and the Commerce admin. The first section we’re gonna talk about is product attributes. So you can think of a product attribute as anything that helps describe your products or give it better clarification. And there’s a lot of default ones that come with Commerce application. And the one that we’re gonna work with on our demo is gonna be color. So for color, this is typically associated to, you know, something that is tangible. So like for example, an umbrella or a toy of some sort. I went ahead and created three values to our color attribute. They’re red, blue and green. And the thing to note about this is that when it comes to using the APIs, you actually need the ID number that’s associated with this. And you can find that in a couple of different ways. If you’re in the admin like we are, you can do inspect element on your items. And for example, you know, I did the delete button and this says that we’re, you know, if we do this, this is gonna delete the attribute value number 13 for red. And if I do the same thing on the blue one, this is gonna be attribute value 14. And if I do the same thing on green, it’s number 15. So once again, this is just one method on how to do it. I’ll show you via the APIs how to fetch these again. But you know, if you were looking for a really quick way to do it, that’s how I would recommend. Next, these attributes that we have can be associated to one or more attribute sets. So the reason why this is important is that there are certain products that would have certain attributes that are applicable to them, but then there are other products and those types of attributes would not be. And my example would be like kids toys. So kids toys probably would have a color attribute. So that’s why I went ahead and added it to our product details. But you could have something, for example, some downloadable items. So maybe you have some songs or something. Well, in this case, you know, color is kind of irrelevant. Same with country manufacturer and is returnable and manufacturer, right? So those attributes are basically unnecessary for something that is downloadable. So when creating a product, you make sure that you use the right attribute set so that way these attributes can be used or not used. Unfortunately, there’s a lot of times where people will just keep the default attributes set and just keep adding to it. But then what happens is you’ll have products with an empty attribute for color when it’s a downloadable product. And it’s actually, it gets in the way, especially when you’re talking about like API responses. There’s just unnecessary data that doesn’t, it’s not very helpful. So now that we have a decent understanding and a nice level set on product attributes and attribute sets, we’re gonna go ahead and switch over to our APIs. And I’m gonna show you how to get those same attribute IDs from the APIs. So in this example, we’re gonna be doing a GET request to, you know, RESTv1 products, attribute sets 10, and then attributes. And so you may be wondering, how did I get that ID number 10? So that ID number 10 is going to relate back to our attribute set. And this gonna be the kids toys. So in kids toys, if you look up at the URL, this has the ID of number 10. So this attribute set with all of these attributes is ID number 10. So if I was looking for the attributes for our downloadable items, that would use ID 11. And if I was gonna be using our default attribute set, I would be using ID number four. Yeah, four. So let’s go ahead and go back to kids toys. Perfect. Let’s go back to our APIs. So we’re gonna pull the attribute set 10, which is our kids toys. And we’re gonna grab all of those attributes from that attribute set. Now I know color for this particular response is like in the 600 line range. So we don’t have to go through all of these, but I’m just gonna kind of scroll down until we’re here. Let’s see. So swatch images, meta description cost, estimate, price, color. There we go. Okay. So for color, we were interested in grabbing the ID numbers because remember we need those when we’re doing API calls. We need the actual ID numbers, not the label that’s associated to it. And so when we’re looking at this, all the values for this attribute set, number 13 for red, 14 for blue and 15 for green, those are the numbers we want. And actually, if you do remember from the example where we’re doing inspect element in the admin, those numbers are exactly the same, which is great. That means that we know that we’re dealing with the right numbers. So the first thing we’re gonna do is we’re going to set up the children products for our configurable product. And we’re gonna do this ahead of time because when we go to create the configurable product, this parent configurable product, we wanna be able to associate the children to it. So by having them done ahead of time, it just kind of makes sense and it makes our future request a little bit easier. So we’re gonna create a red version of a product and we’re gonna do a Hawaiian ukulele. So a kids Hawaiian ukulele. That’s gonna be our configurable product. And then we’re gonna create three options, red, blue and green to go along with it. So let’s start with building these children products first. So we’re gonna create the red version of this kids Hawaiian ukulele. We have a couple of required attributes, which is SKU, name, price, but we are going to make sure that we define that this product belongs in the right attribute set, ID number 10, which is we got earlier. I did wanna give it a price. I wanted to set the status and the visibility. I wanted to make sure that this was defined as a simple product. And then I gave it a little bit of weight because if you don’t, there’s a chance that it could choose to save it as a downloadable product. Usually this happens from the admin when you’re creating products, if you don’t have a weight, but just because we wanted to be consistent, we gave it some sort of weight. I wanted to give it some stock and say it was in stock with being true. And then the last thing I did wanna say that we’re trying to use the attribute code of color. And then we also wanna make sure that this has the right value, so 13. So if you remember in our response, red was 13, blue is 14 and green was 15. So when we’re creating this red product, we wanna make sure that we choose the right value. Otherwise it won’t line up right. The name of the product won’t actually line up with the attribute. So when we do this, we’re gonna do a post request. And as long as we get a response back, we know that everything was fine. If we don’t, if we get false or some sort of error, it’ll tell you that we have maybe a malformed JSON. But it looks good, everything looks great. We got an ID number, we’ve got our SKU and name. There’s some extra things that are generated when you do a product. But we’re basically worrying about is this under custom attributes. We wanna make sure that color is 13 and that matches up with red. And everything looks good. So we can go ahead and do the same exact process for blue. So once again, we’re using a name and a SKU and attributes that ID a different price. We chose a little bit different quality. And once again, the color blue 14. So everything looks good. Let’s go ahead and hit send. That looks good. Let’s just double check our values. Color is 14, perfect, everything looks good. So let’s go ahead and move on to green. Great, everything looks good. So the next step is to create this generic, this parent configurable product. This is kind of like a shell. You actually, when you purchase it, you’re not actually purchasing the parent configurable. You’re actually purchasing the child variation. But you have to have this overarching product in order to contain the actual product information. And then once again, when you go to add it to the cart, in the end, the actual item that you’ll be adding to your cart and actually purchasing is this option. So let’s go ahead and just create this parent configurable. Once again, we’re gonna have a SKU of kids Hawaiian ukulele. The name is just kids Hawaiian ukulele because once again, the colors are representative and they’re children products. We wanna make sure that we’re choosing the right attribute set, status and visibility. And then this is a configurable product. This is definitely an important option to set properly. And then the color value, that’s number 93. And you can get that from the commerce admin when you’re going into stores and then products or attributes. And then this value right here, if you’re looking under the hood at the ID number, we wanna make sure that the ID number for this row is 93. And it just easier, if you just click on it, it actually shows you in the URL, the ID number of 93, which matches the color attribute that we’re trying to try and use. So that’s how you can use this. Try and use. So that’s how this color and this ID number match up. So everything looks good. Let’s go ahead and hit our API. Great. So now we have our parent configurable. It is just floating out there with no children assigned to it right now, but we did generate it. And the color attribute is 93, which means we can now associate children products to this parent configurable that use the color options. So the next thing we’re gonna do is we’re going to force these options onto product. This just takes a simple API call, and that looks good. Now we’re going ahead and we’re gonna link the red, blue and green children simple products to this parent configure. And the way you do that is by going to this, you’re gonna use a post request to rest default, the V1 configurable products, and then Kids Hawaii and Yooka-Laylee, that is the SKU of this configurable product. And then when you add slash child, it’s going to add whatever’s in your JSON for your payload and your body. It’s gonna use this SKU and it’s gonna assign it to whatever SKU is defined in the URL. And then it’s gonna assign it to the request. So we’re gonna try to add Kids Hawaii and Yooka-Laylee red to the Kids Hawaii and Yooka-Laylee parent configurable product. So let’s go ahead and hit send. And this simply is a Boolean, so it’s gonna be true or false. True means everything is happy and it was assigned and false would be some sort of issue like it couldn’t find the product or maybe you didn’t have the right attribute set. Let’s go ahead and link the blue one. Same thing, Boolean is true, which is good. And our last one, we’re gonna do green. And that’s also true. So now we can go ahead and get, so if you remember on when we created the product, let’s go back to that one, create the product. There were no children products assigned. It was basically just the basic information about this product. So now that we’ve associated these simple products to it, when we do a get request for this configurable product, we are going to get everything about this product, all the product attributes, but it’s also in the response. It’s going to show us some new information. It’s gonna say that, hey, you have some configurable product options and they are 13, 14 and 15, which equate to red, green and blue. And you have three products who are associated to this configurable product. And their ID numbers are 143, 144 and 145. And we can quickly verify that by going back to when we created the simple product, the ID number that was associated to it was 143 for red, 144 for blue and 145 for green. And now when we look at here, it says 133, 134 and 135 are associated to this configurable product. So that is great. That means all of this is starting to connect and everything looks great. You may also just have a need to just get the children products. You may not need all of the options for the configurable. You just wanna know what children are associated to your configurable product. And you can get to it from this URL. It’s gonna be a get request and it’s gonna be V1 configurable products and then the SKU of the parent configurable slash children. And if you do that, there’s no body cause it’s just a get request. You’re gonna get an array back and you’re gonna get, in our case, 133, 143, 144 and 145 with their relevant information. For example, the SKU, the price, the color options, basic information, URL keys for these children products. And if you look at this, it does actually give you the individual items information. So when I created the red one, I gave it a price of 12.5. And then when I did the blue one, it’s priced at 15. And then when we did the green one, it’s priced at 25. So it is great. That just shows you that it is pulling the proper information for each child product. Now, the last thing I’m gonna demo is how to remove via the APIs, how to remove a child product. And so that you’re gonna use a delete method and then the path is gonna be V1 configurable products and then the SKU of the configurable product. So that parent configurable slash children. And then after that last slash children is the SKU for the child that you’re trying to remove. And once again, since this is a delete, there’s no body. And the way it lines it up is it tries to find the child SKU and then it’s gonna try to find it in this parent configurable. And if it does, that will remove it. This will return a Boolean to reverse. In this case, it was true. So if we go ahead and go back to grabbing the children that are associated to our parent configurable, instead of having three, we should have two. So let’s look at our response. We have ID number 143 red, and then we have ID 145 green. And one, the middle ID 144 is no longer there because it’s no longer associated to that product. Now the child product does still exist. That’s not deleted. Just the association between that child product and that configural product, that’s what was removed. And then if we go ahead and just get the full payload for our configurable product, we’re gonna go and we’re gonna see that it looks like for color options, there are now only two, 13 and 15. And then the associated products are down to two IDs. That just proves that our delete method did work. It did remove that child option. So now we’re gonna go back to the commerce admin and we’re gonna show you basically the exact same process with some of the nuances and differences that you’ll experience should you choose to do it from the commerce app. So for here, we’re gonna go to catalog products. And when we go to add product, we’re gonna do add a configurable product. We’re gonna change the attribute set to kids toys. Remember that’s the one that has color. So if you notice when you try to change this to like downloadable, the color option goes away or default, it’s not there. But if I change it to kids toys where I’ve associated the color attribute to this attribute set, shows up. So when you’re doing the parent configurable, you don’t have to choose the color. So for this, we’re gonna do a new item. We’re gonna do, let’s just say an umbrella. So it’s gonna be a beach umbrella. Okay, and let’s give it a price. Let’s just say it’s $50. Doesn’t really matter. Let’s give it some weight. Let’s say it weighs 10 pounds. And we’ll just say there’s 100 in stock. So now because we’re doing a configurable product, we have a section down here to add configurations. So let’s go ahead and do that. We’re gonna go ahead and just keep our color just for brevity purposes. And we are going to select color and we’re gonna move on to the next step, which is choosing of these, do we wanna use any or all of them? So we’ll just go ahead and just use them all. Next. For this, we can just skip this or just leave it as default. This is basically previewing saying, hey, if you continue, we’re gonna create a beach umbrella red, a beach umbrella blue and a beach umbrella green. As long as you’re happy with that, you can hit generate products. And what this will do is it will then generate these children products for you. So unlike in the example where we’re doing this via APIs, where we had to create those products, when you do it from the admin, it does generate these products for you. There is a caveat though, because it is doing it without any additional information, it’s going to generate these products as virtual products because they have no weight. So once again, it’s just another step that you have to be aware of, but let’s go ahead and just review things real quick. So our attributes that looks good, our product name and SKU looks good. Once again, the price is irrelevant cause it’s gonna grab the price from the child configurable options. And inventory once again is irrelevant cause it’s gonna grab that from the child configurable options, but it does need to have this basic weight. The children weights can vary, but once again, it retains it here cause I’ve defined it. Let’s go ahead and look at this. Yeah, it looks good. We’ve got red, blue, green, yep. And just cause I wanna clean things up, I don’t think that the child product needs to have a dash in the name. I do like it to have it in the SKU, I just don’t like it in the name. This gives us the opportunity to maybe check a couple of changes. So 45, 40. And now we can hit save and close. And now that we’re done, we have our four original products. So our parent configurable, our ukulele, and then our red, green and blue children. Remember I told you when you hit delete, it doesn’t actually delete the actual individual simple product, it just removes the association to the parent configurable. But now we have our new product, our beach umbrella with the red, blue and green options. And you’ll see it did keep my prices 40, 45, 40. But if you… Now we’ll go ahead and just edit and we’ll just double check to see if everything looks good. Now it did set this as out of stock, which is no big deal, we’ll just go ahead and put it in stock. Those are our three options, which looks good. Product is enabled, that looks good. Let’s just go ahead and hit save and close. And yeah, everything looks great. So this just shows you that you can create these configurable products via the APIs. And it has pluses and minuses with doing that approach. You could also create products in the e-commerce admin, both are fine. This one tends to be a little bit slower because of the manual process. And there’s definitely more ways that you could have errors just due to human interaction. Whereas if you’re doing the APIs, you can do it programmatically, which will be a little bit more scripted, which means you’ll probably have less potential errors in that approach. But both are valid, both are used heavily. And so hopefully this helps you understand how to create configurable products in Adobe e-commerce. Don’t forget to continue your education and your learning by visiting Experience League and have a good day.