Подключение ассетов для однотипных блоков PageBuilder без дублирования

Задача в том, чтобы подключить на страницу стили и скрипты для какого-то блока, только если он выведен на страницу.
Допустим у нас есть блок «Слайдер». Для него нам нужно подключить jquery плагин и дефолтные стили

http://localhost:3000/design/css/slick.css
http://localhost:3000/design/js/slick.js


Для этого в главном шаблоне (или в лейауте) определим стеки:


<head>
  ...
  @stack('styles')
</head>
<body>
  ...
  @stack('scripts')
</body>


В самом блоке добавим подключения этих файлов

@prepend('styles')
  <link rel="stylesheet" href="/design/css/slick.css">
@endprepend
@prepend('scripts')
  <script src="/design/js/slick.min.js"></script>
@endprepend


Удобно, работает, но в этом случае, если захотим вывести два или более слайдеров на страницу, получим дублирование, столько раз, сколько слайдеров выведем:

<link rel="stylesheet" href="/design/css/slick.css">
<link rel="stylesheet" href="/design/css/slick.css">


Обновим код из предыдущей заметки

protected function getPageBuilderBlocks($container = 'default') {
    // ...

    $types = [];

    foreach ($blocks as &$block) {
        // ...

        $types[$block['block_id']] += 1;
        $block['block_first_of_type'] = $types[$block['block_id']] == 1;

        unset ($block['inherit'], $block['inheritId']);
    }

    return $blocks;
}


И добавим условия в блоке

@if($data['block_first_of_type'])
  @prepend('styles')
    <link rel="stylesheet" href="/design/css/slick.css">
  @endprepend
@endif
@if($data['block_first_of_type'])
  @prepend('scripts')
    <script src="/design/js/slick.min.js"></script>
  @endprepend
@endif


Профит!

1 комментарий

avatar
Хорошая идея, но как правило js и css один и он минифицирован. Но для очень больших и сложных страниц прикольно. Можно динамически генерить min файл
Только зарегистрированные и авторизованные пользователи могут оставлять комментарии.