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

1. Centarro: Commerce with Confidence
Delivering Headless
Commerce
Matt Glaman (mglaman)
matt@centarro.io
@nmdmatt

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. What is…
Headless Commerce

4. Centarro: Commerce with Confidence
Headless Commerce…
Separates the customer
experience layer from the
core business application.

5. Centarro: Commerce with Confidence
Headless Commerce…
Supports any number of
front end sites or apps
from a single back end.

6. Centarro: Commerce with Confidence
Headless Commerce…
Evolves and scales your
platform without impacting
other components.

7. For example…

8. React front end interacting
with a Drupal Commerce
API backend

10. And… Panopoly?!?!
DRUPAL 7 ?!?$#@

13. Challenges
! Structured data model
! Relationships layers
! Data vs Presentation layer couplings

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

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

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

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

18. Delivering
! Catalogs
! Product Display Pages
! Add to Cart Forms
! Shopping Carts
! Checkout

19. Catalogs

20. Standard Drupal: Views + Search API + Facets

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

22. 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/

23. Centarro: Commerce with Confidence
GraphQL
! Queries can become very large
and complex.
! Reusable queries, as Query Maps
are possible and allows reusing
predefined queries.

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

25. Product Display Pages

26. Standard Drupal: Entity view display and Twig

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

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

29. Sample JSON API request for a product and its variations (8.1kb, without fields 38kb)

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

31. Sample GraphQL request for a product and its variations

32. Add to Cart Forms

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

34. Standard Drupal: Form API with AJAX

35. Cart API + Cart Flyout (drupalSettings, Underscore, Backbone, jQuery)

36. JSON:API + React

37. GatsbyJS: JSON:API to internal GraphQL with React

38. jQuery + JSON:API

39. The challenge as maintainers:
Provide abstract, reusable
solutions for very purpose-built
front ends.

40. Barton’s Home
Progressive Decoupling Example

41. Progressively decoupled add to cart using Backbone + Underscore + Cart API

42. Client side add to cart confirmation with related products

43. Client side store selection for inventory, location aware Search API query over A

44. Shopping Carts

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

46. 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},
}

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

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

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

50. Patrick Roger
Fully decoupled Drupal Commerce
https://snipcart.com/blog/case-study-patrick-roger-drupal-angular

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

53. Integrating Bots with Drupal Commerce
Conversational Commerce
https://2018.decoupleddays.com/session/conversational-commerce-integrating-bots-drupal-commerce

55. Coupons

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

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

58. Centarro: Commerce with Confidence
GraphQL
! Requires a custom mutation
! Accept the coupon code directly, like the RESTful Web Services endpoint

59. Checkout

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

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

62. Centarro: Commerce with Confidence
Third party checkouts

63. Concern Worldwide
Fully decoupled Drupal Commerce
https://www.drupal.org/case-study/concern-worldwide-mobilisation-usability

64. Custom add to cart for direct checkout

65. Decoupled checkout using a custom built Checkout API module

66. What’s on the horizon?

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

68. 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)

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

70. Ready to get started?

71. Available modules

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

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

74. Centarro: Commerce with Confidence
JSON API
Generates an API server that implements
the JSON:API specification.
JSON:API is now part of Drupal core! 🎉

75. Centarro: Commerce with Confidence
GraphQL
graphql & graphql_search_api
Lets you craft and expose a
GraphQL schema for Drupal 8.

76. Centarro Support

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

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

79. Thank you for coming!

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