Hacking Magento: Creating an HTML5 Canvas Customizer on Magento - - PowerPoint PPT Presentation

▶
hacking magento
SMART_READER_LITE
LIVE PREVIEW

Hacking Magento: Creating an HTML5 Canvas Customizer on Magento - - PowerPoint PPT Presentation

Feb 08, 2023 216 likes •852 views

Hacking Magento: Creating an HTML5 Canvas Customizer on Magento Bundles Phillip Jackson @philwinkle Lead Magento Architect Something Digital NEW Hacking Magento Hacker: 1. who makes innovative customizations or combinations of

slide-1
SLIDE 1
slide-2
SLIDE 2

Hacking Magento:

Creating an HTML5 Canvas Customizer

  • n Magento Bundles
slide-3
SLIDE 3

Phillip Jackson

@philwinkle

Lead Magento Architect Something Digital

slide-4
SLIDE 4

NEW

slide-5
SLIDE 5
slide-6
SLIDE 6
slide-7
SLIDE 7
slide-8
SLIDE 8

“Hacking” Magento

slide-9
SLIDE 9
  • 1. who makes innovative customizations or

combinations of computer equipment

  • 2. who combines excellence, playfulness,

cleverness and exploration in performed activities

Hacker:

slide-10
SLIDE 10
slide-11
SLIDE 11

The Client

slide-12
SLIDE 12

The Client

  • Custom Printing
  • Upscale Products
  • Wedding, Bar/Bat Mitzvah, Holiday
  • Seasonal Business
slide-13
SLIDE 13

The Requirements

slide-14
SLIDE 14

The Requirements: Feature List

RTL Language Drag and Drop Content Filtering Font Library SVG Motif Library Project Save Edit from Admin Edit from Cart Constrain Movement Blocking Zone Global Font Change Physical Elements Photo Upload SVG Clip Login AJAX RWD Scale Canvas Font Pick List Spot Colors CMYK Conversion PDF Output IE9 Support Realtime Price Estimate Tier Price by Element Skip Steps Global Color Change Special Characters Hebrew Text Panel Arrange Movement Undo / Redo Retina Support Tooltips / Walkthrough Event Wizard iPad Support

slide-15
SLIDE 15

The Requirements: Feature List

RTL Language Drag and Drop Content Filtering Font Library SVG Motif Library Project Save Edit from Admin Edit from Cart Constrain Movement Blocking Zone Global Font Change Physical Elements Photo Upload SVG Clip Login AJAX RWD Scale Canvas Font Pick List Spot Colors CMYK Conversion PDF Output IE9 Support Realtime Price Estimate Tier Price by Element Skip Steps Global Color Change Special Characters Hebrew Text Panel Arrange Movement Undo / Redo Retina Support Tooltips / Walkthrough Event Wizard iPad Support

slide-16
SLIDE 16

Why Bundles?

slide-17
SLIDE 17

Why Bundles?

  • Tier Pricing Support
  • Flexibility Across Product Models
  • Default Quantities and Selections
  • Additive/Subtractive Pricing Model
slide-18
SLIDE 18

Additive Pricing Model

Beautiful Product Feather Ribbon Add’l Color $0.75 $1.00 $0.35

$7.60

$5.50

slide-19
SLIDE 19

Subtractive Pricing Model

Beautiful Product Feather Ribbon $0.75 $1.00

$3.40

$5.50 Layer $0.35

slide-20
SLIDE 20

Why Bundles?

slide-21
SLIDE 21

Why Bundles?

Bundle Simple Simple Simple Simple Related Related Related Related Related Related Related Related Related Related Related Related

slide-22
SLIDE 22

Why Canvas?

slide-23
SLIDE 23

Why Canvas?

  • Library Quality
  • Library Support
  • Hardware Acceleration
  • Render Time Benchmarks
  • Export to PNG (previews)
slide-24
SLIDE 24

HTML5 Canvas

slide-25
SLIDE 25

SVG

slide-26
SLIDE 26

Raphael vs Fabric.js

Raphael API Purpose Support Active Development Resources / Learning Community Fabric.js Good Charting Good Poor Poor Poor Great Canvas Great Excellent Great Great

slide-27
SLIDE 27

Raphael

slide-28
SLIDE 28

Fabric.js

slide-29
SLIDE 29

Why Backbone?

slide-30
SLIDE 30

Why Backbone

  • Shared Knowledge
  • Previous Experience
  • Candidate Pool
  • Tooling
  • Ember, Angular were too new
slide-31
SLIDE 31

The Build

slide-32
SLIDE 32

