Modules for external providers

[okbel]

Modules for external providers

Right now, the code base is strictly coupled with data hooks providers. We need to enable the use of different providers interchangeably.

We’re discussing steps forward with @lfades to add different data sources to Next.js Commerce and make it super easy to switch data providers and even aggregate them.

---

Goals of Commerce

• Next.js Commerce should have a completely data agnostic UI
• Aware of schema: should ship with the right data schemas and types.
• All providers should return the right data types and schemas to blend correctly with Next.js Commerce.
• @framework will be the alias utilized in commerce and it will map to the ecommerce provider of preference- e.g BigCommerce, Shopify, Swell. All providers should expose the same standardized functions. Note that the same applies for recipes using a CMS + an ecommerce provider.

There is a framework folder in the root folder that will contain multiple ecommerce providers.

Additionally, we need to ensure feature parity (not all providers have e.g. wishlist) we will also have to build a feature API to disable/enable features in the UI.

Expected Structure

Main folder and its exposed functions

• product

  • usePrice
  • useSearch
  • getProduct
  • getAllProducts

• wishlist

  • useWishlist
  • addWishlistItem
  • removeWishlistItem

• auth

  • useLogin
  • useLogout
  • useSignup

• cart

  • useCart
  • useAddItem
  • useRemoveItem
  • useCartActions
  • useUpdateItem

• config.json

• README.md

Example of correct usage of Commece Framework

import { useUI } from '@components/ui'
import { useCustomer } from '@framework/customer'
import { useAddItem, useWishlist, useRemoveItem } from '@framework/wishlist'

---

Providers under development:

• Shopify
• WooCommerce
• Salesforce Commerce Cloud
• Swell
• Magento

Providers help needed:

• CommerceTools

[leerob]

Another thought: Could we package the front-end somehow so existing Commerce users can get bug fixes pushed? This is tough because then they can't really customize their forked version.

https://twitter.com/PrevostClemToun/status/1321387261511028743

[michaelbromley]

@leerob my 2 cents: I think it is far preferable to package the project for distribution via npm. Relying on forking becomes utterly painful when big changes are made to the fork and upstream too, and then the user is left trying to merge and get it right - not a nice experience!

Of course then there is the problem that an npm package is not a storefront. So there still needs to be some "scaffold" which consumes the npm package, and this scaffold part cannot be easily versioned. But if well-designed this can be kept to a minimal issue, since it is the core components in the npm package which will be changed more often.

For example, how Angular does it with their CLI is pretty nice: the core libs are in npm packages, but some parts like your project package.json, angular.json, tsconfig.json and other parts are local to your repo. When upgrading they use an AST-based tool (schematics) to automatically apply codemods to your repo to keep it compatible with the latest package version. This may be overkill for this project, but I just give it as an example of what can be done.

[hoektoe]

Would be great to support shopify also like Gatsby but better since it's nextjs

[Clausinho]

I've seen a lot of support for shopify, but are there any plans for woocommerce or is it simply not economically viable?

[jerrylopez]

I would love to work on a Magento provider. Is there other conversations happening outside of this issue regarding external providers?

[robbieaverill]

I'm also keen to build in support for other eCommerce APIs. Two things are stopping me right now: 1) there's no license on this repository (edit: there is now: #95), 2) there's no checkout. Having an external checkout is pretty jarring from a UX perspective, and kind of antiquated in my opinion. The value of jamstack is having everything be headless and API driven in order to create efficient, optimised, and unique user experiences in the commerce space, which 50% of this project is not at time of writing.

I imagine adding a checkout here would also involve building some additional UI components for it, and would involve coordination with the maintainers of this repository to ensure we get what we want. In the meantime, BigCommerce/Shopify/other eCommerce providers that have externally hosted checkouts seem to be the only option.

[agustif]

I'm also keen to build in support for other eCommerce APIs. Two things are stopping me right now: 1) there's no license on this repository, 2) there's no checkout. Having an external checkout is pretty jarring from a UX perspective, and kind of antiquated in my opinion. The value of jamstack is having everything be headless and API driven in order to create efficient, optimised, and unique user experiences in the commerce space, which 50% of this project is not.

I imagine adding a checkout here would also involve building some additional UI components for it, and would involve coordination with the maintainers of this repository to ensure we get what we want. In the meantime, BigCommerce/Shopify/other eCommerce providers that have externally hosted checkouts seem to be the only option.

Stripe Checkout is a nice hosted solution, there's already examples with next https://github.com/stripe-samples/nextjs-typescript-react-stripe-js

[marbiano]

@robbieaverill started a RFC in order to talk about a fully custom checkout: #64

[patrys]

Very interested in this as well, I imagine an abstraction layer and a set of capability flags would make it easier to support other commerce backends without forcing everyone to implement the same common subset of features.

Edit: I should make it clear that one of those features is a checkout API as opposed to a hosted checkout view.

[Quynh-Nguyen]

@okbel
Hi,
Can you please share your branch you working on this issue?
It's great if I can join to help for improve the implementation on it, because this is the most important feature.

[johnnypea]

Where should I start when I want to start working on Sylius provider? Any guideline or initiative?

[okbel]

EDIT: This comment is outdated. We moved everything to the framework folder in the root. There you'll be able to create your own providers, take a look at the updated description of this issue ⬆️

Hello all!

We ported all our hooks to here -> https://github.com/vercel/commerce-framework. Under the example folder you'll be able to create your own hooks to use them with Next.js Commerce.

Here is the proposed API to support new providers. https://github.com/vercel/commerce-framework/pull/1/files?short_path=b335630#diff-b335630551682c19a781afebcf4d07bf978fb1f8ac04c6bf87428ed5106870f5

We're actively looking for contributors to work on a Shopify and Magento providers. Please ping me if you want to contribute.

[maartenjongerius]

@okbel We would very much like to contribute on Shopify providers. How can we join?

[okbel]

@maartenjongerius Amazing!!! Feel free to open a PR to remember to copy the example folder and replace all with Shopify helpers. I added info to the readme. Thank you!

[Aleksion]

@maartenjongerius did you guys jump on this? I'm evaluating options for a new shop, and my client has more familiarity with Shopify (than BigCommerce). I don't have the bandwidth to do the hooks right now though, so if you guys tackled it that would be a godsend

[djodjo02130]

@okbel Hi ! Someone have start contributing for Shopify ? I want to contribute :)

[jerrylopez]

Has anyone started on the Magento provider?

[maartenjongerius]

@Aleksion I'm sorry to say we haven't gotten around to it yet. Right now, we're looking into starting next month

[dani97]

I am ready to contribute for Magento 🙂

[LarsBuur]

I am ready and willing to contribute to the work on Shopify. I have not build such React hooks things before and thus should not the one who should drive it. Ping @maartenjongerius @Aleksion and @djodjo02130

[okbel]

@maartenjongerius are you free to work on the Shopify integration?

[okbel]

@tobiaghiraldini Send me a DM to talk about Saleor integration - @okbel tw

[djodjo02130]

@okbel I am free to work on shopify integration ! What do you need ?

[okbel]

@djodjo02130 #186 - We are about to merge this one, but the contributor can no longer continue. Could you?

[djodjo02130]

@djodjo02130 #186 - We are about to merge this one, but the contributor can no longer continue. Could you?

@okbel For sure !
Make new branch here or tell me which way you want to work for push updates ?
And i think i need to finish the first todo list ? just give me guideline to optimize work.

[okbel]

#199 💃