sdras/ecommerce-netlify

🛍 A JAMstack Ecommerce Site built with Nuxt and Netlify Functions

🛍 Ecommerce Store with Netlify Functions and Stripe

A serverless function to process stripe payments with Nuxt, Netlify, and Lambda

Demo site is here: E-Commerce Store

There are two articles explaining how this site is set up:

• Explanation of Netlify Functions and Stripe: Let's Build a JAMstack E-Commerce Store with Netlify Functions
• Explanation of dynamic routing in Nuxt for the individual product pages: Creating Dynamic Routes in Nuxt Application

Build Setup

# install dependencies
$ yarn install or npm run install

# serve with hot reload at localhost:3000
$ yarn dev or npm run dev

# build for production and launch server
$ yarn build or npm run build
$ yarn start or npm run start

# generate static project
$ yarn generate or npm run generate

For detailed explanation on how things work, checkout Nuxt.js docs.

ecommerce-netlify's Issues

Opening subpath causes 404

Opening a product page directly over url causes an HTTP 404

Example:
https://ecommerce-netlify.netlify.app/women/product/440e2eac-67ed-4407-993a-d9f6b7f15087

Also navigating from /men to a product, when coming directly in the browser over
https://ecommerce-netlify.netlify.app/men
causes 404

Provide lambda function example to send email notification

It may be out of scope of this project - and in this case just close the issue - but since I was digging how to send email notifications upon order I made this commit that I am reporting here. Code is not complete since it is not showing how axios should trigger the notification and should go something like that.

axios.post('/.netlify/functions/notify', {
    body: 'todo...'
  })
  .then(function (response) {
    console.log(response);
  })
  .catch(function (error) {
    console.log(error);
  });

I can not create a direct PR since I modified other stuffs that is related to the layout.

Payment by Credit Card - Doesn't work

First of all let me tell you: What a beautiful shopping cart. Probably the best I've seen so far for Nuxt.

The Stripe problem: The payment system doesn't work and so it defeats the whole project...

How can Stripe be programmed with Netlify? I've tried so many tutorials. I can't get it to work.

Cart count issue

Hi Sarah. While I was playing with your deployed site. I came across a little bug with the cart item count. If you add the item to your cart and if it is one try to decrease it then it disappears but when you add another item and in the cart page you will see the removed item which has a count of 0 but not disappearing. Here is the image screenshot https://res.cloudinary.com/dflkwvvnz/image/upload/v1626101578/scrnli_7_12_2021_7-52-44_PM_cikgtc.png
And I tried to fix it. Changing one line of code worked.

removeOneFromCart: (state, payload) => {
    const index = state.cart.findIndex((el) => el.id === payload.id)
    if (state.cart[index].count) {
      state.cart[index].count--
    }
    if (state.cart[index].count === 0) {
      state.cart.splice(index, 1)
    }
  },

Bug: footer links are squashed on mobile

Issue Description:
On mobile devices, the footer links are appearing squashed and not rendering correctly. This issue affects the user experience as it makes it difficult to access important links and navigate the website effectively.

Steps to Reproduce:

1. Open the website on a mobile device (e.g., smartphone or tablet).
2. Scroll to the bottom of the page to view the footer.
3. Observe how the footer links are displayed.

Expected Behavior:
The footer links should be displayed neatly and legibly on mobile devices, allowing users to easily access the various links and information provided in the footer.

Actual Behavior:
The footer links are squashed together, making it challenging to tap on individual links without accidentally tapping adjacent ones. This behavior is not consistent with a responsive design and impairs the user experience.

Screenshots :

Proposed Solution:
Investigate and resolve the CSS or layout issues causing the footer links to display improperly on mobile devices. Ensure that the design is responsive and user-friendly across various screen sizes.

It has issue on yarn install.

I tried to run with yarn install but it is not working correctly.
When I try to install packages, it says error.

Invalid Featured Products links on product page

When I'm on a product page, the links in the Featured Products section link to .../product/product/.... So there's a product too much in the URL.

Example:

• Go to https://ecommerce-netlify.netlify.com/product/18d4cd08-134f-4df5-a19a-b782a59ae52b
• Scroll to Featured Products
• Hover over a (featured) product to see the URL

Secret Key on dev

Hi there

How can I pass the secret key in a localhost .test environment?

1

Hi

Payment Intent Issue

Currently the demo is displaying the following error when testing the checkout: No such payment_intent: pi_(some_random_id)

Might be related to https://ecommerce-netlify.netlify.app/.netlify/functions/create-payment-intent displaying an error.

