next shopify starter

다음 .js + Tailwind CSS + Shopify 스타터

라이브 데모 • 더 많은 스타터보기 • 트위터에서 나를 팔로우하십시오.

다음은 Front End의 JS + Tailwind CSS를 사용하는 완벽하게 기능적인 전자 상거래 상점이며 Shopify Storefront API를 활용하여 Shopify 백엔드와 상호 작용합니다. 여기에서 라이브 데모를 볼 수 있습니다.

GraphQL을 사용하여 Shopify 데이터를 쿼리하고 CART 정보를 LocalStorage에 저장하여 사용자 세션을 유지합니다. 마지막으로 - Shopify Checkout을 사용하여 사용자가 항목을 구매할 수 있습니다. 예제 스토어 에서이 재생을 볼 수 있습니다. 예 - 상점은 기능적이며 스티커를 구입할 수 있습니다. ?

고성능

데스크탑	이동하는

모바일 반응

목록	카트

기술

• 다음 .js + 테일 윈드 CSS
• 그래프 QL
• 지속적인 사용자 세션을위한 LocalStorage
• Shopify
• Vercel
• 글꼴 멋진 아이콘
• Josefin Sans Google 글꼴

사용 방법

기본적으로 매장은 하나의 컬렉션으로 모든 제품을 쿼리하고 표시하도록 설정됩니다. 여러 컬렉션 또는 전체 매장을 쿼리하도록이를 확장 할 수 있습니다.

GraphQL 쿼리의 페이지 매김에 대한 메모

GraphQL 쿼리는 모두 Shopify에 의해 250으로 설정된 최대 제품/변형/이미지 수를 가져 오도록 하드 코딩되어 있습니다. 나는 일을 단순하게 유지하기 위해 이것을했다. Pagination은 쿼리를 복잡하게 만들었고 대부분의 사용 사례에 250 개의 항목이 충분합니다.

페이지 매김이 필요한 경우 커서 필드를 추적하고 모든 항목을 가져올 때까지 데이터를 계속 쿼리해야합니다.

설정 환경 변수

루트 디렉토리에서 .env.local 파일을 만듭니다. 이 4 가지 변수를 추가해야합니다.

 NEXT_PUBLIC_SHOPIFY_STORE_FRONT_ACCESS_TOKEN=
NEXT_PUBLIC_SHOPIFY_STORE_DOMAIN=
NEXT_PUBLIC_SHOPIFY_COLLECTION=
NEXT_PUBLIC_LOCAL_STORAGE_NAME=

next_public_shopify_store_front_access_token 및 next_public_shopify_store_domain (domain_name.myshopify.com과 같은 것이 필요합니다)은 Shopify Storefront API에 액세스하는 데 필요합니다 (Shopify Store에서 설정했는지 확인하십시오. 더 많은 정보는 더 많은 정보를 얻으려면 Docs를 참조하십시오.

next_public_shopify_collection은 뽑을 수있는 컬렉션의 이름입니다. 그리고 next_public_local_storage_name은 사용자가 카트 정보를 아래에 저장할 키의 이름입니다. 정확한 이름은 독특하게 만들어서 다른 저장된 객체와 충돌 할 가능성이 적지 만 그다지 중요하지는 않습니다. YourStorenAshoPifyStore와 같은 것이 귀하의 shopify 상점 이름으로 충분합니다.

설치

프로젝트 디렉토리로 변경하고 다음 명령을 실행하십시오.

 yarn && yarn dev

사이트 메타 데이터 업데이트

다음.config.js 파일에서 사이트 메타 데이터를 업데이트 할 수 있습니다.

 env: {
  siteTitle: 'Your Company',
  siteDescription: 'Your company description.',
  siteKeywords: 'your company keywords',
  siteUrl: 'https://doggystickers.xyz',
  siteImagePreviewUrl: '/images/main.jpg',
  twitterHandle: '@your_handle'
} 

색상 업데이트

Tailwind.config.js 파일에서 색상 팔레트를 업데이트 할 수 있습니다.

 colors: {
  palette: {
    lighter: '',
    light: '',
    primary: '',
    dark: '',
  },
},

PWA (Progressive Web App) 데이터를 업데이트하십시오

Manifest.json 파일과 공개/이미지/아이콘 폴더 아래의 아이콘을 업데이트하십시오.

https://realfavicongenerator.net/와 같은 온라인 무료 도구를 사용하여 다양한 아이콘 크기와 favicon.ico 파일을 신속하게 생성 할 수 있습니다.

전개

여러 서비스를 사용 하여이 내용을 배포 할 수 있습니다. Vercel and Netlify는 내가 선호하고 Github Repo와 설정하고 동기화하기가 매우 쉽습니다.

신용 거래

이 가게는 멋진 개츠비 스와그 가게와 멋진 일을 무료로 제공하는 나보다 훨씬 더 많은 다른 개발자들로부터 영감을 받았습니다.

특허

Gatsby Swag Store가 처음 시작했을 때 사람들이 Jamstack 전자 상거래 상점 주위를 탐색하는 데 도움이되면 MIT 라이센스에 따라이 코드를 공개했습니다.

커피를 사세요! ☕

이것이 유용하다고 생각하고 감사를 표하고 싶다면 커피를 살 수 있습니까?

상점에서 강아지 스티커를 구입할 수도 있습니다! ?