Search

Index

Revindex Storefront

Display Templates

Last updated on 2023-08-08 4 mins. to read

All the Revindex Storefront module controls use the native DNN container skins so you have a consistent look across your Web site that you can modify from your normal Manage > Themes page. The user interface design follows the Bootstrap 3 and 4 and DNN UX Guide standards so that it can be modified easily in a consistent manner across your site. In addition, the content and internal look-and-feel of public facing module controls can be customized per portal.

Creating a new display template

You must first enable the Display templates feature under Configuration > General. Once enabled, you can create display templates from the Configuration > Display templates menu. For example, you can customize the Product Detail module to change the layout, color, font, CSS style, add text and images.

Click Add new and choose the module you wish to customize. Give it a meaningful name (e.g. “FeaturedList1”). You now need to choose a Base display template as a starting point. Note, you should choose base templates of the Razor type. Older templates of type WebForms are obsolete and should not be used. The base template you selected provides the programming logic for your new template.  Make the HTML, Razor or Javascript changes needed to your new template. For security to prevent unauthorized access to data, you cannot modify any server-side code unless it is explicitly allowed by your Host user under Configuration > Security settings. Server-side code is usually any code that is in between @{ } and <% %> tags. Once saved, your new custom template is now ready to be used.

 

Always start by making small incremental changes, save and view your changes you just made. Once you get comfortable, go back, repeat and make more changes. It’s also a good practice to write HTML comments next to your line edits so you remember what changed.

<!-- This is a comment ignored by the browser... Changed layout to show a darker color -->
<div style="background-color:darkred">

 

If you want syntax highlighting, you may prefer to copy the code into a local file and edit it using the free Microsoft Visual Studio. See How to edit template in Visual Studio for more information.

Once you have saved your changes, you need to tell the system to use this new template (either portal-wide, module-wide or for a specific product only). For example, if you created a new custom template for the Product Detail module, you can change the default template portal-wide under Display template in the Configuration > Product detail menu. Please note you must first enable the Product detail feature under Configuration > General to access this functionality. You could also change the default template module-wide under the module’s Settings. Alternatively, you can configure your individual product to use this new custom template in place of any of the portal or module default template.

Template life cycle

We live in a period of time where technology changes very quickly introducing us to new and exciting ways to do things. Our commitment is to keep base display templates active for 2 or more years when possible. In the past, some of our base templates have endured for over 6 years. To help with changes, as the software evolves, new features introduced in base display templates carry a different version number (e.g. “Standard1”, “Standard2”, “Standard3”) providing an upgrade path for users who are not ready to upgrade their custom template. Base display templates that have become obsolete will eventually be removed from future versions. Custom display templates based on these removed templates will no longer function. You are, therefore, encouraged to continuously upgrade any custom templates to use the latest base display templates as they become available to avoid disruption to your site.

Razor Markup

Razor is one of the most popular server-side markup code that is easy to learn. By consuming structured models, you can generate highly complex HTML code easily. Learning Razor is beyond the scope of this topic. However, there are many Razor tutorials and help online to get you started.

To reference another file within the same folder, you can use the Razor @VirtualPath property. For example, to reference a script located in the same folder, you can use src="@VirtualPath/Include.js".

Bootstrap

Bootstrap is the most popular CSS standard for typography, forms, buttons, navigation and other interface components used by millions of sites. The CSS standard makes it easy to customize changes elements of a page. There are countless tutorials for Bootstrap. A good tutorial to start learning Bootstrap can be found here.

Javascript

In modern Web development, pages are rarely static. To create stunning dynamic effects, the display templates rely heavily on a combination of jQuery and KnockoutJS framework. Learning Javascript is beyond of the scope of this topic, however, there are countless tutorials online that can get you learning Javascript quickly.

Comments


Powered by Revindex Wiki