2.0-RC1: Extended swiper.html.twig template is ignored if cookiebar is activated

[ben-eSM]

I have extended the new swiper.html.twig template to alter some options in the script block of the template. As soon as I activate the cookiebar in the root page, those changes are ignored. Since the script part is added to the body by {% add "swiper_js" to body %}, I assume it has something to do with that part.

[zoglo]

Did you use the add module method and did it work before using Twig? https://github.com/oveleon/contao-cookiebar/blob/2.x/docs/EXTENDED_USAGE.md

Are you sure that you are properly overriding the template as well? I still don't really understand the issue you are having as you are just saying that you are overriding some script of some template and it being swiper. Is that a custom script you are using? What changes are ignored and what element is being blocked / not blocked?

[zoglo]

@ben-eSM bump

[ben-eSM]

The issue is with extending the regular swiper.html.twig file in Contao 5.3. I've extended it by using the Templates section in the backend.

It's a simple template alteration. But as soon as I enable the Cookiebar, the custom template is ignored. (The slides are sliding instead of fading.)

{% extends "@Contao/content_element/swiper.html.twig" %}

{#
  ** Add changes to the base template here. **

  Hint: Try adjusting blocks and attributes instead of
  overwriting the whole template. This way your version
  can remain compatible with future changes to the base
  template as well as adjustments made by extensions.

  Currently available blocks:
    "stylesheet_component", "content", "slides",
    "slide", "slide_inner", "controls", "script",
    "init_options", "style", "headline_component",
    "headline_attributes", "headline_inner",
    "wrapper", "wrapper_tag", "attributes", "inner",
    "metadata"

  Example:
    {% block stylesheet_component %}
       {{ parent() }}
       My additional content for 'stylesheet_component'…
    {% endblock %}
#}

{% block script %}
    {% add "swiper_js" to body %}
        <script src="{{ asset('js/swiper-bundle.min.js', 'contao-components/swiper') }}"></script>
        <script>
            (function() {
                const swiper = document.querySelectorAll('.swiper');
                swiper.forEach (el => {
                    let opts = {
                        speed: el.getAttribute('data-speed'),
                        initialSlide: el.getAttribute('data-offset'),
                        loop: el.hasAttribute('data-loop'),
                        effect: 'fade',
                    };

                    let delay = el.getAttribute('data-delay');
                    if (delay > 0) {
                        opts['autoplay'] = { delay: delay };
                    }

                    new Swiper(el, Object.assign({
                        {% block init_options %}
                        pagination: {
                            el: '.swiper-pagination',
                            clickable: true,
                        },
                        navigation: {
                            prevEl: '.swiper-button-prev',
                            nextEl: '.swiper-button-next',
                        },
                        {# Put custom options here #}
                        {% endblock %}
                    }, opts));
                });
            })();
        </script>
    {% endadd %}
{% endblock %}

[xprojects-de]

Hello everyone,

I cannot reproduce the error!

What have I done:

• create a template with the name and path "templates/content_element/swiper.html.twig"
• use your template content @ben-eSM
• Cookie bar activated => Works perfectly and the swiper fades
• Cookie bar deactivated => Works perfectly and the swiper fades
• remove "templates/content_element/swiper.html.twig"
• Cookie bar activated => Works perfectly and the swiper slides
• Cookie bar deactivated => Works perfectly and the swiper slides
• Switched between the different integration options for the cookie bar (Head, Body, top body, bottom body) => all works fine

There may be something else wrong here...

@ben-eSM Can you share your Cookiebar-Settings? Have you made any other settings e.g. config.yaml, etc? Do you use a custom template? Do you have any JS-Errors in the Developer-Toolbar?

[webwerkwien]

Hi, today I extended the same template with your template version (adding some changes) while using the cookie bar with your template version. I can not see such a problem. Example: https://web.werk.wien Btw. your template does not support CSP anymore.

Best regards!

[zoglo]

Hi @ben-eSM , 3 parties have not been able to reproduce the issue and we have been waiting for your response.

I will close this as it is not an issue with this plugin, but it appears that you have been using twig incorrectly.

• Please take a look at this guide (or the other guides around twig): https://docs.contao.org/dev/framework/templates/architecture/#twig-root
• Test it again

Feel free to reopen this issue with clear instructions to reproduce by using the official Contao demo (github.com/contao/contao-demo)