@pernod-ricard-global-cms/cblcolourpalettes
Advanced tools
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
FAQs
Colour themes
The npm package @pernod-ricard-global-cms/cblcolourpalettes receives a total of 180 weekly downloads. As such, @pernod-ricard-global-cms/cblcolourpalettes popularity was classified as not popular.
We found that @pernod-ricard-global-cms/cblcolourpalettes demonstrated a healthy version release cadence and project activity because the last version was released less than a year ago. It has 0 open source maintainers collaborating on the project.
Did you know?
Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.
Security News
Create React App is officially deprecated due to React 19 issues and lack of maintenance—developers should switch to Vite or other modern alternatives.
Security News
Oracle seeks to dismiss fraud claims in the JavaScript trademark dispute, delaying the case and avoiding questions about its right to the name.
Security News
The Linux Foundation is warning open source developers that compliance with global sanctions is mandatory, highlighting legal risks and restrictions on contributions.