Building a SKU Size Conversion on PDP

Time to complete: 30-60 minutes.

This guide will show you how to build SKU Size Conversion on PDP. This is useful if you want to display a unified size scale on your PDPs and have different size scales for different brands.

Pre-requisites

• A Geins account and a launchpad connected to it
• Configured product parameters with attributes of size scale
• Products in your catalog with size attributes of current size scale

Steps

Creating a conversion table in json

Start by creating a json file with the conversion table. And place it in the static folder of your launchpad.

The json file should look like this:

conversion-table.json

{
  [
      {
        "SizeTypeX": "5",
        "SizeTypeY": "M",
        "SizeTypeZ": "Medium",
      },
      {
        "SizeTypeX": "7",
        "SizeTypeY": "L",
        "SizeTypeZ": "Large",
      }
      ...
  ]
}

SizeTypeX, SizeTypeY and SizeTypeZ are the size scales you want to convert from and to. And the values are the values you want to convert to.

Import the a new script to the PDP

Import the conversion table in the PDP.

/pages/product/_alias.vue

import SizeData from "~/static/conversion-table.json";

Add data variables to the PDP

/pages/product/_alias.vue

...
data: () => ({
  skuSizesConverted: false,
  skuSizeTypeConvertTo: 'SizeTypeZ',
  ...

The skuSizesConverted variable is used to check if the size conversion has already been done. The skuSizeTypeConvertTo variable is used to set the size scale you want to convert to. The currentSizeData variable is used to store the conversion table.

Tip

Let your users select the size scale they want to convert to. This can be done by adding a dropdown to the PDP. And then set the skuSizeTypeConvertTo variable to the selected value.

Add Computed properties

• Add a computed property to check if the size conversion is valid.
• And add a computed property to get the size scale of the current product.

/pages/product/_alias.vue

computed: {
    // Check if the sku has variants to convert and that the conversion has not already been done
    isSkuSizeConvertionValid() {
      return this.hasSkuVariants && !this.skuSizesConverted;
    },
    // Get the size scale of the current product from product parameters
    skuSizeType() {
      if (this.product?.parameterGroups.length) {
        const pgGeneral = this.product?.parameterGroups.find(
          pg => pg.name === 'General'
        );
        return pgGeneral?.parameters?.find(p => p.name === 'SizeType')?.value;
      }
      return null;
    },
    ...

The hasSkuVariants computed property is used to check if the sku has variants. This is used to check if the size conversion is valid. This computed property is already available in the PDP from the Mixin MixProductPage

Add methods

Add a methods to convert the size of the sku to the size scale you want to convert to.

/pages/product/_alias.vue

...
methods: {
  skuSizeConvertion() {
      if (!this.isSkuSizeConvertionValid) {
        return;
      }
      if (this.skuSizeType) {
        this.skuVariants.forEach(sku => {
          this.skuSizeConvert(sku);
        });
        this.skuSizesConverted = true;
      }
    },
    skuSizeConvert(sku) {
      const convertedSize = SizeData?.find(
        s => s[this.skuSizeType] === sku.label
      )?.[this.skuSizeTypeConvertTo];
      if (convertedSize) {
        sku.label = convertedSize;
      }
    },
  ...

Add watchers

Add wathcers to the skuVariants to check if the size conversion is valid. And if it is valid, convert the size of the sku.

/pages/product/_alias.vue

watch: {
    ...
    skuVariants(val) {
      if (val) {
        this.skuSizeConvertion();
      }
    }
    ...

Congratulations!

You have now completed the guide on how to build SKU Size Conversion on PDP.