AI Prompt: Build a Wuilt Cart-Integrated Landing Page
Use this page when you want an AI site builder (for example Lovable, or any other code-generating assistant) to create a landing page that integrates with Wuilt’s cart and checkout.
Copy the entire prompt below and paste it into your AI tool. Then plug in your real storeId, variantId, and authentication details where needed.
# Prompt: Build a Wuilt Cart-Integrated Landing Page
Copy-paste this prompt into Lovable (or any site builder) to generate a landing page that integrates with Wuilt’s cart APIs.
---
I want you to build a single-page marketing landing page that integrates with the Wuilt Customer Cart APIs.
The human user of this prompt will provide:
- The **product URL** on their storefront (for example `https://pharmacy.wuiltstore.com/en/products/example-product`).
- The **storeId** they want to use.
From the product URL, extract the product **handle** (for example `example-product`) and use it in the `GetProductDetails` query described below.
### Goal
- This page will live outside the Wuilt storefront, but use Wuilt’s cart and checkout.
- The flow:
1. Use `GetProductDetails` to fetch the product and its variants by handle (from the provided product URL).
2. When the visitor first performs a cart operation (for example clicks “Add to Cart” or “Buy Now”), generate a `sessionId` (UUID v4) and store it in `localStorage` as `sessionId`.
3. On “Add to Cart” button click, call the Wuilt GraphQL API `AddToCart` mutation.
4. Let the user update or remove items from the cart using `UpdateSimpleItem`:
- Quantity **> 0** → update the item quantity.
- Quantity **0** → remove the item from the cart.
5. Optionally apply a promo code using `ApplyPromoCode`.
6. Use `GetCart` to display a mini-cart summary (items, quantity, total).
7. On “Checkout” button click, redirect the customer to the unified checkout URL using the returned `cart.id`.
### API Details
- GraphQL endpoint:
- `https://graphql.wuilt.com`
- Use the following GraphQL operations (these are already defined server-side; just call them from the page):
#### 0) GetProductDetails (by handle)
Use this query to fetch the main product and its variants for the landing page, based on the product **handle** extracted from the product URL.
```graphql
query GetProductDetails($storeId: ID!, $handle: String!, $locale: String) {
storeProductByHandle(storeId: $storeId, handle: $handle, locale: $locale) {
id
title
handle
shortDescription
descriptionHtml
images {
id
src
altText
width
height
}
variants(first: 50) {
nodes {
id
title
sku
price {
amount
currencyCode
}
compareAtPrice {
amount
currencyCode
}
selectedOptions {
option {
id
name
}
value {
id
name
}
}
}
}
}
}
```
Example variables:
```json
{
"storeId": "Store_cm84j35iy02m001i89iiu2cts",
"handle": "example-product",
"locale": "en"
}
```
#### 1) AddToCart
```graphql
mutation AddToCart($storeId: ID!, $item: SimpleItemInput!) {
customerActions(storeId: $storeId) {
cart {
addSimpleItem(item: $item) {
id
sessionId
cartStep
status
items {
... on CartSimpleItem {
id
quantity
price {
amount
currencyCode
}
product {
id
title
shortDescription
descriptionHtml
handle
images {
id
src
altText
width
height
}
}
variant {
id
sku
price {
amount
currencyCode
}
compareAtPrice {
amount
currencyCode
}
image {
id
src
altText
width
height
}
}
}
}
receipt {
subtotal {
amount
currencyCode
}
discount {
amount
currencyCode
}
shipping {
amount
currencyCode
}
tax {
amount
currencyCode
}
total {
amount
currencyCode
}
}
}
}
}
}
```
Example variables:
```json
{
"storeId": "Store_cm84j35iy02m001i89iiu2cts",
"item": {
"variantId": "ProductVariant_example_001",
"quantity": 1
}
}
```
#### 2) ReplaceCartItems (for "Buy Now" behavior)
```graphql
mutation ReplaceCartItems($storeId: ID!, $item: SimpleItemInput!) {
customerActions(storeId: $storeId) {
cart {
replaceCartItemsWithSimpleItem(item: $item) {
id
sessionId
cartStep
status
items {
... on CartSimpleItem {
id
quantity
price {
amount
currencyCode
}
product {
id
title
shortDescription
descriptionHtml
handle
images {
id
src
altText
width
height
}
}
variant {
id
sku
price {
amount
currencyCode
}
compareAtPrice {
amount
currencyCode
}
image {
id
src
altText
width
height
}
}
}
}
receipt {
subtotal {
amount
currencyCode
}
discount {
amount
currencyCode
}
shipping {
amount
currencyCode
}
tax {
amount
currencyCode
}
total {
amount
currencyCode
}
}
}
}
}
}
```
Example variables:
```json
{
"storeId": "Store_cm84j35iy02m001i89iiu2cts",
"item": {
"variantId": "ProductVariant_buy_now_001",
"quantity": 1
}
}
```
#### 3) GetCart
```graphql
query GetCart($storeId: ID!, $id: ID) {
customerQueries(storeId: $storeId) {
cart(id: $id) {
id
refCode
recoveryId
sessionId
status
cartStep
lastStep
items {
... on CartSimpleItem {
id
quantity
price {
amount
currencyCode
}
totalPrice {
amount
currencyCode
}
product {
id
title
shortDescription
descriptionHtml
handle
images {
id
src
altText
width
height
}
}
variant {
id
sku
price {
amount
currencyCode
}
compareAtPrice {
amount
currencyCode
}
image {
id
src
altText
width
height
}
}
}
}
receipt {
subtotal {
amount
currencyCode
}
discount {
amount
currencyCode
}
shipping {
amount
currencyCode
}
tax {
amount
currencyCode
}
automaticDiscount {
amount
currencyCode
}
total {
amount
currencyCode
}
}
shippingDetails {
id
addressLine1
addressLine2
phone
secondPhone
postalCode
notes
area {
countryId
stateId
cityId
regionId
}
}
shippingRate {
cost {
amount
currencyCode
}
}
contactInfo {
id
name
email
phone
}
customer {
id
name
email
phone
}
promoCode {
id
code
type
}
shippingDiscount {
id
title
}
cartErrors {
code
params {
message
resourceId
requestedQuantity
availableQuantity
}
}
paymentIntentId
paymentIntent {
id
status
}
isReserved
reservedAt
emailStatus
emailSentAt
createdAt
updatedAt
}
}
}
```
Example variables:
```json
{
"storeId": "Store_cm84j35iy02m001i89iiu2cts",
"id": "Cart_d8f8ce2f-681e-4554-93b7-230e0b34a151"
}
```
#### 4) ApplyPromoCode (optional)
```graphql
mutation ApplyPromoCode($storeId: ID!, $cartId: ID!, $code: String!) {
customerActions(storeId: $storeId) {
cart {
applyPromoCode(cartId: $cartId, code: $code) {
id
sessionId
status
cartStep
promoCode {
code
}
cartErrors {
code
params {
message
}
}
receipt {
subtotal {
amount
currencyCode
}
discount {
amount
currencyCode
}
shipping {
amount
currencyCode
}
tax {
amount
currencyCode
}
total {
amount
currencyCode
}
}
}
}
}
}
```
Example variables:
```json
{
"storeId": "Store_cm84j35iy02m001i89iiu2cts",
"cartId": "Cart_d8f8ce2f-681e-4554-93b7-230e0b34a151",
"code": "SUMMER-2025"
}
```
#### 5) UpdateSimpleItem (update or remove from cart)
Use this mutation to let users **change item quantities** or **remove items** from the cart directly from the landing page.
- If `quantity` is **0** → the item is removed from the cart.
- If `quantity` is **> 0** → the item quantity is updated.
```graphql
mutation UpdateSimpleItem($storeId: ID!, $item: SimpleItemInput!) {
customerActions(storeId: $storeId) {
cart {
updateSimpleItem(item: $item) {
id
sessionId
status
cartStep
items {
... on CartSimpleItem {
id
quantity
price {
amount
currencyCode
}
totalPrice {
amount
currencyCode
}
product {
id
title
shortDescription
descriptionHtml
handle
images {
id
src
altText
width
height
}
}
variant {
id
sku
price {
amount
currencyCode
}
compareAtPrice {
amount
currencyCode
}
image {
id
src
altText
width
height
}
}
}
}
receipt {
subtotal {
amount
currencyCode
}
discount {
amount
currencyCode
}
shipping {
amount
currencyCode
}
tax {
amount
currencyCode
}
automaticDiscount {
amount
currencyCode
}
total {
amount
currencyCode
}
}
}
}
}
}
```
Example variables (update quantity to 3):
```json
{
"storeId": "Store_cm84j35iy02m001i89iiu2cts",
"item": {
"variantId": "ProductVariant_cmi3ooen020wf01yh5n7ef0ht",
"quantity": 3
}
}
```
Example variables (remove item by setting quantity to 0):
```json
{
"storeId": "Store_cm84j35iy02m001i89iiu2cts",
"item": {
"variantId": "ProductVariant_cmi3ooen020wf01yh5n7ef0ht",
"quantity": 0
}
}
```
### Headers
For all cart-related requests, send these HTTP headers so the cart session and auth work correctly:
- `sessionid: Session_<uuid-v4-value>`
- Any required auth header (for example a Bearer token). Assume I will plug in the real value.
Only generate and persist a `sessionid` when the user actually interacts with the cart (for example, the first time they add/replace/update an item or apply a promo code). Do **not** generate sessions on page load or for visitors who never interact with the cart.
### Checkout Redirect
After `GetCart` / `ApplyPromoCode`, read `cart.id` and redirect:
- **Without Wuilt Pay**:
```text
https://{store_domain}/{locale}/checkout/{cartId}
```
Example:
```text
https://pharmacy.wuiltstore.com/en/checkout/Cart_d8f8ce2f-681e-4554-93b7-230e0b34a151
```
- **With Wuilt Pay**:
```text
https://pay.wuiltstore.com/{locale}/store/{storeHandle}/cart/{cartId}
```
Example:
```text
https://pay.wuiltstore.com/en/store/groceries-test-store/cart/Cart_b9a8ee66-5bf0-4cc0-9f78-7e8ac2403b87
```
In JavaScript, perform the redirect with:
```js
window.location.href = checkoutUrl;
```
### UI / UX Requirements
- Hero section with headline, subheadline, and a primary CTA button:
- Label like “Add to Cart” or “Buy Now”.
- Product highlight section for 1–2 products (static copy and image placeholders are fine).
- A mini-cart summary that shows:
- Line items from `GetCart` (product title, variant title if relevant, quantity, price, and thumbnail image if available).
- Cart total.
- Each line item row should include controls that call `UpdateSimpleItem`:
- A quantity input or +/- buttons (calls `UpdateSimpleItem` with quantity > 0).
- A “Remove” button (calls `UpdateSimpleItem` with quantity 0).
- Promo code input box:
- “Apply” button that calls `ApplyPromoCode` and refreshes the summary.
- “Checkout” button that:
- Ensures the latest cart state by calling `GetCart`.
- Redirects to the proper checkout URL.
### Implementation Constraints
- You may use vanilla HTML/CSS/JS or React; keep the implementation simple and readable.
- Implement a helper for:
- Initializing and persisting `sessionId`.
- Calling the GraphQL endpoint with the correct headers and error handling.
- Make the page responsive and visually clean (modern marketing style).
Generate the complete landing page code (including all HTML/CSS/JS or React components) so I can copy-paste it into my project.