Widgets

From Znode Knowledge Base
Jump to: navigation, search

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 Multifront, 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 Multifront Admin. In the Multifront 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 Multifront Admin.

Widget Syntax

Widgetsyntax.png

<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.

The steps to insert a Configurable Widget are the same, regardless of which configurable widget is being inserted. In this example, we're adding an "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 its will appear on 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>
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

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 a Facets on a page.
  • CategoryGrid - Used on 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 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.

Related Links