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
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