Building Content-driven Shopping Experiences with Neos & Shopware - NeosConference 2018

Transcript

1. Real Values.
   Building Content-driven Shopping
   Experiences with Neos & Shopware
   Miriam Müller & Martin Ficzel
   

   View Slide

2. Real Values.
   Martin Ficzel
   ● Backend Developer (Neos/Flow)
   ● ficzel@sitegeist.de
   ● twitter/slack: @kopfaufholz
   ● Neos Team-Member,
   Atomic-Fusion, AFX
   ● Sitegeist.Monocle
   ● 2 Kids, Climber
   

   View Slide

3. Real Values.
   Miriam Müller
   ● PHP-Developer (eCommerce)
   ● mueller@sitegeist.de
   ● Xing: https://www.xing.com/profile/Miriam_Mueller8
   ● Shopware since 2014
   ● Badminton, Music
   

   View Slide

4. Real Values.
   Neos, Shopware & the
   overall objective
   

   View Slide

5. Real Values.
   ● German shop system
   ● Schöppingen (Münster)
   ● 18 years in business
   ● 80.000+ customers
   ● Shopware NEXT
   ○ Complete core rewrite
   

   View Slide

6. Real Values.
   

   View Slide

7. Real Values.
   

   View Slide

8. Real Values.
   

   View Slide

9. Real Values.
   + Complex Products
   + Price Calculations
   + Checkout, Payment Providers
   + Plugin Ecosystem
   - Shopping Worlds
   - Content
   

   View Slide

10. Real Values.
    + Intuitive Editing and Storytelling
    + Flexible rendering
    + Custom content modeling
    + Components & Styleguide
    - Neos != Shop
    

    View Slide

11. Real Values.
    

    View Slide

12. Real Values.
    The overall
    objective
    ● Use Shopware
    ○ to manage products, variants,
    availabilities, prices, shoppingcart and
    checkout
    ● Use Neos
    ○ to tell stories about products
    ○ to explain complex products
    ● Editor != Product Manager
    combination of strength
    

    View Slide

13. Real Values.
    Sitegeist GoldenGate
    

    View Slide

14. Real Values.
    Data Bridge
    

    View Slide

15. Real Values.
    Classic shopware API
    ● Focused on Inventory management systems
    ○ PriceModel (Netto, Currency, Rounding,
    Formating)
    ○ No Urls / Images
    ○ Lots of irrelevant data
    ● Performance
    ● Error Handling
    ● JSON without strict Schema
    

    View Slide

16. Real Values.
    Classic shopware API
    "images":[
    {
    "id":3,
    "articleId":1,
    "articleDetailId":null,
    "description":"",
    "path":"SW10001",
    "main":1,
    "position":1,
    "width":0,
    "height":0,
    "relations":"",
    "position":1,
    "width":0,
    "height":0,
    "relations":"",
    "extension":"jpg",
    "parentId":null,
    "mediaId":9
    }
    ],
    

    View Slide

17. Real Values.
    GoldenGate shopware API
    ● Presentation and Performance Focus
    ○ Useful detail and image urls
    ○ Relevant data for presentation
    ● PHP as Language JSON as Format
    ○ Symfony Serializer
    ○ DTOs
    

    View Slide

18. Real Values.
    Data Transfer Objects (DTOs)
    ● Reference objects for fast lists and
    filter
    ○ Id, label
    ● Detail objects with all information
    ● Used by shopware and neos
    ● Symfony serializer
    ○ PHP => JSON
    ○ JSON => PHP
    Array
    Object
    Format (JSON)
    serialize
    deserialize
    encode
    decode
    denormalize
    normalize
    

    View Slide

