Building a multilingual & multi-country e-commerce site with Drupal 7 @ NYC Camp 2014

68
MULTINATIONAL & MULTILINGUAL REUSABLE E-COMMERCE PLATFORM CASE STUDY

description

Building a multilingual & multi-country e-commerce site with Drupal 7

Transcript of Building a multilingual & multi-country e-commerce site with Drupal 7 @ NYC Camp 2014

Page 1: Building a multilingual & multi-country e-commerce site with Drupal 7 @ NYC Camp 2014

MULTINATIONAL & MULTILINGUAL

REUSABLE E-COMMERCE

PLATFORMCASE STUDY

Page 2: Building a multilingual & multi-country e-commerce site with Drupal 7 @ NYC Camp 2014

Maxime Topolov, @mtopolov CTO & Co-Founder of @Adyax

Arthur Murauskas, Associate Director & Drupal Architect @Adyax

Page 3: Building a multilingual & multi-country e-commerce site with Drupal 7 @ NYC Camp 2014

OBJECTIVES

Page 4: Building a multilingual & multi-country e-commerce site with Drupal 7 @ NYC Camp 2014

http://www.guerlain.com/int/en-int

Page 5: Building a multilingual & multi-country e-commerce site with Drupal 7 @ NYC Camp 2014

http://www.makeupforever.com/us/en-us

Page 6: Building a multilingual & multi-country e-commerce site with Drupal 7 @ NYC Camp 2014

An e-commerce site connected to SAP with rich editorial content, managing multiple countries and languages, where each country is independent, where the content must be validated by France

except some...

Fluid front-end, that must work with IE6...

Guerlain

Page 7: Building a multilingual & multi-country e-commerce site with Drupal 7 @ NYC Camp 2014

Make Up For EverAn e-commerce ready site that will be connected to Biz-Talk with rich editorial content, managing multiple countries and languages, where each country is independent, where the content must be validated by France

easy, right?

Full responsive with IE7 supportLOTS of huge HD images

Page 8: Building a multilingual & multi-country e-commerce site with Drupal 7 @ NYC Camp 2014

KEY NUMBERS

Page 9: Building a multilingual & multi-country e-commerce site with Drupal 7 @ NYC Camp 2014

2,500

1625

2ERP, INCLUDING SAP

COUNTRIES, INCLUDING CHINA

LANGUAGES, INCLUDING JAPANESE

PRODUCT REFERENCES

Page 10: Building a multilingual & multi-country e-commerce site with Drupal 7 @ NYC Camp 2014

70

1215

15,000 MAN HOURS

MONTHS OF DEVELOPMENT

PEOPLE

TEMPLATES 57 CONTENT TYPES

Page 11: Building a multilingual & multi-country e-commerce site with Drupal 7 @ NYC Camp 2014

BASIC TECHNIQUES

Page 12: Building a multilingual & multi-country e-commerce site with Drupal 7 @ NYC Camp 2014
Page 13: Building a multilingual & multi-country e-commerce site with Drupal 7 @ NYC Camp 2014

Main features

A single Drupal instance for all the sites.

Site launch is progressive, country by country.

Export and import of content in Excel format.

Certain sites will be e-commerce, others won’t.

Robust translation and publication workflow with alerts.

Page 14: Building a multilingual & multi-country e-commerce site with Drupal 7 @ NYC Camp 2014
Page 15: Building a multilingual & multi-country e-commerce site with Drupal 7 @ NYC Camp 2014

COUNTRIES & LANGUAGES

Page 16: Building a multilingual & multi-country e-commerce site with Drupal 7 @ NYC Camp 2014

CANADA

FRANCE

SPAIN

CHINA

FR2 EN

FR3

ES

CN

SWITZERLAND FR1 IT DE

Page 17: Building a multilingual & multi-country e-commerce site with Drupal 7 @ NYC Camp 2014

Country Country code Language Language codeInternational in EN int English en

France fr French frUS us English US en-usUK uk English UK en-uk

Middle-East me English Middle East en-meChina cn Chinese zh

Hong Kong hk Chinese zh-hkEnglish en-hk

Spain es Spain esCanada ca Canadian French fr-ca

Canadian English en-caRussia ru Russian ruKorea ko Korean krTaiwan tw Simplified Chinese zh-twJapan jp Japanese jaBrazil br Brazilian Portuguese ptItaly it Italian it

Germany ge German de

Page 18: Building a multilingual & multi-country e-commerce site with Drupal 7 @ NYC Camp 2014

Management of languages based on several very standard Drupal modules:

Localization Client (i10n_client)

Translation Template Extractor (potx)

Entity Translation (entity_translation)

Page 19: Building a multilingual & multi-country e-commerce site with Drupal 7 @ NYC Camp 2014

