vercel / commerce Goto Github PK
View Code? Open in Web Editor NEWNext.js Commerce
Home Page: https://demo.vercel.store
License: MIT License
Next.js Commerce
Home Page: https://demo.vercel.store
License: MIT License
I have been unable to get this running locally or on Vercel.
Locally, it tells me that there are a number of environment variables required from Big Commerce. So I signed up for an account and tried to create an API key. There are two different types of API keys in Big Commerce and neither of them produce the number of values or values with the same names as the ones required in this repo. So that was a dead end.
In Vercel I just get a bad gateway error after clicking attempting to "install" big commerce (in which I had to click login 3 times).
I'm really curious if anyone else has gotten this working and how you did it.
The scores are not up to the mark. Is everyone seeing the same score of around 50-60? 😅
When trying to run this locally
Error: The environment variable BIGCOMMERCE_STOREFRONT_API_URL is missing and it's required to access your store
The needed environment variables are not mentioned anywhere in README.md
. Please update.
See https://demo.vercel.store/product/next-js-short-sleeve-unisex-t-shirt
The price is 13.50 USD, but it's rendered as 13.5 USD. Should be 13.50 USD.
I've deployed my next.js commerce based project and cloned it.
I can see that all env values in Vercel dashboard are set and encrypted.
Then I generated my store api account in BigCommerce and I got all values except for BIGCOMMERCE_STOREFRONT_API_TOKEN
(which is not the same thing as BIGCOMMERCE_STORE_API_TOKEN
).
I can see in BigCommerce api docs I could generate storefront api token with postman or something but this seems a bit complicated.
Am I missing something simple? :D It feels like I am. I guess this is a call for docs improvement on local dev setup.
Which text insert into .env.local? I dunno
Typo in https://nextjs.org/commerce : Instead of File-Sytem Routing it should be File-System Routing.
(By the way, unfortunately the boxes on this page are not selectable to copy&paste text.)
An unexpected error ocurred
and the logs says Error: Internal server error at FetcherError.CommerceError [as constructor]
but then in the mybigcommerce
i can see the user created as expectedAn unexpected error ocurred. Did you forgot your password?
and the logs says Error: Internal server error at FetcherError.CommerceError [as constructor]
Whatever email and password given when signing-up, there's always the error message about passwords must be greater than 7 characters with at least a numeric character. It seems to me authentication is not fully implemented yet?
Hi,
Can I use my own api for login and products instead of BIGCOMMERCE?
Thanks
If so, what's the setup process? I only see BigCommerce mentioned in the documentation
Thanks! And congrats on the push!
It is better for SEO to create a URL in a format like above. Also, some sites will follow a pattern like, domain/slug/p/id
the slug entry may same for multiple products but id may differ.
I am working with bigcommerce for the first time. I keep getting errors with the enviroment variables. Does anyone have a quickstart for bigcommerce or any hints on how to get this thing running?
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.
@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.
Main folder and its exposed functions
product
wishlist
auth
cart
config.json
README.md
import { useUI } from '@components/ui'
import { useCustomer } from '@framework/customer'
import { useAddItem, useWishlist, useRemoveItem } from '@framework/wishlist'
Providers under development:
Providers help needed:
When first running yarn dev
after build, I was seeing the following error:
Server Error
Error: Image is missing required "src" property. Make sure you pass "src" in props to the `next/image` component. Received: {"width":540,"height":540,"quality":"85"}
This occurred because I connected to an existing BigCommerce sandbox -- as opposed to creating a new site on creation. In this sandbox, I had a few products without any images which were causing this error. It would be great if the commerce package could account for this.
My proposal:
Cheers, Leah
Open https://nextjs.org/commerce and click "Clone & Deploy"
Click Continue with default project name
Click Install to Connect a BigCommerce Store to your Vercel Project
Get error:
An error occurred with this application.
This is an error with the application itself, not the platform.
502: BAD_GATEWAY
Code:
NO_RESPONSE_FROM_FUNCTION
ID:
arn1::glhqb-1603884124738-af1b3d8f06af
If you are a visitor, contact the website owner or try again later.
If you are the owner, check the logs for the application error.
BTW. link "check the logs" returns 404 error.
Created the same bug in BigCommerce Q&A
On click of color swatch for any product. There are no changes
Learning TypeScript is a large barrier to entry for a lot of developers (myself included).
This project seems like a great example of best practices for a Next.js/e-commerce site (I was planning to use it as the basis for a headless Shopify store as someone coming from Gatsby) I think it would be useful to a lot more people if it was in JavaScript rather than TypeScript.
Hi,
After I set up local env. with vercel cli and run yarn dev, it throws this error after couple of seconds.
FetchError: request to http://127.0.0.1:3000/ failed, reason: socket hang up
Uncaught at ClientRequest. (file://C:\Users\username\Desktop\nexteshop\node_modules\node-fetch\lib\index.js:1455:11)
at ClientRequest.emit (events.js:314:20)
at Socket.socketCloseListener (_http_client.js:402:11)
at Socket.emit (events.js:326:22)
at TCP. (net.js:676:12)
However, it runs fine on preview url provided by vercel cli (not sure what is that used for).
Hi there!
I took this front and hooked magento on top of the UI you provided. Everything works fine on development, as given below:
but when I made production build, it looks like that:
I also can't close cookie notice and there many others issues with UI. I didn't change anything about css at all. I only reorganized directories and deleted some stuff that wasn't necessary for me. I don't know how to show it to you guys without sharing whole project and this is unfortunately something I can't do.
I don't know what else info I can provide, as there aren't any warnings and as I said - I didn't change anything regardless css. And it works on dev mode.
Hello,
Thank you for putting this commerce starter kit together. At my previous role in an ecommerce startup, we used Next.js and we basically had to figure out most of these patterns and integrations ourselves. Something like this would have sped up our discovery and development process. So I really appreciate your work!
I currently work on an open source alternative to Algolia, called Typesense and I'd love to build an integration that showcases how to use Typesense to power site search on Next.js commerce sites. Would you be open to including this integration as part of the commerce starter kit?
The search experience would be similar to what you see here, but built with a Typesense backend.
For example, when we delete an item from the cart here: https://demo.vercel.store/cart
Apps gets stuck/frozen instead of optimistically delete it like a facebook button like click.
Facebook does that by optimisticUpdater: https://relay.dev/docs/en/mutations
Could be nice if we have a forgot password functionality too
Currently both Clothes and Accessories link in the Navbar searches for the matching word (clothes and accessories) in the product name, instead it should search for tags linked to the product.
hello @okbel thanks for all you help but im still having same issue i already create the .ev.local file whit the key get from versel, there is something else im missing? maybe local env should be different to the once generate on versel?
Originally posted by @buty619 in #29 (comment)
At Nebulab we are working on creating a custom open source storefront for Solidus based on Next.js and GraphQL.
After watching Next.js Conf and seeing Next.js Commerce in action, we started an internal discussion to understand if it would be feasible (and an overall sensible move) to try to integrate Solidus with this storefront instead of making one from scratch.
As per our understanding, you are planning to have out of the box integrations with different eCommerce backends. When adding a new integration, we imagine the ideal workflow to be to simply install the appropriate backend integration in this project, like the folks at BigCommerce did there, and to leave the code here untouched. In our minds, this approach would delegate the maintenance of the storefront UI to you, and allow us to solely focus on the backend integration logic.
However, after playing with this beautiful demo and having a look at the code, we are unsure on how to proceed. We would like to know your thoughts on some of our doubts and questions:
bigcommerce/storefront-data-hooks
is currently hardcoded throughout the codebase, how would integrating a different storefront-data-hooks
look like? maybe an installer?To sum up, we would like to have a high level overview and discusson on how to approach the integration problem.
Thanks,
The Nebulab Team
I'm thinking about having a fully custom checkout page for this project.
Didn't want to start working on a POC before having a talk about heuristics with the core team of the project.
There are three main topics that come to my mind right now:
1. Checkout data hooks: Based on what I've been from BigCommerce, they have a Checkout SDK to pull this off, so it shouldn't be hard to build custom hooks on top of that. But at the same time, they might be thinking about adding hooks like those to their own hooks repo, which is the kind of information I don't have access to.
2. Thinking beyond BigCommerce: I saw there's already some work being done to support multiple providers, so I'd like to know how would that affect an effort like this one.
3. Page UI: was there any mockup or version of the checkout page on the designs that were made for the initial version of the Commerce Kit?
Steps to reproduce:
Expected: locale formats should update with the rest of the DOM repaint, rather than requiring a page refresh
Hey guys, I saw that this project doesn't have any unit tests. So I'd like to contribute to the unit test and I created this PR #82 in order to apply the starter settings with jest and react testing library.
Hi,
I am looking forward to use vercel/commerce for my clients' Shopify stores once its supported. Meantime, I would like to learn how API's and components works in this project so it will be easier to customize later on. Unfortunately, I couldn't find any docs or tutorial for that. Please share if someone knows any resources.
Thank you
Hi,
Building is failing when importing on Vercel (from https://nextjs.org/commerce). Also failing when cloning on my local machine and setting the BigCommerce local variables:
09:45:00 | Failed to compile. |
---|---|
09:45:00 | ./hooks/index.ts:1:36 |
09:45:00 | Type error: File '/vercel/workpath0/hooks/useCart.ts' is not a module. |
09:45:00 | �[0m�[31m�[1m>�[22m�[39m�[90m 1 | �[39m�[36mexport�[39m { �[36mdefault�[39m as useCart } from �[32m'./useCart'�[39m�[0m |
09:45:00 | �[0m �[90m | �[39m �[31m�[1m^�[22m�[39m�[0m |
09:45:00 | �[0m �[90m 2 | �[39m�[0m |
09:45:00 | error Command failed with exit code 1. |
09:45:00 | info Visit https://yarnpkg.com/en/docs/cli/run for documentation about this command. |
09:45:00 | Error: Command "yarn run build" exited with 1 |
09:45:02 | Done with "package.json" |
I removed the "hooks" folder, re-updated the local variables and got it working...
Regards,
Réza
Hi All, Awesome work!
I am getting an error which looks like its something unhandled, undefined etc etc.
`
It appears that when doing an initial deploy on a new BigC store a bunch of page slugs may be failing out to request and as such failing deploy when following the 'clone & deploy' link off the https://nextjs.org/commerce page.
Attempting to deploy a production site results in the following error.
queryA ENOTFOUND store-...-....mybigcommerce.com at QueryReqWrap.onresolve [as oncomplete] (dns.js:203:19)
Vercel app is installed on BigCommerce and Vercel bot is connected to my Github account. Tried removing the apps and re-deploying, but hit the same issue. BigCommerce subscription is active.
Is there something else that needs to be configured?
I have a local copy and localhost is running but inside _app.tsx
there's a couple of warnings about using AppProps
(Cannot find name AppProps
)
The Accept/Reject Cookies prompt doesn't completely disappear from the page when clicked, but rather gets pushed below the bottom of the page. Generally, this would essentially make it invisible, but when scrolling against the bottom, the bounce effect of the browser reveals the prompt
Fix suggestions:
I've been wanting to fix this myself, but I can't seem to find the cookie pop-up component
A declarative, efficient, and flexible JavaScript library for building user interfaces.
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google ❤️ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.