TABLE OF CONTENTS

• Introduction
  • Example Scenario
  • Register CMS Functionality in Admin
  • Side Panel Tabs Overview
  • Configuring the Side Panel Tabs
  • How to enable the CMS widget editing options

Introduction

This article is an overview of setting up the themes folder in order to be used in both the Webstore and Admin applications of Znode.

Example Scenario

The Webstore and Admin application need to share the same files within the Themes folder as this folder will contain important files for components such as Banners & Widgets that are shared between the Webstore and Admin application.

For example, the following Banner Slider is managed both in the Webstore and Admin applications,

1. In the Webstore application project, the Banner Slider can be found in the following directory:
   1. \Znode.Engine.WebStore\Views\Themes\B2B\Views\Home_HomeContent.cshtml
      
   2. In the native B2B theme, this Banner is displayed on the webstore in the following manner:
      
2. The same Banner Slider widget code is needed in the Admin project to allow dynamic content to be managed. In the Admin application project, the Banner slider can be found in the following directory:

   1. \Znode.Engine.Admin\Themes\B2B\Views\Home_HomeContent.cshtml

Note: In the above scenario, B2B will be replaced by the name of your custom theme.

Register CMS Functionality in Admin

There are two options for keeping the files in these folders synchronized.

1. Manual Process of copying and pasting files when updated
2. Creating a symbolic link

Both processes essentially do the same thing, meaning once the following folders have been properly setup between the Webstore and Admin folders,

1. Copy the “Themes” folder found in the Webstore Directory
   1. \Znode.Engine.WebStore\Views\Themes
2. Place the “Themes” folder into the Admin Directory
   1.  \Znode.Engine.Admin\
3. Verify the Webstore and Admin directory have the same “Themes” folder

It can be a time-consuming and repetitive process to always manually copy over the theme files into the exact directories between the Znode.Engine.Admin & Znode.Engine.Webstore projects. The most efficient approach is to create a symbolic link between the Webstore and the Admin theme directories, which will take care of all the files that need to be copied. It is also recommended to use source control to manage the templates and not rely on uploading/editing templates through the admin. Checking the templates into source control and deploying them will solve most cases of a mismatch.

Side Panel Tabs Overview

Once the webstore and admin view as outlined in previous steps, the native side panel functionality will become available.

The general arrangement of tabs and available child tabs in the Store Experience section is in alphabetical order based on the display name of the tabs. There are a few exceptions to this rule. The following tabs have a fixed order and will always display at the top of the tab list and in the following order:

1. General Settings
2. Product Page
3. Product Recommendations
    

Note:  By default, all tab groups are collapsed.

Configuring the Side Panel Tabs

The tabs in this section represent parts of the storefront theme that have configurable areas or widgets. Other than the first three tabs that are static, these tabs that show in this section are derived from the theme files and the Admin_Resources.resx file. For example, the screenshot below shows an example of a theme directory and a section of the Admin_Resources.resx file.

           

Let's consider the example of “Brand”. First, we check the configurable widgets list (Brand list, Brand List Header, Brand Products, FilterBrandList) with the view in the brand folder, further it will compare the associated widgets with the configurable widget from the list (Brand List, Brand Products), if the associated widget is configurable then the widget is added to the tab list as shown in following image i.e. Brand.

When Brand is clicked, a list of all available configurable widgets will be displayed.

Below are some additional points regarding the logic used to determine what and how tabs get displayed.

• We pass a List (lstAreas) which is called by Method Named GetConfigurableWidget in widgetHelper.
• The GetConfigurableWidget method returns the Organized List of CMSWidgetsViewModel which contains all the fields and tabs that need to be shown in the side panel.
• The parentDirectoryList and child List returns a sorted list from the widget helper which will run the for loop the show the widgets in the required order and sequence for the parent as well as child tab.
• Keys have been added in the Admin_Resources.resx file so the tab names can be changed as needed. ZnodeConstant.cs uses these keys to display the tabs.
• To change a display name for a specific tab, edits can be made in the “Admin_Resources.resx” file.
• Alphabetical sorting will be based on display names and not on the directory name for the tab groups.
• For example, if the display name for “My Brand” is changed to “Brand” then the order of the tab will change accordingly.

Please refer to Working with Widgets for more information on theme widgets.

How to enable the CMS widget editing options for hosted environments in IIS 

IIS:

• Right-click on the admin application, and select Add Virtual Directory.
  
• From the pop-up that appears, enter the Alias as "Themes" and in the Physical Path field, add the path to the Themes folder from your Webstore application.
  

Note -In case the Znode application is deployed on the Load Balancer environment or on a distributed network, then this “Themes” folder content synchronization can be done as a part of the deployment process.