Оформление товаров и категорий

<script>
export default {
  name: 'ListProducts',
  props: {
    // Указываем наш новый параметр
    category: {
      type: String,
      default: null,
    },
    // ...
  },
  async fetch() {
    // ...
    // меняем адрес для запросов на computed переменную
    const {data} = await this.$axios.get(this.url, {params})
    // ...
  },
  computed: {
    // И назначаем новую переменную для запроса
    // Она зависит от указания alias категории
    url() {
      return this.category ? 'web/categories/' + this.category + '/products' : 'web/products'
    },
    // ...
  },
</script>

<template>
  <div class="pt-5">
    <!-- Напрямую указываем категорию из параметров маршрута -->
    <list-products :category="$route.params.category" />
  </div>
</template>

<script>
import ListProducts from '../../components/list-products'

export default {
  components: {ListProducts},
  // Проверяем наличие категории в параметрах маршрута
  validate({params}) {
    return Boolean(params.category)
  },
}
</script>

Компонент управления каталогом

<template>
  <b-row class="mt-3 mb-3">
    <!-- Переносим всё содержимое этого тега с главной страницы 
        без изменений -->
  </b-row>
</template>

<script>
export default {
  // Имя компонента
  name: 'ListProductsActions',
  props: {
    // v-model у нас будет вариант оформления товаров
    // списком или плиткой
    value: {
      type: Boolean,
      required: true,
    },
    // Дополнительные параметры
    sort: {
      type: String,
      required: true,
    },
    dir: {
      type: String,
      required: true,
    },
  },
  computed: {
    // Наш v-model, который будет использоваться в template,
    // а изменения будет слушать родительская страница
    listView: {
      get() {
        return this.value
      },
      set(newValue) {
        this.$emit('input', newValue)
      },
    },
  },
  methods: {
    // Этот метод переезжает в иземенённом виде
    onSort(key) {
      // Так как sort и dir страли параметрами, нельзя их менять напрямую,
      // как и v-model, теперь мы будем менять их через события
      if (this.sort === key) {
        this.$emit('update:dir', this.dir === 'asc' ? 'desc' : 'asc')
      } else {
        this.$emit('update:sort', key)
        this.$emit('update:dir', 'asc')
      }
    },
  },
}

<template>
  <div>
    <!-- Наш новый компонент с кнопками, обратите внимание 
        на вызов параметров с модификаторами .sync="..." -
        это и есть слежка за их изменениями -->
    <list-products-actions v-model="listView" :sort.sync="sort" :dir.sync="dir" />

    <!-- Тут всё без изменений -->
    <list-products v-model="page" :limit="limit" :sort="sort" :dir="dir" :list-view="listView" @load="onLoad" />

    <b-pagination v-model="page" :total-rows="total" :per-page="limit" class="mt-5" />
  </div>
</template>

<script>
import ListProducts from '../components/list-products'
// Импорт нового компонента
import ListProductsActions from '../components/list-products-actions'

export default {
  name: 'IndexPage',
  // Регистрация нового компонента
  components: {ListProductsActions, ListProducts},
  data() {
    // ...
  },
  computed: {
       // ...
  },
  methods: {
    onLoad({total}) {
      this.total = total
    },
    // Метод onSort удаляем
  },
}
</script>

Оформление товара

// Меняем запрос перед получением 1 модели
protected function beforeGet(Builder $c): Builder
{
    $c->where('active', true);
    // Выбираем категорию
    $c->with('category:id,alias,title');
    // И активные файлы, в порядке сортировки
    $c->with('productFiles', static function (HasMany $c) {
        $c->where('active', true);
        $c->orderBy('rank');
        $c->select('product_id', 'file_id');
        $c->with('file:id,updated_at');
    });

    return $c;
}

<template>
  <div class="mt-5">
    <b-link :to="{name: 'index'}">&larr; Вернуться назад</b-link>

    <b-row class="mt-3">
      <b-col v-if="product.product_files.length" md="6" class="mt-3 mt-md-0 order-2 order-md-1">
        <!-- Карусель BootstrapVue-->
        <b-carousel controls indicators>
          <b-carousel-slide v-for="image in product.product_files" :key="image.file_id">
            <!-- В карусели указываем собственное оформление картинок -->
            <template #img>
              <!-- Не забываем про экраны высокой плотности, указываем srcset -->
              <b-img
                :src="$image(image.file, {w: thumbWidth, h: thumbHeight, fit: 'crop'})"
                :srcset="$image(image.file, {w: thumbWidth * 2, h: thumbHeight * 2, fit: 'crop'}) + ' 2x'"
                :width="thumbWidth"
                :height="thumbHeight"
                alt=""
              />
            </template>
          </b-carousel-slide>
        </b-carousel>
      </b-col>
      <b-col md="6" class="order-1 order-md-2">
        <!-- Тут всё стандартно-->
        <h1>{{ product.title }}</h1>
        <div class="mt-3">{{ product.description }}</div>
        <div class="font-weight-bold mt-3">{{ product.price }} руб.</div>
        <div class="mt-3">
          <!-- Кнопка пока ничего не делает -->
          <b-button variant="primary " disabled>В корзину!</b-button>
        </div>
      </b-col>
    </b-row>
  </div>
</template>

<script>
export default {
    //...
  data() {
    return {
      // Прописываем размеры для картинок
      // В будущем их можно сделать динамическими и 
      // рассчитывать в зависимости от размера экрана
      thumbWidth: 540,
      thumbHeight: 360,
      product: {
        // Прописываем ключи, чтобы phpStorm их видел и подсказывал
        category: {},
        product_files: [],
      },
    }
  },
}
</script>

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

/* Подключение всех стилей я зыбыл на одном из прошлых занятий -
    его нужно закомментировать */
/* @import '~bootstrap/scss/bootstrap'; */

/* Подключаем стили отображения карусели */
@import '~bootstrap/scss/carousel';
@import '~bootstrap/scss/utilities/screenreaders';

/* И стили нужные для отображения загрузки каталога */
@import '~bootstrap/scss/spinners';
@import '~bootstrap/scss/utilities/position';
@import '~bootstrap/scss/utilities/background';

Хлебные крошки

<template>
  <b-breadcrumb>
    <!-- Иконку на главную страницу выводим всегда -->
    <b-breadcrumb-item :to="{name: 'index'}">
      <fa icon="home" />
    </b-breadcrumb-item>

    <!-- Ссылка на категорию тоже, но активна она только
        при наличии товара -->
    <b-breadcrumb-item :to="{name: 'category', params: {category: category.alias}}" :active="!product">
      {{ category.title }}
    </b-breadcrumb-item>

    <!-- А вот ссылку на товар выводим только, если его передали -->
    <b-breadcrumb-item
      v-if="product"
      :to="{name: 'category-product', params: {category: category.alias, product: product.alias}}"
      active
    >
      {{ product.title }}
    </b-breadcrumb-item>
  </b-breadcrumb>
</template>

<script>
export default {
  name: 'Breadcrumbs',
  // Параметров всего 2
  props: {
    // Обязательная категория
    category: {
      type: Object,
      required: true,
    },
    // И опциональный товар
    product: {
      type: Object,
      default: null,
    },
  },
}
</script>

// Заодно подключаем работу с FontAwesome
Config.buildModules = [/*...*/, '@nuxtjs/fontawesome']
 // Основные настройки
Config.fontawesome = {
  addCss: false,
  component: 'fa',
  icons: {
    // И загрузка ровно одной иконки, которая используется в крошках
    solid: ['faHome'],
  },
}

// А вот и компонент хлебных крошек
Config.bootstrapVue.componentPlugins = [
  // ...
  'BreadcrumbPlugin',
]

@import '~bootstrap/scss/breadcrumb';
@import '@fortawesome/fontawesome-svg-core/styles.css';

<template>
  <div class="mt-5">
    <breadcrumbs :category="product.category" :product="product" />
    <!-- ... -->
  </div>
</template>

<template>
  <div class="pt-5">
    <breadcrumbs :category="category" />
    <!-- ... -->
  </div>
</template>

<script>
export default {
  async asyncData({app, params, error}) {
    try {
      const {data} = await app.$axios.get('web/categories/' + params.category)
      return {category: data}
    } catch (e) {
      error({statusCode: e.response.status, message: e.message})
    }
  },
  data() {
    return {
      // ...
      // Место для хранения загруженных данных
      category: {},
    }
  },
}
</script>

Заключение

.page-enter-active,
.page-leave-active,
.layout-enter-active,
.layout-leave-active {
  transition: opacity 0.1s
}

.page-enter,
.page-leave-active,
.layout-enter,
.layout-leave-active {
  opacity: 0
}