Adding Image Management to your Commerce Site Part(II)

So in the last post you learned a bit about gathering requirements in this post we will convert the requirement into a design documents we can use to develop our Image Management System.

Image Management Architecture

The following figure shows the architecture of our Image Management. The numbers in the figure correspond to brief explanations of the various components of the architecture that follows the figure.

1. Business users will use the Catalog Manager to manage Product Catalog. We will modify the Catalog Manager so that the business users can upload images, search images and associate images to the Product Catalog Data.
2. Catalog Manager will interface with Web Services to perform CRUD operations in the Database and upload images to the IIS Server.
3. We will store all SQL objects related to Images\Files in the Product Catalog Table.
4. We will use Commerce Server Staging to move Images\Files from our Staging Environment to Production, this only applies to enterprise customers. If you are a small to medium business you can upload the images directly to your Web Servers.

Image Management Deployment

The following figure shows the deployment topology of our Image Management. The numbers in the figure correspond to brief explanations of the various components of the deployment that follows the figure.

1. Business users will access the Commerce Server Applications and upload images to the Application Server as well as performing CRUD operations in Product Catalog Database and upload images to a file Server by means of HTTP PUT.
2. Files and Data are moved from Staging to Production Environment by Commerce Server Staging.

Image Management Design

Now we have a pretty good idea of our requirements, Architecture and Infrastructure so lets design our system.

Catalog Manager

Before we dive into the designing the changes tot he Catalog Manager let understand a few things. Commerce Server 2007 UI source code is available from Microsoft. To download the code you will need to register with a passport account.

Link to : Commerce Server 2007 Partner Software Development Kit

Download the source code for Marketing Manager, Customer and Order Manager and Catalog Manager (Commerce Server 2007 Partner SDK). Now you are almost ready to start coding. All of the Commerce Server's Management UI's are build on top of User Interface Pattern (UIP) Application Block. UIP was developed by Microsoft patterns & practices to provide a simple yet extensible framework for developing user interface processes. It is designed to abstract the control flow and state management out of the user interface layer into a user interface process layer. I am not going to explain the UIP Application block here so it would be a good idea to watch the following Webcast User Interface Process Application Block and read about the User Interface Process (UIP) Application Block - Version 2.0. I will explain how our design will fit into Catalog Manager and UIP.

User Interface

We need to design the UI interfaces for Catalog Manager. First we need to have a Tab at the Product Catalog Edit page called Images. This Tab will display all our images and since images can also be multi lingual we need to account for that as well. On this Tab we can navigate to another Form that allows us to search for images and associate them to products or upload new images. We also need to design these controls and Forms so they are Task sensitive. What I mean is that a Catalog Reader Role will have access to the Images Tab so they can see all of the images but not edit and a Catalog Editor can Edit existing images change the order of images and a Catalog Administrator who can Perform all action previously stated and upload new images.

The Images Tab is Language context sensitive as Business User change Language Selection we also need to account for displaying images for the current language. Why have images for different languages? Lets say we have a multilingual site that will display English and French. Some of our images may contain text like "On Sale" so we can't display this image to french speaking customers as they won't understand what "On Sale" means because it's in English. For this reason we need to have an image for each language. In other words our image file name is multilingual property.

Product Catalog Edit Image Tab

In this form users can view images and reorder the sequence of images users with privileges can also add and remove images.

Associating Images to Products

This Form can be accessed two ways from the Catalog Manger to upload images but not associate them to Products or access the Form from Product Catalog Edit Form. This Form has two Tabs one to search existing images and another to upload new ones.

Search Tap

The search Tap allows searching for existing images, changing their types and Language. Business users can also be preview images.

Image Types

Our requirements were to be able to associate more than one image and file type. In this scenario we can have multiple images per product and\or associate other file types. For example your business rules may be that you have a product so you need to show an image for that (Product Image Type) and this product is an dishwasher which has energy saver (Logo Image Type) not only that you may need to store the manual for the dishwasher (PDF Image Type).

Upload Tab

 Catalog Administrators can upload images change their types and language settings.

 Summary

Things to consider for performance reason you may want to keep an image table for each catalog so you should consider this when designing your multiple images to Product Catalog data. Should you decide that you want to have a distinct image table for each Catalog you may want to modify the Web Service to allow for image table creation when a catalog is created.

In our next post we will design and extend Catalog Manager and our Catalog Web Services code to incorporate our solution.