Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

Decoupled Days 2019: Delivering Headless Commerce

1,033 views

Published on

Slides from Decoupled Days 2019 about delivering Drupal Commerce for a headless e-commerce experience

Published in: Technology
  • Be the first to comment

Decoupled Days 2019: Delivering Headless Commerce

  1. 1. Centarro: Commerce with Confidence Delivering Headless Commerce Matt Glaman (mglaman) matt@centarro.io @nmdmatt
  2. 2. • Drupal Commerce 2.x co-maintainer • Drupal 8 Development Cookbook author • drupal-check Matt Glaman Product Lead Our core team created and leads Drupal Commerce. https://www.drupal.org/centarro
  3. 3. What is… Headless Commerce
  4. 4. Centarro: Commerce with Confidence Headless Commerce…  Separates the customer experience layer from the core business application.
  5. 5. Centarro: Commerce with Confidence Headless Commerce…  Supports any number of front end sites or apps
 from a single back end.
  6. 6. Centarro: Commerce with Confidence Headless Commerce…  Evolves and scales your platform without impacting other components.
  7. 7. For example…
  8. 8. React front end interacting  with a Drupal Commerce  API backend
  9. 9. And… Panopoly?!?! DRUPAL 7 ?!?$#@
  10. 10. Challenges ! Structured data model ! Relationships layers ! Data vs Presentation layer couplings
  11. 11. Centarro: Commerce with Confidence Available API integration options ! JSON:API ! GraphQL (v3, not v4) ! RESTful Web Services* * RESTful Web Services module does not provide any default schema, filtering, or collections but does allow building your own.
  12. 12. Centarro: Commerce with Confidence JSON:API ! JSON:API is a RESTful API specification, implemented in Drupal ! Supports includes that fetch linked resources automatically ! Allows limiting fields returned, otherwise all fields ! Automatically exposes all entities as resources ! Uses entity UUIDs over normal identifiers
  13. 13. Centarro: Commerce with Confidence GraphQL ! Query-like language API, not a RESTful API ! Fragments represent sets of fields (base fields, bundle fields) ! Must specify fields to be returned in a query ! Use GraphiQL IDE to build the query ! Uses normal identifiers, not UUIDs ! Manipulate data (Create, Update, Delete) via mutations
  14. 14. Centarro: Commerce with Confidence RESTful Web Services ! Original API module in Drupal core, since 8.0.0 ! Plugins define resource endpoints ! Endpoints must be configured to turn them on, but there’s no UI ! Uses normal identifiers, not UUIDs ! No schema or opinions on the request or response
  15. 15. Delivering ! Catalogs ! Product Display Pages ! Add to Cart Forms ! Shopping Carts ! Checkout
  16. 16. Catalogs
  17. 17. Standard Drupal: Views + Search API + Facets
  18. 18. Centarro: Commerce with Confidence Catalog areas of concern ! Highly customized queries for products across product types ! Powered by search indexes ! Utilize facets for fine tuned browsing ! Variable pricing based on customer context ! Product availability
  19. 19. Centarro: Commerce with Confidence JSON:API ! Does not support mixed-bundle collections out of the box. (#2956414) ! Custom controller or support in JSON API Extras. ! Could integrate JSON API into Search API with some effort. GET
 /jsonapi/commerce_product/simple GET 
 /jsonapi/commerce_product/clothing GET
 /jsonapi/commerce_product/
  20. 20. Centarro: Commerce with Confidence GraphQL ! Queries can become very large and complex. ! Reusable queries, as Query Maps are possible and allows reusing predefined queries.
  21. 21. Centarro: Commerce with Confidence GraphQL & Search API ! GraphQL has Search API integration through a contributed module ! Query support using full text search ! Faceted search support ! Only returns data in the index; more like directly querying the search index with Drupal as a proxy
  22. 22. Product Display Pages
  23. 23. Standard Drupal: Entity view display and Twig
  24. 24. Centarro: Commerce with Confidence Product display page areas of concern ! Made up of a mix of marketing content and product data ! Representation of product variations and their field values ! Add to cart forms
  25. 25. Centarro: Commerce with Confidence JSON:API ! Retrieve products by bundle and UUID
 
 
 
 ! Include variations, variation attributes, taxonomy terms, etc. using the include parameter
 ! Need additional strategies for image styles, such as the Consumer Image Styles module GET /jsonapi/commerce_product/simple/1630-42cd-af47 GET /jsonapi/commerce_product/clothing/1630-42cd-af47
  26. 26. Sample JSON API request for a product and its variations (8.1kb, without fields 38kb)
  27. 27. Centarro: Commerce with Confidence GraphQL ! Retrieve products by their ID and then request fields as needed ! Supports fetching images and specifying the proper image style
  28. 28. Sample GraphQL request for a product and its variations
  29. 29. Add to Cart Forms
  30. 30. Centarro: Commerce with Confidence Add to cart form areas of concern ! Attribute select lists vs. fancy formatting (e.g. color swatches) ! Identifying the currently selected product variation ! Custom order item fields
  31. 31. Standard Drupal: Form API with AJAX
  32. 32. Cart API + Cart Flyout (drupalSettings, Underscore, Backbone, jQuery)
  33. 33. JSON:API + React
  34. 34. GatsbyJS: JSON:API to internal GraphQL with React
  35. 35. jQuery + JSON:API
  36. 36. The challenge as maintainers:
 Provide abstract, reusable solutions for very purpose-built front ends.
  37. 37. Barton’s Home Progressive Decoupling Example
  38. 38. Progressively decoupled add to cart using Backbone + Underscore + Cart API
  39. 39. Client side add to cart confirmation with related products
  40. 40. Client side store selection for inventory, location aware Search API query over A
  41. 41. Shopping Carts
  42. 42. Centarro: Commerce with Confidence Cart management areas of concern ! Anonymous and authenticated user owned carts ! Users can modify their carts, without fully managing the order ! Users shouldn’t be able to edit another user’s cart ! Constraints on product availability
  43. 43. Centarro: Commerce with Confidence Cart API: Cart Operations ! Cart API hides internals knowledge and provides a friendly interface. ! RESTful Web Services endpoint plugins ! GET for collection of active carts or individual cart ! POST that creates the order item from a product and adds it to the proper cart. ! PATCH to update quantities POST /cart/add?_format=json
 [
   { "purchased_entity_type": "commerce_product_variation",
     "purchased_entity_id": "6", 
     "quantity": "1"
   }
 ]
 PATCH /cart/{order}/items?_format=json
 {
   3: {"quantity": 1},
   9: {"quantity": 2},
 }
  44. 44. Centarro: Commerce with Confidence Cart API: Cart Tokens ! PHP Sessions persist via cookies ! Cookies are opt-in when making CORS enabled AJAX requests ! Cookies are blocked on cross-origin CORS enabled AJAX requests ! Solution: a passable token as a query parameter or header. GET /cart?_format=json
 Accept: application/json
 Commerce-Cart-Token: 123ABC GET /cart?_format=json&cartToken=123ABC
 Accept: application/json
  45. 45. Centarro: Commerce with Confidence JSON:API ! Not out of the box without cross- bundle collection resources ! JSON:API is now stable and in Drupal core, easier to integrate and extend! ! Cart API 2.x will use JSON:API over RESTful Web Services plugins. ! Provides a cart collection endpoint and Cart Manager integration
  46. 46. Centarro: Commerce with Confidence GraphQL ! GraphQL supports cross-bundle querying for cart item collections ! Carts are restricted by query access, so only the requesting user’s carts are returned ! Mutations are part of GraphQL Mutations module ! Requires writing GraphQL Mutation plugins
  47. 47. Patrick Roger Fully decoupled Drupal Commerce https://snipcart.com/blog/case-study-patrick-roger-drupal-angular
  48. 48. Centarro: Commerce with Confidence Headless Drupal Commerce & Angular with Snipcart Drupal Commerce is used for product and inventory management, shipping and tax calculations, and order fulfillment management Snipcart provides cart management and checkout, orders are synchronized through webhooks.
  49. 49. Integrating Bots with Drupal Commerce Conversational Commerce https://2018.decoupleddays.com/session/conversational-commerce-integrating-bots-drupal-commerce
  50. 50. Coupons
  51. 51. Centarro: Commerce with Confidence Cart API: Coupons ! RESTful Web Services endpoint plugin ! Redemption via coupon code ! Limited to single coupon to avoid abuse ! Coupon reference constraint to validate coupons when attached, better API level handling
  52. 52. Centarro: Commerce with Confidence JSON:API ! Requires querying for the coupon without exposing all
 currently available coupons ! Take the coupon identifier and PATCH a relationship ! Need custom relationship endpoint to accept coupon code ! Validation constraint will reject the coupon if invalid
  53. 53. Centarro: Commerce with Confidence GraphQL ! Requires a custom mutation ! Accept the coupon code directly, like the RESTful Web Services endpoint
  54. 54. Checkout
  55. 55. Centarro: Commerce with Confidence Checkout over the API ! Experimented with a bespoke Checkout API for a GatsbyJS. ! Completing checkout is really just running the place order transition ! Problem is most of our validations are in the Checkout Form, not in data level constraints
  56. 56. Centarro: Commerce with Confidence Checkout over the API ! In evaluation and discovery ! With JSON API or GraphQL Entity Mutation, direct entity access is not allowed for modifying an order ! Need to review entity access control to allow modifying order fields ! Entity and field constraints for checkout validation
  57. 57. Centarro: Commerce with Confidence Third party checkouts
  58. 58. Concern Worldwide Fully decoupled Drupal Commerce https://www.drupal.org/case-study/concern-worldwide-mobilisation-usability
  59. 59. Custom add to cart for direct checkout
  60. 60. Decoupled checkout using a custom built Checkout API module
  61. 61. What’s on the horizon?
  62. 62. Centarro: Commerce with Confidence What’s next? ! Improving query access and entity access
 https://www.drupal.org/project/commerce/issues/3041758 ! Coupon validation constraint in Drupal Commerce
 https://www.drupal.org/project/commerce/issues/3041856 ! Computed base order total field (subtotal, adjustments, total)
 https://www.drupal.org/project/commerce_cart_api/issues/3048704
  63. 63. Centarro: Commerce with Confidence What’s next? ! Convert variations and order_item fields from Field Config to base fields
 https://www.drupal.org/project/commerce/issues/3002939 ! Resolved pricing (price list support, promotions support) ! Improved product availability handling (entity reference constraint)
  64. 64. Centarro: Commerce with Confidence HIGH_VOLUME_DRUPAL7_HEADLESS_STORE migrates to headless Commerce 2.x ! High volume online convenience store ! Multiple stores, multiple currencies, and shipping integrations ! Drupal 7 API backend & multiple React frontend ! Tested to support well over 4,000 concurrent shopping sessions ! Third-party checkout
  65. 65. Ready to get started?
  66. 66. Available modules
  67. 67. Centarro: Commerce with Confidence Cart API commerce_cart_api 
 Provides a RESTful interface to interact with carts in Drupal Commerce via a lightweight public API. JSON API integration still sandboxed
  68. 68. Centarro: Commerce with Confidence Cart Flyout commerce_cart_flyout The Cart Flyout is a drop-in progressively decoupled replacement of the cart block. Provides a decoupled add to cart form.
  69. 69. Centarro: Commerce with Confidence JSON API Generates an API server that implements the JSON:API specification. JSON:API is now part of Drupal core! 🎉
  70. 70. Centarro: Commerce with Confidence GraphQL graphql & graphql_search_api Lets you craft and expose a GraphQL schema for Drupal 8.
  71. 71. Centarro Support
  72. 72. Guaranteed answers to the questions you have as you go headless with Drupal Commerce. • Private Q&A forum moderated by core maintainers • Each seat includes access to Centarro Toolbox: • Update Assistant • Quality Monitor • Partner products Professional Support from $99 / mo
  73. 73. Prioritized support on a per-site basis to solve your blockers and bugs as fast as possible. • On-boarding site audit / project review • Private tickets for project-specific support • Guaranteed 1 day response time • Opened issues influence core roadmap • Semi-annual consultation Priority Support from $499 / mo
  74. 74. Thank you for coming!
  75. 75. Questions? Give it a spin! https://commerce-decoupled-days-2019.web.app/
 (JSON:API + React) https://react.demo.centarro.io/ 
 (GraphQL + React) https://gatsbyjs.demo.centarro.io/ 
 (GatsbyJS) https://demo.commercekickstart.com/ 
 (Progressively decoupled) matt@centarro.io @nmdmatt

×