Lab - Widget Template

Plan: Stencil Developer

Lesson 7 of 22 · 15 min

In this lab you will

  • Create a widget template using Postman

Prerequisites

  • BC Sandbox
  • API credentials for the store (Content: Modify)
  • Postman installed
  • Widgets API collection

Create a Widget Template

Create a widget template using Postman

  1. Navigate to the ‘Widget Templates > Create’ directory in the ‘V3 Widgets API’ collection in the ‘Collections’ pane on the left side of the Postman window
  2. Click the ‘Create’ post request
  3. Select the ‘Body’ tab in the main content window in Postman
  4. Update the content in the body to the following:
{
"name": "Slider Template",
"template": "<ul class=\"slider\">\n{{#each slides}}\n<ul class=\"slide\"><img class=\"mySlides\" src=\"{{image}}\"/></ul>\n{{/each}}\n</ul>\n<script>\nvar slideIndex = 0;\ncarousel();\nfunction carousel() {\nvar i;\nvar x = document.getElementsByClassName(\"mySlides\");\nfor (i = 0; i < x.length; i++) {\nx[i].style.display = \"none\"; \n}\nslideIndex++;\nif (slideIndex > x.length) {slideIndex = 1} \nx[slideIndex-1].style.display = \"block\"; \nsetTimeout(carousel, 4000); // Change image every 4 seconds\n}\n</script>",
"schema": []
}

Templates are submitted in JSON format. When creating your own templates, make sure your HTML, CSS, and JavaScript are properly escaped.

  1. Click the ‘Send’ button at the top right of the Postman window
  2. Copy the Widget Template UUID from the response section at the bottom of the Postman window (this UUID will be used in the next lab)