sdras / ecommerce-netlify Goto Github PK
View Code? Open in Web Editor NEW๐ A JAMstack Ecommerce Site built with Nuxt and Netlify Functions
Home Page: https://ecommerce-netlify.netlify.app/
๐ A JAMstack Ecommerce Site built with Nuxt and Netlify Functions
Home Page: https://ecommerce-netlify.netlify.app/
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
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?
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.
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!
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)
}
},
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!
Currently i have a bug with fetch on the first load i have empty data
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! :)
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
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:
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.
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.
Hi there
How can I pass the secret key in a localhost .test environment?
When adding an item (already in the cart) to the cart again gives us an unexpected quantity.
In the cart, we should see that the row "Desi Avramovitz" has a quantity of 5.
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.
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?
Hi
I tried to run with yarn install but it is not working correctly.
When I try to install packages, it says error.
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.
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
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.
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:
From Stripe documentation, handleCardPayment function is now deprecated. Are we gonna replace the workflow with a new approach?
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.
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.