어떻게 Snipcart와 TakeShape를 사용하여 Jamstack에서 전자상거래 사이트를 구축합니까
우리의 단계별 지침에 따라 30분 안에 자신의 점포를 창설하다
만약 당신이 Jamstack을 사용하여 당신의 고객을 위해 로그인 페이지와 마케팅 사이트를 만들고 있다면, 새로운 고객이 문에 들어와서 온라인 상점을 요구할 것이다.Jamstack 사이트에서는 이 점을 실현할 수 없습니다. 그렇죠?틀렸어
사실 전자상거래 사이트를 만드는 것에 대해 이야기할 때, Jamstack은 비길 데가 없다.전자상거래 업무에서 전환 최적화는 성공의 필수 조건이다. 전환율을 높이는 가장 좋은 방법 중 하나는 신속하게 발전하는 사이트를 가지고 이 사이트는 당신의 제품과 함께 확장할 수 있다.
Tammy Everts의 study run on cart abandonment에서 그녀는 "전환을 극대화하기 위해 로그인 페이지에서 주문 확인 페이지까지의 매 페이지의 거래는...[2]초도 안 걸린다"는 것을 발견했다.모든 데이터베이스가 구동되는 사이트에 대해 말하자면, 2초도 안 되는 시간 안에 모든 페이지를 제공하는 것은 어려운 작업이지만, CDN에서 서비스를 제공하는 정적 사이트에 있어서는 이것은 쉬운 장거이다!
더욱 중요한 것은 많은 전자상거래 플랫폼들이 자신만의 독특한 데이터 관리 스타일을 가지고 있는데 이것은 그들의 전문 사이트 건설자와 관련이 있다. 이런 사이트들은 Jamstack의 사이트보다 훨씬 느리다.
반면에 헤드 없는 CMS를 사용하면 필요에 따라 맞춤형으로 제작하여 전 세계 CDN에 배치할 수 있습니다. 이것은 신속하고 안정적이며 좋은 사이트를 전환하는 가장 좋은 방법입니다.그러나 카트, 신용카드 처리 및 주문 처리 등의 기능은 어떻게 제공됩니까?
Snipcart, Jamstack의 전자상거래 솔루션을 입력하십시오!
Snipcart는 Jamstack 전자상거래에 매우 적합합니다. 왜냐하면 그들은 당신이 어떤 전단을 사용하든 재고를 어떻게 관리하든 상관하지 않기 때문입니다.사용자가'쇼핑카에 추가'단추를 눌렀을 때, 데이터는 Snipcart의 JavaScript SDK로 전달되고, 나머지 데이터는 그들이 처리합니다!그들은 쇼핑카트와 계산 절차를 제공한다.주문, 폐기 손수레 및 고객 데이터 처리에 사용되는 계기판;더 강력한 애플리케이션을 위한 API
TakeShape와 Snipcart를 함께 사용하도록 하겠습니다.
이 프레젠테이션에서 우리는 TakeShape의 CMS와 정적 사이트 생성기를 사용하여 전자상거래 사이트를 구축하고 Snipcart를 사용하여 쇼핑카트와 계산 체험을 처리하는 방법을 볼 것이다.우리는 30분 안에 이 모든 것을 완성할 것이다.
Bryan은 TakeShape와 Snipcart를 연결합니다.그가 어떻게 이 모든 것을 한데 결합시켰는지 봐라!
우선, 우리는 TakeShape의 "Shape Shop"예시 항목을 복사하고 페이지에 스크립트를 삽입하여 Snipcart를 설치함으로써 우리의 전자상거래 사이트를 만들 것이다.그런 다음 Snipcart를 사용하도록 카트에 추가 단추를 수정하고 일부 추가 필드를 사용하여 제품을 업데이트합니다.마지막으로, 우리는 우리의 새로운 사이트를 테스트하여 그것의 모든 업무를 확보할 것이다.
TakeShape 예제 항목 만들기
만약 이것이 당신이 처음으로 TakeShape를 사용한다면, 당신은 sign up for a free account이 필요합니다.그런 다음 Shape Shop 템플릿을 사용하여 새 프로젝트를 만들고 GitHub 클론 starter 프로젝트에서 다음을 수행합니다.
git clone https://github.com/takeshape/takeshape-samples.git takeshape-samples && cd takeshape-samples/shape-shop
프로젝트에 Snipcart 설치
샘플 라이브러리를 만들고 실행하면 Snipcart 계정을 만들어야 합니다.
sign up for a free Snipcart account 이후, their basic installation instructions 이후 쇼핑 카트에 접근할 수 있는 모든 페이지에 CSS 파일, 스크립트 태그, 추가 div를 포함해야 합니다.
내비게이션에 쇼핑 카트 링크를 포함하고 싶다면, 이것은 웹 사이트의 대다수 페이지가 될 수 있다.따라서 TakeShape 프로젝트의 기본 레이아웃에 Snipcart 코드를 추가합니다.
Shape Shop 프로젝트에서 이것은 파일
layouts/default.html입니다.Snipcart의 CSS 파일은 다른 CSS 링크 이후의 <head> 요소에 포함됩니다.<link rel="stylesheet" href="/stylesheets/base.css"/>
<link rel="stylesheet" href="/stylesheets/feature.css"/>
<link rel="stylesheet" href="/stylesheets/footer.css"/>
<link rel="stylesheet" href="/stylesheets/header.css"/>
<link rel="stylesheet" href="/stylesheets/hero.css"/>
<link rel="stylesheet" href="/stylesheets/pagination.css"/>
<link rel="stylesheet" href="/stylesheets/products.css"/>
<link rel="stylesheet" href="/stylesheets/thumb.css"/>
<!-- Snipcart CSS file goes here -->
<link rel="stylesheet" href="https://cdn.snipcart.com/themes/v3.0.11/default/snipcart.css" />
div이 표시되기 전에 Snipcart의 스크립트와 </body>을 추가합니다.<script src="/javascripts/main.js"></script>
<!-- Snipcart div and JS here -->
<div hidden id="snipcart" data-api-key="{{YOUR-SNIPCART-API-KEY}}"></div>
<script src="https://cdn.snipcart.com/themes/v3.0.11/default/snipcart.js"></script>
</body>
{{YOUR-SNIPCART-API-KEY}}을 Snipcart의 API 키로 교체해야 합니다. 이 키는 Account → API Keys에서 찾을 수 있습니다.우리는 테스트 모드에서 시작할 것이다. 이것은 우리가 잠시 후에 가짜 신용카드 번호를 사용하여 구매 절차를 검사할 수 있도록 할 것이다.
이제 모든 페이지에서 Snipcart의 HTML API에 액세스할 수 있습니다.
Snipcart의 카트에 추가 단추 사용
다음은
pages/product/individual.html 템플릿을 수정하고 Snipcart의'쇼핑카에 추가'단추를 추가합니다.Snipcart는 페이지에서 카트 단추를 찾아 HTML
<button>이 아닌 <a>으로 표시하기를 원하기 때문에 이것은 우리의 첫 번째 변경입니다.우리는 형상 상점에 부착된 닻을 바꿀 것이다.<button class="button snipcart-add-item">
Add to cart
</button>
button 클래스는 스타일링에 사용되며 Shape Shop의 기본 CSS에 내장됩니다.snipcart-add-item 클래스는 Snipcart의 JavaScript 제품 정보가 어디에 있는지, 그리고 언제 상품을 카트에 추가할지 알려주는 관건이다.여기서부터 우리는 data attributes을 통해 단추에 다른 제품의 상세한 정보를 추가하고 우리의 TakeShape 데이터의 각종 변수를 사용해야 한다.
Shape Shop 템플릿에는 이 기능을 수행하는 데 필요한 대부분의 필드를 포함하는 제품 컨텐트 유형이 포함되어 있습니다.
data/product.graphql 파일의 TakeShape에서 데이터를 추출하여 템플릿에 "product"변수로 제공합니다.다음은 데이터를 추가한 버튼의 모양입니다.
<button class="button snipcart-add-item"
data-item-id="{{ product.name }}"
data-item-price="{{ product.price }}"
data-item-url="{{ product | route('product') }}"
data-item-description="{{ product.description }}"
data-item-image="{{ product.image.path | image }}"
data-item-name="{{ product.name }}">
Add to cart
</button>
우선,
data-item-id은 제품의 유일한 식별자이므로 이름 문자열만 입력해서는 안 될 수도 있습니다.이 문제를 해결하기 위해서는 고유한 SKU 번호를 사용하는 것이 좋습니다.대부분의 상점의 재고 관리 시스템에 이 기능이 내장되어 있다.이 필드를 CMS에 추가해야 합니다.또 다른 잠재적인 문제는 가격이 영원히 변하지 않는다는 것이다.우리의 데이터에서 우리는 이미 판매 가격이 있다상품이 할인되든 안 되든 우리는 스니펫에 정확한 가격을 전달할 수 있도록 확보해야 한다.
TakeShape에서 제품에 SKU 필드 추가
우선, TakeShape의 항목에 들어가서 제품 내용 유형을 편집하여 SKU가 있는 새 필드를 추가해야 합니다.고객이 원하는 대로 SKU 번호 또는 ID라고 할 수 있습니다.필드의 이름을 반드시 주의해야 한다.
컨텐츠 유형에 대한 변경 사항을 저장하고
data/product.graphql의 GraphQL 질의에 새 필드를 추가합니다.query {
getProductList(sort: [{field: "_enabledAt", order: "desc"}]) {
total
items {
_contentTypeName
_enabledAt
name
skuNumber
...
}
}
}
/pages/product/individual.html의 카트에 추가 버튼에 있는 데이터를 업데이트합니다.제품에 SKU가 없는 경우 조건에 따라 템플릿에 추가할 수 있습니다.data-item-id="{{ product.skuNumber if product.skuNumber else product.name }}"
data-item-price="{{ product.salePrice if product.salePrice else product.price }}"
사이트 테스트
로컬에서 작업할 때, 우리는 "주문 내리기"단추에 도착하기 전에만 서명 흐름을 테스트할 수 있습니다.이후 Snipcart는 제품 정보를 확인하기 위해 로컬 사이트를 올라갈 수 없습니다.이것은 개발자 도구의 가격을 수정하지 않고 웹 사이트에서 싼 가격으로 물건을 구매할 수 있도록 security feature입니다!
귀하의 사이트를 온라인으로 만들려면 TakeShape’s 1-click Netlify integration을 사용하여 구축하고 배치하십시오.Snipcart에는 setting up ngrok to make local URLs accessible to their service의 안내서가 있습니다.
만약 당신이 이미 실시간 사이트에서 일하고 있다면, set up a branch-based URL in Netlify은 당신의 새로운 지점을 그곳으로 미루어 볼 수 있습니다.
Snipcart account settings으로 돌아가려면 라이브 샵에 도메인 이름을 추가해야 합니다.스토리지 구성 섹션에서 "Domains & URLs"으로 이동하여 적절한 정보를 추가합니다.웹 사이트를 라이브 URL에 게시하면 Snipcart가'쇼핑카에 추가'단추의 데이터 집합에 따라 도메인에서 찾은 제품을 CMS의'제품'부분에 추가하는 것을 볼 수 있습니다.
마지막으로 테스트 모드에서 체크 아웃 스트림 (실시간 또는 로컬) 을 완료하면 다음과 같은 가짜 신용카드 자격 증명을 제공할 수 있습니다.
신용카드 번호:
4242 4242 4242 424212312/25.여기서 어디로 갑니까
본고는 단지 스니펫과 TakeShape가 함께 무엇을 할 수 있는지 초보적으로 이해했을 뿐이다.사용자 정의 제품 옵션을 만들고 점포 이메일을 관리하며 제목에 카트 정보를 추가할 수 있습니다!데이터, 사이트, 기타 모든 것을 통제하고 있기 때문에 당신은 통제권을 가지고 있습니다.
Reference
이 문제에 관하여(어떻게 Snipcart와 TakeShape를 사용하여 Jamstack에서 전자상거래 사이트를 구축합니까), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://dev.to/takeshape/how-to-build-an-ecommerce-site-on-the-jamstack-with-snipcart-and-takeshape-3ha3텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
우수한 개발자 콘텐츠 발견에 전념
(Collection and Share based on the CC Protocol.)
좋은 웹페이지 즐겨찾기
