Astro Snipcart

Astro Snipcart 包含一个主题和即用型 Snipcart 设置。

第一步

在常见位置（例如您的布局组件）使用以下代码片段，并确保您为 API 密钥设置环境变量

<SnipcartSetup />

第二步

允许用户打开他们的购物车

<CartCheckout>
    <button>
        Open basket
    </button>
</CartCheckout>

第三步

创建您的第一个产品

<Product
    as="span"
    id="SKU-0001"
    name="Standard T-Shirt"
    url="/product/standard-t-shirt"
    price={12.99}
    description="Every day basic t-shirt"
    image="/blue-t-shirt.jpg">
    <button>
        Add
    </button>
</Product>

多么简单！

预构建主题组件

该主题包含多个 UI 组件和页面布局，请务必查看文档和在线演示。