Gatsby Theme Shopify Manager

import React from 'react';
import {useCart} from 'gatsby-theme-shopify-manager';

export function ExampleUseCart() {
  const cart = useCart();

  if (cart == null) {
    return <p>The cart object is currently null.</p>;
  }

  const cartDate = new Date(cart.createdAt).toLocaleDateString();

  return (
    <p>
      Your cart was created on {cartDate}.
      <br />
      You have ${cart.totalPrice} worth of products in your cart.
    </p>
  );
}

import React from 'react';
import {useCartItems} from 'gatsby-theme-shopify-manager';

export function ExampleUseCartItems() {
  const cartItems = useCartItems();

  if (cartItems.length < 1) {
    return <p>Your cart is empty.</p>;
  }

  return (
    <>
      <p>Your cart has the following items:</p>
      <ul>
        {cartItems.map((lineItem) => (
          <li key={lineItem.title}>
            {lineItem.title} - {lineItem.variant.title}
          </li>
        ))}
      </ul>
    </>
  );
}

import React from 'react';
import {useCartCount} from 'gatsby-theme-shopify-manager';

export function ExampleUseCartCount() {
  const cartCount = useCartCount();

  return <p>Your cart has {cartCount} items.</p>;
}

import React from 'react';
import {useCheckoutUrl} from 'gatsby-theme-shopify-manager';

export function ExampleUseCheckoutUrl() {
  const checkoutUrl = useCheckoutUrl();

  return checkoutUrl == null ? (
    <p>There is no active checkout.</p>
  ) : (
    <p>
      <a href={checkoutUrl} target="_blank" rel="noopener noreferrer">
        Complete Your Order →
      </a>
    </p>
  );
}

import React from 'react';
import {Button} from 'theme-ui';
import {useAddItemsToCart, useCartCount} from 'gatsby-theme-shopify-manager';

export function ExampleUseAddItemsToCart() {
  const cartCount = useCartCount();
  const addItemsToCart = useAddItemsToCart();

  async function addToCart() {
    const items = [
      {
        variantId: 'some_variant_id',
        quantity: 1,
      },
    ];

    try {
      await addItemsToCart(items);
      alert('Successfully added that item to your cart!');
    } catch {
      alert('There was a problem adding that item to your cart.');
    }
  }

  return (
    <>
      <p>There are currently {cartCount} items in your cart.</p>
      <Button onClick={addToCart}>
        Add items to your cart
      </Button>
    </>
  );
}

import React from 'react';
import {Button} from 'theme-ui';
import {useAddItemToCart, useCartCount} from 'gatsby-theme-shopify-manager';

export function ExampleUseAddItemToCart() {
  const cartCount = useCartCount();
  const addItemToCart = useAddItemToCart();

  async function addToCart() {
    const variantId = 'some_variant_id';
    const quantity = 1;

    try {
      await addItemToCart(variantId, quantity);
      alert('Successfully added that item to your cart!');
    } catch {
      alert('There was a problem adding that item to your cart.');
    }
  }

  return (
    <>
      <p>There are currently {cartCount} items in your cart.</p>
      <Button onClick={addToCart}>
        Add an item to your cart
      </Button>
    </>
  );
}

import React from 'react';
import {Button} from 'theme-ui';
import {
  useRemoveItemsFromCart,
  useCartItems,
} from 'gatsby-theme-shopify-manager';

export function ExampleUseRemoveItemsFromCart() {
  const cartItems = useCartItems();
  const removeItemsFromCart = useRemoveItemsFromCart();

  async function removeFromCart() {
    if (cartItems.length < 1) {
      return;
    }
    const variantId = cartItems[0].variant.id;

    try {
      await removeItemsFromCart([variantId]);
      alert('Successfully removed an item from your cart!');
    } catch {
      alert('There was a problem removing that item from your cart.');
    }
  }

  const cartMarkup =
    cartItems.length > 0 ? (
      <>
        <p>Your cart has the following items:</p>
        <ul>
          {cartItems.map((lineItem) => (
            <li key={lineItem.title}>
              {lineItem.title} - {lineItem.variant.title}
            </li>
          ))}
        </ul>
      </>
    ) : (
      <p>Your cart is empty.</p>
    );

  return (
    <>
      {cartMarkup}
      <Button onClick={removeFromCart} sx={{mb: 3}}>
        Remove items from your cart
      </Button>
    </>
  );
}

import React from 'react';
import {Button} from 'theme-ui';
import {
  useRemoveItemFromCart,
  useCartItems,
} from 'gatsby-theme-shopify-manager';

export function ExampleUseRemoveItemFromCart() {
  const cartItems = useCartItems();
  const removeItemFromCart = useRemoveItemFromCart();

  async function removeFromCart() {
    if (cartItems.length < 1) {
      return;
    }
    const variantId = cartItems[0].variant.id;

    try {
      await removeItemFromCart(variantId);
      alert('Successfully removed an item from your cart!');
    } catch {
      alert('There was a problem removing that item from your cart.');
    }
  }

  const cartMarkup =
    cartItems.length > 0 ? (
      <>
        <p>Your cart has the following items:</p>
        <ul>
          {cartItems.map((lineItem) => (
            <li key={lineItem.title}>
              {lineItem.title} - {lineItem.variant.title}
            </li>
          ))}
        </ul>
      </>
    ) : (
      <p>Your cart is empty.</p>
    );

  return (
    <>
      {cartMarkup}
      <Button onClick={removeFromCart} sx={{mb: 3}}>
        Remove item from your cart
      </Button>
    </>
  );
}

import React, {useState} from 'react';
import {Flex, Button, Input} from 'theme-ui';
import {
  useUpdateItemQuantity,
  useCartItems,
} from 'gatsby-theme-shopify-manager';

export function ExampleUseUpdateItemQuantity() {
  const [quantity, setQuantity] = useState(1);
  const [item] = useCartItems();
  const updateItemQuantity = useUpdateItemQuantity();

  async function updateQuantity() {
    if (item == null) {
      return;
    }

    const variantId = item.variant.id;

    try {
      await updateItemQuantity(variantId, quantity);
      alert('Successfully updated the item quantity!');
    } catch {
      alert("There was a problem updating that item's quantity.");
    }
  }

  const itemMarkup =
    item == null ? (
      <p>Your cart is empty.</p>
    ) : (
      <p>
        {item.title} - {item.variant.title} ({item.quantity})
      </p>
    );

  const formMarkup = (
    <Flex sx={{alignItems: 'flex-start'}} as="form" onSubmit={updateQuantity}>
      <Input
        sx={{width: '50px', mr: 3}}
        type="number"
        defaultValue={quantity}
        onChange={(event) => setQuantity(Number(event.target.value))}
      />
      <Button sx={{mb: 3}}>Update quantity</Button>
    </Flex>
  );

  return (
    <>
      {itemMarkup}
      {formMarkup}
    </>
  );
}