🛍 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 =;
OR
module.exports =;
Don't have a Storefront Access Token yet? Get started.
Usage
Component
asyncData
async asyncData
methods
/created
/mounted
/etc
methods:
nuxtServerInit
)
Store actions (including // In store
Shopify Client
Examples from the official shopify-buy sdk library
Fetching products
// Fetch all products in your shopthis.$shopify.product.fetchAll.then; // Fetch a single product by ID; this.$shopify.fetchproductId.then;
Fetching Collections
// Fetch all collections, including their productsthis.$shopify.collection.fetchAllWithProducts.then; // Fetch a single collection by ID, including its products; this.$shopify.collection.fetchWithProductscollectionId.then;
Creating a checkout
// Create an empty checkoutthis.$shopify.checkout.create.then;
Adding Line Items
; // ID of an existing checkout; // Add an item to the checkoutthis.$shopify.checkout.addLineItemscheckoutId, lineItemsToAdd.then;
Updating checkout attributes
;; this.$shopify.checkout.updateAttributescheckoutId, input.then;
Updating Line Items
; // ID of an existing checkout; // Update the line item on the checkout (change the quantity or variant)this.$shopify.checkout.updateLineItemscheckoutId, lineItemsToUpdate.then;
Removing Line Items
; // ID of an existing checkout; // Remove an item from the checkoutthis.$shopify.checkout.removeLineItemscheckoutId, lineItemIdsToRemove.then;
Fetching a Checkout
; this.$shopify.checkout.fetchcheckoutId.then;
Adding a Discount
; // ID of an existing checkout; // Add a discount code to the checkoutthis.$shopify.checkout.addDiscountcheckoutId, discountCode.then;
Removing a Discount
; // ID of an existing checkout // Removes the applied discount from an existing checkout.this.$shopify.checkout.removeDiscountcheckoutId.then;
Updating a Shipping Address
; // ID of an existing checkout ; // Update the shipping address for an existing checkout.this.$shopify.checkout.updateShippingAddresscheckoutId, shippingAddress.then;
Development
- Clone this repository
- Install dependencies using
yarn install
ornpm install
- Start development server using
yarn dev
ornpm run dev