🛍 Shopify Module

Easy Shopify Buy client integration with Nuxt.js

Setup

Install with yarn:

1yarn add nuxt-shopify

Install with npm:

1npm install nuxt-shopify

nuxt.config.js

1module.exports = {
2  modules: ['nuxt-shopify'],
3
4  shopify: {
5    /**
6     * Your shopify domain
7     */
8    domain: 'your-shop-name.myshopify.com',
9
10    /**
11     * Your shopify storefront access token
12     */
13    storefrontAccessToken: 'your-storefront-access-token',
14
15    /**
16     * This will be larger than the optimized version, as it will contain all fields that are available in the
17     * Storefront API. (https://help.shopify.com/en/api/custom-storefronts/storefront-api/reference)
18     * This should only be used when you need to add custom queries to supplement the JS Buy SDK queries.
19     */
20    unoptimized: false,
21
22    /**
23     * Set language to return translated content (optional)
24     */
25    language: 'ja-JP',
26  },
27};

OR

1module.exports = {
2  modules: ['nuxt-shopify'],
3
4  env: {
5    SHOPIFY_DOMAIN: 'your-shop-name.myshopify.com', // your shopify domain
6    SHOPIFY_ACCESS_TOKEN: 'your-storefront-access-token', // your shopify storefront access token
7  },
8};

Don't have a Storefront Access Token yet? Get started.

Usage

Component

asyncData

1async asyncData({ $shopify, params }) {
2  const product = await $shopify.product.fetch(params.id);
3  return { product };
4}

methods/created/mounted/etc

1methods: {
2  async fetchProduct(productId) {
3    this.product = await this.$shopify.product.fetch(productId);
4  }
5}

Store actions (including nuxtServerInit)

1// In store
2{
3  actions: {
4    async fetchAllProducts ({ commit }) {
5      const products = await this.$shopify.product.fetchAll();
6      commit('SET_PRODUCTS', products)
7    }
8  }
9}

Shopify Client

Examples from the official shopify-buy sdk library

Fetching products

1// Fetch all products in your shop
2this.$shopify.product.fetchAll().then((products) => {
3  // Do something with the products
4  console.log(products);
5});
6
7// Fetch a single product by ID
8const productId = 'Z2lkOi8vc2hvcGlmeS9Qcm9kdWN0Lzc4NTc5ODkzODQ=';
9
10this.$shopify.product.fetch(productId).then((product) => {
11  // Do something with the product
12  console.log(product);
13});

Fetching Collections

1// Fetch all collections, including their products
2this.$shopify.collection.fetchAllWithProducts().then((collections) => {
3  // Do something with the collections
4  console.log(collections);
5  console.log(collections[0].products);
6});
7
8// Fetch a single collection by ID, including its products
9const collectionId = 'Z2lkOi8vc2hvcGlmeS9Db2xsZWN0aW9uLzM2OTMxMjU4NA==';
10
11this.$shopify.collection.fetchWithProducts(collectionId).then((collection) => {
12  // Do something with the collection
13  console.log(collection);
14  console.log(collection.products);
15});

Creating a checkout

1// Create an empty checkout
2this.$shopify.checkout.create().then((checkout) => {
3  // Do something with the checkout
4  console.log(checkout);
5});

Adding Line Items

1const checkoutId = 'Z2lkOi8vc2hvcGlmeS9Qcm9kdWN0SW1hZ2UvMTgyMTc3ODc1OTI='; // ID of an existing checkout
2const lineItemsToAdd = [
3  {
4    variantId: 'Z2lkOi8vc2hvcGlmeS9Qcm9kdWN0VmFyaWFudC8yOTEwNjAyMjc5Mg==',
5    quantity: 5,
6    customAttributes: [{ key: 'MyKey', value: 'MyValue' }],
7  },
8];
9
10// Add an item to the checkout
11this.$shopify.checkout.addLineItems(checkoutId, lineItemsToAdd).then((checkout) => {
12  // Do something with the updated checkout
13  console.log(checkout.lineItems); // Array with one additional line item
14});

Updating checkout attributes

