WEBVTT 00:00:00.000 --> 00:00:10.600 Hi. Welcome to XMPie. In this video we look at several sample widgets that are available to add features to the default uStore theme UI. 00:00:10.600 --> 00:00:17.300 XMPie has created some sample widgets that are now in beta for you to download and use. 00:00:17.300 --> 00:00:25.033 You can find them in the uStore NG wiki on GitHub. Scroll down and click the widgets link. 00:00:25.033 --> 00:00:35.633 Each of the sample widgets has two download links. The first is the completed widget which is the file we need to upload into uStore admin. 00:00:35.633 --> 00:00:41.399 The second link gives you the SDK or source code that was used to create the widget, 00:00:41.400 --> 00:00:46.133 so that developers can see how to create their own custom widgets. 00:00:46.133 --> 00:00:54.399 These are the first widgets available: The Home Page Banner widget provides an alternative to the built-in home page banner. 00:00:54.400 --> 00:01:01.033 The Featured Products widget presents products that you select with an adjustable look and feel. 00:01:01.033 --> 00:01:09.199 As its name suggests, the Custom HTML and CSS widget allows you to add custom HTML to the storefront 00:01:09.200 --> 00:01:13.166 making it useful for many different tasks. 00:01:13.166 --> 00:01:16.799 The Featured widget is similar to Featured Products one, 00:01:16.800 --> 00:01:24.166 but can be used for any URL while Featured Products is designed to work only with products and product groups. 00:01:24.166 --> 00:01:30.366 Let’s take a closer look. After downloading the widgets, browse to your uStore admin. 00:01:30.366 --> 00:01:39.799 Go to presets, and on the widget tab, click upload widget, and select the zip. I’ll add them all while I am here. 00:01:39.800 --> 00:01:42.500 00:01:42.500 --> 00:01:45.666 Make the widget active. 00:01:45.666 --> 00:01:48.366 00:01:48.366 --> 00:01:51.632 Now go to the store where you want to use the widget. 00:01:51.633 --> 00:01:56.033 From the store settings dropdown, select customize theme. 00:01:56.033 --> 00:01:59.266 Click widgets, and add widget. 00:01:59.266 --> 00:02:05.532 Turn the widget on. Select the widget and select where you want it to appear. 00:02:05.533 --> 00:02:11.666 So, now we have the widget appearing in the preview, we need to do two things: first, 00:02:11.666 --> 00:02:21.332 customize the settings to show the images and texts that we want. And second, hide the default banner. Let’s do that first. 00:02:21.333 --> 00:02:25.999 Close the widget configuration and open the Custom CSS. 00:02:26.000 --> 00:02:32.900 All we need to do is enter: .promotion-item {display:none;} 00:02:32.900 --> 00:02:36.200 00:02:36.200 --> 00:02:39.600 Now back to the widget configuration. 00:02:39.600 --> 00:02:46.433 When you hover the mouse pointer over the help icon, you will see information about each of the parameters. 00:02:46.433 --> 00:02:52.233 At the top are general settings. For example, I can remove the top and bottom margin, 00:02:52.233 --> 00:02:58.033 keep each slide on screen for a longer time, and change the banner height. 00:02:58.033 --> 00:02:59.733 00:02:59.733 --> 00:03:05.866 Just click outside of the configuration box when you want the preview to update to check your work. 00:03:05.866 --> 00:03:08.132 00:03:08.133 --> 00:03:14.299 Then each of the slides has its own configuration, and you can add additional slides as needed. 00:03:14.300 --> 00:03:19.433 The settings for the texts, color and size are self-explanatory. 00:03:19.433 --> 00:03:27.399 You can control the location or position of the overlaying text with left, right or middle. 00:03:27.400 --> 00:03:33.733 And there are three different animation styles that you can select with 1, 2 or 3. 00:03:33.733 --> 00:03:43.266 The cta or call to action parameters control the button including the link or URL where the user is directed when they click the button. 00:03:43.266 --> 00:03:48.466 Here is the final result after making all the settings for my store. 00:03:48.466 --> 00:03:58.666 00:03:58.666 --> 00:04:03.032 I’ll rename this carousel and add another widget. 00:04:03.033 --> 00:04:09.066 00:04:09.066 --> 00:04:15.032 This time I will use the Custom HTML and CSS widget in the footer. 00:04:15.033 --> 00:04:19.533 00:04:19.533 --> 00:04:26.266 This widget takes two parameters: htmlContent and linkStyleHrefs. 00:04:26.266 --> 00:04:34.866 If you need to add links to external CSS files, you can list them in this string array and the widget will load the styles correctly. 00:04:34.866 --> 00:04:37.732 In my case it is not needed. 00:04:37.733 --> 00:04:46.199 The htmlContent needs to return one HTML object. In the example, it is a single div. 00:04:46.200 --> 00:04:52.900 The example also shows that your HTML can include inline styles with a style tag. 00:04:52.900 --> 00:04:58.633 I have some HTML already prepared and can paste it in, to setup my footer. 00:04:58.633 --> 00:05:05.499 00:05:05.500 --> 00:05:12.200 Now, remember that a widget can be used in multiple places, and with the same or different configuration. 00:05:12.200 --> 00:05:18.766 So, I can add another HTML and CSS widget to create a banner advertisement. 00:05:18.766 --> 00:05:45.132 00:05:45.133 --> 00:05:51.299 For the Featured Products widget, you might want to show that at the bottom of the cart page. 00:05:51.300 --> 00:05:55.433 00:05:55.433 --> 00:06:01.833 To see the widget, I will need to add something to the cart, and click to the cart page. 00:06:01.833 --> 00:06:04.433 00:06:04.433 --> 00:06:14.266 You can easily show all products in a group by setting the group id here, or individual product ids in this integer array. 00:06:14.266 --> 00:06:22.266 00:06:22.266 --> 00:06:30.732 The Featured widget is similar, so I will turn off the Featured Products widget and add this one to the same location. 00:06:30.733 --> 00:06:34.133 00:06:34.133 --> 00:06:40.133 For this widget, instead of getting the links and images from the uStore product or product group, 00:06:40.133 --> 00:06:47.966 the configuration allows you to set the exact URL and images that you need.