Our great sponsors
-
js-buy-sdk
The JS Buy SDK is a lightweight library that allows you to build ecommerce into any website. It is based on Shopify's API and provides the ability to retrieve products and collections from your shop, add products to a cart, and checkout.
-
nextjs-shopify-store
Discontinued Shopify Store by Next.js [Moved to: https://github.com/momonoki1990/nextjs-shopify-store]
-
SurveyJS
Open-Source JSON Form Builder to Create Dynamic Forms Right in Your App. With SurveyJS form UI libraries, you can build and style forms in a fully-integrated drag & drop form builder, render them in your JS app, and store form submission data in any backend, inc. PHP, ASP.NET Core, and Node.js.
The JavaScript Buy SDK is an SDK for hitting the Store Front API. Basically, you can use this SDK for product information and cart operations, so I thought I'd use it entirely, but there were some problems. The SDK is only used for cart operations such as adding and deleting products, while the GraphQL client library (graphql-request) is used for retrieving product information and search functions on the product page, directly hitting the Store Front API. This is because, first of all, JS Buy SDK seems to have an old type definition of TypeScript, and the type information does not match the property that can actually be retrieved, and it is necessary to extend the type definition partially by oneself. This was the first time for me to extend the type definitions, so I learned a lot, but it was troublesome to determine which properties were typed and which were not. Also, the basic properties supported by the SDK are only a part of the information that can be retrieved by the Store Front API as described in the official documentation, and when I tried to extend the SDK, it seemed to be so cumbersome (for example, the collection page does not support sorting of products). (Sorting is achieved with the SDK like this) Therefore, I decided to use the SDK only for cart operations where the SDK is sufficient, extending the library's typedefs, and to define a custom client to directly access to the Store Front API for the rest.
Store: https://nextjs-shopify-store.vercel.app Repository: https://github.com/naoya-kuma1990/nextjs-shopify-store Technologies used: React, Next.js, TypeScript, Tailwind CSS, Material UI, Shopify JavaScript Buy SDK, Store Front API (Graph QL) Implemented pages: Collection (product list), product details, cart, search results
JS Buy SDK https://github.com/momonoki1990/nextjs-shopify-store/blob/main/lib/client.ts
Related posts
- Enhance the drag and drop of your Vue 3 application with Vue Fluid DnD
- Gary Killdall, creator of CP/M, wrote Pixar's original 3D renderer [pdf]
- SolidJS use:validation directive
- Show HN: Open-source script to get your site indexed on Bing, Yandex, and others
- Lucky like a 7 — Seven SymfonyCasts Courses to Master Symfony 7