1const checkoutId = 'Z2lkOi8vc2hvcGlmeS9DaGVja291dC9kMTZmM2EzMDM4Yjc4N=';
2const input = { customAttributes: [{ key: 'MyKey', value: 'MyValue' }] };
3
4this.$shopify.checkout.updateAttributes(checkoutId, input).then((checkout) => {
5  // Do something with the updated checkout
6});

Updating Line Items

1const checkoutId = 'Z2lkOi8vc2hvcGlmeS9Qcm9kdWN0SW1hZ2UvMTgyMTc3ODc1OTI='; // ID of an existing checkout
2const lineItemsToUpdate = [{ id: 'Z2lkOi8vc2hvcGlmeS9Qcm9kdWN0Lzc4NTc5ODkzODQ=', quantity: 2 }];
3
4// Update the line item on the checkout (change the quantity or variant)
5this.$shopify.checkout.updateLineItems(checkoutId, lineItemsToUpdate).then((checkout) => {
6  // Do something with the updated checkout
7  console.log(checkout.lineItems); // Quantity of line item 'Z2lkOi8vc2hvcGlmeS9Qcm9kdWN0Lzc4NTc5ODkzODQ=' updated to 2
8});

Removing Line Items

1const checkoutId = 'Z2lkOi8vc2hvcGlmeS9Qcm9kdWN0SW1hZ2UvMTgyMTc3ODc1OTI='; // ID of an existing checkout
2const lineItemIdsToRemove = ['Z2lkOi8vc2hvcGlmeS9Qcm9kdWN0Lzc4NTc5ODkzODQ='];
3
4// Remove an item from the checkout
5this.$shopify.checkout.removeLineItems(checkoutId, lineItemIdsToRemove).then((checkout) => {
6  // Do something with the updated checkout
7  console.log(checkout.lineItems); // Checkout with line item 'Z2lkOi8vc2hvcGlmeS9Qcm9kdWN0Lzc4NTc5ODkzODQ=' removed
8});

Fetching a Checkout

1const checkoutId = '2U4NWNkYzI4ZWEyOTdlOD9rZXk9MDVjMzY3Zjk3YWM0YWJjNGRhMTkwMDgwYTUzOGJmYmI=';
2
3this.$shopify.checkout.fetch(checkoutId).then((checkout) => {
4  // Do something with the checkout
5  console.log(checkout);
6});

Adding a Discount

1const checkoutId = 'Z2lkOi8vc2hvcGlmeS9Qcm9kdWN0SW1hZ2UvMTgyMTc3ODc1OTI='; // ID of an existing checkout
2const discountCode = 'best-discount-ever';
3
4// Add a discount code to the checkout
5this.$shopify.checkout.addDiscount(checkoutId, discountCode).then((checkout) => {
6  // Do something with the updated checkout
7  console.log(checkout);
8});

Removing a Discount

1const checkoutId = 'Z2lkOi8vc2hvcGlmeS9Qcm9kdWN0SW1hZ2UvMTgyMTc3ODc1OTI='; // ID of an existing checkout
2
3// Removes the applied discount from an existing checkout.
4this.$shopify.checkout.removeDiscount(checkoutId).then((checkout) => {
5  // Do something with the updated checkout
6  console.log(checkout);
7});

Updating a Shipping Address

1const checkoutId = 'Z2lkOi8vc2hvcGlmeS9Qcm9kdWN0SW1hZ2UvMTgyMTc3ODc1OTI='; // ID of an existing checkout
2
3const shippingAddress = {
4  address1: 'Chestnut Street 92',
5  address2: 'Apartment 2',
6  city: 'Louisville',
7  company: null,
8  country: 'United States',
9  firstName: 'Bob',
10  lastName: 'Norman',
11  phone: '555-625-1199',
12  province: 'Kentucky',
13  zip: '40202',
14};
15
16// Update the shipping address for an existing checkout.
17this.$shopify.checkout.updateShippingAddress(checkoutId, shippingAddress).then((checkout) => {
18  // Do something with the updated checkout
19});

Development

1. Clone this repository
2. Install dependencies using yarn install or npm install
3. Build the module using yarn build or npm run build
4. Start development server using yarn dev or npm run dev

📑 License

MIT License