Seamless Shopify Buy SDK integration with Nuxt.js

Shopify Module

Easy Shopify Buy client integration with Nuxt.js

Setup

Install with yarn:

yarn add nuxt-shopify

Install with npm:

npm install nuxt-shopify

nuxt.config.js

module.exports = {
  modules: ['nuxt-shopify'],

  shopify: {
    /**
     * Your shopify domain
     */
    domain: 'your-shop-name.myshopify.com',

    /**
     * Your shopify storefront access token
     */
    storefrontAccessToken: 'your-storefront-access-token',

    /**
     * This will be larger than the optimized version, as it will contain all fields that are available in the
     * Storefront API. (https://help.shopify.com/en/api/custom-storefronts/storefront-api/reference)
     * This should only be used when you need to add custom queries to supplement the JS Buy SDK queries.
     */
    unoptimized: false,

    /**
     * Set language to return translated content (optional)
     */
    language: 'ja-JP',
  },
};

OR

module.exports = {
  modules: ['nuxt-shopify'],

  env: {
    SHOPIFY_DOMAIN: 'your-shop-name.myshopify.com', // your shopify domain
    SHOPIFY_ACCESS_TOKEN: 'your-storefront-access-token', // your shopify storefront access token
  },
};

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

Usage

Component

asyncData

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

methods/created/mounted/etc

methods: {
  async fetchProduct(productId) {
    this.product = await this.$shopify.product.fetch(productId);
  }
}

// In store
{
  actions: {
    async fetchAllProducts ({ commit }) {
      const products = await this.$shopify.product.fetchAll();
      commit('SET_PRODUCTS', products)
    }
  }
}

Shopify Client

Examples from the official shopify-buy sdk library

Fetching products

// Fetch all products in your shop
this.$shopify.product.fetchAll().then(products => {
  // Do something with the products
  console.log(products);
});

// Fetch a single product by ID
const productId = 'Z2lkOi8vc2hvcGlmeS9Qcm9kdWN0Lzc4NTc5ODkzODQ=';

this.$shopify.product.fetch(productId).then(product => {
  // Do something with the product
  console.log(product);
});

Fetching Collections

// Fetch all collections, including their products
this.$shopify.collection.fetchAllWithProducts().then(collections => {
  // Do something with the collections
  console.log(collections);
  console.log(collections[0].products);
});

// Fetch a single collection by ID, including its products
const collectionId = 'Z2lkOi8vc2hvcGlmeS9Db2xsZWN0aW9uLzM2OTMxMjU4NA==';

this.$shopify.collection.fetchWithProducts(collectionId).then(collection => {
  // Do something with the collection
  console.log(collection);
  console.log(collection.products);
});

Creating a checkout

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

Adding Line Items

const checkoutId = 'Z2lkOi8vc2hvcGlmeS9Qcm9kdWN0SW1hZ2UvMTgyMTc3ODc1OTI='; // ID of an existing checkout
const lineItemsToAdd = [
  {
    variantId: 'Z2lkOi8vc2hvcGlmeS9Qcm9kdWN0VmFyaWFudC8yOTEwNjAyMjc5Mg==',
    quantity: 5,
    customAttributes: [{ key: 'MyKey', value: 'MyValue' }],
  },
];

// Add an item to the checkout
this.$shopify.checkout.addLineItems(checkoutId, lineItemsToAdd).then(checkout => {
  // Do something with the updated checkout
  console.log(checkout.lineItems); // Array with one additional line item
});

Updating checkout attributes

const checkoutId = 'Z2lkOi8vc2hvcGlmeS9DaGVja291dC9kMTZmM2EzMDM4Yjc4N=';
const input = { customAttributes: [{ key: 'MyKey', value: 'MyValue' }] };

this.$shopify.checkout.updateAttributes(checkoutId, input).then(checkout => {
  // Do something with the updated checkout
});

Updating Line Items

const checkoutId = 'Z2lkOi8vc2hvcGlmeS9Qcm9kdWN0SW1hZ2UvMTgyMTc3ODc1OTI='; // ID of an existing checkout
const lineItemsToUpdate = [{ id: 'Z2lkOi8vc2hvcGlmeS9Qcm9kdWN0Lzc4NTc5ODkzODQ=', quantity: 2 }];

// Update the line item on the checkout (change the quantity or variant)
this.$shopify.checkout.updateLineItems(checkoutId, lineItemsToUpdate).then(checkout => {
  // Do something with the updated checkout
  console.log(checkout.lineItems); // Quantity of line item 'Z2lkOi8vc2hvcGlmeS9Qcm9kdWN0Lzc4NTc5ODkzODQ=' updated to 2
});

Removing Line Items

const checkoutId = 'Z2lkOi8vc2hvcGlmeS9Qcm9kdWN0SW1hZ2UvMTgyMTc3ODc1OTI='; // ID of an existing checkout
const lineItemIdsToRemove = ['Z2lkOi8vc2hvcGlmeS9Qcm9kdWN0Lzc4NTc5ODkzODQ='];

// Remove an item from the checkout
this.$shopify.checkout.removeLineItems(checkoutId, lineItemIdsToRemove).then(checkout => {
  // Do something with the updated checkout
  console.log(checkout.lineItems); // Checkout with line item 'Z2lkOi8vc2hvcGlmeS9Qcm9kdWN0Lzc4NTc5ODkzODQ=' removed
});

Fetching a Checkout

const checkoutId = '2U4NWNkYzI4ZWEyOTdlOD9rZXk9MDVjMzY3Zjk3YWM0YWJjNGRhMTkwMDgwYTUzOGJmYmI=';

this.$shopify.checkout.fetch(checkoutId).then(checkout => {
  // Do something with the checkout
  console.log(checkout);
});

Adding a Discount

const checkoutId = 'Z2lkOi8vc2hvcGlmeS9Qcm9kdWN0SW1hZ2UvMTgyMTc3ODc1OTI='; // ID of an existing checkout
const discountCode = 'best-discount-ever';

// Add a discount code to the checkout
this.$shopify.checkout.addDiscount(checkoutId, discountCode).then(checkout => {
  // Do something with the updated checkout
  console.log(checkout);
});

Removing a Discount

const checkoutId = 'Z2lkOi8vc2hvcGlmeS9Qcm9kdWN0SW1hZ2UvMTgyMTc3ODc1OTI='; // ID of an existing checkout

// Removes the applied discount from an existing checkout.
this.$shopify.checkout.removeDiscount(checkoutId).then(checkout => {
  // Do something with the updated checkout
  console.log(checkout);
});

Updating a Shipping Address

const checkoutId = 'Z2lkOi8vc2hvcGlmeS9Qcm9kdWN0SW1hZ2UvMTgyMTc3ODc1OTI='; // ID of an existing checkout

const shippingAddress = {
  address1: 'Chestnut Street 92',
  address2: 'Apartment 2',
  city: 'Louisville',
  company: null,
  country: 'United States',
  firstName: 'Bob',
  lastName: 'Norman',
  phone: '555-625-1199',
  province: 'Kentucky',
  zip: '40202',
};

// Update the shipping address for an existing checkout.
this.$shopify.checkout.updateShippingAddress(checkoutId, shippingAddress).then(checkout => {
  // Do something with the updated checkout
});

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

Download Details:

Author: Gomah

Source Code: https://github.com/Gomah/nuxt-shopify

#vuejs #vue-js #vue #javascript