How to List a Product/Variant Attributes and Options

[alexm]

I might be having a bit of a brain fart here, but rather than using getProductVariants to list all of the product variants on a product page, I have products with 2 attribute types. Colour and size. I would in fact like to list the available colours and the available sizes of a selected colour. I can't seem to see a simple way to loop the individual attribute options for a product.

[kongondo]

1 hour ago, alexm said:

I have products with 2 attribute types. Colour and size. I would in fact like to list the available colours and the available sizes of a selected colour.

Hi @alexm. Just to be clear, do you mean you want to list all the available colours and available sizes of a selected product? E.g Product A is available in Black, Red, Purple, etc. and Small, Medium, X-Large?

Edited January 31, 2022 by kongondo
clarification

[alexm]

Sorry @kongondo I'd accidentally unfollowed the topic, so didn't get the reply.

Yes, so more or less as you have it in your demo. As that's just down to design/layout.

So effectively you have the available colours of a product. Followed by the available sizes.

[kongondo]

Great timing then @alexmas I recently updated the demo to actually show the available colours and sizes of variants. I will update the repo soon. Later today, I'll also write some code here to look at since the demo one is a bit opinionated.

[alexm]

Fantastico @kongo, I'll wait and see how you would go about it and work on other bits for now.

[kongondo]

There are various ways to approach this. First, the concepts (being verbose below to help others as well). Everything is a page.

1. Attributes are pages. For instance, Colour, Size, Grade. They are not tied to any product. This makes them reusable and translatable.
2. Attribute Options are pages. For instance, Red, Small, Premium. They are not tied to any product. This makes them reusable and translatable. They are children of the respective attribute pages.
3. Products are also pages. After you enable variants on a product page, you are able to select attributes (Colour, Size, Grade, etc.) that will make up the variants you create. Attributes are added to a product page via a multi page reference field (padloper_product_attributes). 
4. Variants are pages. After enabling variants on a product page and saving it, then subsequently adding attributes to the product and saving again, you are then able to generate variants. Variants are generated in a modal. In this modal, you select the attribute options for each of the attributes on the product itself. After generating the variants based on your choices, the attribute options are saved to the variant pages' multi page reference field named padloper_product_attributes_options. This field is not directly editable. Variants are child pages of product pages.

Based on the above relationships, as you can probably tell, there are various approaches to finding the available attribute options for a product. The most straightforward way is to go through the variants as they have the exact colours and sizes you want. Things to note here are that there could be lots of variants (like in your case ) and there will be duplicate options to deal with, e.g. Red x Small and Red x Large. <- Two reds. Since you are dealing with lots of variants, I'd go for findRaw(). Below, some example code:

<?php

namespace ProcessWire;

// PREPARE ATTRIBUTES
// fields in attributes that we want
$fields = ['id', 'title'];
$attributesValues = $page->padloper_product_attributes->explode($fields);
// get attributes as $attributeID => $attributeTitle pairs
$attributes = [];
foreach ($attributesValues as $attributeValue) {
		$attributes[$attributeValue['id']] = $attributeValue['title'];
}
// -------

// PREPARE OPTIONS
// fields in options that we want
// @note: for some reason the syntax in the docs pagefield=>['id','title'] always throws an error for me
// so, we use the longhand version
$fields = ['id', 'title', 'padloper_product_attributes_options.title', 'padloper_product_attributes_options.id', 'padloper_product_attributes_options.parent.id'];
$variants = $padloper->findRaw("template=variant,parent={$page}", $fields);

// array for final attributes and their options
// in our case we expect only colours and sizes
$coloursAndSizes = [];
foreach ($variants as $variant) {
		foreach ($variant['padloper_product_attributes_options'] as $options) {
				$attributeID = $options['parent_id'];
				$optionID = $options['id'];
				// #####
				$coloursAndSizes[$attributeID]['attribute_name'] = $attributes[$attributeID];
				$coloursAndSizes[$attributeID]['options'][$optionID] = $options['title'];
		}
}

// your attributes and their respective option are in $coloursAndSizes

 

[alexm]

@kongondo Great explanation. I had started along the right lines, but this clarifies it a whole lot. The only one adjustment is that I substituted $page with $product, where I'm loading the product from a url $segment and referencing the product page as $product as per Padloper2 docs.

Big thanks for your time

[alexm]

3 hours ago, kongondo said:

Things to note here are that there could be lots of variants (like in your case )

Also, this made me laugh!! ?