!! LeafCatAndOneProduct

We're going to be converting all of the product categories on the site to the LeafCatAndOneProduct display template.

We wont be using the LeafCatAndOneProduct (USE ME) template.

Everyone on the design team will need to know what and how the LeafCatAndOneProduct displays on screen.

The LeafCatAndOneProduct display template is designed to be as 'hands-off' as possible. However, it's also designed to allow editing wherever it may needed. Though it's named as if it is only meant for a single product, it will also be used for pages with mutiple products.

First, understand the difference between a product and a SKU. 'Product' refers to a group of SKUs. 'SKU' refers to a specific part number in a product line.

Example: Superlift Suspension Lift is a Product. Part number 199-K414 is a SKU in the Superlift Suspension Lifts Product line.

Generally, all data displayed in a LeafCatAndOneProduct category comes directly from the SKU(s) that it contains.

Above the Fold
Below the Fold
Product MarketCopy
Digital Assets
Converting Leaf Categories
Adding YMM to a SKU

Above the Fold

'Above the Fold' refers to content that is displayed upon loading a page and before scrolling. It also refers to content contextually previous to the Add-to-Cart button.

The Gallery is automatically dynamically created from digital assets when the SKUs are imported through the PIEs system.
Click here or click the tab above labeled Digital Assets to learn how to create a gallery or add an image to an existing gallery.
Description 2 content is generated from the 'Description 2' field in the category administration. This field is not automatically created with the PIEs imports and must be added and edited through the category administration.
The only allowable html elements in the 'Description 2' field will be for paragraph and break tags (<p></p>, <br>). We will no longer be using html in the Description 2 field. The Description 2 field is intended to be used for a brief blurb of content for above-the-fold SEO.
Product MarketCopy content is generated from information contained in the selected SKU's 'Product MarketCopy' field, which is editable in the product administration.
Here again, only minimal HTML elements will be allowed. The only allowable html elements in the 'Product MarketCopy' field will be for bold text, paragraphs and lists (<b>, <p></p>, <ul><li></li></ul>). Product details and information will be generated by fields in the SKU below-the-fold.

Click here or click the tab above labeled Product MarketCopy to learn about managing and editing Product MarketCopy.
The Brand Logo is automatically generated.
The 'point-of-purchase' or 'POP' section contains all of the vehicle selection, product options, price, add-to-cart button etc. and other customer UI items. This section is not editable.

Below the Fold

'Below the Fold' refers to content that is displayed below or after the Add-to-Cart button or 'POP' section.

The Dynamic Product Information section is a set of tabs that are hidden by default. These tabs display SKU-specific information and will change as different SKUs are selected in the drop-down. When there is data for the corresponding field in the product administration, a tab will be automatically generated for it.
Editable fields for the Dynamic Product Information section are found in the product administration. These fields will be automatically populated with content by imports through the PIEs system, however, if a SKU lacks data that we have and can provide, we can add or edit it through the product administration.

Click here or click the tab above labeled Product MarketCopy to learn how to edit or add information in the Dynamic Product Information section
The Description 3 section is just what it appears to be. This field is not automatically created with the PIEs imports and must be added and edited through the category administration.
We will still use the desc-3-flex-container architecture in the Description 3 field. Description 3 is the only place where 'extra' yet specific html is allowed on a LeafCatAndOneProduct page.

The above-the-fold Product MarketCopy section and the below-the fold Dynamic Product Information sections are intended to be populated by PIEs imports and meant for special SKU-specific information. HTML elements in these fields will be limited to paragraph tags (<p></p>), bold tags (<b></b>), break tags (<br>), link tags (<a></a>) and list tags (<ul><li></li></ul>).

Product MarketCopy

Fig 1. Product MarketCopy
This section is SKU-specific data that is automatically generated through PIEs imports. It can be edited through the product administration in the field shown in Fig 1.

Dynamic Product Information

Fig 2. Dynamic Product Information : Product Details
This section is SKU-specific data that is automatically generated through PIEs imports. It can be edited through the product administration in the field shown in Fig 2.
Allowable html: desc-3-flex-container structure.
Fig 3. Dynamic Product Information : Product Warranty
This section is SKU-specific data that is automatically generated through PIEs imports. It can be edited through the product administration in the field shown in Fig 3.
Use only basic link html code in this field too link to the manufacturer website warranty page. Special cases such as an html block of warranty information will need to be approved.
Fig 4. Dynamic Product Information : Product Installation
This section is SKU-specific data that is automatically generated through PIEs imports. It can be edited through the product administration in the field shown in Fig 4.
Use only basic html link code to /images/brands/ 'brand' / 'filename.ext' in this field. Use target="_blank" to open PDFs in a new tab.

