saleor storefront

Saleor-Storefront 저장소는 DEPRECATED

우리는 상업 상점을 구축하기위한 모범 사례에만 초점을 맞춘 멋진 디자인없이 처음부터 새로운 상점을 구축하기로 결정했습니다. React-Storefront라는 새로운 프로젝트는 Next.js를 기초로 사용하고 외관을위한 테일 바람을 사용합니다. 여기에서 찾을 수 있습니다 : https://github.com/saleor/react-storefront.

Saleor Storefront

참고 : 이 프로젝트는 Saleor 사용 방법에 대한 데모입니다. 스타터가 될 준비가되어 있지 않고 오히려 다른 케이스를 처리 할 수 있고 레시피 북으로 사용될 수있는 방법을 보여줍니다. 변화가 깨지고 코드가 끊임없이 발전하고 있으므로 자신의 위험에 사용하십시오.

GraphQL 구동, PWA, 단일 페이지 응용 프로그램 저장소 판매기.

특징

• GraphQL, Apollo Client, React, Next.js 및 TypeScrip으로 제작 된 헤드리스 전자 상거래 상점.
• 오프라인 모드 (베타)
• Saleor GraphQL API 통합
• 단일 페이지 응용 프로그램 경험
• Braintree 지불 게이트웨이 통합

데모

Saleor Storefront의 공개 데모를 참조하십시오!

또는 무료 Heroku 인스턴스에서 데모를 시작하십시오.

시작하기

이 지침을 통해 개발 및 테스트 목적으로 로컬 컴퓨터에서 프로젝트 사본을 실행할 수 있습니다.

전제 조건

• node.js 14.16
• 판매기의 실행 인스턴스.

스토어 프론트를 실행하려면 Saleor GraphQL API를 가리 키도록 NEXT_PUBLIC_API_URI 환경 변수를 설정해야합니다. 기본 설정으로 Saleor를 로컬로 실행중인 경우 NEXT_PUBLIC_API_URI http://localhost:8000/graphql/ 으로 설정됩니다. 변경하려면 .env.local 파일을 생성하고 여기에 추가하거나 export 명령을 사용하여 ENV 변수를 설정하십시오.

설치

저장소 복제 :

 git clone https://github.com/mirumee/saleor-storefront.git

프로젝트 디렉토리를 입력하십시오.

 cd saleor-storefront

안정적인 릴리스 사용

공식 안정 릴리스를 사용하려면 릴리스 태그로 체크 아웃하십시오.

 $ git checkout 2.11.0

모든 릴리스 목록을 참조하십시오 : https://github.com/mirumee/saleor-storefront/releases/

개발 버전 사용

최신 개발 버전을 사용하려면 master 브랜치로 체크 아웃하십시오.

 $ git checkout master

NPM 종속성 설치 :

 npm i

개발 서버 실행 :

 npm start

http://localhost:3000 으로 이동하여 상점에 액세스하십시오.

짓다

앱 실행을 컴파일하려면 :

 $ npm run build

앱을 컴파일하고 스토어 프론트를 정적 HTML 실행에 내보내려면 :

 $ npm run build:export

다음 서버 실행을 통해 앱을 컴파일하고 생산 모드로 실행하려면 다음과 같습니다.

 $ npm run build:start

생산 버전에서 Apollo DevTools를 활성화하려면 환경 변수를 설정하십시오.

 NEXT_PUBLIC_ENABLE_APOLLO_DEVTOOLS=true

사이프러스 테스트

Cypress 테스트를 실행하려면 설치 명령을 실행하여 모든 종속성 ( Cypress 포함)이 설치되어 있는지 확인하십시오.

 npm i

다음 환경 변수는 올바르게 테스트를 실행하려면 다음을 설정해야합니다.

• API_URI -GraphQL API 주소.
• STATIC_URL 정적 파일 대상 URL, 예를 들어. S3 버킷
• CYPRESS_USER_NAME Storefront 사용자 용 사용자 이름 (이메일).
• CYPRESS_USER_PASSWORD 위에서 언급 한 사용자의 경우.

Docker 컨테이너 관점에서 저장소를 실행하는 경우 다음 명령을 사용하여 테스트를 실행할 수 있습니다.

헤드리스 모드 :

 cy:run

Cypress UI 모드 :

 cy:open

지역 개발 환경에 대해 테스트를 실행하려면 다음 명령을 사용하십시오.

헤드리스 모드 :

 test:e2e:run

Cypress UI 모드 :

 test:e2e:dev

새로운 구성 요소 생성

모든 새로운 구성 요소는 원자 설계 지침을 따르고 src/@next/components 디렉토리에 배치해야합니다.

파일 구조는 plop 사용하여 생성 할 수 있습니다.

 npm run generate

저장고 수정

Spectrum Post에서

중요한 파일

• SALEOR -STOREFRONT/CONFIG/NEXT/CONFIG.BASE.JS -BASE NEXT.JS CONFIG 파일 웹팩 사용자 정의 조정이 포함되어 있습니다.
  • 앱 이름을 변경할 수 있습니다 (모바일에 설치 될 때 표시)
