https://github.com/magesuite/server-side-swatches

This module moves the rendering of swatches from JS to PHP for better frontend performance.

Installation

This module is required by theme-creativeshop and is installed out of the box when theme-creativeshop is required

composer require "creativestyle/magesuite-server-side-swatches" ^1.0.0

Admin settings

There are no admin settings. The module is enabled by default when installed.

Backend

TODO - BE documentation and review of documentation is needed

Frontend

Standard swatches

The module provides PHTML swatch templates that replace Magento script-generated swatches. Swatches are rendered faster and some layout shifts are eliminated.

In requirejs-config.js file of the module original scripts are replaced:

var config = {
    map: {
        '*': {
            'Magento_Swatches/js/swatch-renderer':
                'MageSuite_ServerSideSwatches/js/swatch-renderer',
            'Magento_Swatches/js/swatch-renderer-tooltip':
                'MageSuite_ServerSideSwatches/js/swatch-renderer-tooltip',
        },
    },
};

In the module’s scripts are in their biggest part copied from corresponding Magento files and the logic for swatches is maintained. The part for rendering swatches dynamically is however removed. To maintain backward compatibility even the _RenderControls method is not renamed, although the rendering of swatches was moved to PHP. However, the code for script-side rendering of swatches is removed.

Light swatches (product tile)

The purpose of light swatches (available for product tile) is to limit the number of scripts and HTML. Light swatches are not dynamic, do not have any events bound to them, and do not show out of stock state. In order to use light swatches on the product tile change the template name to renderer-light

product_tile.xml

<referenceBlock name="product.tile.details.renderers.configurable" template="MageSuite_ServerSideSwatches::product/listing/renderer-light.phtml">
<referenceBlock name="product.tile.details.renderers.configurable.attributes" template="MageSuite_ServerSideSwatches::product/view/renderer/attributes-light.phtml">
<referenceBlock name="product.tile.details.renderers.configurable.option" template="MageSuite_ServerSideSwatches::product/view/renderer/option-light.phtml"/>

Styling

All elements and classes are the same as in Magento browser side swatches.