Francesco Zoccarato - Configuratori prodotto: soluzioni e tecniche per unimplementazione efficace in...

Preview:

Citation preview

Configurable productthe standard

This import engine (aka IRIS) works in 2 steps:

1. IRIS inserts actions into the support tables,

these actions are built from a master file and a parser built for

this project.

2. IRIS consumes all available rows to create Magento objects.

This allows us to use a standard procedure (except for the parser) and

use a custom parser depending on the client’s products’ complexity,

(create configurable products out of the cell contents)

IRIS

3

Master

files

Magento

raw data

Magento

raw data

Magento

objects

Parser

specs

COPCONFIGURABLE OPTIONS PLUS

Features:

• Attribute options swatches

• Attribute options richtext descriptions

• Attribute richtext descriptions

• Product gallery images & thumbs switch on swatches’ selections

• Thumbs compatibility on other Magento sections (header cart, cart, checkout, emails etc)

• QuickBuy feature on product list (category, related, upsells, cross-sells etc)

4

SWATCHES - PATTERNS

5

THUMBS COMPATIBILITY

6

BACKEND CONF. PRODUCT

7

BACKEND ATTRIBUTE

8

System Configurations

Attribute Options Configurations

spConfig<HEAD>

<script type="text/javascript" src="/js/varien/product.js"></script>

<script type="text/javascript" src="/js/varien/configurable.js"></script>

configurable.phtml

<script type="text/javascript">

var spConfig = new Product.Config(<?php echo $this->getJsonConfig() ?>);

</script>

Mage_Catalog_Block_Product_View_Type_Configurable

public function getJsonConfig() {

}

9

This javascript variable called spConfig is

responsible for a successful configurable

process in the Magento frontend.

It contains simple products’ infos related to

the configurable product like configurable

attribute values, simple product ids,

attribute options etc.

It is filled from the catalog’s configurable

product block class and can be extended

with everything we need.

spConfig - EXTENDED

10

<script type="text/javascript" src="/js/filoblu/configurableoptionplus/varien/configurable.js"></script>

FiloBlu_ConfigurableOptionsPlus_Block_Catalog_Product_View_Type_Configurable

Product configurator the standard fades away

THE STANDARD WINS

We need to keep as many standards as we can to have as many quick wins as possible…

and then work on exceptions.

THEN WE NEED A CASE STUDY

12

Case study

REQUIREMENTS

Requirements:

• High quality handmade product

• Logistic flow and products stocks work differently than other products

• Configurated products can’t be returned

• Handmade production timing will be of around 3 weeks, so the order flow need a review

14

SHOOTING GUIDELINES

15

NAMING

SKU_position_maincolor(_conftype_secondarycolor).jpg

EXAMPLE: naming for red shoes with green quarter:

sku_1_red01_g_green04.jpg

sku_2_red01_g_green04.jpg

sku_3_red01_g_green04.jpg

EXAMPLE: naming for black shoes without configuration on toe or quarter:

sku_1_black00.jpg

sku_2_black00.jpg

sku_3_black00.jpg

ORDER STATUS FLOW

Configurator carter crust order flow:

AUTHORIZED, automatically set after order confirmation

CONFIRMED, automatically set after order authorization

PROCESSING, automatically set after order payment capture

CONFIGURATION PROCESS, automatically set if a configurated product is inside the order, this status will trigger a notification to

the Santoni in-house production department

CONFIGURATION COMPLETE, manually set as soon as the shoes are ready to be shipped, this status will trigger a notification to

the customer and to the logistic partner

WAITING FOR SHIPPING, manually set by the logistic partner

SHIPPED, manually set by the logistic partner

CLOSED, automatically set once the shipment is complete

16

BACKEND CONFIGURATION

17

Custom Options

● Main Color

● Secondary color

● Position

● Initials

They need to be saved on the

product order row.

Configurable Attributes

● Size

They are related to the product

stock level.

UX + FRONTEND

18

Frontend development

provides a custom

configuration process for a

Fluid User Experience.

We also take care of the

customer care process

information providing

messages on product, cart

and checkout pages and

inside the transactional

emails.

UX + FRONTEND

19

Frontend development

provides a custom

configuration process for a

Fluid User Experience.

We also take care of the

customer care process

information providing

messages on product, cart

and checkout pages and

inside the transactional

emails.

RESULTS

What we engineer & develop:

• Product shooting guidelines

• New data flow for stocks and logistics

• UX to drive customers correctly through products & checkout

• Custom product page frontend

If the product was not handmade then we could probably use an automated image engine rendering

to put each shoe part together

20

RESOURCESConfigurable products:

http://santonishoes.com/it/scarpe-donna-lusso.html

http://www.henrycottons.it/nuova-collezione-uomo/capispalla.html

Configurator:

http://santonishoes.com/it/mysantonicolours.html

Configurator FiloBlu Articles IT/EN:

http://filoblu.com/it/journals/our-works/mysantonicolours-una-nuova-esperienza-del-lusso/

http://filoblu.com/journals/our-works/mysantonicolours-experience-into-luxury/

THANKS FOR YOUR ATTENTION.

Francesco Zoccarato – francesco@filoblu.com – tel. +39 041 5731819

FILOBLU S.R.L - info@filoblu.com - filoblu.com

Recommended