Корзина товаров

Шапка и подвал

<template>
  <b-navbar variant="light" toggleable="md">
    <b-container>
      <b-navbar-brand :to="{name: 'index'}">
        <!-- Логотип я скопировал из картинок админки -->
        <b-img src="~/assets/images/logo-vesp.svg" width="152" height="20" alt="Vesp" />
      </b-navbar-brand>
      <!-- Кнопку корзины пока отключаем -->
      <b-button variant="primary" disabled class="ml-auto">
        <fa icon="cart-shopping" />
      </b-button>
    </b-container>
  </b-navbar>
</template>

<script>
export default {
  name: 'AppNavbar',
}
</script>

Config.bootstrapVue.componentPlugins = [
  // ...
  'NavbarPlugin',
]

// Не забываем и про иконку корзины
Config.fontawesome = {
  // ...
  icons: {
    solid: ['faHome', 'faCartShopping'],
  },
}

<template>
  <div class="min-vh-100 d-flex flex-column">
    <app-navbar />
    <b-container class="pt-4 flex-grow-1">
      <nuxt />
    </b-container>
  </div>
</template>
<script>
import AppNavbar from '../components/app/navbar'

export default {
  components: {AppNavbar},
}
</script>

<template>
  <footer class="bg-light mt-5 py-3">
    <b-container class="text-muted small">
      <b-row>
        <b-col md="6" class="font-weight-bold text-center text-md-left">
            Vesp Shop
        </b-col>
        <b-col md="6" class="text-center text-md-right mt-2 mt-md-0">
            <!-- Здесь можно указать и другое имя =) -->
            bezumkin &copy; 2020 &mdash; {{ year }}
        </b-col>
      </b-row>
    </b-container>
  </footer>
</template>

<script>
export default {
  name: 'AppFooter',
  data() {
    return {
      year: new Date().getFullYear(),
    }
  },
}
</script>

Работа с корзиной

// Это, собственно, и есть хранилище состояния приложения
export const state = () => ({
  // Корзина представляет из себя массив и по умолчанию пуста 
  cart: [],
})

// Мутации - это статические функции, которые меняют состояние хранилища
export const mutations = {
  // Добавление товара в корзину получает первым параметром состояние,
  // а вторым - товар для добавления
  addToCart(state, product) {
    // Дальше мы просто закидываем id, title и price товара в массив корзины
    state.cart.push({id: product.id, title: product.title, price: product.price})
  },
  // Удаление товара из корзины принимает те же параметры
  removeFromCart(state, product) {
    // Для удаления мы ищем первый товар с указанным id
    const idx = state.cart.findIndex((i) => i.id === product.id)
    // И если нашли
    if (idx > -1) {
      // То удаляем его из корзины
      state.cart.splice(idx, 1)
    }
  },
  // Функция очистки корзины просто обнуляет массив
  clearCart(state) {
    state.cart = []
  },
}

// А это вычисляемые свойства хранилища, 
// примерно как computed переменные в компонентах
export const getters = {
  // Эта функция вернёт количество товаров в корзине
  cartProducts(state) {
    return state.cart.length
  },
  // А эта подсчитает их сумму
  cartTotal(state) {
    let total = 0
    state.cart.forEach((i) => {
      total += i.price
    })
    return total ? total.toFixed(2) : 0
  },
}

<template>
    <div>
        <!-- ... -->
        <!-- При клике происходит запуск мутации addToCart с передачей товара -->
        <b-button variant="primary" @click="$store.commit('addToCart', product)">
            В корзину!
        </b-button>
    </div>
</template>

<template>
  <b-navbar ...>
      <!-- ... -->
      <!-- Включаем кнопку только если в корзине есть товары -->
      <b-button variant="primary" :disabled="!products" class="ml-auto" @click="showCart = true">
        <fa icon="cart-shopping" />
        <!-- Выводим сумму корзины, если есть -->
        <template v-if="total">{{ total }} руб.</template>
      </b-button>
  </b-navbar>
</template>

<script>
export default {
  name: 'AppNavbar',
  // Добавляем вычисляемые переменные
  computed: {
    // Которые просто вызывают геттеры из хранилища
    total() {
      // Сумма корзины
      return this.$store.getters.cartTotal
    },
    products() {
      // И количество товаров
      return this.$store.getters.cartProducts
    },
  },
}
</script>

Вывод корзины

