Sign Up
  1. Znode
  2. Solution home
  3. Developer Documentation - V9
  4. Theme Development - V9

Working with Widgets

TABLE OF CONTENTS

Introduction

Widgets (a.k.a Control Elements) are reusable blocks of code that can be configured without the help of a developer to serve various functions... but mainly to create Content for Pages. In Znode, Widgets are a part of an out-of-box Webstore's Display Settings. These widgets can meet most requirements without any additional modifications. But, as part of the "Default" Site Theme base template, Widgets can be customized-- at the code level-- to meet any custom requirements.

Example: Advertisement Banner widget can be used/reused to display a "Deal of the Day" or "Black Friday" sales from a Stores homepage.

Widget Types

In the "Widgets" subfolder, there are two types of Widgets: Configurable and Non-configurable.

Configurable Widgets

Configurable Widgets are those which can be configured from the Znode Admin. In the Znode Admin, a "Configure" button will indicate which Widgets are configurable.

Example: If we want two Banner Slider Widget on a single page, we would need to insert the syntax of the "Banner Slider" widget, twice, on a single page. In this case, the images used for both sliders could be different.

Non-configurable Widgets

Non-configurable Widgets are those which can’t be configured from the Znode Admin. Modifying or configuring non-configurable widgets requires explicit development. It is required to make changes to the source code in order to modify the currently used non-configurable widgets. The same non-configurable widget can be used in multiple views to display the same content on the webstore.

Widget Syntax

<z-widget>@Html.WidgetPartial( "Widget Name" , "Widget Display Name" , "Widget Key" , "Portal Mapping Type" , "Portal Id" )</z-widget>


  • Widget Code - Identifies the type of widget and is used as a key to render that widget.
  • Display Name - Name of the widget.
  • Widget Key - The purpose of widget is reusing a control on multiple pages. In order to use the same widget on different pages, we need a differentiating key which is the widget key. If we want to render the above widget, an offer banner, on a different page then we need to use a different unique widget key.(Numeric Value)
  • Type of Mapping - Portal Mapping, Content Page Mapping, etc.
  • Mapping Id - Id of Mapping depending upon whether it is portal mapping or content page mapping.
Example: The below example renders a widget to display the offer banner. The required parameters to render a widget are:
<z-widget>@Html.WidgetPartial("OfferBanner", "AdvertisementBanner", "110", ZnodeCMSTypeofMappingEnum.PortalMapping.ToString(), portalId)</z-widget>


Widget Subfolder

Download the " Default" Site Themes > Unzip > "View" folder > "Shared" subfolder > "Widget"

Insert a Configurable Widget

The "Configure" button indicates which Widgets are Configurable.

Inline Preview Widget Configuration

Default Preview Widget Configuration

The steps to insert a Configurable Widget are the same, regardless of which configurable widget is being inserted. In this example, we're adding a "Banner Slider" being inserted into the Home Page.

  1. Navigate to the Site Theme section of CMS
  2. Use the "Download" action on the "Default" theme. This download is your base template as a .zip folder.
  3. Once the "Default" theme is downloaded, unzip "Default" theme folder.
  4. In the "Shared" folder, locate the "_WidgetBannerSlider.cshtml" inside the "Widgets" subfolder.
  5. In the "Views" subfolder, add the Banner Slider Widget code into the file "Home.cshtml", located in the subfolder "Home".
    <z-widget>@Html.WidgetPartial("BannerSlider", "Slider", "555", ZnodeCMSTypeofMappingEnum.PortalMapping.ToString(), portalId)</z-widget>
  6. Configure the Widget from the Admin ("Home Page" tab of Display Settings) and it will appear on the webstore.
  7. Configurable Widget is now inserted

Configurable Widgets

.CSHTML - Base Site Theme Template > Shared > Widget > .cshtml files

.SCSS - Base Site Theme Template > Content > Sass > Widgets > .scss files

BannerSlider

