Last active
May 15, 2022 06:02
-
-
Save petercossey/c0c452ba95dc7ca55d965f4fab39c24f to your computer and use it in GitHub Desktop.
Completed example of custom widgets template schema
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| [ | |
| { | |
| "type": "tab", | |
| "label": "Content", | |
| "sections": [ | |
| { | |
| "label": "Product cards", | |
| "settings": [ | |
| { | |
| "type": "boolean", | |
| "label": "Show product name", | |
| "id": "showProductName", | |
| "default": true | |
| }, | |
| { | |
| "type": "boolean", | |
| "label": "Show product description", | |
| "id": "showProductDescription", | |
| "default": true | |
| }, | |
| { | |
| "type": "boolean", | |
| "label": "Show product ratings", | |
| "id": "showProductRatings", | |
| "default": true | |
| }, | |
| { | |
| "type": "boolean", | |
| "label": "Show product price", | |
| "id": "showProductPrice", | |
| "default": true | |
| }, | |
| { | |
| "type": "boolean", | |
| "label": "Show button", | |
| "id": "showButton", | |
| "default": true | |
| }, | |
| { | |
| "type": "select", | |
| "label": "Number of products per row", | |
| "id": "productsPerRow", | |
| "default": "3", | |
| "typeMeta": { | |
| "selectOptions" : [ | |
| { | |
| "label": "2", | |
| "value": "2" | |
| }, | |
| { | |
| "label": "3", | |
| "value": "3" | |
| }, | |
| { | |
| "label": "4", | |
| "value": "4" | |
| } | |
| ] | |
| } | |
| } | |
| ] | |
| }, | |
| { | |
| "label": "Button", | |
| "settings": [ | |
| { | |
| "type": "input", | |
| "label": "Button label", | |
| "id": "buttonLabel", | |
| "default": "Add to Cart" | |
| }, | |
| { | |
| "type": "select", | |
| "label": "Button action", | |
| "id": "buttonActionType", | |
| "default": "addToCart", | |
| "typeMeta": { | |
| "selectOptions" : [ | |
| { | |
| "label": "Add to Cart", | |
| "value": "addToCart" | |
| }, | |
| { | |
| "label": "Add to Wishlist", | |
| "value": "addToWishlist" | |
| }, | |
| { | |
| "label": "Go to Product Page", | |
| "value": "goToProduct" | |
| } | |
| ] | |
| } | |
| } | |
| ] | |
| } | |
| ] | |
| }, | |
| { | |
| "type": "tab", | |
| "label": "Design", | |
| "sections": [ | |
| { | |
| "label": "Product cards", | |
| "settings": [ | |
| { | |
| "type": "color", | |
| "label": "Background color", | |
| "id": "productCardBackgroundColor", | |
| "default": "rgba(255,255,255,1)" | |
| }, | |
| { | |
| "type": "color", | |
| "label": "Border color", | |
| "id": "productCardBorderColor", | |
| "default": "#D9DCE9" | |
| }, | |
| { | |
| "type": "boxModel", | |
| "label": "Margin", | |
| "id": "productCardMargin", | |
| "default": { | |
| "top": { | |
| "value": "0", | |
| "type": "px" | |
| }, | |
| "right": { | |
| "value": "10.5", | |
| "type": "px" | |
| }, | |
| "bottom": { | |
| "value": "0", | |
| "type": "px" | |
| }, | |
| "left": { | |
| "value": "10.5", | |
| "type": "px" | |
| } | |
| } | |
| }, | |
| { | |
| "type": "boxModel", | |
| "label": "Padding", | |
| "id": "productCardPadding", | |
| "default": { | |
| "top": { | |
| "value": "0", | |
| "type": "px" | |
| }, | |
| "right": { | |
| "value": "0", | |
| "type": "px" | |
| }, | |
| "bottom": { | |
| "value": "16", | |
| "type": "px" | |
| }, | |
| "left": { | |
| "value": "0", | |
| "type": "px" | |
| } | |
| } | |
| }, | |
| { | |
| "type": "alignment", | |
| "label": "Content alignment", | |
| "id": "productCardContentAlignment", | |
| "default": { | |
| "horizontal": "center" | |
| }, | |
| "typeMeta": { | |
| "display": "horizontal" | |
| } | |
| } | |
| ] | |
| }, | |
| { | |
| "label": "Product image", | |
| "settings": [ | |
| { | |
| "type": "input", | |
| "label": "Image height (px)", | |
| "id": "productImageHeight", | |
| "default": "252" | |
| } | |
| ] | |
| }, | |
| { | |
| "label": "Product name", | |
| "settings": [ | |
| { | |
| "type": "select", | |
| "label": "Font family", | |
| "id": "productNameFontFamily", | |
| "default": "inherit", | |
| "typeMeta": { | |
| "selectOptions" : [ | |
| { | |
| "label": "Default", | |
| "value": "inherit" | |
| }, | |
| { | |
| "label": "Arial", | |
| "value": "Arial" | |
| }, | |
| { | |
| "label": "Times New Roman", | |
| "value": "Times New Roman" | |
| }, | |
| { | |
| "label": "Karla", | |
| "value": "Karla" | |
| }, | |
| { | |
| "label": "Roboto", | |
| "value": "Roboto" | |
| }, | |
| { | |
| "label": "Source Sans Pro", | |
| "value": "Source Sans Pro" | |
| }, | |
| { | |
| "label": "Montserrat", | |
| "value": "Montserrat" | |
| }, | |
| { | |
| "label": "Open Sans", | |
| "value": "Open Sans" | |
| }, | |
| { | |
| "label": "Volkhov", | |
| "value": "Volkhov" | |
| } | |
| ] | |
| } | |
| }, | |
| { | |
| "type": "select", | |
| "label": "Font weight", | |
| "id": "productNameFontWeight", | |
| "default": "400", | |
| "typeMeta": { | |
| "selectOptions" : [ | |
| { | |
| "label": "Thin", | |
| "value": "100" | |
| }, | |
| { | |
| "label": "Extra Light (Ultra Light)", | |
| "value": "200" | |
| }, | |
| { | |
| "label": "Light", | |
| "value": "300" | |
| }, | |
| { | |
| "label": "Normal", | |
| "value": "400" | |
| }, | |
| { | |
| "label": "Medium", | |
| "value": "500" | |
| }, | |
| { | |
| "label": "Semi Bold (Demi Bold)", | |
| "value": "600" | |
| }, | |
| { | |
| "label": "Bold", | |
| "value": "700" | |
| }, | |
| { | |
| "label": "Extra Bold (Ultra Bold)", | |
| "value": "800" | |
| }, | |
| { | |
| "label": "Black (Heavy)", | |
| "value": "900" | |
| } | |
| ] | |
| } | |
| }, | |
| { | |
| "type": "input", | |
| "label": "Font size (px)", | |
| "id": "productNameFontSize", | |
| "default": "22" | |
| }, | |
| { | |
| "type": "input", | |
| "label": "Line height (px)", | |
| "id": "productNameLineHeight", | |
| "default": "33" | |
| }, | |
| { | |
| "type" : "toggle", | |
| "id": "productNamePseudo", | |
| "default": "normal", | |
| "typeMeta": { | |
| "selectOptions": [ | |
| { | |
| "label": "Normal", | |
| "value": "normal" | |
| }, | |
| { | |
| "label": "Hover", | |
| "value": "hover" | |
| } | |
| ], | |
| "conditionalSettings": [ | |
| { | |
| "condition": "normal", | |
| "settings": [ | |
| { | |
| "type": "color", | |
| "label": "Text color", | |
| "id": "productNameTextColor", | |
| "default": "#000000" | |
| }, | |
| { | |
| "type": "select", | |
| "label": "Text decoration", | |
| "id": "productNameTextDecoration", | |
| "default": "none", | |
| "typeMeta": { | |
| "selectOptions" : [ | |
| { | |
| "label": "None", | |
| "value": "none" | |
| }, | |
| { | |
| "label": "Underline", | |
| "value": "underline" | |
| } | |
| ] | |
| } | |
| } | |
| ] | |
| }, | |
| { | |
| "condition": "hover", | |
| "settings": [ | |
| { | |
| "type": "color", | |
| "label": "Text color", | |
| "id": "productNameTextColorHover", | |
| "default": "#000000" | |
| }, | |
| { | |
| "type": "select", | |
| "label": "Text decoration", | |
| "id": "productNameTextDecorationHover", | |
| "default": "none", | |
| "typeMeta": { | |
| "selectOptions" : [ | |
| { | |
| "label": "None", | |
| "value": "none" | |
| }, | |
| { | |
| "label": "Underline", | |
| "value": "underline" | |
| } | |
| ] | |
| } | |
| } | |
| ] | |
| } | |
| ] | |
| } | |
| } | |
| ] | |
| } | |
| { | |
| "label": "Product description", | |
| "settings": [ | |
| { | |
| "type": "select", | |
| "label": "Font family", | |
| "id": "productDescriptionFontFamily", | |
| "default": "inherit", | |
| "typeMeta": { | |
| "selectOptions" : [ | |
| { | |
| "label": "Default", | |
| "value": "inherit" | |
| }, | |
| { | |
| "label": "Arial", | |
| "value": "Arial" | |
| }, | |
| { | |
| "label": "Times New Roman", | |
| "value": "Times New Roman" | |
| }, | |
| { | |
| "label": "Karla", | |
| "value": "Karla" | |
| }, | |
| { | |
| "label": "Roboto", | |
| "value": "Roboto" | |
| }, | |
| { | |
| "label": "Source Sans Pro", | |
| "value": "Source Sans Pro" | |
| }, | |
| { | |
| "label": "Montserrat", | |
| "value": "Montserrat" | |
| }, | |
| { | |
| "label": "Open Sans", | |
| "value": "Open Sans" | |
| }, | |
| { | |
| "label": "Volkhov", | |
| "value": "Volkhov" | |
| } | |
| ] | |
| } | |
| }, | |
| { | |
| "type": "select", | |
| "label": "Font weight", | |
| "id": "productDescriptionFontWeight", | |
| "default": "400", | |
| "typeMeta": { | |
| "selectOptions" : [ | |
| { | |
| "label": "Thin", | |
| "value": "100" | |
| }, | |
| { | |
| "label": "Extra Light (Ultra Light)", | |
| "value": "200" | |
| }, | |
| { | |
| "label": "Light", | |
| "value": "300" | |
| }, | |
| { | |
| "label": "Normal", | |
| "value": "400" | |
| }, | |
| { | |
| "label": "Medium", | |
| "value": "500" | |
| }, | |
| { | |
| "label": "Semi Bold (Demi Bold)", | |
| "value": "600" | |
| }, | |
| { | |
| "label": "Bold", | |
| "value": "700" | |
| }, | |
| { | |
| "label": "Extra Bold (Ultra Bold)", | |
| "value": "800" | |
| }, | |
| { | |
| "label": "Black (Heavy)", | |
| "value": "900" | |
| } | |
| ] | |
| } | |
| }, | |
| { | |
| "type": "input", | |
| "label": "Font size (px)", | |
| "id": "productDescriptionFontSize", | |
| "default": "14" | |
| }, | |
| { | |
| "type": "input", | |
| "label": "Line height (px)", | |
| "id": "productDescriptionLineHeight", | |
| "default": "21" | |
| }, | |
| { | |
| "type": "color", | |
| "label": "Text color", | |
| "id": "productDescriptionTextColor", | |
| "default": "#000000" | |
| } | |
| ] | |
| }, | |
| { | |
| "label": "Product ratings", | |
| "settings": [ | |
| { | |
| "type": "color", | |
| "label": "Star ratings color (full)", | |
| "id": "productRatingStarColorFull", | |
| "default": "#80000B" | |
| }, | |
| { | |
| "type": "color", | |
| "label": "Star ratings color (empty)", | |
| "id": "productRatingStarColorEmpty", | |
| "default": "#D9DCE9" | |
| }, | |
| { | |
| "type": "color", | |
| "label": "Reviews text color", | |
| "id": "productRatingsTextColor", | |
| "default": "#8C93AD" | |
| } | |
| ] | |
| }, | |
| { | |
| "label": "Product price", | |
| "settings": [ | |
| { | |
| "type": "select", | |
| "label": "Font family", | |
| "id": "productPriceFontFamily", | |
| "default": "inherit", | |
| "typeMeta": { | |
| "selectOptions" : [ | |
| { | |
| "label": "Default", | |
| "value": "inherit" | |
| }, | |
| { | |
| "label": "Arial", | |
| "value": "Arial" | |
| }, | |
| { | |
| "label": "Times New Roman", | |
| "value": "Times New Roman" | |
| }, | |
| { | |
| "label": "Karla", | |
| "value": "Karla" | |
| }, | |
| { | |
| "label": "Roboto", | |
| "value": "Roboto" | |
| }, | |
| { | |
| "label": "Source Sans Pro", | |
| "value": "Source Sans Pro" | |
| }, | |
| { | |
| "label": "Montserrat", | |
| "value": "Montserrat" | |
| }, | |
| { | |
| "label": "Open Sans", | |
| "value": "Open Sans" | |
| }, | |
| { | |
| "label": "Volkhov", | |
| "value": "Volkhov" | |
| } | |
| ] | |
| } | |
| }, | |
| { | |
| "type": "select", | |
| "label": "Font weight", | |
| "id": "productPriceFontWeight", | |
| "default": "400", | |
| "typeMeta": { | |
| "selectOptions" : [ | |
| { | |
| "label": "Thin", | |
| "value": "100" | |
| }, | |
| { | |
| "label": "Extra Light (Ultra Light)", | |
| "value": "200" | |
| }, | |
| { | |
| "label": "Light", | |
| "value": "300" | |
| }, | |
| { | |
| "label": "Normal", | |
| "value": "400" | |
| }, | |
| { | |
| "label": "Medium", | |
| "value": "500" | |
| }, | |
| { | |
| "label": "Semi Bold (Demi Bold)", | |
| "value": "600" | |
| }, | |
| { | |
| "label": "Bold", | |
| "value": "700" | |
| }, | |
| { | |
| "label": "Extra Bold (Ultra Bold)", | |
| "value": "800" | |
| }, | |
| { | |
| "label": "Black (Heavy)", | |
| "value": "900" | |
| } | |
| ] | |
| } | |
| }, | |
| { | |
| "type": "input", | |
| "label": "Font size (px)", | |
| "id": "productPriceFontSize", | |
| "default": "14" | |
| }, | |
| { | |
| "type": "input", | |
| "label": "Line height (px)", | |
| "id": "productPriceLineHeight", | |
| "default": "21" | |
| }, | |
| { | |
| "type": "color", | |
| "label": "Text color", | |
| "id": "productPriceTextColor", | |
| "default": "#000000" | |
| } | |
| ] | |
| }, | |
| { | |
| "label": "Button", | |
| "settings": [ | |
| { | |
| "type": "range", | |
| "label": "Border radius", | |
| "id": "buttonBorderRadius", | |
| "default": 4, | |
| "typeMeta": { | |
| "rangeValues": { | |
| "min": 0, | |
| "max": 100, | |
| "step": 1, | |
| "unit": "px" | |
| } | |
| } | |
| }, | |
| { | |
| "type": "select", | |
| "label": "Font family", | |
| "id": "buttonFontFamily", | |
| "default": "inherit", | |
| "typeMeta": { | |
| "selectOptions" : [ | |
| { | |
| "label": "Default", | |
| "value": "inherit" | |
| }, | |
| { | |
| "label": "Arial", | |
| "value": "Arial" | |
| }, | |
| { | |
| "label": "Times New Roman", | |
| "value": "Times New Roman" | |
| }, | |
| { | |
| "label": "Karla", | |
| "value": "Karla" | |
| }, | |
| { | |
| "label": "Roboto", | |
| "value": "Roboto" | |
| }, | |
| { | |
| "label": "Source Sans Pro", | |
| "value": "Source Sans Pro" | |
| }, | |
| { | |
| "label": "Montserrat", | |
| "value": "Montserrat" | |
| }, | |
| { | |
| "label": "Open Sans", | |
| "value": "Open Sans" | |
| }, | |
| { | |
| "label": "Volkhov", | |
| "value": "Volkhov" | |
| } | |
| ] | |
| } | |
| }, | |
| { | |
| "type": "select", | |
| "label": "Font weight", | |
| "id": "buttonFontWeight", | |
| "default": "400", | |
| "typeMeta": { | |
| "selectOptions" : [ | |
| { | |
| "label": "Thin", | |
| "value": "100" | |
| }, | |
| { | |
| "label": "Extra Light (Ultra Light)", | |
| "value": "200" | |
| }, | |
| { | |
| "label": "Light", | |
| "value": "300" | |
| }, | |
| { | |
| "label": "Normal", | |
| "value": "400" | |
| }, | |
| { | |
| "label": "Medium", | |
| "value": "500" | |
| }, | |
| { | |
| "label": "Semi Bold (Demi Bold)", | |
| "value": "600" | |
| }, | |
| { | |
| "label": "Bold", | |
| "value": "700" | |
| }, | |
| { | |
| "label": "Extra Bold (Ultra Bold)", | |
| "value": "800" | |
| }, | |
| { | |
| "label": "Black (Heavy)", | |
| "value": "900" | |
| } | |
| ] | |
| } | |
| }, | |
| { | |
| "type": "input", | |
| "label": "Font size (px)", | |
| "id": "buttonFontSize", | |
| "default": "14" | |
| }, | |
| { | |
| "type" : "toggle", | |
| "id": "buttonPseudo", | |
| "default": "normal", | |
| "typeMeta": { | |
| "selectOptions": [ | |
| { | |
| "label": "Normal", | |
| "value": "normal" | |
| }, | |
| { | |
| "label": "Hover", | |
| "value": "hover" | |
| } | |
| ], | |
| "conditionalSettings": [ | |
| { | |
| "condition": "normal", | |
| "settings": [ | |
| { | |
| "type": "color", | |
| "label": "Text color", | |
| "id": "buttonTextColor", | |
| "default": "rgba(255,255,255,1)" | |
| }, | |
| { | |
| "type": "select", | |
| "label": "Text decoration", | |
| "id": "buttonTextDecoration", | |
| "default": "none", | |
| "typeMeta": { | |
| "selectOptions" : [ | |
| { | |
| "label": "None", | |
| "value": "none" | |
| }, | |
| { | |
| "label": "Underline", | |
| "value": "underline" | |
| } | |
| ] | |
| } | |
| }, | |
| { | |
| "type": "color", | |
| "label": "Button color", | |
| "id": "buttonColor", | |
| "default": "rgba(68,68,68,1)" | |
| }, | |
| { | |
| "type": "color", | |
| "label": "Border color", | |
| "id": "buttonBorderColor", | |
| "default": "rgba(102,102,102,1);" | |
| } | |
| ] | |
| }, | |
| { | |
| "condition": "hover", | |
| "settings": [ | |
| { | |
| "type": "color", | |
| "label": "Text color", | |
| "id": "buttonTextColorHover", | |
| "default": "rgba(255,255,255,1)" | |
| }, | |
| { | |
| "type": "select", | |
| "label": "Text decoration", | |
| "id": "buttonTextDecorationHover", | |
| "default": "none", | |
| "typeMeta": { | |
| "selectOptions" : [ | |
| { | |
| "label": "None", | |
| "value": "none" | |
| }, | |
| { | |
| "label": "Underline", | |
| "value": "underline" | |
| } | |
| ] | |
| } | |
| }, | |
| { | |
| "type": "color", | |
| "label": "Button color", | |
| "id": "buttonColorHover", | |
| "default": "rgba(102,102,102,1);" | |
| }, | |
| { | |
| "type": "color", | |
| "label": "Border color", | |
| "id": "buttonBorderColorHover", | |
| "default": "rgba(102,102,102,1);" | |
| } | |
| ] | |
| } | |
| ] | |
| } | |
| } | |
| ] | |
| }, | |
| { | |
| "label": "Arrows", | |
| "settings": [ | |
| { | |
| "type": "color", | |
| "label": "Arrow color", | |
| "id": "carouselArrowColor", | |
| "default": "#D9DCE9" | |
| }, | |
| { | |
| "type": "color", | |
| "label": "Arrow background color", | |
| "id": "carouselArrowBackgroundColor", | |
| "default": "rgba(255,255,255,0.0)" | |
| }, | |
| { | |
| "type": "color", | |
| "label": "Arrow border color", | |
| "id": "carouselArrowBorderColor", | |
| "default": "rgba(255,255,255,0.0)" | |
| } | |
| ] | |
| }, | |
| { | |
| "label": "Animation and effects", | |
| "settings": [ | |
| { | |
| "type": "boolean", | |
| "label": "Touch support", | |
| "id": "draggable", | |
| "default": true | |
| }, | |
| { | |
| "type": "select", | |
| "label": "Easing method", | |
| "id": "easingMethod", | |
| "default": "ease", | |
| "typeMeta": { | |
| "selectOptions" : [ | |
| { | |
| "label": "Ease", | |
| "value": "ease" | |
| }, | |
| { | |
| "label": "Linear", | |
| "value": "linear" | |
| }, | |
| { | |
| "label": "Ease-in", | |
| "value": "ease-in" | |
| }, | |
| { | |
| "label": "Ease-out", | |
| "value": "ease-out" | |
| }, | |
| { | |
| "label": "Ease-in-out", | |
| "value": "ease-in-out" | |
| } | |
| ] | |
| } | |
| }, | |
| { | |
| "type": "input", | |
| "label": "Animation duration (ms)", | |
| "id": "animationDuration", | |
| "default": "400" | |
| } | |
| ] | |
| } | |
| ] | |
| }, | |
| { | |
| "type": "array", | |
| "label": "Product List", | |
| "id": "products", | |
| "defaultCount": 3, | |
| "entryLabel": "Product", | |
| "thumbnail": "productImage", | |
| "schema": [ | |
| { | |
| "type": "tab", | |
| "label": "Product", | |
| "sections": [ | |
| { | |
| "label": "Display", | |
| "settings": [ | |
| { | |
| "type": "productId", | |
| "label": "Product", | |
| "id": "productId", | |
| "typeMeta": { | |
| "placeholder": "Search by name or SKU" | |
| } | |
| }, | |
| { | |
| "type": "input", | |
| "label": "Description", | |
| "id": "productDescription", | |
| "default": "" | |
| }, | |
| { | |
| "type": "productImage", | |
| "label": "Product image", | |
| "id": "productImage", | |
| "typeMeta": { | |
| "reference": "productId" | |
| } | |
| }, | |
| { | |
| "type": "select", | |
| "label": "Image fit", | |
| "id": "productImageFit", | |
| "default": "fit", | |
| "typeMeta": { | |
| "selectOptions" : [ | |
| { | |
| "label": "Fill to box", | |
| "value": "fill" | |
| }, | |
| { | |
| "label": "Fit to box", | |
| "value": "fit" | |
| } | |
| ] | |
| } | |
| }, | |
| { | |
| "type": "alignment", | |
| "label": "Image alignment", | |
| "id": "productImageAlignment", | |
| "default": { | |
| "horizontal": "center", | |
| "vertical": "middle" | |
| }, | |
| "typeMeta": { | |
| "display": "both" | |
| } | |
| } | |
| ] | |
| } | |
| ] | |
| } | |
| ] | |
| } | |
| ] |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment