# Shopping Cart


import ShoppingCart from "mela-store";

# Example:

<shopping-cart
  :products="data"
  @increase-cart-quantity="increaseCartQuantity"
  @decrease-cart-quantity="decreaseCartQuantity"
  @delete-product="deleteProductFromCart"
>
</shopping-cart>

To replace native a link tags with a vue link or nuxt link, you replace the default using the available slot.

<!-- vue -->
<template v-slot:product-link="{ item }">
    <VueLink :to="item.link" class="melastore-product-title">
      {{ item.title }}
    </VueLink>
</template>

<!-- nuxt -->
<template v-slot:product-link="{ item }">
    <NuxtLink :to="item.link" class="melastore-product-title">
      {{ item.title }}
    </NuxtLink>
</template>

# Props

Name
Type
Default
Description
productsarray[]An array of items/products in user's cart.

# Slots

Name
Scopes
Description
product-linkitem - product objectThe 'Product Link' content

# Events

Name
Arguments
Description
delete-productproduct - selected product objectDeletes selected product from cart
decrease-cart-quantityproduct - selected product objectDecreases cart quantity of selected item
increase-cart-quantityproduct - selected product objectIncrease cart quantity of selected item

# Notes

  1. Object keys in products props array should satisfy default values.

← Favourites →