Jump to content

How to List a Product/Variant Attributes and Options


alexm
 Share

Recommended Posts

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.

Link to comment
Share on other sites

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 by kongondo
clarification
Link to comment
Share on other sites

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.

Link to comment
Share on other sites

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

 

  • Thanks 1
Link to comment
Share on other sites

@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

  • Like 1
Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
 Share

  • Recently Browsing   0 members

    • No registered users viewing this page.
×
×
  • Create New...