What is a 'Digital Asset'

A digital asset is a document, video or image used to help give detailed information about a product or SKU. A page that uses the LeafCatAndOneProduct display template recognizes the manufacturer of the SKUs that it holds and will automatically source it's digital assets (images, pdfs, etc.) from the corresponding manufacturer's folder in the /images/brands/ folder on the server.

Gallery Image files are automatically imported with new PIEs data and resized to 800px wide.

There are some cases where there are no images in the gallery. That means that there are no digital assets associated to that category ID. In this case, you will need to add the digital asset so that the page will have something to draw in the gallery.

How to Add a 'Digital Asset'

First, make sure all digital asset files (images, thumbnails, heros, installation pdfs etc.) are in the correct /images/brands/*manufacturer folder on the server.

Next, navigate to the category in the administration.

Click the 'Edit Digital Assets' link
If there are no digital assets, you will get a notice that says "No Record Found" - Click 'OK' then click 'Add Digital Asset'.

Note: Assets will be automatically sequenced in the order that you add them.
Select the Digital Assets Type
Use the closest relevant asset type. 'Photo - Primary' is adequate for most images. If the part is shown installed on a vehicle use the 'Photo - Mounted' asset type.
Select the Digital Assets Brand Long Name
Select the manufacturer of the SKUs in the category for which you are adding assets.
Select the Digital Assets File Type
All images will be either JPG or PNG. Instruction manuals and installation guides will be PDF. PDFs do NOT display in the gallery.
Add the file names *Do not use the full path, only the file name* Leave the 'Asset File Path' field blank.
- 'Asset File Name' is for the file name without the extension.
- 'Small Asset File Name' is for the thumbnail image file name with the extension (use our SOP for sizes and naming).
- 'Large Asset File Name' is for the 800px wide image file name with the extension (use our SOP for sizes and naming).
Add the Alternate Text for the Image
Assets will be automatically sequenced in the order that you add them. Leave the 'Sequence/ Order No.' field set to 0.00.
Click the box to 'Display Asset' Click 'Save'

If more images are required, click 'Add Digital Asset' and repeat.

Conserve as much data as possible. It's likely that a new Digital Asset gallery will need to be created. If a copy of the gallery images on the page being converted is required, now is the time to save a copy of all of the images to the *desktop.

Using our file-naming convention, the large and small SKU images will be found in /images/products/*part-number.jpg and /images/products/*part-number-th.jpg, respectively.

Single SKU - Universal Fitment
Multi SKU - Universal Fitment
Multi Product Product Control - YMM Specific Fitment

Navigate to the category to be converted in the product administration. And click the 'Show Products' button.
Edit the category:
- Delete all code in Description (1). This should only be a simple-style-2018.css link and the CTA banner codes.
- Move the gallery code from Description 2 to Multi Description 2. This way the data is saved but not displayed - in case it's needed later.
- Copy the 'Overview' content with the paragraph tag in Description 3 and paste it into description 2.
  
  Leave the Description 3 content intact, for the moment. It will come into play again later in the conversion process.
- Change the Product Control template to LeafCatAndOneProduct.
- This SKU has no YMM data tied to it. It's universal in fitment so the 'Is Filterable' box is unticked.
- Click Submit but leave the Category Administration window open. It will be needed again soon.
Edit the SKU:
- If it exists, content in the 'Header Description' and/or 'Description 5' can be used for Product MarketCopy content. First it needs to be formatted or stripped of unnecessary HTML.
  
  The following is the description 5 code of the SKU. The first part of it is html formatted to our 'desc-5-spec-table' The second portion in orange are links in the desc-3-flex-container structure.
  <table id="desc-5-spec-table">
  <tbody>
  <tr align="center"><th>Type</th><th>Voltage</th><th>Motor Type</th><th>Duty Cycle</th></tr>
  <tr align="center"><td>Compressors 100 series</td><td>12-Volt</td><td>Permanent Magnetic Motor</td><td>15% @ 100 PSI</td></tr>
  <tr align="center"><th>Max. Working Pressure</th><th>Max. Amp Draw</th><th>Ingress Protection Rating</th><th>Dimensions</th></tr>
  <tr align="center"><td>130 PSI</td><td>14 Amps</td><td>IP54</td><td>6.35"L x 3.3"W x 4.9"H</td></tr>
  </tbody>
  </table>
  <br>
  <div class="desc-3-flex-container">
  <div class="desc-3-flex">
  <a class="hideshow" href="/images/viair/100C_dd.pdf" target="_blank">Dimensional Drawings</a><br>
  <a class="hideshow" href="/images/viair/singlec_wd.pdf" target="_blank">Diagram</a><br>
  <a class="hideshow" target="_blank" href="/Images/viair/10010-10014-10016_Manual.pdf">Install-Download</a><br>
  </div>
  </div>
  SKU specific desc-5-spec-table code must be left intact and moved to the Product MarketCopy field of the SKU.
  
  The portion of code in orange are links that need to be stripped of the desc-3-flex-container html:
  <a href="/images/viair/100C_dd.pdf" target="_blank">Dimensional Drawings</a><br>
  <a href="/images/viair/singlec_wd.pdf" target="_blank">Diagram</a><br>
  <a href="/images/viair/10010-10014-10016_Manual.pdf" target="_blank">Install-Download</a>
  The Dimensional Drawings and Diagram link codes gets pasted after the desc-5-spec-table code in the SKU Product MarketCopy.
  
  The link code to the installation gets pasted into the SKU Product Installation field.
  
  Remove the 'H2' element from the contents of the category Description 3 field.
  
  Move (not copy) the contents of the category Description 3 field - including the desc-3-flex-container structure - into the SKU Product Details field. The category Descrtiption 3 field will now be empty.
  
  If there isn't any warranty information, find the page on the manufacturer's website that contains their warranty information and paste a link to it in the SKU 'Product Warranty' field. Otherwise, leave the 'Product Warranty' field empty. Use simple HTML. Example:
  <a href="https://www.viaircorp.com/warranty" target="_blank">Manufacturer Warranty Information</a>
  Click the 'Submit Changes' button on both the category and the SKU.
Create the gallery
- The gallery will automatically appear once a digital asset image has been added to the category.
  
  Click here or click the tab above labeled Digital Assets to learn how to create a gallery or add an image to an existing gallery.
View the fully converted page with the gallery HERE.

Multi SKU - Universal Fitment categories with no sub-categories can be converted the same way as a Single SKU - Universal Fitment category.

Make sure to only use category Description 2 and category Description 3 for general product content (not SKU-specific).

Use only the allowed minimal HTML in the category Description 2 field.
Always use the 'desc-3-flex-container' architecture in the category Description 3 field. In most cases, this content already exists and can be left intact.
Setup the SKU-specific data using the same processes as the Single SKU - Universal Fitment conversion.
For categories in the Related product control template, the new gallery will need a digital asset (image) for each product.

Use the following format for the alternate text on the digital assets:
- SKU Title - SKU part number

View a converted Multi SKU - Universal Fitment category HERE.

In this conversion example, the YMM data is present for all SKUs. If YMM data is not present, that data will need to be added to the SKU. Click here or click the tab above labeled Adding YMM to a SKU to learn about adding YMM and SKU vaibility.

When converting a category that is in the 'Multi Product' product control template, all of the SKUs in it's sub-cats must be consolidated into the root multi-product category. In order to do that, the sub-categories that contain the SKUs must be deleted first. There's a simple way to do this operation quickly without deleting or orphaning the SKUs:

In the Product administration, navigate to the root multi-product category to be converted. In our example, we'll use the Superlift Jeep Control Arms category as our root. It contains 2 sub categories that hold the SKUs.
Click 'Show Products' to display all SKUs in the sub categories.
*IMPORTANT: Do Not Click 'Show Products' again during the rest of this consolidation process or the SKUs will disappear from the administration and become orphaned in the system.*
Navigate to each of the individual sub-categories of the root multi-product category and click 'Edit'.
Once the cat opens for editing, scroll to the bottom and click the 'Delete' button on the right side.
*Do Not Delete the root multi-product category.*
Once all of the sub-categories have been deleted, copy the root multi product category ID.
Click the tick-box to select all of the SKUs.
Click the 'Move' button.
In the new window, paste the root category ID in the box and then click the 'Move' button.
All of the SKUs have now been moved into the root multi-product category and it can be converted into the LeafCatAndOneProduct product control template.