Design Pack

Design Pack Contents and Structure

On the screenshot below you can see how the contents of the design pack should be structured in NuGet Package Explorer.

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

• The sanamanifest.xml file - This file contains the list of all page and/or store layouts in the design package. 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 any 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 package, because when you upload the design package in Sana Admin all files from the design package are copied to the appropriate folders in the Sana Commerce frontend directory.

Four page layout types can be created in the design package:

When you create the design package all page and/or store layouts should be registered in the 'sanamanifest.xml' file that should be added to the root directory of the package.

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

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

<SanaPackageInfo>
  <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 package you should keep the Sana Commerce Frontend / Startersite directory hierarchy in the design package.

If you add some page views for the page layouts, they should be put to the following location in the design package '[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 package should 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 package 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 reuse 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 package 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 package '[design pack name]\content\content' should be put to the appropriate folders that correspond to the Sana Commerce frontend\content directory hierarchy.