CIT-647 E-Commerce Applications Development

Welcome to
E-Commerce Applications Development
Lecture # 10: Products Variations and User Uploads

Rana Ahmad Ali Tabassam

Department of Information Technology
University College of Management & Sciences
Khanewal, Pakistan

[email protected]

© 2022-2023 by Ahmad Ali Tabassam. Some rights reserved.

valid with
18/01/2023
oral explanation!
 Outline
 Product Categories
 Setting Up an eCommerce Store – WooCommerce previous
lecture

 Product Variant and User Uploads also called

Product Variations and User Uploads …
 What are the variants,
 How the variant are applied, as
 Swatch
 Radio Buttons
 Rectangle List
 Dropdown
 Why Product Variants are Helpful to E-Commerce Stores?

CIT-647 E-Commerce Applications Development Lecture # 10: Product Variant and User Uploads 2
 Product Variations and User Uploads
Why we need product variant?
 Product and Categories are not enough
 Needs to extend product information
– User can customize product information
– Product variation, uploading images, or product text
 We will focusing on:
– How to create customizable products
– How to assign uploaded files to individual product orders
– How we will maintain these uploads
– How to assign custom user-submitted data with individual product
orders

CIT-647 E-Commerce Applications Development Lecture # 10: Product Variant and User Uploads 3
 What is a Product Variant ?
A product variant is a unique variant that is used to identify specific
products. Some products share common attributes, but there are
some attributes that differ; these are called variants. Each variant
has its own unique identifier, such as price, and every variant is
based on the same product definition.

If your product comes in more than one option, you add variants for
it such as size and color. Each combination of those options can be
a different variant for that product, for e.g. Small, Blue T-shirt,
Medium, Blue T-shirt, or Large, Blue T-shirt.

CIT-647 E-Commerce Applications Development Lecture # 10: Product Variant and User Uploads 4
 Giving User Choice
 So far, we have seen static or non-customizable products in our
framework
 Many products in e-commerce stores require some sort of choice
from the customer
– Product size, color, no. of items, or material
 Why user can customize product information?
– To see variations of product
– To choose required variation of product before purchasing it

CIT-647 E-Commerce Applications Development Lecture # 10: Product Variant and User Uploads 5
 Variant application (detail on coming slides …)
 We can use a single dropdown box for variations of product
 For a T-Shirt product
– We may have different variants, e.g color and size
– For both we may have two dropdowns, one for each
 To implement this in framework
– We would only need to make a reference to the variant of the product
the user decides to purchase
– In DB, along with product info. of shopping cart, two columns for variant
are also required

CIT-647 E-Commerce Applications Development Lecture # 10: Product Variant and User Uploads 6
 Combinations of Variants
 Simple variant like color or size or quite limiting
 But with two variants, color and size, admin would need to create a
variant for each combination of these
 Which wouldn't really be practical
 For different 5 colors and 5 sizes, admin may need to handle 25
combinations of variants of a product (next slide)

CIT-647 E-Commerce Applications Development Lecture # 10: Product Variant and User Uploads 7
 How will this work?
 Our framework work should have a list of
administrator-definable variation types or attributes
 For example for following attributes
– Size, color
– Each attribute will be associated with its no. of variations
– Size Variants: small, medium, Large, XL, XXL
– Color Variants: red, green, blue, white, black

CIT-647 E-Commerce Applications Development Lecture # 10: Product Variant and User Uploads 8
 How to apply variant options?
 Variations are used for products that are available in different colors,
sizes, or styles. Each variant can have their own image, price, and
weight, typically have their and they own SKU and stock level.

 Option types determine how variant or modifier options appear on storefront

product pages, as well as how your shoppers interact with them. Variant options
can only use multiple choice option types, while modifier options can use any
option type. Variant options can be displayed as one of four multiple-
choice types:
1. Swatch — displays color swatches for shoppers to select. Specify swatch
colors by entering a hex code, using the color picker, or uploading an
image.
2. Radio Buttons — arranges options in a column
3. Rectangle List — presents options side by side
4. Dropdown — places options in a drop-down list

CIT-647 E-Commerce Applications Development Lecture # 10: Product Variant and User Uploads 9
 How to apply variant options?
 A simple color variant option would look on the storefront, using each
available type.

CIT-647 E-Commerce Applications Development Lecture # 10: Product Variant and User Uploads 10
 How to apply variant options?
 Stock keeping units, or SKUs, are codes that are used to distinguish individual
