You can store certain customizations that a user changed, like your app’s color, inside the Wix site (instead of saving it on your database).
The wix-param
key works with color/font parameters, numbers, and booleans.
Use our custom style parameter key, wix-param. Here’s the basic flow:
backgroundColor
.onChange
event.addEventListener method
.Note: You can only use wix-param in UI controls that support it.
When setting colors in your app, you can use any value between color-1 to color-25 (color-1, color-2, color-3, etc). To decide the color value, use our color reference guide.
When setting fonts in your app, you can use the values listed in the table below. To decide the font value, use our font reference guide.
Font theme you chose for your starting scheme | Font Reference Number (use in the UI control) | Font theme (use in the website extension) |
---|---|---|
Heading 1 | font_0 | Title |
Heading 2 | font_2 | Page-title |
Heading 3 | font_3 | Heading-XL |
Heading 4 | font_4 | Heading-L |
Heading 5 | font_5 | Heading-M |
Heading 6 | font_6 | Heading-S |
Paragraph 1 | font_7 | Body-L |
Paragraph 2 | font_8 | Body-M |
Paragraph 3 | font_9 | Body-S |
Here's how to implement wix-param
. The examples below use AngularJS, but the concepts apply to React templates/JSX and jQuery too.
We'll use the Font & Color Picker as an example.
<wix-control
name="UI.fontAndColorPicker"
props="{
title: 'Description',
//set up the starting color and font in your app
startWithTheme: 'font_8',
startWithColor: 'color-2',
//We save these values inside the Wix site
wix-param-font: 'myBodyFont',
wix-param-color: 'myBodyColor',
}"
></wix-control>;
Note:
Using AngularJS? Since AngularJS reads {{ }} as an expression, add the ng-non-bindable directive to the
<style wix-style>
h1 {
//Font theme is paragraph 2
font:{{style.myBodyFont Body-M}}
color:{{style.myBodyColor color-2}}
}
footer {
//Background color
background-color: {{color-1}};
}
</style>
<body>
<h1>Wix Title</h1>
<footer>
<h2>Footer</h2>
</footer>
</body>
Note: You can get all the style parameters that were set in the app’s settings. To do so, use Wix.Styles.getStyleParams
.
//get the style parameters
Wix.addEventListener(Wix.Events.STYLE_PARAMS_CHANGE, function(data) {
console.log(data);
});
//returns an object with all of the style parameters
{
booleans: {
showDescription: true
showTitle: true
}
Colors:{
titleColor:{
themeName:"color-5"
value:"#302D2D"
}
}
fonts: {
btnFont:{
displayName:"Paragraph 2"
editorKey:"font_8"
family:"din-next-w01-light"
fontStyleParam:true
preset:"Custom"
Size:15
Style:{
bold:false
italic:false
underline:false
}
value:"font:normal normal normal 15px/18px din-next-w01-light,
din-next-w02-light,din-next-w10-light,sans-serif;"
}
}
Numbers:{
Animation: 2
}