Variations and Attributes generator for ProcessWire

Output to the Frontend

Variations fields

Accessing and outputting the contents of a Variations field in your template is quite simple. The field is accessed like many other ProcessWire fields. It returns an array of type VariationsArray (a WireArray) that needs to be looped through to output each Variation within. Each item in a VariationsArray is an object of type Variations (a WireData).

The Variations Object

Each Variations object contains properties about the variation it represents. Since variations without any values specified for at least one of its custom columns are not saved to the database, such variations will also not be returned in the VariationsArray.

The number of properties in a Variations object directly corresponds to the number of attributes (both pre-defined and custom) it contains. These attributes, as we learnt, are added to a variations configuration and at the field level settings respectively.

Saved (database) properties

At least these following 2 properties are saved from each Variations object at the database level:

  1. id: ID of a variation as generated via a single variations configuration.
  2. combinations: Comma-separated string of the pre-defined attributes values that, when combined, formed the single variation. For instance, as per our example variations configuration, Small,Red.

In addition, each custom column (subfield) that was created for the variations field is returned as a property of the object. For instance, in our example, we created three custom columns (hence three custom attributes), i.e. sku, price and quantity. It is important to note that it is the names of the custom columns that are adopted as the property names AND NOT the custom columns labels. This means the property names might have underscores, depending on the names you gave the custom columns.

Following our example then, this Variations object will also have the following three properties:

  1. sku: Text specifying the SKU of the variation as saved when the page was edited.
  2. price: Float that specifies the price of this variation of the given item/product. In our case, the price of the T-Shirt.
  3. quantity: Integer denoting the number of items available in respect of the variation. For instance, 10 Small, Red T-Shirts in stock.

Runtime properties

As well as the database-derived values, all the pre-defined attributes as per the variations configuration will be returned as properties. Their values will be their respective values. Given that our example variations configuration had only 2 attributes, Size and Colour, these will be returned as the properties for each variation item. Similar to the custom columns/attributes, the titles of the attributes will be converted to their field name variants to use as the property. The 2 run-time properties in our example will be:

  1. size: This will return the value of the Size attribute for the given variation. For example, Small.
  2. colour: This will return the value of the Colour attribute for the given variation. For example, Red.

Variations API: Examples

The following examples are based on our example variations field and variations configuration.

Assuming you created a field of type Variations called variations, based on our example variations configuration and the field's settings, you can loop through it for a given page as shown below.

<?php

$variations = $page->variations;// returns a VariationsArray. Needs to be looped through

foreach ($variations as $v) {
    echo $v->id;// outputs e.g. 12
    echo $v->combinations;// e.g. 3 (Small,Red)

    // custom columns/attributes
    echo $v->sku;// e.g. 'BTSR12345'
    echo $v->price;// e.g. '30'
    echo $v->quantity;// e.g. '80'
   
    // pre-defined attributes
    echo $v->size;// e.g. 'Medium'
    echo $v->colour;// e.g. 'Purple'    
}

// only output prices of T-Shirts of a certain colour
foreach ($variations as $v) {
    if(in_array($v->colour, array('Red', 'Blue'))) {
        echo $v->price . '<br>';
    }
    
}

// There's also a toString() method so you can do:
echo $page->variations;// will output all your variations and their properties wrapped in some basic HTML tags

If you are interested in using Variations with Padloper, have a look at the tutorial in the demo section.