@pernod-ricard-global-cms/cblcolourpalettes v0.3.2
Colour Palettes
Import colour palettes js into the preview as well as the main js file for the frontend with:
import colourPalettes from '<path to js file>';The data for the colour palette js should be an object containing all the names of the colour palettes you wish to use. The value of each palette name in the object should be an array of hex strings. There also needs to be a property in the object called pickerNames the value of which is an array of strings that are the names of the acf select fields you want to listen to changes on.
If the data file is json or js you can import it like this:
import colourData from 'Assets/js/modules/colour-palettes/colour-data';then pass the imported data to the colour palettes js like this:
colourPalettes(colourData);For the code to know what palette to apply on the front end it looks for a data attribute on the html tag called data-currentcolourpalette.
The value of this needs to passed in to the template. Something like this:
{% set currentPalette = "default" %}
{% if post.product_palette_picker is defined and post.product_palette_picker is not empty %}
{% set currentPalette = post.product_palette_picker %}
{% endif %}
<html prefix="og: http://ogp.me/ns#" lang="{{ gtp_language_code() }}" data-currentcolourpalette="{{currentPalette}}">Finally in the admin you will need a custom field to set up the select field for switching palettes. The name product_palette_picker in the above example is the name of the custom field. The names in the choices input section should correspond to the names of the palettes in the data file that you wish to select. eg:
default : No palette (defaults)
mizunara : Mizunara
chivas12 : Chivas 12