당신의 섬에 추가된 JavaScript 없음
이것은 프레임 워크 구성 요소가 아니므로, client:load가 필요하지 않으며 번들 통계에 나타나지 않습니다. 스크립트 태그는 당신의 HTML 후 브라우저에서 작동합니다.
Scriptorium · I
Astro 사이트에 구매 버튼을 추가합니다
통합 패키지, 클라이언트 지시어, 또는 섬이 필요하지 않습니다. 버튼은 당신의 정적 빌드와 함께 제공되는 평문 HTML이며, 이것이 결제 위젯이 될 수 있는 가장 Astro 형태의 것입니다.
스크립트 태그 추가, 한 번
스크립트 태그를 기본 레이아웃의 헤드에 넣습니다, 대부분의 프로젝트에서 src/layouts/Layout.astro. 레이아웃을 사용하는 모든 페이지는 그 후로 버튼을 렌더링할 수 있습니다.
---
// src/layouts/Layout.astro
---
<html lang="en">
<head>
<meta charset="utf-8" />
<title>{title}</title>
<script src="https://sdk.coinmoebius.com/latest/sdk.global.js"
crossorigin="anonymous"
defer></script>
</head>대시보드에서 제품 이름을 지정합니다
당신의 프로젝트를 열고, 제품 탭으로 전환하고, 제품을 추가합니다: 당신이 선택하는 참조, 이름, 가격, 통화. 여기서 대시보드는 이 페이지의 두 블록을 당신의 실제 프로젝트 ID로 작성합니다. 당신이 아래에서 보는 것이 모양입니다.
당신이 판매하는 곳에 버튼을 놓습니다
버튼을 모든 .astro 페이지 또는 구성 요소의 본문에 붙입니다. Astro는 그것을 빌드된 HTML에 그대로 통과합니다.
<coin-moebius-buy
project-id="proj_YOUR_ID_HERE"
product-id="t-shirt-medium"
label="Buy a t-shirt">
</coin-moebius-buy>게시하세요. 버튼은 페이지와 함께 렌더링되고, 구매자가 처음 클릭할 때 결제 선택기가 로드됩니다. 각 추가 제품은 다른 참조 및 레이블이 있는 같은 블록입니다.
이것들을 조심하세요
MDX와 콘텐츠 컬렉션
레이아웃을 통해 렌더링된 페이지에는 이미 스크립트가 있습니다. MDX 콘텐츠 내에서 판매하려면, 같은 버튼 HTML을 파일에 직접 붙입니다.
정적, SSR, 하이브리드: 모두 좋습니다
버튼은 HTML이 어떻게 생성되었는지 신경 쓰지 않습니다. 페이지가 브라우저에 도달하면, 그것은 판매합니다.