1

Using Craft 2 and I have a Matrix Block which can contain a carousel item, which uses JS/jQuery. Because the content editor can add multiple instances of this Matrix Block I can’t set up these carousels in my js file as I need to create unique names.

So to get around this I’m putting the JS inline using includeJs and then in my Block template I set and use a Craft variable.

What’s bizarre is that this works the first time I hit the page, but then this part of includeJs isn’t getting loaded/included on the page. Happens both locally and online.

Here's the content of my Matrix Block:

<section class="tabbedCircles  content  content--pad  {{ block.backgroundColour}}"{% if block.stickyNavId %} id="{{ block.stickyNavId}}"{% endif %}>
    <div class="grid">
        {% if block.headline %}
            <h1 class="{% if block.headlineAlignment in ['center',] %}center  {% endif %}margin--double--mq">{{ block.headline}}</h1>
        {% endif %}
        {% set carouselNav = block.headline|kebab  ~ 'Nav' %}
        {% set carouselContent = block.headline|kebab  ~ 'Content' %}

        <div class="tabbed__circles__wrapper">
        <ul class="tabbed__circles  margin--double--mq {{ carouselNav }}">
            {% for row in block.tabContent %}

            {% set iconStatic = craft.entries({
                section: 'iconsStatic',
                with: ['tabbedIconCircles.animationTemplate']
            }).relatedTo(row) %}
            <li>
                <div class="circle">
                    {% for entry in iconStatic %}
                        {% include "_includes/icon" with {
                            'name': entry.animationTemplate
                        } %}
                    {% endfor %}
                </div>
                <span class="text--h3">{{ row.tabTitle }}</span>
            </li>
            {% endfor %}
        </ul>
        </div>
        <ul class="tabbed__circles__content {{ carouselContent }}">
            {% for row in block.tabContent %}
            {% set iconStatic = craft.entries({
                section: 'iconsStatic',
                with: ['tabbedIconCircles.animationTemplate']
            }).relatedTo(row) %}
            <li>
                <figure class="{% if block.contentIconAlignment == 'iconLeftContentRight' %}content__split__icon{% else %}content__split__icon--reverse{% endif %}">
                    {% for entry in iconStatic %}
                        {% include "_includes/icon" with {
                            'name': entry.animationTemplate
                        } %}
                    {% endfor %}
                </figure>

                <div class="{% if block.contentIconAlignment == 'iconLeftContentRight' %}content__split__copy{% else %}content__split__copy--reverse{% endif %}">
                    <h1>{{ row.headline }}</h1>

                    {{ row.body }}
                </div>
            </li>
            {% endfor %}
        </ul>
    </div>
</section>

{% set carouselJS %}

///// New Slick Carousel for 2018 Tabbed Circles and Content
var carouselNav = '.{{ carouselNav }}';
var carouselContent = '.{{ carouselContent }}';
if ($(carouselContent).length) {

    $(carouselContent).slick({
        arrows: false,
        draggable: false,
        swipeToSlide: true,
        autoplay: true,
        autoplaySpeed: 3000,
        infinite: true,
        speed: 500,
        fade: true,
        slidesToShow: 1,
        slidesToScroll: 1,
        asNavFor: carouselNav,
    });

    $(carouselNav).slick({
        mobileFirst: true,
        arrows: false,
        autoplay: false,
        //autoplaySpeed: 7000,
        draggable: true,
        slidesToShow: 2,
        slidesToScroll: 1,
        infinite: true,
        asNavFor: carouselContent,
        centerMode: false,
        focusOnSelect: true,
        responsive: [
            {
              breakpoint: 500,
              settings: {
                slidesToShow: 3,
              }
            },
            {
              breakpoint: 700,
              settings: {
                slidesToShow: 4,
              }
            },
            {
              breakpoint: 1100,
              settings: {
                slidesToShow: 5,
                slidesToScroll: 'none'
              }
            }
        ]
    });

    $(carouselNav).on('click', function(){
        $(carouselContent).slick('slickPause');
        $(carouselNav).slick('slickPause');
    });
};
{% endset %}

{% includeJs carouselJS %}
2

I’m gonna guess that you’re caching this block of code.

You can’t technically cache an includeJs tag, because it’s not creating any HTML at that exact spot. It will only work the very first time, before the caching has taken place. Once the cached chunk of HTML is being retrieved from your database, the JS will not be a part of it.

The workaround is to not cache your includeJs line. You can either omit it directly (by carefully placing your cache tags), or use a plugin like No Cache which briefly deactivates the caching for that spot.

  • Oh my god, this was it! Thanks so much. It's within a HUGE Matrix content builder but the main template was caching it. This was driving me insane! :) – richardpixel Sep 7 '18 at 14:56

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.