Skip to content

Instantly share code, notes, and snippets.

@loganwoolf

loganwoolf/json.json

Last active February 24, 2023 15:45
Show Gist options
  • Save loganwoolf/956d0bd27762946fad26f1ad20f628bd to your computer and use it in GitHub Desktop.
Save loganwoolf/956d0bd27762946fad26f1ad20f628bd to your computer and use it in GitHub Desktop.
Download ZIP
BC Widget Code Snippets
Raw
json.json
{
// Place your snippets for json here. Each snippet is defined under a snippet name and has a prefix, body and
// description. The prefix is what is used to trigger the snippet and the body will be expanded and inserted. Possible variables are:
// $1, $2 for tab stops, $0 for the final cursor position, and ${1:label}, ${2:another} for placeholders. Placeholders with the
// same ids are connected.
// Example:
// "Print to console": {
// "prefix": "log",
// "body": [
// "console.log('$1');",
// "$2"
// ],
// "description": "Log output to console"
// }
"BC Widget Schema": {
"prefix": "widget",
"description": "Widget skeleton",
"body": [
"{",
"\t\"name\": \"${1:widget name}\",",
"\t\"template\": \"<html>\",",
"\t\"schema\": [",
"\t\t{",
"\t\t\t\"type\": \"tab\",",
"\t\t\t\"label\": \"Content\",",
"\t\t\t\"sections\": [",
"\t\t\t\t{",
"\t\t\t\t\t\"label\": \"${2:optional label}\",",
"\t\t\t\t\t\"settings\": [",
"\t\t\t\t\t\t{}",
"\t\t\t\t\t]",
"\t\t\t\t}",
"\t\t\t]",
"\t\t},",
"\t\t{",
"\t\t\t\"type\": \"array\",",
"\t\t\t\"label\": \"Slides\",",
"\t\t\t\"id\": \"slides\",",
"\t\t\t\"defaultCount\": 3,",
"\t\t\t\"entryLabel\": \"Slide Image\",",
"\t\t\t\"thumbnail\": \"image\",",
"\t\t\t\"schema\": [",
"\t\t\t\t{",
"\t\t\t\t\t\"type\": \"tab\",",
"\t\t\t\t\t\"label\": \"Content\",",
"\t\t\t\t\t\"sections\": [",
"\t\t\t\t\t\t{",
"\t\t\t\t\t\t\t\"label\": \"optional label\",",
"\t\t\t\t\t\t\t\"settings\": [",
"\t\t\t\t\t\t\t\t{}",
"\t\t\t\t\t\t\t]",
"\t\t\t\t\t\t}",
"\t\t\t\t\t]",
"\t\t\t\t}",
"\t\t\t]",
"\t\t}",
"\t]",
"}"
]
},
"BC Widget UI Alignment": {
"prefix": "alignment",
"description": "widget alignment controls",
"body": [
"\"type\": \"alignment\",",
"\"label\": \"Image alignment\",",
"\"id\": \"imageAlignment\",",
"\"default\": {",
"\t\"horizontal\": \"center\",",
"\t\"vertical\": \"middle\"",
"},",
"\"typeMeta\": {",
"\t\"display\": \"both\"",
"}",
]
},
"BC Widget UI Boolean": {
"prefix": "boolean",
"description": "widget boolean controls",
"body": [
"\"type\": \"boolean\",",
"\"label\": \"Display video controls\",",
"\"id\": \"displayControls\",",
"\"default\": true",
]
},
"BC Widget UI Box Model": {
"prefix": "box model",
"description": "widget box model controls",
"body": [
"\"type\": \"boxModel\",",
"\"label\": \"Margin\",",
"\"id\": \"productCardMargin\",",
"\"default\": {",
"\t\"top\": {",
"\t\t\"value\": \" 0\",",
"\t\t\"type\": \"px\"",
"\t},",
"\t\"right\": {",
"\t\t\"value\": \"10.5\",",
"\t\t\"type\": \"px\"",
"\t},",
"\t\"bottom\": {",
"\t\t\"value\": \" 0\",",
"\t\t\"type\": \" px\"",
"\t},",
"\t\"left\": {",
"\t\t\"value\": \"10.5\",",
"\t\t\"type\": \"px\"",
"\t}",
"}"
]
},
"BC Widget UI Code": {
"prefix": "code",
"description": "widget code input",
"body": [
"\"type\": \"code\",",
"\"id\": \"htmlCode\",",
"\"label\": \"HTML Code\",",
"\"default\": \"<div>html code can go here</div>\",",
"\"typeMeta\": {",
"\t\"language\": \"html\",",
"\t\"placeholder\": \" Insert HTML code here\"",
"}"
]
},
"BC Widget UI Color": {
"prefix": "color",
"description": "widget color picker",
"body": [
"\"type\": \"color\",",
"\"label\": \"Background color\",",
"\"id\": \"backgroundColor\",",
"\"default\": \"#444444\""
]
},
"BC Widget UI Element Settings": {
"prefix": "element",
"description": "widget element settings",
"body": [
"\"type\": \"element\",",
"\"label\": \"Box\",",
"\"id\": \"textBox\",",
"\"typeMeta\": {",
"\t\"controls\": {",
"\t\t\"visibility\": {\"default\": \"show\"},",
"\t\t\"advanced\": {",
"\t\t\t\"settings\": []",
"\t\t}",
"\t}",
"}"
]
},
"BC Widget UI Image Manager": {
"prefix": "image manager",
"description": "widget image picker",
"body": [
"\"type\": \"imageManager\",",
"\"id\": \"imageUrl\",",
"\"default\": {",
"\t\"src\": \"https://via.placeholder.com/350x150.jpg\",",
"\t\"type\": \"IMAGE_MANAGER\"",
"}"
]
},
"BC Widget UI Input Field": {
"prefix": "input",
"description": "widget input",
"body": [
"\"type\": \"input\",",
"\"label\": \"Alt text\",",
"\"id\": \"altText\",",
"\"default\": \"A cool grey shirt\""
]
},
"BC Widget UI Number Input": {
"prefix": "number",
"description": "widget number",
"body": [
"\"type\": \"number\",",
"\"label\": \"Font size\",",
"\"id\": \"fontSize\",",
"\"default\": {",
"\t\"value\": \"24\",",
"\t\"type\": \"px\"",
"},",
"\"typeMeta\": {",
"\t\"parseType\": \"integer\"",
"}"
]
},
"BC Widget UI Product ID": {
"prefix": "product id",
"description": "widget product picker",
"body": [
"\"type\": \"productId\",",
"\"label\": \"Product\",",
"\"id\": \" productId\",",
"\"typeMeta\": {",
"\t\"placeholder\": \"Search by name or SKU\"",
"}"
]
},
"BC Widget UI Product Image": {
"prefix": "product image",
"description": "widget product image picker",
"body": [
"\"type\": \"productImage\",",
"\"label\": \"Product Image\",",
"\"id\": \"productImage\",",
"\"typeMeta\": {",
"\t\"reference\": \" productId\"",
"}"
]
},
"BC Widget UI Range Selector": {
"prefix": "range",
"description": "widget range slider",
"body": [
"\"type\": \"range\",",
"\"label\": \"Line width\",",
"\"id\": \"lineWidth\",",
"\"default\": 100,",
"\"typeMeta\": {",
"\t\"rangeValues\": {",
"\t\t\"min\": 0,",
"\t\t\"max\": 100,",
"\t\t\"step\": 1,",
"\t\t\"unit\": \"%\"",
"\t}",
"}"
]
},
"BC Widget UI Regex Input": {
"prefix": "regex",
"description": "widget regex input",
"body": [
"\"type\": \"regexInput\",",
"\"label\": \"Video URL (YouTube or Vimeo)\",",
"\"id\": \"videoUrl\",",
"\"default\": \"\",",
"\"typeMeta\": {",
"\t\"placeholder\": \" https://\",",
"\t\"regExPatterns\": [",
"\t\t{",
"\t\t\t\"pattern\": \"(vimeo|youtube|youtu)\",",
"\t\t\t\"matchIndex\": 0,",
"\t\t\t\"configKey\": \"type\"",
"\t\t}",
"\t]",
"}"
]
},
"BC Widget Select Element": {
"prefix": "select",
"description": "widget select",
"body": [
"\"type\": \"select\",",
"\"label\": \"Image height (px)\",",
"\"id\": \"imageHeight\",",
"\"default\": \"auto\",",
"\"typeMeta\": {",
"\t\"selectOptions\": [",
"\t\t{",
"\t\t\t\"label\": \"left\",",
"\t\t\t\"value\": \"left\"",
"\t\t},",
"\t\t{",
"\t\t\t\"label\": \"right\",",
"\t\t\t\"value\": \"right\"",
"\t\t}",
"\t]",
"}"
]
},
"BC Widget Text Element": {
"prefix": "text",
"description": "widget text box",
"body": [
"\"type\": \"text\",",
"\"label\": \"Body text\",",
"\"id\": \"bodyText\",",
"\"default\": \"This is some text.\""
]
},
"BC Widget Typography Element": {
"prefix": "typography",
"description": "widget typography",
"body": [
"\"type\": \"typography\",",
"\"label\": \"Text style\",",
"\"id\": \"textStyle\",",
"\"default\": \"default\",",
"\"typeMeta\": {",
"\t\"conditionalSettings\": [",
"\t\t{",
"\t\t\t\"condition\": \"default\",",
"\t\t\t\"settings\": []",
"\t\t},",
"\t\t{",
"\t\t\t\"condition\": \"custom\",",
"\t\t\t\"settings\": []",
"\t\t}",
"\t]",
"}"
]
},
"BC Widget Visibility Toggle": {
"prefix": "visibility",
"description": "widget visibility",
"body": [
"\"type\": \"visibility\",",
"\"label\": \"Button\",",
"\"id\": \"buttonVisibility\",",
"\"default\": \"show\""
]
},
}
@loganwoolf
Copy link
Author

VSCode snippets for creating BigCommerce widget UIs in schema.json

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment