Shopiette

Shopiette simplifies creating SvelteKit apps with the Shopify Storefront API, enabling you to quickly build and customize e-commerce sites. Enjoy the best of both worlds with minimal effort, saving you time and allowing you to focus on your design integration.

Summary

• Getting started
  • Installation
• Methods
  • Cart
    • get
    • create
    • updateBuyer
    • addLine
    • updateLines
    • deleteLines
  • Collection
    • get
    • getAll
  • Customer
    • get
    • create
    • login
    • logout
    • recover
    • reset
  • Product
    • get
    • getAll
  • Search
    • getProducts
  • Shop
    • get
• Types
  • Cart
  • Collection
  • Customer
  • Image
  • Price
  • Product
  • Shop
  • UserError

Getting started

Installation

Soon...

Methods

Cart

get(params: CartGetParams): Promise<CartGetData['cart']>

Get cart information.

const cart = Cart.get({
  id: 'gid://shopify/Cart/1'
});

Parameters

name	type	default	description
id	string	undefined	The cart's id

Returns

type Return = Cart;

Reference

---

create(): Promise<CartCreateData['cartCreate']>

Create a cart.

const { cart } = Cart.create();

Returns

type Return = {
  cart: Cart;
};

Reference

---

updateBuyer(params: CartUpdateBuyerParams): Promise<CartUpdateBuyerData['cartBuyerIdentityUpdate']>

Add or update a cart buyer identity.

const { userErrors } = Cart.updateBuyer({
  cartId: 'gid://shopify/Cart/1',
  customerAccessToken: 'H3fDFVT5JyB2yRLr0rNJNdBsdSqDxk7k',
  email: '[email protected]'
});

Parameters

name	type	default	description
cartId	string	undefined	The cart's id
customerAccessToken	string	undefined	The customer's access token
email	string	undefined	The customer's email

Returns

type Return = {
  userErrors: UserError[];
};

Reference

---

addLine(params: CartAddLineParams): Promise<CartAddLineData['cartLinesAdd']>

Add a line to a cart.

const { cart, userErrors } = Cart.addLine({
  cartId: 'gid://shopify/Cart/1',
  productVariantId: 'gid://shopify/Variant/1',
  quantity: 2
});

Parameters

name	type	default	description
cartId	string	undefined	The cart's id
productVariantId	string	undefined	The product variant's id token
quantity	number	1	The quantity to be added to the cart

Returns

type Return = {
  cart: Cart;
  userErrors: UserError[];
};

Reference

---

updateLines(params: CartUpdateLinesParams): Promise<CartUpdateLinesData['cartLinesUpdate']>

Update a line in a cart.

const { cart, userErrors } = Cart.addLine({
  cartId: 'gid://shopify/Cart/1',
  lines: [
    {
      id: 'gid://shopify/Line/1',
      quantity: 3
    }
  ]
});

Parameters

name	type	default	description
cartId	string	undefined	The cart's id
lines	Pick<Cart['lines']['edges'][0]['node'], 'id' | 'quantity'>[]	1	The new lines of the cart

Returns

type Return = {
  cart: Cart;
  userErrors: UserError[];
};

Reference

---

deleteLines(params: CartDeleteLinesParams): Promise<CartDeleteLinesData['cartLinesRemove']>

Delete a line in a cart.

const { cart, userErrors } = Cart.addLine({
  cartId: 'gid://shopify/Cart/1',
  lineIds: ['gid://shopify/Line/1']
});

Parameters

name	type	default	description
cartId	string	undefined	The cart's id
lineIds	string[]	undefined	The new lines of the cart

Returns

type Return = {
  cart: Cart;
  userErrors: UserError[];
};

Reference

Collection

get(params: CollectionGetParams): Promise<CollectionGetData['collection']>

Get a single collection.

const collection = Collection.get({
  id: 'gid://shopify/Collection/1'
});

Parameters

name	type	default	description
id	string	undefined	The collection's id

Returns

type Return = Collection;

Reference

---

getAll(params: CollectionGetAllParams): Promise<CollectionGetAllData['collections']>

Get all the collections.

const collections = Collection.getAll();

Returns

type Return = {
  edges: {
    node: Collection;
  }[];
};

Reference

Customer

get(params: CustomerGetParams): Promise<CustomerGetData['customer']>

Get customer information.

const customer = Customer.get({
  accessToken: 'H3fDFVT5JyB2yRLr0rNJNdBsdSqDxk7k'
});

Parameters

name	type	default	description
accessToken	string	undefined	The customer's access token

Returns

type Return = Customer;

Reference

---

create(params: CustomerCreateParams): Promise<CustomerCreateData['customerCreate']>

Create a customer.

const customer = Customer.create({
  firstName: 'John',
  lastName: 'Doe',
  email: '[email protected]',
  password: 'Password123!'
});

Parameters