handleCardPayment is now deprecated

From Stripe documentation, handleCardPayment function is now deprecated. Are we gonna replace the workflow with a new approach?

database connect

Hello,

i'm wondering whitch db you'll use for storing data ? i'm currently learning more in depth jamstack and this parts is not really clear for me. I love netlify by the way .
Thanks to sharing your work

Update netlify.toml for Netlify Dev local workflow & functions

Hello Sarah,

I was wondering if we should add:

[dev]
  command = "yarn dev"
  port = 3000

to the netlify.toml for improved local workflow? We'll just have to add a caveat to the readme that users will need their own STRIPE_SECRET_KEY in the .env

Success message autodismisses

When I tested a purchase, I noticed the success message showed up, but then auto-dismissed back to an empty cart. If that's intentional, I'd argue against it (I hate stuff like that, cuz I find I tend to do too many things at once and miss the message ;) and suggest making it stick for another second or two.

If not intentional, then consider this the bug report! :)

Provide product variations (e.g size, ...) in the demo shop

First of all, thank you for this nice piece of software. Very inspiring!

Browsing the demo shop, I didn't see where / if you can set a product variation such as size, colours, etc.. besides the quantity. Something like this I have in mind: https://store.gatsbyjs.org/product/dark-deploy-tee

Is it already possible?
If not, how would you implement that feature? (= a few hints about what files to touch)
Is it something that could be added out of the box in the demo shop?

Adding same item to cart does not give expected quantity

When adding an item (already in the cart) to the cart again gives us an unexpected quantity.

Steps to reproduce

1. Go to https://ecommerce-netlify.netlify.com/
2. Scroll to see "Desi Avramovitz" and click on "View item"
3. Add 1 "Desi Avramovitz" to cart
4. Navigate to "Cart" and see the row "Desi Avramovitz" has a quantity of 1
5. Navigate back to "Desi Avramovitz" product page
6. Add 4 "Desi Avramovitz" to cart
7. Navigate to "Cart" and see the row "Desi Avramovitz" has a quantity of 8

Expected outcome

In the cart, we should see that the row "Desi Avramovitz" has a quantity of 5.

Input control blocks the product quantity

OS: Ubuntu 18.04.3 LTS
Browser: Firefox 71.0 (64bit)

It shows 1 but it's actually 18, the input control must be removed since it has already have a custom control.

Screenshot:

`Stripe V3 library not loaded!` error

I'm using the example code with Gridsome - but I get an error Stripe V3 library not loaded!.
I installed all the dependencies, & put the stripe.js script in the head of the html.

Thanks!

why you are no using async data and new fetch api ?

Currently i have a bug with fetch on the first load i have empty data

Payment Error

Hi Sarah

when I add to the cart, fill in the CC details and click on Pay with Card, I get the error: Oops, something went wrong. Redirecting you to your cart to try again.

When I then refresh the page, or click on Cart, the cart is empty.

When I trigger the function endpoint, I get the "{"status":"invalid http method"}" error.

I have cloned this repo and deployed to my netlify team as well, added in the Stripe keys and get the same error.

It doesnt seem like the function is getting triggered when I click to pay.

Can you help me understand what is going on?

SSR isn't working in some cases

This was debugged on twitter, the star component is causing some pages to not be routed correctly (hypothesis).

A quick fix is to use <no-ssr> but I'd rather remake the component from scratch as it wouldn't be too hard and people use this as a learning resource, so maybe it's helpful to see how it could be built from scratch.

Site doesn't handle 404s

Issue Deploying to Netlify... needs an index.html file?

This is awesome. Love what you've done here. I've become a raving fan haha. So good. You are brilliant.

Anyway, I am getting an error on Netlify after deploying that says -->

"Page Not Found
Looks like you've followed a broken link or entered a URL that doesn't exist on this site."

I'm guessing the 'build' should be creating all the necessary files, but I may have missed something along the way... Thanks for your help!! In Netlify I tried setting the build command to Yarn Build; also tried Yarn Generate... neither worked. Also tried npm run build && npm run generate...I tried setting the Publish Directory to dist... build failed when I did that...not sure what I'm missing. Works fine locally... Do you have some instructions on how to deploy to netlify? Thanks!

Inline cart update/remove functionality. :feature:

Hi, I was wondering what your thoughts are on UX improvements i.t.o adding the ability to delete items straight from /cart. And adding + and - buttons besides the amount in cart to update amount inline? I'd be happy to contribute these functionalities.