Code Monkey home page Code Monkey logo

commerce's Introduction

Deploy with Vercel

Next.js Commerce

A high-perfomance, server-rendered Next.js App Router ecommerce application.

This template uses React Server Components, Server Actions, Suspense, useOptimistic, and more.

Note: Looking for Next.js Commerce v1? View the code, demo, and release notes.

Providers

Vercel will only be actively maintaining a Shopify version as outlined in our vision and strategy for Next.js Commerce.

Vercel is happy to partner and work with any commerce provider to help them get a similar template up and running and listed below. Alternative providers should be able to fork this repository and swap out the lib/shopify file with their own implementation while leaving the rest of the template mostly unchanged.

Note: Providers, if you are looking to use similar products for your demo, you can download these assets.

Integrations

Integrations enable upgraded or additional functionality for Next.js Commerce

  • Orama (Demo)

    • Upgrades search to include typeahead with dynamic re-rendering, vector-based similarity search, and JS-based configuration.
    • Search runs entirely in the browser for smaller catalogs or on a CDN for larger.
  • React Bricks (Demo)

    • Edit pages, product details, and footer content visually using React Bricks visual headless CMS.

Running locally

You will need to use the environment variables defined in .env.example to run Next.js Commerce. It's recommended you use Vercel Environment Variables for this, but a .env file is all that is necessary.

Note: You should not commit your .env file or it will expose secrets that will allow others to control your Shopify store.

  1. Install Vercel CLI: npm i -g vercel
  2. Link local instance with Vercel and GitHub accounts (creates .vercel directory): vercel link
  3. Download your environment variables: vercel env pull
pnpm install
pnpm dev

Your app should now be running on localhost:3000.

Expand if you work at Vercel and want to run locally and / or contribute
  1. Run vc link.
  2. Select the Vercel Solutions scope.
  3. Connect to the existing commerce-shopify project.
  4. Run vc env pull to get environment variables.
  5. Run pnpm dev to ensure everything is working correctly.

Vercel, Next.js Commerce, and Shopify Integration Guide

You can use this comprehensive integration guide with step-by-step instructions on how to configure Shopify as a headless CMS using Next.js Commerce as your headless Shopify storefront on Vercel.

commerce's People

Contributors

cond0r avatar dependabot[bot] avatar dominiksipowicz avatar francam94 avatar goncy avatar greph avatar julianbenegas avatar kibo-kevinwatts avatar leahtard avatar leerob avatar lfades avatar lucleray avatar manovotny avatar marbiano avatar michaelbromley avatar mirekm avatar okbel avatar oliverheywood451 avatar pacocoursey avatar pfcodes avatar renanfeluck avatar shaffan avatar shuding avatar sokra avatar stephdietz avatar timneutkens avatar tniezg avatar vczb avatar willianjusten avatar zaiste avatar

Stargazers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

Watchers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

commerce's Issues

css not working on production build

Hi there!

I took this front and hooked magento on top of the UI you provided. Everything works fine on development, as given below:
Zrzut ekranu z 2020-11-02 14-16-25

but when I made production build, it looks like that:
Zrzut ekranu z 2020-11-02 14-17-45

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.

Clone & Deploy on Vercel failing as of today

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

[ISSUE] can't add products to cart

Description

  • On my local all actions related to mybigcommerce (for example add to cart) always return Error [BigcommerceApiError]: Big Commerce API error (404), maybe im missing some configuration?

Img

Screen Shot 2020-10-27 at 10 08 09 PM

Cannot find name `AppProps`

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)

Add starter settings for Jest

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.

Deployment failed

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?

Doc not mentioning environment variables

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.

Error "502: BAD_GATEWAY" on Nextjs vercel site

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

How do I get this running?

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.

deploy to vercel failing with missing pages : Unhandled error

Hi All, Awesome work!
I am getting an error which looks like its something unhandled, undefined etc etc.

`
Unhandled error during request: Error: Page with slug 'en-US/contact-us' not found

`

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.

Cookie Pop-Up not properly disappearing

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:

  1. Add opacity fade to onclick transition (probably the better option)
  2. Setting global CSS overscroll-behavior to none

I've been wanting to fix this myself, but I can't seem to find the cookie pop-up component

Forgot password

Could be nice if we have a forgot password functionality too

Socket hang up

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

Improve documentation on local env setup

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.

[BUG] log in and Sign Up always return error

For Sign Up

  • on local and in the deployed page when I try to make a sing up always get 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 expected

For Log In

  • on local and in the deployed page always return An unexpected error ocurred. Did you forgot your password? and the logs says Error: Internal server error at FetcherError.CommerceError [as constructor]

UnhandledPromiseRejectionWarning on first deploy

When running clone+deploy, I get weird message about my Web Pages not including a locale (which I don't see any way of changing on the admin interface). And then there is an UnhandledPromiseRejectionWarning with a TypeError which causes the deploy to fail.

Screen Shot 2020-10-31 at 21 42 25

Integration with Typesense for Instant Search?

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.

Sign-up is not working

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?

Could not find docs or tutorials.

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

Integration with Solidus

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:

  • in general, how do you envision a different backend to be integrated in the current storefront?
  • bigcommerce/storefront-data-hooks is currently hardcoded throughout the codebase, how would integrating a different storefront-data-hooks look like? maybe an installer?
  • what about unsupported features (for example, Solidus does not support a wishlist out of the box)? how would you handle this case?

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

env file

Which text insert into .env.local? I dunno

Server Error: Image is missing required "src" property.

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:

  1. Filter out products from the Grid displays on the homepage when they do not have images.
  2. Provide a placeholder/fallback image for the ProductCard.

Cheers, Leah

RFC: Custom Checkout

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?

@okbel @lfades Thoughts?

Modules for external providers

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:

Providers help needed:

Typo

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

Consider porting to JavaScript

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.

Enviroment variables

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?

Does this work with Shopify?

If so, what's the setup process? I only see BigCommerce mentioned in the documentation

Thanks! And congrats on the push!

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.