Delegation

slide-33
SLIDE 33

Phillip

The Build: Delagation

Jon Daniel

Anna

edit

bundles

pdf gen

frontend

pricing undo rtl api

clip

admin

logic

photos

layers

menus

events

slide-34
SLIDE 34

Resources

slide-35
SLIDE 35

The Build: Resources

slide-36
SLIDE 36

Waterfall

slide-37
SLIDE 37

The Build: Waterfall

  • 2-week sprints
  • Fixed cost
  • Tight deployment window
slide-38
SLIDE 38

Tech Stack

slide-39
SLIDE 39

The Build: Tech Stack

slide-40
SLIDE 40

The Code

slide-41
SLIDE 41

The Code

  • Prototype.js is not AMD compatible
  • Prototype is necessary for bundle.js,

product.js, validation

  • jQuery Promises
  • Underscore.js gives us ES6 map, apply, FP
slide-42
SLIDE 42

MV-Whatever

slide-43
SLIDE 43

The Code: MV-Whatever

  • Global Application for defining regions
  • Models and views are obvious
  • “Controllers” are basically logic centers
  • We have 6 distinct controllers
  • Single router for the app
slide-44
SLIDE 44

The Code: MV-Whatever Application

var Customizer = new Marionette.Application();

  • Customizer.on('start', function(options){
  • Customizer.addRegions({

lightbox : LightBox, // can be a region object dialog : '#dialogContainer' // or it can be a dom node });

  • });
  • //-------------------------------

// FIRE UP YOUR ENGINES //------------------------------- Customizer.start();

slide-45
SLIDE 45

The Code: MV-Whatever

A typical controller

var AdminController = Backbone.Marionette.Controller.extend({ initialize: function(){ //create new project model appRepository.project.set({ 'url' : window._adminSaveUrl, 'params' : window._adminUrlParams, 'adminMode' : true });

  • //replace default saveProject action on the customizerController

customizerController.saveProject = function(){ appRepository.project.saveData(); } } });

  • return new AdminController();
slide-46
SLIDE 46

Dependency Management

slide-47
SLIDE 47

The Code: Dependency Management

  • Git submodules
  • NPM / Node
  • Require.js
slide-48
SLIDE 48

The Code: Dependency Management

;define ([ 'app', 'jquery', 'backbone', 'collections/canvas/sides', 'collections/interface/envelope-styles', 'fabric', 'logic/fontcontroller' , 'models/apprepository', 'models/customizer-repository' ],function( Customizer, $, Backbone, stepsCollection, envStylesCollection, Fabric, fontController, appRepository, customizerRepository ){

Good

slide-49
SLIDE 49

The Code: Dependency Management

;define (['app'],function(Customizer){

  • var InvitationController = Backbone.Marionette.Controller.extend({
  • getSides: {

require(['collections/canvas/sides'],function(sides){ //.. }); }, getStyles: { require(['collections/interface/envelope-styles'],function(styles){ //.. }); }

Better

slide-50
SLIDE 50

Sensible Structure

slide-51
SLIDE 51

The Code: Sensible Structure

📂 📂 📂 📂 📂

js/lib/customizer collections plugins models templates

📂 views 📂 logic

slide-52
SLIDE 52

The Code: Sensible Structure

📂 📂 📂

js/lib/customizer/collections canvas cart

📂 interface

📅 designs.js 📅 sides.js

slide-53
SLIDE 53

The Challenges

slide-54
SLIDE 54

The Challenges

  • Multi-bundles
  • Tier pricing
  • Async
  • Responsive-ish
  • No round-tripping
slide-55
SLIDE 55

bundle.js

slide-56
SLIDE 56

The Challenges: bundle.js

  • ptions
slide-57
SLIDE 57

The Challenges: bundle.js selections

slide-58
SLIDE 58

The Challenges: bundle.js

var colorSelections = _.chain(bundle.config.options) .map(function(a) { if(a.title=='Ink Color Count'){ return _.values(a.selections); } }) .filter() .map(function(b) { var tmp = []; _.each(b,function(c){ if(c.name.charAt(0)==colorCount){ tmp.push(c); } }); //workaround because we can't return from the //`each` so we fetch it out of the array return tmp[0]; },context) .value();

slide-59
SLIDE 59

The Challenges: bundle.js

Bundle Simple Group (fixed) Group (tier) Simple Simple Simple Simple

slide-60
SLIDE 60

The Challenges: bundle.js

slide-61
SLIDE 61

The Demo

slide-62
SLIDE 62

Thank You!

@philwinkle @somethingdigitl @magetalk