sdras / ecommerce-netlify Goto Github PK

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.

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.

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:

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?

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

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

Hi

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

Hi there

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

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

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.

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!

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!

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

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.

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

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.

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! :)

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

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)
    }
  },

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?

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