19. Real Values.
    Sitegeist.GoldenGate.Shopware.DataBridge
    Reference object
    /**
    * @return string
    */
    public function getId(): string
    {
    return $this->id;
    }
    /**
    * @param string $id
    */
    public function setId(string $id)
    {
    $this->id = $id;
    class ProductReference
    {
    /** @var string */
    protected $id = '';
    /** @var string */
    protected $label = '';
    

    View Slide

20. Real Values.
    Sitegeist.GoldenGate.Shopware.DataBridge
    [
    {
    "id": "SW10001",
    "label": "VENOM VARIO S"
    },
    {
    "id": "SW10002",
    "label": "TITANIUM CARBON GS"
    },
    ...
    ]
    Reference format JSON
    

    View Slide

21. Real Values.
    Sitegeist.GoldenGate.Shopware.DataBridge
    Detail object
    /**
    * @return string
    */
    public function getName() : string
    {
    return $this->name;
    }
    /**
    * @param string $name
    */
    public function setName(string $name)
    {
    $this->name = $name;
    }
    /**
    return string
    class Product extends Structure
    {
    /** @var string */
    protected $name = '';
    /** @var string */
    protected $description = '';
    /** @var ProductDetail[] */
    protected $details;
    /** @var FilterGroupOptionReference[] */
    lterGroupOptionReferences = [];
    

    View Slide

22. Real Values.
    Sitegeist.GoldenGate.Shopware.DataBridge
    Detail format JSON
    {
    "id": "6",
    "name": "CARBON D",
    "uri": "http://shop.example.",
    "details": [
    {
    "number": "SW10003",
    "images": [
    {
    "id": "11",
    "title": "SW10003",
    "uri": "http://shop.example.",
    "prices": [
    {
    "main": true,
    "from": 1,
    "to": "beliebig",
    "value": "149,95",
    "originalValue": "0,00",
    "currency": "EUR",
    "id": "8",
    "label": "EK"
    }
    ],
    

    View Slide

23. Real Values.
    Sitegeist.GoldenGate.DTO
    Product
    ProductReference
    ProductDetail
    ProductDetailImage
    ProductDetailPrice
    ProductDetailImageSize
    FilterGroupReference
    FilterGroup FilterGroup
    CategoryReference
    Category
    

    View Slide

24. Real Values.
    Sitegeist.GoldenGate.Shopware.DataBridge
    Product list: /api/SitegeistProduct
    Product detail: /api/SitegeistProduct/SW10005
    Filter list: /api/SitegeistFilterGroup
    Category list: /api/SitegeistCategory
    

    View Slide

25. Real Values.
    Rendering Shopware Data
    in Neos
    

    View Slide

26. Real Values.
    The classic approach
    ● Micro-Application
    ○ Controller
    ○ DomainModel + Sync // API call
    ○ Templates
    ● Content Plugin-Wrapper
    

    View Slide

27. Real Values.
    Sitegeist.GoldenGate.Neos
    ● Sitegeist.GoldenGate.Neos.Api
    ○ EEl-Helpers to access shopware data
    ● Sitegeist.GoldenGate.Neos.Mixins
    ○ Mixins to reference Shopware Products
    ○ DataSources for Category, FilterGroupOptions
    ○ FusionObjects to access the DTOs
    ● Sitegeist.GoldenGate.Neos.PluginExample
    

    View Slide

28. Real Values.
    Sitegeist.GoldenGate.Neos.Api
    # get product detail data
    product = ${Shopware.Api.product('defaultShop', 'SW10034')}
    # get product references with prices from 10 to 55€
    productReferences = ${Shopware.Api.productReferences('defaultShop', 10.0, 55.0)}
    

    View Slide

29. Real Values.
    Sitegeist.GoldenGate.Neos.Mixin
    

    View Slide

30. Real Values.
    Sitegeist.GoldenGate.Neos.PluginExample
    prototype(Sitegeist.GoldenGate.Neos.PluginExample:Content.Products) {
    renderer = Neos.Fusion:Collection {
    collection = Sitegeist.GoldenGate.Neos.Mixins:Shopware.Products {
    node = ${node}
    }
    itemName = 'product'
    itemRenderer = Sitegeist.GoldenGate.Neos.PluginExample:Teaser {
    title = ${product.title}
    ...
    }
    

    View Slide

31. Real Values.
    

    View Slide

32. Real Values.
    

    View Slide

33. Real Values.
    Data consistency
    

    View Slide

34. Real Values.
    Neos Cache Tagging
    ● Used massively in Fusion
    ○ Code is written like you would always access the data
    ○ Annotations define caching details
    ○ And under which condition the cache-fragment has to be thrown away
    ○ The reason why there is no “clear cache” button in Neos
    ● Separate flow of Data and Events
    

    View Slide

35. Real Values.
    Tagging of Shopware Content
    @cache {
    mode = 'cached'
    maximumLifetime = '86400'
    entryTags {
    1 = ${Shopware.Caching.productTags(shop, products)}
    2 = ${Shopware.Caching.categoryTags(shop, categories)}
    }
    entryIdentifier {
    node = ${node}
    }
    }
    

    View Slide

36. Real Values.
    API Fusion, EEL HTML
    Cache
    Events
    Data Flow
    

    View Slide

37. Real Values.
    Sitegeist.GoldenGate.Neos.Api
    ● Caches
    ○ Sitegeist_GoldenGate_Neos_Api
    ○ Neos_Fusion_Content
    ● Event-API
    ○ //sitegeist/goldengate/events/product // category
    ● Shopware.Caching Helper
    ○ To tag API and Fusion cache items
    

    View Slide

38. Real Values.
    Visual consistency
    

    View Slide

39. Real Values.
    Sitegeist.Monocle
    

    View Slide

40. Real Values.
    Fusion - Presentational Components
    Component
    API
    Props
    HTML CSS JS
    

    View Slide

41. Real Values.
    Sitegeist.Monocle
    

    View Slide

42. Real Values.
    Sitegeist.Monocle
    

    View Slide

43. Real Values.
    Fusion AST
    {
    "__prototypes": {
    "Sitegeist.GoldenGate.Neos.Plugin:Component.PriceTag": {
    "__prototypeObjectName": "PackageFactory.AtomicFusion:Component",
    "value": "",
    "currency": "",
    "prefix": "",
    "renderer": {
    "__objectType": "Neos.Fusion:Tag",
    "__value": null,
    "__eelExpression": null,
    tagName": "div",
    

    View Slide

44. Real Values.
    Export AST
    Sitegeist.Monocle.ComponentExport
    ● Find Prototypes to export
    ● Detect the prototypes they rely on
    ● Create render-pathes for each
    Exported prototype
    

    View Slide

45. Real Values.
    Standalone
    Runtime
    ● Sitegeist.Fusion.Standalone
    ○ Only runtime / no parser
    ○ No flow dependencies
    ● Sitegeist.Eel.Standalone
    ○ PSR SimpleCache
    ○ No flow dependencies
    ● Should go to core on the long run
    Fusion & Eel
    

    View Slide

46. Real Values.
    Fusion & Eel - Standalone Objects
    Fusion Objects:
    ● Neos.Fusion:Tag
    ● Neos.Fusion:Attributes
    ● Neos.Fusion:Value
    ● Neos.Fusion:Array
    ● Neos.Fusion:Component
    ● Neos.Fusion:Collection
    ● Neos.Fusion:Augmenter
    ● Neos.Fusion:RawArray
    ● Neos.Fusion:RawCollection
    Eel Helpers:
    ● Array
    ● Date
    ● Json
    ● Math
    ● String
    ● Type
    

    View Slide

47. Real Values.
    Shopware rendering
    ● Sitegeist.Shopware.FusionRenderer
    ○ Tools to create a Fusion-Runtime in Shopware and to render a component
    ● Sitegeist.Shopware.ComponentExample
    ○ Fusion AST, CSS, JS
    ○ Smarty Wrappers for exposed Components
    ○ Can be generated automatically
    

    View Slide

48. Real Values.
    Fusion Components in Smarty
    
    {GoldengateTeaser
    title='hello'
    description='world'
    imageUri='https://dummyimage.com/600x400/000/fff'
    priceValue='35,7'
    priceCurrency='€'
    uri='http://www.sitegeist.de'
    }
    
    

    View Slide

49. Real Values.
    

    View Slide

50. Real Values.
    Recap
    

    View Slide

51. Real Values.
    Events (push)
    Data (pull)
    Achievements
    

    View Slide

52. Real Values.
    Learnings
    ● Shopping APIs are not build for CMS
    ● DTOs + Serializers make a nice API especially between PHP Systems
    ○ Shop & CMS are basically replaceable
    ● EEL-Helpers are a good integration base
    ● Custom caches & tags make the integration smooth
    ● Standalone Fusion & EEL just rock
    

    View Slide

53. Real Values.
    TODOs
    ● Subshop / Language support
    ● Fluent interface for ProductQueries (like FlowQuery)
    ● Shopware as SSO-Provider
    ● Access Shopping Cart and User Data from Neos
    ● Overlay Product and Category Pages in Neos
    

    View Slide

54. Real Values.
    Packages for you
    GoldenGate: Shopware-Neos Data- and Cache-Bridge
    ● Sitegeist.GoldenGate.DTO
    ● Sitegeist.GoldenGate.Neos.Api
    ● Sitegeist.GoldenGate.Neos.Mixin
    ● Sitegeist.GoldenGate.Neos.PluginExample
    ● Sitegeist.GoldenGate.Shopware.EventBus
    ● Sitegeist.GoldenGate.Shopware.DataBridge
    Monocle: Neos-Shopware Component Bridge
    ● Sitegeist.Monocle
    ● Sitegeist.Monocle.ComponentExport
    ● Sitegeist.Fusion.Standalone
    ● Sitegeist.Eel.Standalone
    ● Sitegeist.Shopware.FusionRenderer
    ● Sitegeist.Shopware.ComponentExample
    

    View Slide

55. Real Values.
    https://github.com/sitegeist/
    

    View Slide

56. Real Values.
    @dev-master
    

    View Slide

57. Real Values.
    Thank you!
    

    View Slide

58. Real Values.
    Questions
    

    View Slide