Why entity_translation?

It’s logical :)

There are no “duplicate” translation nodes

Entity translation is in D8 Core

Not all the fields should be translated

Page 20: Building a multilingual & multi-country e-commerce site with Drupal 7 @ NYC Camp 2014
Page 21: Building a multilingual & multi-country e-commerce site with Drupal 7 @ NYC Camp 2014

Three features were essential:

1

2

3

A ‘central’ country where all original content is first created

Possibility of copying all content of one language to another

Notification of countries in case of modification of any content in the ‘central’ country

Page 22: Building a multilingual & multi-country e-commerce site with Drupal 7 @ NYC Camp 2014

Each country can be identified either by its domain (guerlain.co.uk), or by a URL key (guerlain.com/fr)

OK, but what is a country?

Each country has specific settings, admin users

Page 23: Building a multilingual & multi-country e-commerce site with Drupal 7 @ NYC Camp 2014

The Domain Access module (domain) offers this feature on a platter.

Page 24: Building a multilingual & multi-country e-commerce site with Drupal 7 @ NYC Camp 2014

Copy and pre-fill translations from source

Copy structure: menu, taxonomy, etc

Page 25: Building a multilingual & multi-country e-commerce site with Drupal 7 @ NYC Camp 2014
Page 26: Building a multilingual & multi-country e-commerce site with Drupal 7 @ NYC Camp 2014
Page 27: Building a multilingual & multi-country e-commerce site with Drupal 7 @ NYC Camp 2014

EN-EN

EN-US EN-CA FR-FR

FR-BE

Page 28: Building a multilingual & multi-country e-commerce site with Drupal 7 @ NYC Camp 2014
Page 29: Building a multilingual & multi-country e-commerce site with Drupal 7 @ NYC Camp 2014

No revisions (btw, entity_translation do not support them). Country editors are responsible and have two versions at their disposal (draft & published)

Page 30: Building a multilingual & multi-country e-commerce site with Drupal 7 @ NYC Camp 2014
Page 31: Building a multilingual & multi-country e-commerce site with Drupal 7 @ NYC Camp 2014

Content workflow

Page 32: Building a multilingual & multi-country e-commerce site with Drupal 7 @ NYC Camp 2014

When we say “content translation gets published”, it means: • Original language / Central: content is available for the

Countries' local translations; • Country local languages: content translation is available online

for the website users.

Translation workflow

Page 33: Building a multilingual & multi-country e-commerce site with Drupal 7 @ NYC Camp 2014

Problem 1: customisation of forms (contact us, newsletter) according to countries.

Problem 2: difficulties with interface translation

Page 34: Building a multilingual & multi-country e-commerce site with Drupal 7 @ NYC Camp 2014

Take-home message:

Building the best possible, scalable multilanguage-multicountry perfect solution, with overrides, notifications, permissions and complex workflow works fine but IS NOT USED. !

Client wants less features and a simple workflow, even if it requires more manual work from their contributors.

Page 35: Building a multilingual & multi-country e-commerce site with Drupal 7 @ NYC Camp 2014

GEOLOCATION

Page 36: Building a multilingual & multi-country e-commerce site with Drupal 7 @ NYC Camp 2014

Guerlain.com/es Guerlain.com/fr

CDN

VARNISH

NGNIX

Guerlain.comJS

MaxMind

Page 37: Building a multilingual & multi-country e-commerce site with Drupal 7 @ NYC Camp 2014
Page 38: Building a multilingual & multi-country e-commerce site with Drupal 7 @ NYC Camp 2014

IMPORT / EXPORT of content

Page 39: Building a multilingual & multi-country e-commerce site with Drupal 7 @ NYC Camp 2014

Import of Products & SKUs with their Media

Import of Categories

Import of Stores

Page 40: Building a multilingual & multi-country e-commerce site with Drupal 7 @ NYC Camp 2014

The Excel 97 - Excel 2003 Binary file format (BIFF8)

We tried many formats to support XLS, one that works with common PHP libs in most of cases is :

Feeds used to import data.

Page 41: Building a multilingual & multi-country e-commerce site with Drupal 7 @ NYC Camp 2014
Page 42: Building a multilingual & multi-country e-commerce site with Drupal 7 @ NYC Camp 2014
Page 43: Building a multilingual & multi-country e-commerce site with Drupal 7 @ NYC Camp 2014

SKUs as well as products could have multiple photos, so we also have: !

A ZIP archive with media organized into folders product/product-ID/xxxxx.jpeg or sku/sku-ID/xxxxx.jpeg