variants and track inventory. When you create a new variant option, SKUs are
automatically generated for all possible variants. You may edit the
automatically generated SKUs if you want to assign your own identifiers.

CIT-647 E-Commerce Applications Development Lecture # 10: Product Variant and User Uploads 11
 How to apply variant options?
 A simple color variant option would look on the storefront, using each
available type.

CIT-647 E-Commerce Applications Development Lecture # 10: Product Variant and User Uploads 12
 How to apply variant options?
 A simple color and size variant option would look on the storefront, using
each available type.

CIT-647 E-Commerce Applications Development Lecture # 10: Product Variant and User Uploads 13
 How to apply variant options?
 A simple Text Field: would look on the storefront, using each available type.

CIT-647 E-Commerce Applications Development Lecture # 10: Product Variant and User Uploads 14
 How to apply variant options?
 A simple Check Box: would look on the storefront, using each available type.

CIT-647 E-Commerce Applications Development Lecture # 10: Product Variant and User Uploads 15
 Why Product Variants Are Helpful to E-Commerce Stores?

 Variants can create value for e-commerce entrepreneurs, and add

benefit to their business. Here’s how:

1. Increased Clicks
2. Enhanced User Experience
3. Improving the Customer Experience
4. Better Sales

CIT-647 E-Commerce Applications Development Lecture # 10: Product Variant and User Uploads 16
 Why Product Variants Are Helpful to E-Commerce Stores?

 Variants can create value for e-commerce entrepreneurs, and add

benefit to their business. Here’s how:

 Increased Clicks
– If a person is looking for something specific, such as a Blue Polo Shirt,
they won’t land on your product unless you have used variants. By
including the variant Colour: Blue in your catalog, it increases the
likelihood of someone landing on your product during their search.

CIT-647 E-Commerce Applications Development Lecture # 10: Product Variant and User Uploads 17
 Why Product Variants Are Helpful to E-Commerce Stores?
 Enhanced User Experience
– Using a variant adds value to the user experience. Each type of variant
has its own demand. A black t-shirt will most likely have a higher
demand than a purple t-shirt. If you don’t customize the whole user
experience on your online stores with variants, visitors will not be able
to browse through variants and make a customized purchase.

CIT-647 E-Commerce Applications Development Lecture # 10: Product Variant and User Uploads 18
 Why Product Variants Are Helpful to E-Commerce Stores?
 Improving the Customer Experience
– Product variations help improve the customer experience by making it
easier for them to search through hundreds of products to find the
products that they are looking for. It also allows them to compare
different products that vary only slightly from one another.

CIT-647 E-Commerce Applications Development Lecture # 10: Product Variant and User Uploads 19
 Why Product Variants Are Helpful to E-Commerce Stores?
 Better Sales
– Product variations also lead to increased sales because they give
your products greater visibility. This happens because there may be
certain colors or sizes of your products that don’t rank well, but
variations of those products with greater visibility will help low-ranked
products show on the same product pages. Also, by having all variants
listed, customers might find something they didn’t know existed, and
go through with buying that.

CIT-647 E-Commerce Applications Development Lecture # 10: Product Variant and User Uploads 20
 Giving User Control - Photo Upload / User Uploads
 Maintaining Uploads in two ways
 If order has been placed
 Image is uploaded, payment has made, and order has been
completed
 Image should be removed from uploads and DB
 If order has not been placed
 Image is uploaded and product is placed in basket but order is
not placed
 Image should also be removed from uploads and DB

CIT-647 E-Commerce Applications Development Lecture # 10: Product Variant and User Uploads 21
 Giving User Control - Photo Upload / User Uploads
 Security consideration about uploads
– Someone can repeatedly upload images
 CAPTCHA or time delay are useful
– Someone can upload abused images
– What type of images should be uploaded?
 Provide list of images extensions to controller
– What should be the maximum size of each image?
 Controller should allow to upload up to a fixed size
– Prevent customers to find uploads of other customers
 Privacy policy or authentication can be solution

CIT-647 E-Commerce Applications Development Lecture # 10: Product Variant and User Uploads 22
 Q&A

CIT-647 E-Commerce Applications Development Lecture # 10: Product Variant and User Uploads 23
CIT-647 E-Commerce Applications Development Lecture # 10: Product Variant and User Uploads 24