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

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

8682955fc87df72a1c9284b271e9f414?s=128

Sitegeist

April 13, 2018
Tweet

Transcript

  1. Real Values. Building Content-driven Shopping Experiences with Neos & Shopware

    Miriam Müller & Martin Ficzel
  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
  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
  4. Real Values. Neos, Shopware & the overall objective

  5. Real Values. • German shop system • Schöppingen (Münster) •

    18 years in business • 80.000+ customers • Shopware NEXT ◦ Complete core rewrite
  6. Real Values.

  7. Real Values.

  8. Real Values.

  9. Real Values. + Complex Products + Price Calculations + Checkout,

    Payment Providers + Plugin Ecosystem - Shopping Worlds - Content
  10. Real Values. + Intuitive Editing and Storytelling + Flexible rendering

    + Custom content modeling + Components & Styleguide - Neos != Shop
  11. Real Values.

  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
  13. Real Values. Sitegeist GoldenGate

  14. Real Values. Data Bridge

  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
  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 } ],
  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
  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
  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 = '';
  20. Real Values. Sitegeist.GoldenGate.Shopware.DataBridge [ { "id": "SW10001", "label": "VENOM VARIO

    S" }, { "id": "SW10002", "label": "TITANIUM CARBON GS" }, ... ] Reference format JSON
  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 = [];
  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" } ],
  23. Real Values. Sitegeist.GoldenGate.DTO Product ProductReference ProductDetail ProductDetailImage ProductDetailPrice ProductDetailImageSize FilterGroupReference

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

    list: /api/SitegeistFilterGroup Category list: /api/SitegeistCategory
  25. Real Values. Rendering Shopware Data in Neos

  26. Real Values. The classic approach • Micro-Application ◦ Controller ◦

    DomainModel + Sync // API call ◦ Templates • Content Plugin-Wrapper
  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
  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)}
  29. Real Values. Sitegeist.GoldenGate.Neos.Mixin

  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} ... }
  31. Real Values.

  32. Real Values.

  33. Real Values. Data consistency

  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
  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} } }
  36. Real Values. API Fusion, EEL HTML Cache Events Data Flow

  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
  38. Real Values. Visual consistency

  39. Real Values. Sitegeist.Monocle

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

    CSS JS
  41. Real Values. Sitegeist.Monocle

  42. Real Values. Sitegeist.Monocle

  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",
  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
  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
  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
  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
  48. Real Values. Fusion Components in Smarty <div> {GoldengateTeaser title='hello' description='world'

    imageUri='https://dummyimage.com/600x400/000/fff' priceValue='35,7' priceCurrency='€' uri='http://www.sitegeist.de' } </div>
  49. Real Values.

  50. Real Values. Recap

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

  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
  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
  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
  55. Real Values. https://github.com/sitegeist/

  56. Real Values. @dev-master

  57. Real Values. Thank you!

  58. Real Values. Questions