Online Fashion

Our client’s business framework includes an extensive set of online shopping cart features to satisfy the needs of both online shoppers and store owners alike. It is an affordable enterprise quality eCommerce solution designed with technologies that will perform and scale.

Solution Overview

IBM® WebSphere® Commerce (WCS) is an omni-channel ecommerce platform that enables business-to-consumer (B2C) and business-to-business (B2B) sales for customers across channels—web, mobile, social, store or phone. It supports better marketing, selling and fulfilment with features like precision marketing, merchandising tools, site search, customer experience management, catalogue and content management, social commerce and advanced starter stores. It dynamically optimizes content for various device types and formats including web, mobile and tablet.

IBM Web Content Management (WCM) provides the user the capability to create content templates, presentation templates and approval workflow for the content items. Business users are given the ability to author content items based on chosen content templates. A variety of presentation templates can be used to present content items in the UI. The content delivery can be done on the basis of device attributes and other user profile attributes – static or dynamic (based on marketing cloud).

Benefits of using WCM with WebSphere Commerce

• Add additional content from WCM to related items in store such as catalogues and marketing materials
• Pick content from WCM to be used within store e-marketing spots
• Allows Commerce Management Centre (CMC) users to “link” content items to the commerce store
• Allows CMC users to edit previously linked content items, directly from the CMC
• Supports “preview” of linked content items during commerce store preview
• Provides support to “publish” linked content items for proper store front production site rendering
• Includes multilingual capabilities , in order to target the increasing global target market penetration

UI Design

We used HTML5 and CSS3 for designing the UI. This particular UI design works for the desktop versions along with Mobile, Tablets, etc as it is “responsive design”. It is also a lightweight design as it loads fast on Mobile platforms or Tablet platforms.

The content author can pick any image and upload it to the DAM, which will generate three images (for Desktop, Tablet & Mobile). These will then be pushed into the S3 for rendering. Based on the device, the images of that particular resolution will be pulled for the page from S3.

Key features of WCM with WCS

We used WCS for the Front End portion of the project. We utilized the “commerce site” and “aggregate content as a service” options from the Web Content Manager. The required page aggregation was done by WebSphere Commerce and WCM content was injected into “Commerce” via Remote services.

While WCS serves for site store and product catalogue management, users access WebSphere Portal for content & social and web content management and are expected to allow a workflow based participation for content creation, approval and update. Business users shall be able to make changes to content with little or no IT intervention.

Other Key Features

• Social Collaboration
• Profiling of Content
• Site Frameworks
• Taxonomies and Categories
• Keywords
• Authoring templates
• Workflow
• Bulk Upload of Content

Integration of WCM with WCS

We used two HTTP servers, one for WCS and another for WCM server, and maintained JSessionId on WAS, for the users who would come in from WCS.  WCS was used as the front end. Once the user clicked on the trending page/card, they would be redirected to the WCM content, and a click on the back link would take the user back to the WCS trending page.

WCM, DAM and Amazon S3 Integration

WCM: IBM Web Content Manager is a powerful and sophisticated browser-based application designed to accelerate the creation, maintenance and delivery of critical business content across intranet, extranet, internet and portal sites. It includes a set of features to help you maintain and manage your Web Content Manager system. This includes version control, change management and approval, multi-item projects and user-defined folders to group sets of web content items.

MediaBeacon: MediaBeacon Digital Asset Management (DAM), is a physical repository which can manage media and documents. Apart from controlling and managing media assets like videos, photos, audio and compound documents; MediaBeacon facilitates automation in the digital supply chain, cost effectiveness, and control.

Amazon: Amazon Simple Storage Service, also known as Amazon S3 is an online storage facility. Amazon S3 has a simple web services interface that can be used to store and retrieve any amount of data, at any time, and from anywhere on the Web. It gives a developer access to the same highly scalable, reliable, fast, inexpensive data storage infrastructure that Amazon uses to run its own global network of web sites.

Integration Architecture:

Our challenge was to integrate the IBM WCM with DAM and Amazon S3, as this was the first time in India that IBM was asked to implement this solution.

We needed to bridge the gap between IBM WCM, DAM and Amazon S3.For this, we  integrated WCM with DAM. So, whenever we created content elements in the WCM, the images had to be picked from the physical repository of DAM. To bridge DAM with S3, we chose Custom Workflow Action, which would pull images from DAM and push those to S3, replicating same folder structure. Since S3 is a cloud repository, its image elements can be used all across the site.

Features:

• Upload files directly to Amazon by triggering Custom workflow 135 action
• In a single click, we can push all the content image elements into Amazon S3
• We can trigger an action and pull DAM folder structure and replicate it on S3.
• We can bridge elements to communicate between WCM, Dam and S3.
• File permissions are inherited from the parent folder.
• Files can be downloaded with a single click. Multiple files can be selected at once.
• All files are shortened, pre-signed and protected securely.