@salesqueze/cart-nuxt v1.0.5

@salesqueze/cart-nuxt

SaleSqueze Cart Vuex Store module for NuxtJS

• 📖  Read the documentation

Features

• Cart management
• Persistnt storage

📖  Read the documentation

Installing

npm install @salesqueze/cart-nuxt

Adding to Your Project

@salesqueze/cart-nuxt is a Vuex module, so adding it to your project is as simple as including the package as a module in your Vuex store. The index.js for your Vuex store should look something like this:

import Vue from "vue";
import Vuex from "vuex";
import cart from "@salesqueze/cart-nuxt";

Vue.use(Vuex);

export default new Vuex.Store({
  modules: { cart },
  state: {},
  mutations: {},
  actions: {},
  getters: {},
});

Data Schemas

Cart Item

A cart item must contain a variants object, which contains objects that describe a variation of a product. Each variant is a object whose key is the variant unique identifier(maybe a sku?). The value is an object with name and price objects.

{
  ...<Your Custom Attributes>...,
  variants: {
    <variant_1_id>: {
      name: <variant_1_name>,
      price: <variant_1_price>
    },
    ...<More variants>...
  }
}

Usage

• Import the Vuex store action constants(Only import the ones you need)

import {
  ADD_ITEM,
  REMOVE_ITEM,
  DUPLICATE_ITEM,
  LOAD_CART,
  CLEAR_CART,
  CART_ITEMS,
  CART_TOTAL,
  NUM_ITEMS
} from "vuex-shopping-cart/constants.type";

• Add an item to the cart

this.$store.dispatch(ADD_ITEM, {
  item: <Insert Your Item(Follow schema above)>,
  sku: <Unique ID for the product>,
});

• Remove an item from the cart

this.$store.dispatch(REMOVE_ITEM, <Insert Unique ID for the product>);

• Duplicate cart item

this.$store.dispatch(DUPLICATE_ITEM, <Insert Unique ID for the product>);

• Clear the entire cart

this.$store.dispatch(CLEAR_CART);

• Load the items from local storage

store.dispatch(LOAD_CART);

This is commonly dispatched every time that your vue application mounts. For example, in the mounted in your app.vue or in a router.beforeEach().

Built With

• lodash - A modern JavaScript utility library
• Vue - JavaScript framework