How toDesign Pack

Design Pack

Sana Commerce 9.0
Your connector

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:

Page layout Type Comment
Product list page ProductListPage Can be set on the user and page level.
Product details page ProductDetailsPage Can be set on the user and page level.
Search results page SearchResultsPage Can be set on the user level.
Basket page BasketPage Can be set on the user level.

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.

XML elements Description
Type Specify the page/store layout type.
The page layouts 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 are 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>
  <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:

Page view Folder
Product list page \Views\Default\ProductList
Product details page \Views\Default\Product
Search results page \Views\Default\ProductList
Basket page \Views\Default\Basket

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.

How toDesign Pack