Вывод товаров по uri

• site/pages/index.vue
• site/components/list-products-actions.vue

Подключаем утилиты

• Подключаем все нужные модули

  Config.modules = [...Config.modules, '@vesp/frontend']

• Раз мы подключили все модули, то настройку Config.Vesp можно просто удалить.
• Добавляем загрузку утилит из плагина админки, и создаём новый плагин для сайта

  Config.plugins = ['../admin/plugins/utils.js', '~/plugins/utils.js']

• Копируем настройки i18n из конфига админки

  Config.i18n.vueI18n = '@/lexicons/index.js'
  Config.i18n.defaultLocale = 'ru'
  Config.i18n.locales = [
  {code: 'ru', title: 'Русский'},
  {code: 'en', title: 'English'},
  ]

• Создаём соответствующие файлы переводов, в которых просто реэкспортируем данные из админки.

import Ru from '../../admin/lexicons/ru.js'

export default Ru

export default ({app}, inject) => {
}

    protected function beforeGet(Builder $c): Builder
    {
        // ...
        $c->with('translations');
        $c->with('category:id,uri,active', 'category.translations:category_id,lang,title');

        return $c;
    }

    protected function afterCount(Builder $c): Builder
    {
        $c->with('translations:product_id,lang,title');
        $c->with('category:id,uri,active', 'category.translations:category_id,lang,title');
        $c->with('firstFile');

        return $c;
    }

Универсальный контроллер

<template>
  <div>
    {{ $route.name }}
    {{ $route.params }}
  </div>
</template>

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

export default ({app}, inject) => {
  inject('productLink', ({uri}) => {
    return uri ? ['', app.$config.PRODUCTS_PREFIX, uri].join('/') : ''
  })
}

 <b-link :to="$productLink(product)" ...>

<?php

namespace App\Controllers\Web;

use App\Models\Category;
use App\Models\Product;
use Psr\Http\Message\ResponseInterface;
use Slim\App;
use Slim\Psr7\Factory\ServerRequestFactory;
use Vesp\Controllers\Controller;
use Vesp\Services\Eloquent;

class Resource extends Controller
{
    private App $app;

    // Используем dependency injection, чтобы получить 
    // экземпяр текущего приложения
    public function __construct(App $app, Eloquent $eloquent)
    {
        parent::__construct($eloquent);
        $this->app = $app;
    }

    public function get(): ResponseInterface
    {
        // Получаем основные параметры
        $uri = trim($this->getProperty('uri', ''), '/');
        $endpoint = trim($this->request->getRequestTarget(), '/');
        // Инициализируем новую фабрику для запросов
        $factory = new ServerRequestFactory();

        // Проверяем, есть ли товар с таким uri, или категория
        if (Product::query()->where('uri', $uri)->count()) {
            $endpoint = str_replace('/resource/', '/products/', $endpoint);
            $request = $factory->createServerRequest('GET', $endpoint);
        } elseif (Category::query()->where('uri', $uri)->count()) {
            $endpoint = str_replace('/resource/', '/categories/', $endpoint);
            $request = $factory->createServerRequest('GET', $endpoint);
        } else {
            // Если ни товара, ни категории не найдено - выходим
            return $this->failure('Not Found', 404);
        }

        // Добавляем полученные заголовки в новый запрос
        foreach ($this->request->getHeaders() as $key => $value) {
            $request = $request->withHeader($key, $value);
        }

        // И передаём приложению наш запрос на обработку
        return $this->app->handle($request);
    }
}

$group->group(
    '/web',
    static function (RouteCollectorProxy $group) {
        $group->any('/resource/{uri:.+}', App\Controllers\Web\Resource::class);
        $group->any('/categories[/{uri:.+}]', App\Controllers\Web\Categories::class);
        $group->any('/category/{category_id}/products', App\Controllers\Web\Category\Products::class);
        $group->any('/products[/{uri:.+}]', App\Controllers\Web\Products::class);
        $group->any('/orders', App\Controllers\Web\Orders::class);
    }
);

    protected function getPrimaryKey(): ?array
    {
        if ($uri = $this->getProperty('uri')) {
            return ['uri' => $uri];
        }

        return null;
    }

Вывод товара

export default {
  name: 'ProductsDynamicPage',
  validate({params, route, redirect}) {
    // Если запрос заканчивается на слэш, редиректим на адрес без слэша
    if (route.fullPath.endsWith('/')) {
      return redirect(route.fullPath.slice(0, -1))
    }
    // И проверяем, есть ли вообще какой-то uri
    return Boolean(params.pathMatch)
  },
  async asyncData({app, params, error}) {
    // Запрос в API
    try {
      const {data} = await app.$axios.get('web/resource/' + params.pathMatch)
      return {record: data}
    } catch (e) {
      error({statusCode: e.response.status, message: e.message})
    }
  },
data() {
    return {
      record: {},
    }
  },
  computed: {
    isCategory() {
      return this.record.category_id === undefined
    },
  },
}

<template>
  <div>
    {{ String(isCategory) }}
    <pre>{{ record }}</pre>
  </div>
</template>

Вывод товаров

<template>
  <div>
    <product v-if="!isCategory" :product="record" />
    <pre v-else>{{ record }}</pre>
  </div>
</template>

<template>
  <div>
    <breadcrumbs v-if="category" :category="category" />

    <list-products-actions v-model="listView" :sort.sync="sort" :dir.sync="dir" />

    <list-products
      v-model="page"
      :category="category ? category.id : null"
      :limit="limit"
      :sort="sort"
      :dir="dir"
      :list-view="listView"
      @load="onLoad"
    />

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

<template>
  <category />
</template>

<script>
import Category from '~/components/category.vue'

export default {
  name: 'IndexPage',
  components: {Category},
}
</script>

• pages/index.vue
• pages/products/_.vue

• pages/products/index.vue

Заключение