# Products

The creation of products follows the steps below:

1. Creation of a product and a service category
2. Creation of one or more product categories for each of the products
3. Creation of one or more product item types for each of the product categories
4. Creation of a product page that will serve all products for a specific category
5. Creation of one or more product items for a product page

## Product Creation Example Scenario

Assume you would like to have Dekadal Agromet Bulletin Products on the website, the practical way to do it using the
steps above would be:

### Step 1: Create an 'Agromet Service Category' and a 'Dekadal Agromet Bulletin' Product

To create a service, navigate to the 'Snippets' section on the explorer menu and select 'Servies' as below:

![Services Explorer](../../_static/images/products/services_explorer.png "Services Explorer")

Click on 'Add service' to create a new service.

![Services Category](../../_static/images/products/add_service_category.png "Services Category")

Provide service category name and choose an icon and save.

![Services Category](../../_static/images/products/service_category.png "Services Category")

---

To create a product, navigate to the 'Snippets' section on the explorer menu and select 'Products' as below:

![Products Explorer](../../_static/images/products/products_explorer.png "Products Explorer")

Click on 'Add product' to create a new product.

![Add Product](../../_static/images/products/add_product.png "Add Product")

Fill in the form providing the name of the product e.g Dekadal Agromet Bulletin

![Add Product](../../_static/images/products/add_product_name.png "Add Product")

---

### Step 2: Creation of one or more product categories for each of the products

Create a product category based on sections measured and reported in Dekadal Agrometeorology providing the name and icon
e.g

- Category 1 - Weather Assessment
- Category 2 - Agrometeorological conditions and impact on agriculture
- Category 3 - Bulletin

![Add Product](../../_static/images/products/add_product_categories.png "Add Product")

Category 1 and 2 can contain text and images and allows you to break down your bulletin into sharable sections while
category 3 can hold the bulletin file/document for download by users. A preview of these categories to the public would
appear as below on the website.

![Add Product](../../_static/images/products/product_preview.png "Add Product")

---

### Step 3: Creation of one or more product item types for each of the product categories

For each of the three categories above, you can now add product item types e.g

- **Category 1** - Weather Assessment
    - |_ Rainfall Amount
    - |_ Rainfall Anomaly
    - |_ Moisture Condition
- **Category 2** - Agrometeorological conditions and impact on agriculture
    - |_ Vegetation Condition & Impact on Agriculture
- **Category 3** - Bulletin
    - |_ Document

![Add Product Item](../../_static/images/products/add_product_item_types.png "Add Product Item")

A preview of these product item types to the public would appear as below on the website.

![Add Product](../../_static/images/products/product_preview.png "Add Product")

---

### Step 4: Creation of a product page that will serve all products for a specific category

Once a product, its categories and items have been defined, a product page can be created to hold all products linked to
it. To create this, navigate to 'pages' in the explorer menu and click on products.

![Add Product Page](../../_static/images/products/add_product_page.png "Add Product Page")

Click on the three dots and select 'Add child pages'

![Add Product Child Page](../../_static/images/products/add_product_child_page.png "Add Product Child Page")

Choose the relevant service category and product as below. Fill in another necessary and optional inputs including an
introduction section, introduction image and text that will appear at the top of the Dekadal Agromet Bulletin Page.

![Add Product Child Page](../../_static/images/products/product_child_page.png "Add Product Child Page")

Save draft / Publish page.

---

(step-5-creation-of-one-or-more-product-items-for-a-product-page)=
### Step 5: Creation of one or more product items for a product page

Add a product item by hovering over Dekadal Agromet Bulletin and selecting 'add child page'.

![Add Product Item](../../_static/images/products/product_item.png "Add Product Item")

For example, you can add a product item for **1 - 10 June 2023** , by specifying the date, valid until and products.

![Add Product Item Page](../../_static/images/products/product_item_page.png "Add Product Item Page")

The 'products' input accepts two options:

- Map/Image Product
- Document/Bulletin Product

![Add Product Options](../../_static/images/products/product_options.png "Add Product Options")

An example of a product based on Map/Image product would be the type 'Rainfall Amount'

![Add Product Options](../../_static/images/products/product_options_map_image.png "Add Product Options")

An example of a product based on Document/Bulletin product would be the type 'Document'

![Add Product Options](../../_static/images/products/product_options_document.png "Add Product Options")

```{note}
When adding a new bulletin, you will only need to begin from {ref}`step-5-creation-of-one-or-more-product-items-for-a-product-page` section above to upload the document or any related text and images about a new period.
```

## Automatic generation of thumbnails

When a product item of type `Document` is created, a thumbnail is automatically generated.

Previously, the thumbnail had to be manually uploaded, but now it is automatically generated from the first page of the
document.

This feature simplifies the process of managing product items and ensures that each item has a visual representation
without requiring additional manual steps.

![Product Item Thumbnail Check](../../_static/images/products/product_generate_thumbnail.png "Product Item Thumbnail Check")

After the product item is published, the thumbnail is generated automatically and used for previews and listings.

![Product Item Thumbnail](../../_static/images/products/product_thumbnail_on_save.png "Product Item Thumbnail")

```{note}
This feature is currently only available for PDF files. If you upload a non-PDF file, you will need to manually upload a thumbnail image.
```