Page 44: Building a multilingual & multi-country e-commerce site with Drupal 7 @ NYC Camp 2014
Page 45: Building a multilingual & multi-country e-commerce site with Drupal 7 @ NYC Camp 2014
Page 46: Building a multilingual & multi-country e-commerce site with Drupal 7 @ NYC Camp 2014

ERP INTEGRATION

Page 47: Building a multilingual & multi-country e-commerce site with Drupal 7 @ NYC Camp 2014

Ord

ers,

Clien

tsSKUs, Stock,

Order Status

XML SOAP

Page 48: Building a multilingual & multi-country e-commerce site with Drupal 7 @ NYC Camp 2014

Working with SAP is not complicated, but laborious. One order can be 5000 lines of XML

Page 49: Building a multilingual & multi-country e-commerce site with Drupal 7 @ NYC Camp 2014

We have created a tool to send an XML command to SAP, directly from the Drupal back-office !

In addition, we have put into place a log of each communication (to & from) SAP that is visible from the objects concerned (command, user, SKU)

Page 50: Building a multilingual & multi-country e-commerce site with Drupal 7 @ NYC Camp 2014
Page 51: Building a multilingual & multi-country e-commerce site with Drupal 7 @ NYC Camp 2014
Page 52: Building a multilingual & multi-country e-commerce site with Drupal 7 @ NYC Camp 2014

SSL

Page 53: Building a multilingual & multi-country e-commerce site with Drupal 7 @ NYC Camp 2014

!

Setup of the Secure Pages module !

Creation of the sub-domain wws !

SSL = User Data (Cart, My-Account)

CDN

VARNISH

NGNIX

DRUPAL

Secure Pages

Page 54: Building a multilingual & multi-country e-commerce site with Drupal 7 @ NYC Camp 2014

Secure vs insecure / http vs https !

Start development with activating all https support. Define https urls at the very beginning! Do think about cross-site scripting and AJAX if urls differ. Secured cookies. !

Idea: start thinking secure from the beginning of every project.

Page 55: Building a multilingual & multi-country e-commerce site with Drupal 7 @ NYC Camp 2014

SMOOTH FRONT-END

Page 56: Building a multilingual & multi-country e-commerce site with Drupal 7 @ NYC Camp 2014
Page 57: Building a multilingual & multi-country e-commerce site with Drupal 7 @ NYC Camp 2014
Page 58: Building a multilingual & multi-country e-commerce site with Drupal 7 @ NYC Camp 2014
Page 59: Building a multilingual & multi-country e-commerce site with Drupal 7 @ NYC Camp 2014
Page 60: Building a multilingual & multi-country e-commerce site with Drupal 7 @ NYC Camp 2014

OOOOOPTIMIZATIONS

Page 61: Building a multilingual & multi-country e-commerce site with Drupal 7 @ NYC Camp 2014

CDN

VARNISH

NGNIX

DRUPAL

ESI

BLOCS JS

STATIC.GUERLAIN.COM

MEMCACHE

ENTITY CACHE VIEWS CACHE

Page 62: Building a multilingual & multi-country e-commerce site with Drupal 7 @ NYC Camp 2014

Never underestimate performance tuning. !

Start first Sprint by activating all performance related modules - memcache, entity-cache, adv-agg, Varnish/purge, etc. !

Test your deliveries with all those that have been activated, measure load/server responses starting from Sprint 1, force your teams to develop in a performance-oriented way. !

Idea: Ecommerce is performance-oriented development.

Page 63: Building a multilingual & multi-country e-commerce site with Drupal 7 @ NYC Camp 2014

From re-use to platformmakeupforever.com

Page 64: Building a multilingual & multi-country e-commerce site with Drupal 7 @ NYC Camp 2014

Countries, Languages, Multi-site system: Re-use of modules !

Import/Export, Workflow: partial re-use !

ERP: connectors to SAP or JDEdwards may be partially exchanged !

Same platform: features may be exchanged

Page 65: Building a multilingual & multi-country e-commerce site with Drupal 7 @ NYC Camp 2014

WHY DRUPAL?

Page 66: Building a multilingual & multi-country e-commerce site with Drupal 7 @ NYC Camp 2014

Open Source, with the largest community in the world = no lock down !

20,000 existing and modules = maintainable !

Robust and tested: 13 years, White House, The Economist, BBC, Warner… !

Flexible: How to’s, UGC, video sections, personalization, engraving, community, academy, mini-sites…

Page 67: Building a multilingual & multi-country e-commerce site with Drupal 7 @ NYC Camp 2014

Number one (or two ;) Drupal Shop in EMEA

Page 68: Building a multilingual & multi-country e-commerce site with Drupal 7 @ NYC Camp 2014

Thanks ! You can download slides of this presentation on slideshare !

OR

Throw us rotten tomates !

@Adyax