Design Pack [Sana 9.1.4 & later]

Design Pack Contents and Structure

Below you can see an example of the design pack structure.

In the root directory of the design pack the following should be stored:

• The sanamanifest.xml file - This file contains package metadata (id, version, description, authors) and the list of all page and/or store layouts in the design pack. The name of the file should be 'sanamanifest.xml'.
• The content folder - You can add any files (CSS files, JavaScript files, images and icons) and page views to this folder. When you add files and page views to the content folder, you should stick to the hierarchy of the Frontend (Ready to Deploy) / Sana.Commerce.Startersite (SDK) directory of the Sana Commerce solution. It is important to keep the Sana Commerce Frontend/Startersite directory hierarchy in the design pack, because when you upload the design pack in Sana Admin, all files from the design pack are copied to the appropriate folders in the Sana Commerce frontend directory.
• The themes folder - You can add theme files to this folder which will be imported into Sana with the design pack.

Four page layouts can be created in the design pack:

When you create the design pack, all page and/or store layouts should be registered in the 'sanamanifest.xml' file.

The 'sanamanifest.xml' file must contain package metadata. There should be the <metadata> node under the <SanaPackageInfo> root node. Below is the list of all possible metadata fields.

Field	Description
id	Enter package ID. It is used as a name of a design pack and is shown in Sana Admin when the design pack is uploaded.
version	Enter package version. It should be a valid semantic version format and contain at least 3 digits - major version, minor version, patch version and optionally build version. Example: 1.0.0.0     If you update the existing design pack, you should increase the package version. The package version allows to track changes made in the design pack.
description	Enter package description. It is shown in Sana Admin, when the design pack is uploaded.
authors	Enter the author(s) of the design pack. If there are more than one, use the semicolon ';' to enter multiple authors.
minSanaVersion	The minimum Sana version which is supported by the design pack. This field is optional.
maxSanaVersion	The maximum Sana version which is supported by the design pack. This field is optional.

The 'sanamanifest.xml' file should also contain Type, Id, ViewName and Title of the page and/or store layouts that are included in the design pack.

XML elements	Description
Type	Specify the page/store layout type. The page layout types should be exactly as listed in the table above. For the store layout type you can enter anything you want.
Id	Specify the page/store layout ID. It can be anything you want.
ViewName	Specify the page/store layout view name.      It should be unique. Do not use view names of the pages that already exist in the Sana Commerce solution not to overwrite the default page views.
Title	Specify the page/store layout title. These titles will be shown in Sana Admin for page/store layout selection.

See example of the 'sanamanifest.xml' file that contains all four page layouts and one store layout:

<SanaPackageInfo>
  <metadata>
    <!-- required fields -->
    <id>PackageId</id>
    <version>1.0.0.0</version>
    <description>The description of the package</description>
    <authors>Sana Commerce</authors>
    <!-- optional fields -->
    <minSanaVersion>9.1.0</minSanaVersion>
    <maxSanaVersion>9.1.4</maxSanaVersion>
  </metadata>
   <PageLayoutInfos>
     <PageLayoutInfo>
       <Type>ProductDetailsPage</Type>
       <Id>FashionProductDetailsLayout</Id>
       <ViewName>FashionProductDetails</ViewName>
       <Title>Fashion Product Details Layout</Title>
     </PageLayoutInfo>
  <PageLayoutInfo>
       <Type>ProductListPage</Type>
       <Id>FashionProductListLayout</Id>
       <ViewName>FashionProductList</ViewName>
       <Title>Fashion Product List Layout</Title>
     </PageLayoutInfo>
  <PageLayoutInfo>
       <Type>SearchResultsPage</Type>
       <Id>FashionSearchPageLayout</Id>
       <ViewName>FashionSearch</ViewName>
       <Title>Fashion Search Page Layout</Title>
     </PageLayoutInfo>
  <PageLayoutInfo>
       <Type>BasketPage</Type>
       <Id>FashionBasketPageLayout</Id>
       <ViewName>FashionBasket</ViewName>
       <Title>Fashion Basket Page Layout</Title>
     </PageLayoutInfo>
   </PageLayoutInfos>  
   <StoreLayoutInfos>
     <StoreLayoutInfo>
       <Name>FashionStoreLayout</Name>
       <Title>Fashion Store Layout</Title>
     </StoreLayoutInfo>
   </StoreLayoutInfos>
</SanaPackageInfo>

When you add some files to the 'content' folder of the design pack, you should keep the Sana Commerce Frontend/Startersite directory hierarchy in the design pack.

If you add some page views for the page layouts, they should be put to the following location in the design pack '[design pack name]\content\Views\Default\[page view folder]', as the page views in the Sana Commerce solution are stored at: Frontend\Views\Default.

The table below provides the path to the folders where you should put the appropriate page views:

The page views for the store layout in the design pack must be stored at the following location: [design pack name]\content\Views\[store layout folder with any name]\[view folder]. The views for the store layout should be put into a separate store layout folder using any folder name in the 'Views' directory. When you add some views to the store layout folder of the design pack you should keep the '\Views\Default\' directory hierarchy of the Sana Commerce solution. This means that view files should be put into the appropriate view folders.

    You can re-use the default Sana Commerce frontend page views, if you want to change any of the page views, or create the new ones from scratch. If you want to change any of the default page views do not change the source files. Each page layout should have a unique ViewName in the 'sanamanifest.xml' file not to overwrite the default page views.

In the 'content' folder of the design pack you can create another 'content' folder and add there some CSS and JavaScript files, images and icons. Any files that you add to the following directory in the design pack '[design pack name]\content\content' should be put to the appropriate folders that correspond to the Sana Commerce frontend\content directory hierarchy.

   If you want to make some changes in the helpers, which are stored at the following location of the Sana Commerce solution: Frontend\Views\Default\Helpers, it is also required to copy the 'Web.config' file from the Sana Commerce solution to the design pack.