spz-checkout 结账

• 在购物车页面或侧边购物车弹窗中，需要提供一键结账按钮，将购物车商品提交并跳转到结账页面时使用。

将 cart 属性指向购物车数据源组件的选择器，内部放置带有 role="checkout" 的按钮，点击后自动读取购物车数据并发起结账请求。

<script id="spz-checkout-cart-data" type="application/json">
  {
    "line_items": [
      { "variant_id": "1001", "title": "Classic T-Shirt / S", "quantity": 1, "price": 29.00 },
      { "variant_id": "1002", "title": "Slim Pants / M", "quantity": 2, "price": 59.00 }
    ]
  }
</script>

<spz-render id="spz-checkout-cart" layout="container" src="script:spz-checkout-cart-data">
  <template>
    <spz-checkout id="spz-checkout-base" layout="container" cart="#spz-checkout-cart">
      <div class="checkout-wrapper">
        <p class="checkout-title">Order Summary</p>
        <ul class="checkout-items">
          <li>Classic T-Shirt / S <span>$29.00</span></li>
          <li>Slim Pants / M × 2 <span>$118.00</span></li>
        </ul>
        <div class="checkout-total">
          <span>Total</span>
          <span>$147.00</span>
        </div>
        <button type="button" class="checkout-btn" role="checkout">
          Checkout
        </button>
      </div>
    </spz-checkout>
  </template>
</spz-render>