ski043 / nextjs-commerce-tutorial Goto Github PK

A Simple but powerful Ecommerce Store built with Nextjs.14

TypeScript 95.03% CSS 4.33% JavaScript 0.64%

ecommerce nextjs nextjs14 react sanity typescript vercel

nextjs-commerce-tutorial's Introduction

Installation Command:

npm i stripe use-shopping-cart next-sanity @stripe/stripe-js @sanity/image-url --force

Hero Images:

https://github.com/ski043/nextjs-commerce-tutorial/tree/main/public/HeroImages

Products:

#Product One: Nike Air VaporMax 2023 Flyknit

Price: 200

Category: Men

description: Elevate your sneaker game to new heights with the latest evolution of the iconic Air VaporMax series. The 2023 Flyknit combines cutting-edge technology, exceptional comfort, and bold style. Its innovative Flyknit upper offers a second-skin fit, ensuring a snug yet breathable feel with every step. The renowned VaporMax sole unit delivers unparalleled cushioning and responsiveness, providing a smooth ride that's perfect for both athletic performance and street-style fashion.

images: https://github.com/ski043/nextjs-commerce-tutorial/tree/main/public/ProductOne

#Product Two: Nike Sportswear Phoenix Fleece

Price: 35

Category: Women

Description: Crafted with a blend of warmth and style, the Phoenix Fleece is a versatile addition to your wardrobe. Its soft and cozy fleece fabric offers a perfect balance of comfort and durability, making it ideal for cool days and relaxed outings. With a modern, sporty design and the iconic Nike Swoosh, this fleece adds a touch of urban flair to your look. Whether you're hitting the gym or hanging out with friends, the Nike Sportswear Phoenix Fleece keeps you both cozy and stylish. Elevate your everyday wear with this classic piece of Nike Sportswear.

images: https://github.com/ski043/nextjs-commerce-tutorial/tree/main/public/ProductTwo

#Product Three: Nike Air Force 1 '07

Price: 85

Category: Teens

Description: The Nike Air Force 1 '07 represents a legend in the world of sneakers. With a design that transcends generations, this classic silhouette has remained a symbol of street-style culture for over three decades. Its white leather upper and clean lines are a canvas for self-expression, allowing you to pair it with any outfit, from casual to chic.

Images: https://github.com/ski043/nextjs-commerce-tutorial/tree/main/public/ProductThree

#Product Four Nike Windrunner

Price: 200

Category: Men

Description: The Nike Windrunner is more than just a jacket; it's a symbol of enduring style and performance. With a design that has stood the test of time, this lightweight and versatile outerwear piece is your go-to choice for brisk mornings, breezy afternoons, and everything in between. Its distinctive chevron design on the chest pays homage to its heritage, while the modern materials and construction ensure it's ready for the demands of today.

Images: https://github.com/ski043/nextjs-commerce-tutorial/tree/main/public/ProductFour

Deploy on Vercel

The easiest way to deploy your Next.js app is to use the Vercel Platform from the creators of Next.js.

Check out our Next.js deployment documentation for more details.

nextjs-commerce-tutorial's People

Contributors

Stargazers

Watchers

nextjs-commerce-tutorial's Issues

SSR

Can you please tell me how to enable SSR to display normal code with H1, H2 etc.

Category & Links Category

Can you please tell me how to add a separate title and link for a category? If I have the title: Interior and Clothing. The link does not work. And to make everything merged is not beautiful

Unable to resolve image URL from source...

Hi, when I want to use the urlFor(image).url() function, into the image prop, in the AddToBag component, I'm having the following error:

Unhandled Runtime Error
Error: Unable to resolve image URL from source ([{"_type":"image","_key":"2df5c6d2ad5f","asset":{"_ref":"image-0d5ec6fed1e3db3dfe4ac1a14a886fc70e7537b0-800x1065-webp","_type":"reference"}},{"_type":"image","_key":"728563eeb445","asset":{"_ref":"image-4e7bd4bf0e00a5210667fedddcf61672a4e964c1-800x1065-webp","_type":"reference"}},{"_type":"image","_key":"fa629b138da8","asset":{"_ref":"image-309c23d4b559cb78a244504b3d6a1f48d9e01701-800x1065-webp","_type":"reference"}}])

The error goes away when I specify that urlFor(image).url() accepts an array, but the item image in the cartModal, doesn't render.

The component looks like this:

'use client'

import { useShoppingCart } from 'use-shopping-cart'

import { Button } from './ui/button'
import { urlFor } from '@/app/lib/sanity'


export interface CartItems {
  name: string,
  description: string,
  price: number,
  currency: string,
  image: any[],
}


export default function AddToCartClient({ name, description, price, currency, image }: CartItems) {
  const { addItem, handleCartClick } = useShoppingCart()

  const item = {
    name,
    description,
    price,
    image: urlFor(image[0]).url(),
    currency,
    sku: 'asd'
  }

  return (
    <Button onClick={() => {
      addItem(item),
        handleCartClick()
    }}>Add to cart</Button>
  )
}

Can someone help me? Thanks!

The idea is. (Next + Sanity + Next Auth + Vercel Storage)

Tell me, please. It is possible to make a video, with the creation of the site as I drew on the screenshot below. I noticed that everyone makes sites with classic stores. I really want to understand how to work with Vercel Storage.

My idea:
Use a product catalog through Sanity. Without using Stripe and their similar payment systems. When I add a product to the Sidebar, it gets collected there.

Then I click on the button and go to the Login page, when I'm logged in, everything I added is just stored on the profile or dashboard page.

Site subscriptions to specific product categories. I don't buy the product, I take it temporarily for a month or a year. Ideally add a timer too, that after a month it will disappear from the profile.

Please tell me. Is it possible to do this?
No one has not done this as an example. And it would be very cool!

Counter of added items

Hello. Could you please tell me Will you be able to add to your project a counter of added items near the cart icon?

Move categories to [product] folder

Can you please tell me how to move categories to [product] folder ?

ski043 / nextjs-commerce-tutorial Goto Github PK

nextjs-commerce-tutorial's Introduction

Installation Command:

Hero Images:

Products:

Deploy on Vercel

nextjs-commerce-tutorial's People

Contributors

Stargazers

Watchers

Forkers

nextjs-commerce-tutorial's Issues

SSR

Category & Links Category

Unable to resolve image URL from source...

The idea is. (Next + Sanity + Next Auth + Vercel Storage)

Counter of added items

Move categories to [product] folder

Recommend Projects

React

Vue.js

Typescript

TensorFlow

Django

Laravel

D3

Recommend Topics

javascript

web

server

Machine learning

Visualization

Game

Recommend Org

Facebook

Microsoft

Google

Alibaba

D3

Tencent