Need help with nuxt-shopify?
Click the “chat” button below for chat support from the developer who created it, or find similar developers for support.

About the developer

Gomah
277 Stars 23 Forks MIT License 1.3K Commits 19 Opened issues

Description

🛍 Seamless Shopify Buy SDK integration with Nuxt.js.

Services available

!
?

Need anything else?

Contributors list

# 16,988
CSS
iterm2
putty
xresour...
109 commits
# 3,174
query-l...
python-...
mvvm-fr...
wechat-...
2 commits
# 19,368
Mongoos...
gc
ooxml
mdui
1 commit
# 803
Vue.js
JavaScr...
Nuxt.js
nuxt-mo...
1 commit

nuxt-shopify

🛍 Shopify Module

npm version Dependencies npm downloads code style: prettier License: MIT FOSSA Status

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);
  }
}

Store actions (including
nuxtServerInit
)

// 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

📑 License

MIT License

FOSSA Status

We use cookies. If you continue to browse the site, you agree to the use of cookies. For more information on our use of cookies please see our Privacy Policy.