Assets manager add Swiper css and js files

Support Themes & Styling
1

On the main page and some subpages I use Swiper. That’s why I decided to separate
it from main theme.js file and include it via assets manager cms GRAV.

In the directory user/themes/abm/assets/css and user/theme/abm/assets/js I have placed the appropriate files.

In the file user/themes/abm/templates/partials/swiper the code:

{% do assets.addCss('theme://assets/css/swiper-bundle.min.css') %}
{% do assets.addJs('theme://assets/js/swiper-bundle.min.js', { group: 'bottom', priority: 110 }) %}

<div class="swiper-container {{ swiper.container.classes }}" {{ swiper.container.data|raw }}>
	{% if swiper.thumbs %}
	<div class="swiper-main">
	{% endif %}

	<div class="swiper {{ swiper.swiper.classes }}">
		<div class="swiper-wrapper {{ swiper.wrapper.classes }}">
			{% block swiperWrapper %}{% endblock %}
		</div>

	</div>

	{% if swiper.thumbs %}
	</div>
	{% endif %}

	{% block swiperThumbs %}{% endblock %}
	{% block swiperStatic %}{% endblock %}
</div>

On localhost everything works, but after uploading to the server I have the following problem.

After clearing the cache, the page is displayed ok but only the first time. Each subsequent page view and there are no links to Swiper’s .css and .js in the code.

2

what does your base template look like, in a part of asset blocks?

3

user/themes/abm/templates/partials/base.html.twig:

<!DOCTYPE html>
<html lang="{{ html_lang }}">
	<head>
		{% block head %}
			{% include 'partials/head/head.html.twig' %}
		{% endblock head %}

		{% block assets deferred %}
			{{ assets.css()|raw }}
			{{ assets.js()|raw }}
		{% endblock %}
	</head>

    <body class="{{ body_classes }}">
       {% block body %}
           ...

	       {% block bottom %}
		       {% include 'partials/blocks/footer/js.html.twig' %}
	       {% endblock %}
       {% endblock %}
    </body>
</html>

user/themes/abm/templates/partials/head/head.html.twig:

{% include 'partials/head/partials/metadata.html.twig' %}
{% include 'partials/head/partials/favicons.html.twig' %}
{% include 'partials/head/partials/css.html.twig' %}
{% include 'partials/head/partials/js.html.twig' %}

user/themes/abm/templates/partials/head/css.html.twig:

{% block stylesheets %}
  {% do assets.add('theme://'~dir~'/assets/css/plugins.css', 110) %}
  {% do assets.add('theme://'~dir~'/assets/css/style.css', 110) %}
  {% do assets.add('theme://'~dir~'/assets/css/colors/'~config.theme.theme~'.css', 110) %}
{% endblock %}

user/themes/abm/templates/partials/head/js.html.twig:

{% block javascripts %}
	{% do assets.addJs('theme://'~dir~'/assets/js/plugins.js', {group:'bottom'}) %}
	{% do assets.addJs('theme://'~dir~'/assets/js/theme.js', {group:'bottom'}) %}
{% endblock %}
4

Now I thought about it. The difference between the localhost environment and the one on the server is that:

localhost site.yaml:

cache:
  enabled: false

server site.yaml:

cache:
  enabled: true

And in fact, when I enable cache on localhost, the symptoms are the same. The first time everything is ok. Each time there are no more attached files.

5

Check this issue thread on Github, It might give you some ideas. I suspect the reason of the problem is the same. Or at least closely related

6

Never_cache_twig: true
in the page frontmatter and works. Thx.

It’s a pity, though, because I thought the following effect could be achieved.
In the Swiper’s twig template, I place references to the css and js files necessary for its operation (as shown above), and then in any other template file, e.g.:
partials/blocks/hero/slider:

{% embed "partials/swiper/swiper.html.twig" with {
    swiper: {
        container: {
            classes: 'swiper-container swiper-hero',
            data: 'data-effect="fade" data-margin="0" data-items="1"'
        },
    }}%}
    {% block swiperWrapper %}
        {% for image in images %}
            {% include "partials/blocks/hero/slider/slide.html.twig" with {
                index: loop.index0
            }%}
        {% endfor %}
    {% endblock %}
{% endembed %}

And I don’t have to worry about anything anymore. In the current situation, I have Swiper’s .css and .js files only on pages where it is needed (super), but I have to remember about the proper configuration.