jamstack ecommerce 다운로드 -Jamstack jamstack ecommerce 소스 코드 다운로드

jamstack ecommerce

AI 소스 코드

1.0.0

다운로드

Jamstack Ecommerce 다음

Jamstack Ecommerce Next는 Next.js를 사용하여 완전히 구성 가능한 전자 상거래 사이트로 빠르게 작동하고 실행할 수있는 방법을 제공합니다.

상자 밖에서이 사이트는 providers/inventoryProvider.js 의 제공자가 제공하는 완전히 정적 데이터를 사용합니다. getInventory 함수의 통화를 변경하여 실제 API의 데이터를 가져 오도록이 공급자를 업데이트 할 수 있습니다.

라이브 미리보기

라이브 미리보기를 보려면 여기를 클릭하십시오.

다른 Jamstack 전자 상거래 페이지

카테고리보기

항목보기

카트보기

관리자 패널

시작하기

프로젝트를 복제하십시오

$ git clone https://github.com/jamstack-cms/jamstack-ecommerce.git

종속성 설치 :

$ yarn

# or

$ npm install

프로젝트를 실행하십시오

$ npm run dev

# or to build

$ npm run build

Vercel에 배포하십시오

Vercel Cli를 사용하십시오

vercel

AWS에 배포하십시오

npx serverless

프로젝트에 대해

꼬리 바람

이 프로젝트는 Tailwind를 사용하여 스타일입니다. 이것이 어떻게 작동하는지 자세히 알아 보려면 여기에서 Tailwind 문서를 확인하십시오.

구성 요소

변경 / 수정하려는 주요 파일, 구성 요소 및 이미지는 다음과 같습니다.

로고 - 공개/로고 .png
버튼, ListItem 등 - 구성 요소
양식 구성 요소 - 구성 요소/Formcomponents
컨텍스트 (state) - 컨텍스트/maincontext.js
페이지 (관리자, 카트, 체크 아웃, 인덱스) - 페이지
템플릿 (카테고리보기, 단일 항목보기, 재고보기) - 템플릿

작동 방식

설정함에 따라 재고는 로컬 하드 코딩 된 인벤토리 항목에서 가져옵니다. 이는 인벤토리 제공 업체를 변경하여 Shopify 또는 다른 CMS 또는 데이터 소스와 같은 원격 소스에서 가져 오도록 쉽게 구성 할 수 있습니다.

재고 공급자 구성

자체 인벤토리 제공 업체로 Utils/InventoryProvider.js를 업데이트하십시오.

빌드 시간에 이미지를 다운로드하십시오

원격 소스에서 이미지를 가져 오도록 제공자를 변경하면 빌드 시점에 이미지를 다운로드하여 성능을 향상시킬 수도 있습니다. 다음은이 사용 사례에 대해 작동 해야하는 일부 코드의 예입니다.

 import fs from 'fs'
import axios from 'axios'
import path from 'path'

function getImageKey ( url ) {
  const split = url . split ( '/' )
  const key = split [ split . length - 1 ]
  const keyItems = key . split ( '?' )
  const imageKey = keyItems [ 0 ]
  return imageKey
}

function getPathName ( url , pathName = 'downloads' ) {
  let reqPath = path . join ( __dirname , '..' )
  let key = getImageKey ( url )
  key = key . replace ( / % / g , "" )
  const rawPath = ` ${ reqPath } /public/ ${ pathName } / ${ key } `
  return rawPath
}

async function downloadImage ( url ) {
  return new Promise ( async ( resolve , reject ) => {
    const path = getPathName ( url )
    const writer = fs . createWriteStream ( path )
    const response = await axios ( {
      url ,
      method : 'GET' ,
      responseType : 'stream'
    } )
    response . data . pipe ( writer )
    writer . on ( 'finish' , resolve )
    writer . on ( 'error' , reject )
  } )
}

export default downloadImage

이 기능을 사용하여 가져온 후 인벤토리 데이터를 매핑하고 다운로드 된 이미지의 위치를 참조하여 이미지 경로를 교체 할 수 있습니다. 아마도 다음과 같이 보일 것입니다.

 await Promise . all (
  inventory . map ( async ( item , index ) => {
    try {
      const relativeUrl = `../downloads/ ${ item . image } `
      if ( ! fs . existsSync ( ` ${ __dirname } /public/downloads/ ${ item . image } ` ) ) {
        await downloadImage ( image )
      }
      inventory [ index ] . image = relativeUrl
    } catch ( err ) {
      console . log ( 'error downloading image: ' , err )
    }
  } )
)

인증 / 관리자 패널로 업데이트

가입, 로그인, 로그 아웃 및 로그인을 확인하여 페이지/admin.js를 업데이트하십시오.
실제 인벤토리 API와 상호 작용하는 메소드로 구성 요소/ViewInventory.js를 업데이트하십시오.
실제 인벤토리 API에 항목을 추가하는 메소드가 포함 된 구성 요소/formcomponents/addinventory.js를 업데이트하십시오.