shopfront

상점가

• 소개와 영감
• 정적 Hugo 클라이언트 전용 MVP

종속성

• 휴고
• npm

설치 및 로컬 개발

 npm i
npm audit fix

여기에서 스트라이프 비밀 키를 찾으세요. (테스트 중에 /test/apikeys 사용을 고려하세요).

 echo STRIPE_SECRET=sk... > .env
edit config.toml
hugo server

제품 생성

content/2020/ 에서 제품 만들기

제품 콘텐츠 파일

제품 내용의 구조:

 content/YYYY/SKU/index.md

content/2020/wrt1/index.md 에서 머리말은 제품에 대한 단일 정보 소스 입니다. public/*/index.json 에서 JSON의 제품 목록은 make 통해 Stripe의 백엔드와 동기화됩니다.

그런 다음 개별 제품 페이지는 Hugo Data 템플릿을 통해 data/price 디렉토리에서 필수 클라이언트 전용 결제 가격 ID를 참조합니다.

스트라이프와 동기화

스트라이프로 제품을 만들 필요는 없습니다. stripe-sync.sh 이 작업을 수행합니다.

 make

웹사이트에 게시

public 콘텐츠를 웹 서버로 이동하세요.

스트라이프 클라이언트 전용 모드

• https://useshoppingcart.com/usage/cartprovider#client-only-checkout-mode

데이터 구조

layouts/_default/single.html 에서 https://useshoppingcart.com/usage/cartprovider/ 의 내용을 따릅니다.

배송 옵션

누구에게도 시간을 낭비하지 않기 위해 최대한 빨리 배송 제한 사항을 광고하는 방법은 무엇입니까?

예를 들어 https://online.vicsmeat.com.au/는 즉시 우편번호를 요청합니다.

해결 방법: GPS를 활성화하여 위치를 자동으로 채우고 위치를 입력할 수 있는 버튼을 제공합니다.

Stripe에는 verifyCartItems 세션에 문서화된 대로 Shipping_address_collection.allowed_countries 가 있습니다.