name	type	default	description
firstName	string	undefined	The customer's first name
lastName	string	undefined	The customer's last name
email	string	undefined	The customer's email
password	string	undefined	The customer's password

Returns

type Return = {
  customer: Customer;
  customerUserErrors: UserError[];
};

Reference

---

login(params: CustomerLoginParams): Promise<CustomerLoginData['customerAccessTokenCreate']>

Generate an access token in order to log in a customer.

const customer = Customer.login({
  email: '[email protected]',
  password: 'Password123!'
});

Parameters

name	type	default	description
email	string	undefined	The customer's email
password	string	undefined	The customer's password

Returns

type Return = {
  customerAccessToken: {
    accessToken: string;
  };
  customerUserErrors: UserError[];
};

Reference

---

logout(params: CustomerLogoutParams): Promise<CustomerLogoutData['customerAccessTokenDelete']>

Expire an access token in order to log out a customer.

const { userErrors } = Customer.logout({
  accessToken: 'H3fDFVT5JyB2yRLr0rNJNdBsdSqDxk7k'
});

Parameters

name	type	default	description
accessToken	string	undefined	The customer's access token

Returns

type Return = {
  deletedAccessToken: string;
  deleteCustomerAccessTokenId: string;
  userErrors: UserError[];
};

Reference

---

recover(params: CustomerRecoverParams): Promise<CustomerRecoverData['customerRecover']>

Send an email with a reset password link.

const { customerUserErrors } = Customer.recover({
  email: '[email protected]'
});

Parameters

name	type	default	description
email	string	undefined	The customer's email

Returns

type Return = {
  customerUserErrors: UserError[];
};

Reference

---

reset(params: CustomerResetParams): Promise<CustomerResetData['customerReset']>

Reset a customer's password.

const { customerUserErrors } = Customer.reset({
  password: '[email protected]',
  resetUrl: 'https://yourdomain.com/account/reset/customerId/resetToken'
});

Parameters

name	type	default	description
email	string	undefined	The customer's email

Returns

type Return = {
  customerUserErrors: UserError[];
};

Reference

Product

get(params: ProductGetParams): Promise<ProductGetData['product']>

Get a single product.

const product = Product.get({
  id: 'gid://shopify/Product/1'
});

Parameters

name	type	default	description
id	string	undefined	The product's id

Returns

type Return = Product;

Reference

---

getAll(params: ProductGetAllParams): Promise<ProductGetAllData['products']>

Get all the products.

const products = Product.getAll();

Returns

type Return = {
  edges: {
    node: Product;
  }[];
};

Reference

Search

getProducts(params: SearchGetProductsParams): Promise<SearchGetProductsData>

Search for a product.

const product = Search.getProducts({
  query: 'Bottle',
  first: 3
});

Parameters

name	type	default	description
query	string	undefined	The search query
first	number	5	The number of result items

Returns

type Return = {
  products: {
    edges: {
      node: Product;
    };
    [];
  };
};

Reference

Shop

get(): Promise<ShopGetData['shop']>

Get shop information.

const shop = Shop.get();

Returns

type Return = Shop;

Reference

Types

Cart

type Cart = {
  id: string;
  checkoutUrl: string;
  cost: {
    totalAmount: Price;
  };
  lines: {
    edges: {
      node: {
        id: string;
        quantity: number;
        merchandise: {
          availableForSale: boolean;
          compareAtPrice: Price | null;
          id: string;
          image: Image;
          price: Price;
          product: Product;
          selectedOptions: {
            name: string;
            value: string;
          };
          [];
          title: string;
        };
      };
    };
    [];
  };
};

Collection

type Collection = {
  id: string;
  title: string;
  description: string;
  image: Image;
  products: {
    edges: {
      node: Omit<Product, 'variants'>;
    }[];
  };
}

Customer

type Customer = {
  id: string;
  firstName: string;
  lastName: string;
  email: string;
};

Image

type Image = {
  originalSrc: string;
  altText: string;
};

Price

type Price = {
  amount: string;
};

Product

type Product = {
  id: string;
  title: string;
  description: string;
  totalInventory: number;
  featuredImage: Image;
  priceRange: {
    maxVariantPrice: Price;
    minVariantPrice: Price;
  };
  variants: {
    edges: {
      node: {
        id: string;
        title: string;
        availableForSale: boolean;
        compareAtPrice: Price | null;
        price: Price;
        selectedOptions: {
          name: string;
          value: string;
        };
        [];
        image: Image;
        product: {
          id: string;
          title: string;
          description: string;
          images: {
            edges: {
              node: Image;
            };
            [];
          };
        };
      };
    };
    [];
  };
};

Shop

type Shop = {
  name: string;
  brand: {
    logo: {
      image: Image;
    };
  };
};

UserError

type UserError {
  field: string;
  message: string;
}

Made with ❤️ by Bado.

Copyright © 2024 Baptiste Dauphouy