• SALEOR -STOREFRONT/SRC/PAGES/ APP .TSX- 메인 엔트리 포인트 파일. 렌더링은 구성 요소, Apollo-Client 및 다른 사람들은 위의 index.html 파일의 루트 div에 있습니다. 헤드 섹션도 포함 - 여기에서 Storefront의 제목을 변경할 수 있습니다.
• SALEOR -STOREFRONT/SRC/CORE/CONFIG.TS- 페이지 당 표시된 제품 수, 지원 이메일, 게이트웨이 제공 업체, 소셜 미디어 및 일부 메타를 제어합니다.
  • 지원 이메일을 변경할 수 있습니다
  • 페이지 당 표시된 제품을 변경할 수 있습니다
  • 게이트웨이 제공 업체를 변경할 수 있습니다
  • 바닥 글에 표시된 소셜 미디어 링크를 변경할 수 있습니다.
  • 일부 메타 옵션을 변경할 수 있습니다
• Saleor -Storefront/Src/Images/ - 로고, 카트, 파비콘 등의 모든 이미지를 보유합니다.
  • Storefront 로고, Favicon을 변경하거나 여기에 새 이미지를 추가 할 수 있습니다.
• Saleor -Storefront/SRC/GlobalStyles/SCSS/Variables.Scss- 색상, 글꼴 크기, 컨테이너 폭, 미디어 중단 점 등과 같은 기본 스타일이 포함되어 있습니다.
• Saleor -Storefront/src/@next/globalstyles/ - 더 기본 스타일, 테마, 미디어 및 상수가 포함되어 있습니다.
• SALEOR -STOREFRONT/SRC/VIEWS/ -이 폴더는 뷰 또는 각 페이지에 표시되는 내용을 제어합니다. 대부분의 뷰에는 페이지의 레이아웃을 제어하는 "page.tsx"라는 파일과 쿼리를 호출하고 데이터가 구성 요소를 렌더링하는 "view.tsx"라는 파일이 있습니다.
  • 여기에 저장면에 또 다른 뷰를 추가 할 수 있습니다. 경로를 추가해야합니다 (아래 경로 참조).
• SALEOR -STOREFRONT/SRC/@NEXT/Pages/ - 다른 페이지를 수정/추가하기위한 두 번째 지점. 새 페이지를 추가하기위한 권장 디렉토리입니다.
• SALEOR -STOREFRONT/SRC/PATHS.TS- 이 폴더에는 모든 경로가 포함되어 있습니다. 여기에 새로운 것을 추가하는 곳이 있습니다.
• Saleor -Sporefront/Src/Pages/ -이 폴더에는 Next.js 라우팅으로 변환되는 파일이 포함되어 있습니다. 여기에 새로운 경로를 추가하는 곳이 있습니다.
  1. 경로에서 새로운 경로를 내보내십시오
  2. 내부 페이지에서 원하는 경로에 Correnspond라는 이름의 새 파일을 만듭니다 (중첩 경로에 대해 자세히 알아보십시오). 생성 된 경로 파일에서 뷰를 가져옵니다. 엔드 엔드 내보내기 기본 내보내기로 내보내십시오.
  3. import Link from "next/link" 에 연결하고 Paths.ts에서 만든 새 경로를 사용하려면 (가져 오십시오)
• SALEOR -STOREFRONT/SRC/APP/APP.TSX- 이것은 (아래 설명)를 렌더링하는 주요 구성 요소와 다른 구성 요소입니다.

결제 게이트웨이 추가

• SALEOR -STOREFRONT/SRC/CORE/CONFIG.TS- 여기에 새 게이트웨이 제공 업체 이름을 추가하십시오.
• Saleor -Sporefront/Src/@Next/Components/Organisms/ - 새로운 결제 게이트웨이 구성 요소를위한 새 폴더를 만듭니다.
• Saleor-Storefront/src/@next/components/organisms/paymentgatewayslist/paymentgatewayslist.tsx- 새 게이트웨이 구성 요소 가져 오기에 새 스위치 케이스를 작성하여 게이트웨이 구성 요소를 처리하십시오.

확인 이메일 수신

• Saleor Core에 대해 이메일 _url 환경 변수를 설정합니다.
  • Docker 사용 - 여기에서 API 및 작업자 서비스에 새로운 환경 변수로 이메일을 추가하십시오.
• 이메일이 작동하는 데 문제가 있습니까?
  • Gmail
    • "덜 안전한 앱 액세스"가 켜져 있는지 확인하십시오. "Google 계정 관리"> 보안 탭으로 이동하십시오. 기본적으로 보안상의 이유로 설정이 꺼져 있습니다.
    • 2FA를 사용하는 경우 앱 비밀번호를 설정하고 일반 로그인 비밀번호 대신 사용하십시오.

멀티 채널

• [saleor_channel_slug] 환경 변수를 설정합니다. - 기본값 : default-channel .

특허

이 프로젝트는 BSD-3-Clause 라이센스에 따라 라이센스가 부여됩니다. 자세한 내용은 라이센스 파일을 참조하십시오.

Saleor Commerce의 ❤️으로 제작되었습니다

[email protected]