스타 역사
WooCommerce 백엔드가있는 JS Ecommerce 사이트
라이브 URL : https://next-woocommerce.dfweb.no
목차 (TOC)
설치
- WordPress 플러그인 디렉토리에 다음 필요한 플러그인을 설치하고 활성화하십시오.
- WordPress의 WooCommerce 전자 상거래.
- wp-graphql은 WordPress에 GraphQL을 노출시킵니다.
- wp-graphql-woocommerce는 wpgraphql 스키마에 woocommerce 기능을 추가합니다.
- WP-Algolia-woo-Indexer WordPress 플러그인 코딩. Woocommerce 제품을 Algolia로 보냅니다. 검색이 필요합니다.
옵션 플러그인 :
- 헤드리스 워드 프레스는 프론트 엔드를 비활성화하므로 백엔드 만 액세스 할 수 있습니다. (선택 과목)
현재 릴리스는 테스트되었으며 다음 버전으로 작업하는 것으로 확인되었습니다.
- WordPress 버전 6.6.2
- WooCommerce 버전 7.4.0
- WP GraphQL 버전 1.13.8
- WoographQL 버전 0.12.0
- WPGRAPHQL CORS 버전 2.1
디버깅 및 테스트를 위해서는 다음 중 하나를 설치하십시오.
https://addons.mozilla.org/en-us/firefox/addon/apollo-developer-tools/ (Firefox)
https://chrome.google.com/webstore/detail/apollo-client-developer-t/jdkknkkbebbapilgoeccciglkfbmbnfm (Chrome)
WooCommerce에 이미 일부 제품이 있는지 확인하십시오
복제 또는 포크 리포지토리를 수정하고 .env.example 수정하고 .env 로 이름을 바꿉니다.
그런 다음 이에 따라 환경 변수를 Vercel 또는 선호하는 호스팅 솔루션에서 설정하십시오.
https://vercel.com/docs/environment-variables를 참조하십시오
설정에 따라 값을 수정하십시오
npm run dev 로 서버를 시작하십시오
Woocommerce에서 대구 (현금 온 디맨드) 결제 방법을 활성화합니다
카트에 제품을 추가하십시오
체크 아웃 진행 (Gå Til Kasse)
세부 사항을 채우고 주문을 배치하십시오
특징
- 다음 .js 버전 14.3.11
- 반응 버전 18.3.1
- TypeScript
- 극작가와의 테스트
- WooCommerce GraphQL API 및 목록 이름, 가격 및 제품 표시 이미지에 연결
- 간단한 제품 및 가변 제품에 대한 지원
- WooCommerce와의 카트 취급 및 결제 (지금은 배송 현금)
- Algolia 검색 (Algolia-woo-Indexer 필요)
- 가능한 경우 WCAG 접근성 표준을 충족합니다
- 이미지가없는 제품에 대한 자리 표시 자
- GraphQL을 가진 아폴로 클라이언트
- 후크 형태를 반응합니다
- 기본 HTML5 양식 검증
- 프레이머 모션, 스타일 구성 요소 및 애니메이션이있는 애니메이션
- 스타일링 된 구성 요소로 생성 된 스피너로드
- 내비게이션 중에 NPROGRESS로 페이지로드 진행 상황을 보여줍니다
- 완전 반응 형 디자인
- 카테고리 및 제품 목록
- 주식 상태를 표시하십시오
- NextJS 기능이 내장 된 예쁜 URL
- 스타일링을위한 테일 윈드 3
- JSDOC 의견
문제 해결
카트가 정의되지 않은 오류 또는 기타 GraphQL 오류가 발생합니다.
WP-GraphQL-WooCommerce 플러그인의 0.12.0 버전을 사용하고 있는지 확인하십시오.
제품 페이지가로드되지 않습니다
제품의 속성을 확인하십시오. 현재 응용 프로그램에는 크기와 색상이 필요합니다.
문제
전반적으로 응용 프로그램은 의도 한대로 작동하지만 생산 환경에서 광범위하게 테스트되지 않았습니다. 생산 환경에 배치하기 전에 더 많은 테스트 및 디버깅이 필요합니다.
그 말로 다음을 명심하십시오.
- 현재 간단한 제품과 가변 제품 만 문제없이 작동합니다. 다른 제품 유형은 작동하는 것으로 알려져 있지 않습니다.
- 배송 중 현금 (COD) 만 현재 지원됩니다. 더 많은 지불 방법이 나중에 추가 될 수 있습니다.
이 프로젝트는 Browserstack으로 테스트되었습니다.
TODO
- 카트/체크 아웃 페이지에 총계를 추가하십시오
- 청구서 주소를 배송 주소로 복사하십시오
- 주문 대시 보드를 추가하고 로그인이 필요합니다
- 재고가 아닌 제품을 숨 깁니다
- 더 나은 SEO를 추가하십시오
- 더 잘 작동 할 때 다음/이미지를 다시집니다