<template>
  <!-- Если в корзине есть товары-->
  <div v-if="amount" class="pb-3">
    <!-- Перебираем "плоский" массив, который у нас генерируется в свойстве products -->
    <b-row v-for="product in products" :key="product.id" align-v="center" class="mt-3">
      <b-col md="4" class="text-center text-md-left mb-2 mb-md-0">
        <div class="font-weight-bold">{{ product.title }}</div>
        <div class="small text-muted">{{ product.price }} руб.</div>
      </b-col>
      <!-- Колонка с количеством товара и кнопками его изменения-->
      <b-col cols="6" md="4" class="d-inline-flex align-items-center justify-content-center">
        <!-- Эта кнопка уменьшает количество -->
        <b-button variant="light" size="sm" @click="$store.commit('removeFromCart', product)">
          <fa icon="minus" />
        </b-button>
        <div class="px-2">{{ product.amount }} шт.</div>
        <!-- А эта увеличивает -->
        <b-button variant="light" size="sm" @click="$store.commit('addToCart', product)">
          <fa icon="plus" />
        </b-button>
      </b-col>
      <!-- Итоговую сумму товара можно посчитать прямо в шаблоне -->
      <b-col cols="6" md="4" class="text-right">
        <strong>{{ Number(product.price * product.amount).toFixed(2) }}</strong> руб.
      </b-col>
    </b-row>

    <!-- Если строк в корзине больше одной - выводим общее итого -->
    <div v-if="products.length > 1" class="bg-light mt-3 py-3 border-top text-center">
      Итого <strong>{{ amount }}</strong> шт., на сумму <strong>{{ total }}</strong> руб.
    </div>

    <!-- Ну и кнопка очистки корзины вызывает соответствующий метод хранилища -->
    <div class="mt-4">
      <b-button variant="danger" @click="$store.commit('clearCart')">Очистить корзину</b-button>
    </div>
  </div>
  // И сообщение о пустой корзине, если товаров в ней нет
  <div v-else>
    <div class="p-4 text-center font-weight-bold">Ваша корзина пуста</div>
  </div>
</template>

<script>
export default {
  name: 'Cart',
  computed: {
    // Приводим корзину к "плоскому" виду для вывода в списке
    // То есть, объединяем товары по id, и добавляем их общее количество
    // Так как это вычисляемое свойство - оно будет пересчитываться автоматически
    // при изменении корзины в хранилище
    products() {
      const products = {}
      this.$store.state.cart.forEach((i) => {
        if (!products[i.id]) {
          products[i.id] = {...i, amount: 1}
        } else {
          products[i.id].amount += 1
        }
      })
      return Object.values(products)
    },
    // Тут как обычно, просто ссылки на методы в хранилище
    total() {
      return this.$store.getters.cartTotal
    },
    amount() {
      return this.$store.getters.cartProducts
    },
  },
}
</script>

<template>
  <b-navbar variant="light" toggleable="md">
    <!-- -->
    <b-modal v-model="showCart" title="Корзина" hide-footer>
      <cart />
    </b-modal>
  </b-navbar>
</template>

<script>
import Cart from '../../components/cart'

export default {
  name: 'AppNavbar',
  components: {Cart},
  data() {
    return {
      showCart: false,
    }
  },
  // ...
}
</script>

Config.bootstrapVue.componentPlugins = [
  // ...
  'ModalPlugin',
]

Config.fontawesome = {
  // ...
  icons: {
    solid: [/* ... */, 'faMinus', 'faPlus'],
  },
}

@import '~bootstrap/scss/modal';
@import '~bootstrap/scss/close';
@import '~bootstrap/scss/transitions';
@import '~bootstrap/scss/utilities/borders';
@import '~bootstrap-vue/src/components/modal';

Хранение корзины

export const mutations = {
  // Прописываем сохранение корзины при каждом её изменении
  addToCart(state, product) {
    // ...
    this.dispatch('saveCart')
  },
  removeFromCart(state, product) {
    // ...
    this.dispatch('saveCart')
  },
  clearCart(state) {
    // ...
    this.dispatch('saveCart')
  },
}

export const actions = {
  // Сохранение корзины
  saveCart({state}) {
    // Хранить можно только строки, поэтому кодируем в JSON
    localStorage.setItem('cart', JSON.stringify(state.cart))
  },
  // Загрузка корзины
  loadCart({state, commit}) {
    // Мы не можем менять state напрямую, поэтому
    const products = JSON.parse(localStorage.getItem('cart')) || []
    // вызываем мутаторы в цикле, как если бы товары добавили вручную
    products.forEach((product) => {
      commit('addToCart', product)
    })
  },
}

export default {
  // ...
  mounted() {
    this.$store.dispatch('loadCart')
  },
}

Заключение

<template>
  <b-overlay :show="loading" opacity="0.5">
    <!-- -->
    <div class="d-flex justify-content-between align-items-center mt-2">
      <b-link :to="getLink(product)" class="font-weight-bold">{{ product.title }}</b-link>

      <!-- Просто кнопка, вызывающая действие в хранилище -->
      <b-button variant="light" size="sm" @click="$store.commit('addToCart', product)">
        <fa icon="cart-shopping" class="mr-1" />
        {{ product.price }} руб.
      </b-button>
  </div>
  <!-- -->
  </b-overlay>
</template>