Your store is made up of numerous views that work together with client-side and server-side technologies to afford you the ability to have any kind of design for your views that you can dream of. Every site can have multiple viewsets installed, but only one viewset can be specified as the active default.
The following information is required to already be known:
- Understanding of standard web technologies like HTML, CSS, jQuery
- Understanding of Razor Syntax
If you don’t already know about Razor Syntax, that’s okay. At first it will look a bit weird, but once you get used to it, you will immediately see the power it has for you.
Your Hotcakes Commerce store will come preinstalled with a default viewset. Any site can easily use the default viewset and have a robust store. This article will give you the knowledge you need at a high level to know what viewsets are and how to use them.
If you haven’t heard of Razor Syntax, it is the primary way that dynamic content is integrated into the view. It is basically a scripting language and will look similar to PHP. Razor Syntax is being used due to how easy it is for designers to learn and to reduce the learning curve overall. If you have any questions about Razor Syntax itself, a simple web search will likely turn up the answer for you, much like you do already. You don’t have to learn a proprietary token language to design your Hotcakes Commerce store.
Your store have have as many viewsets installed as you’d like. Typically, a store will only have 2 or three. These viewsets control how the customer sees your store, so it is very important to know how they work, because having a custom viewset allows you to alter one or all of the view in the viewset to do things like:
- Change the HTML output
- Add more or less product information
- Add new client-side functionality (like additional buttons & jQuery)
- Support various client-side frameworks (like Bootstrap)
- Display information from other data sources
- And more…
The default viewset is installed in the following directory of your website.
[SITE ROOT FOLDER]\Portals\_default\HotcakesViews\_default\
IMPORTANT! Do not make any changes in the default views! If you do, you will lose your work upon upgrade.
In this folder, you will find a variety of files that work together to display information from your store. When you install your own viewsets, they will likely be in the same area. For example, if your viewset is named, HelloWorld, then the folder path might look like the example below.
[SITE ROOT FOLDER]\Portals\_default\HotcakesViews\HelloWorld\
When using viewsets, you have the ability to upload a new viewset in the Views Manager area of the store admin. Once uploaded, you can choose your new viewset to be the default to be used for all views in the store. This is referred to as the “Curent Viewset.” Though, this is only the first level of hierarchy. The full hierarchy of how you can apply custom views is shown below.
- Current Viewset – This is specified in the Views Manager. Views from this setting will be used unless one of the following three (3) settings are used.
- Product Type – You can have one or many product types. When creating a product type, you can choose a specific view to be used when products of this type are displayed to customers. This will override the current viewset.
- Product Display Template – Each product in your catalog has a field where you can choose a view to override the product type and current viewset above.
- Module Level – The Product Viewer module allows you to specify a view that will override all three (3) view settings above.
It would be a great idea to play around with the hierarchy of views in your store to get . This is especially true if you are doing things like A/B testing. Having multiple views at your disposal ensures that you can always have a way to increase sales by streamlining the design for various products and types of products. For example, if you sell books and online streaming webinars, you probably would want to display the two types of products very differently.