<z-widget>@Html.WidgetPartial("BannerSlider", "Slider", "555", ZnodeCMSTypeofMappingEnum.PortalMapping.ToString(), portalId)</z-widget>


OfferBanner

<z-widget>@Html.WidgetPartial("OfferBanner", "AdvertisementBanner", "110", ZnodeCMSTypeofMappingEnum.PortalMapping.ToString(), portalId)</z-widget>

<z-widget>@Html.WidgetPartial("OfferBanner", "AdvertisementBanner", "110", ZnodeCMSTypeofMappingEnum.PortalMapping.ToString(), portalId)</z-widget>


ProductList

<z-widget>@Html.WidgetPartial("ProductList", "Top Featured Products", "668", ZnodeCMSTypeofMappingEnum.PortalMapping.ToString(), portalId) </z-widget>


CategoryList

<z-widget>@Html.WidgetPartial("CategoryList", "Category List", "1992", ZnodeCMSTypeofMappingEnum.PortalMapping.ToString(), portalId)</z-widget>


BrandList

<z-widget>@Html.WidgetPartial("BrandList", "Brand List", "9657", ZnodeCMSTypeofMappingEnum.PortalMapping.ToString(), portalId)</z-widget>


LinkPanel

<z-widget>@Html.WidgetPartial("LinkPanel", "SocialMedia", "222", ZnodeCMSTypeofMappingEnum.PortalMapping.ToString(), portalId)</z-widget>


TextEditor

<z-widget>@Html.WidgetPartial("TextEditor", "Advertisment", "5557", ZnodeCMSTypeofMappingEnum.PortalMapping.ToString(), portalId)</z-widget>


TemplateLinkPanel

<z-widget>@Html.WidgetPartial("TemplateLinkPanel", "CategoryLinks", "976672", "ContentPageMapping", (int)ViewBag.contentPageId)</z-widget>


TemplateTextEditor

<z-widget>@Html.WidgetPartial("TemplateTextEditor", "TemplateTitle", "9096", "ContentPageMapping", (int)ViewBag.contentPageId)</z-widget>


Non-configurable Widgets

The implementation of the non-configurable widgets is the same, regardless of which non-configurable widget is being implemented. In this example, we're adding a "Customer Support" in the Footer section.

  1. In the "Views -> Shared -> Widget -> Widgetpartial" folder, add the Customer Support Widget code into the file "_Footer.cshtml".
    <z-widget>@Html.WidgetPartial("CustomerSupport", "CustomerSupport", "109", ZnodeCMSTypeofMappingEnum.PortalMapping.ToString())</z-widget>
  2. Customer Support data will directly appear on the webstore.

Note- If the content coming from a non-configurable widget has to be modified, source code changes are required.


Base Site Theme Template > Shared > Widget > .cshtml files

Base Site Theme Template > Content > Sass > Widgets > .scss files

  • Facet - Single-Select or Multi-Select Attributes, which have Detail "Is Use for Facets" enabled, can be used in conjunction with the Facet Widget to create Facets on a page
  • CategoryGrid - Used on the Category Landing page
  • ProductGrid - Used on Product Landing Page, Search Results Page, Brand Landing Page
  • RecentlyViewProduct - Used on Home Page, PDP, Brands, and Category Pages
  • LinkProductList - Seen on PDP of Product associated with Add-On Group
  • QuickView - Shown on all pages which display Products
  • Header - Shown on all Content Pages
  • TagManager - Used to manage Meta Tags in Layout
  • Footer - Shown on all Content Pages
  • NewsLetter - In Footer, used to register an email with Newsletter
  • CustomerSupport - In Footer and used to display detail for Store Contact Information
  • Locales - Used in Header to change Customer Locale in Webstore
  • SearchPanel - Used in Header to search Catalogs for matching text
  • QuickOrder - Used in Header to quickly browse Catalogs by SKU
  • TopLevelNavigation - Used in Header to navigate within Webstore Categories

Did you find it helpful? Yes No

Send feedback
Sorry we couldn't be helpful. Help us improve this article with your feedback.

Theme Development - V9