Company
Date Published
Author
Phil Hawksworth
Word count
1143
Language
English
Hacker News points
None

Summary

** When Shopify expanded their Storefront API, developers gained access to product, pricing and stock level data through an expressive GraphQL interface, allowing for more control over the shopping experience. To help get started with using the API, Netlify's DX team built reference templates using various front-end tools and frameworks, including Eleventy, Gridsome, Astro, Nuxt, and Angular. The DX team chose to use Eleventy to pull product data from the API and generate pages during build time, while adding HTML forms and JavaScript to interact with the API for cart management. A demo site was created using this approach, showcasing a complete Shopify store with products that reflect common interests of the DX team. The UI made calls directly to the Shopify API, but also used serverless functions to abstract away the complexity, making it easier to reuse and extend the code. Utility functions were written once and used by different UIs, providing a simplified API for the sites. Netlify's redirects API was used to make URLs palatable, allowing friendly and readable URLs whenever possible. Client-side JavaScript was added later to manage cart management and other interactive features, but only 80 lines of commented code were needed. The decoupled model provides fantastic levels of control when crafting the experience for users, and agencies can use this approach to deliver on design promises and generate differentiation through user experience.