Skip to content

Instantly share code, notes, and snippets.

@Adammatthiesen

Adammatthiesen/CartItemCount-Vue.astro

Created January 13, 2024 00:39
Show Gist options
  • Save Adammatthiesen/f08249f1831ae447b4de8de6841fca48 to your computer and use it in GitHub Desktop.
Save Adammatthiesen/f08249f1831ae447b4de8de6841fca48 to your computer and use it in GitHub Desktop.
Download ZIP
Astro SnipCart Examples
Raw
cart.astro
---
import * as SC from '@adammatthiesen/astro-snipcart';
---
<SC.Cart>
<button>Open basket/checkout</button>
</SC.Cart>
Raw
CartItemCount-Vue.astro
---
import * as SCVue from '@adammatthiesen/astro-snipcart/vue';
---
<span>
You have <SCVue.CartItemCount transition:persist client:load /> items in your cart.
</span>
Raw
CartItemCount.astro
---
import * as SC from '@adammatthiesen/astro-snipcart';
---
<span>
You have <SC.CartItemCount /> items in your cart.
</span>
Raw
CartTotal-Vue.astro
---
import * as SCVue from '@adammatthiesen/astro-snipcart/vue';
---
total of <SCVue.CartTotal transition:persist client:load />.
Raw
CartTotal.astro
---
import * as SC from '@adammatthiesen/astro-snipcart';
---
total of <SC.CartTotal />.
Raw
HeaderAstro.astro
---
import { HeaderAstro } from '@adammatthiesen/astro-snipcart';
---
<html>
<head>
<!-- ... other header stuff ... -->
<HeaderAstro />
</head>
<body>
<slot />
</body>
</html>
Raw
HeaderVue.astro
---
import { ViewTransitions } from "astro:transitions";
import { HeaderVUE } from '@adammatthiesen/astro-snipcart/vue';
---
<html>
<head>
<!-- ... other header stuff ... -->
<ViewTransitions />
<HeaderVUE transition:persist client:idle />
</head>
<body>
<slot />
</body>
</html>
Raw
imports.astro
---
import * as SC from '@adammatthiesen/astro-snipcart';
// Available usage; <SC.Cart>, <SC.CartItemCount />, <SC.CartTotal />, <SC.Login />, <SC.HeaderAstro />, <SC.MakeProduct>
import * as SCVue from '@adammatthiesen/astro-snipcart/vue';
// Available usage; <SCVue.CartItemCount client:? />, <SCVue.CartTotal client:? />, <SCVue.HeaderVue client:? />
---
Raw
login.astro
---
import * as SC from '@adammatthiesen/astro-snipcart';
---
<SC.Login>
<button>Login</button>
</SC.Login>
Raw
makeProduct.astro
---
import * as SC from '@adammatthiesen/astro-snipcart';
---
<SC.MakeProduct
id="SKU-0001"
name="Example Name"
price={ 12.99 }
url="/store/example" # OPTIONAL Remove entry if not using...
description="Some Default Example Product" # OPTIONAL Remove entry if not using...
image="/Link/To/Image" # OPTIONAL Remove entry if not using...
catagories? # OPTIONAL Remove entry if not using...
fileGuid? # OPTIONAL Remove entry if not using...
quantity? # OPTIONAL Remove entry if not using...
minimumQuantity? # OPTIONAL Remove entry if not using...
maximumQuantity? # OPTIONAL Remove entry if not using...
quantityStep? # OPTIONAL Remove entry if not using...
customFields? # OPTIONAL Remove entry if not using...
stackable? # OPTIONAL Remove entry if not using...
>
<button>Add to cart</button>
</SC.MakeProduct>
Raw
multi.astro
---
import * as SC from "@adammatthiesen/astro-snipcart";
---
<SC.Cart>
<button>
Cart / Checkout
</button>
</SC.Cart>
<SC.CartItemCount /> Items - Sub Total: <SC.CartTotal />
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment