ServerSideSwatches
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.