How to pass custom class into Dynamic Include

[erikberger]

Support Request

In this closed issue @bencroker , you give an example of canceling a dynamic include with a class of "shoot-me-down" #151 (comment) .

I need to be able to conditionally cancel some template injections given various circumstances. How can I pass a class or attribute like "shoot-me-down" into the injected markup to achieve this? All of my injected includes just have the stock blitz-inject blitz-inject--injected classes.

Plugin Version

4.9.3

[bencroker]

If you inline the JS code then you’ll be able to use a Twig variable.

<script>
    document.addEventListener('beforeBlitzInject', function (event) { 
        if (event.detail.element.hasClass('{{ className }}') {
            // Cancel event
            event.preventDefault();
        }
    });
</script>

Or alternatively create and call a function instead.

<script>
    cancelBlitzInject('{{ className }}');
</script>

[spib]

Hey @bencroker - I'm a colleague of @erikberger - apologies if we've misunderstood, but just want to explain our use case a little more to make sure this would work.

We've got some includeDynamic calls which we don't want to run at all when not logged in (a lot of them actually!). We're able to detect in javascript when someone isn't logged in and then prevent the call using beforeBlitzInject. However, we want to do this selectively based on which twig template is being included - but unfortunately the event data doesn't include anything which helps us figure out which template it originally came from.

We were thinking maybe the 3rd parameter to includeDynamic (options) could include a property which would be passed through to the javascript handler, something like

{% set options = { 
    placeholder: '<img src="/images/placeholder.svg">',
    custom: 'logged-in-only'
} %}
{{ craft.blitz.includeDynamic('path/to/template', { param1: 'value1' }, options) }}

Then in the javascript handler we could do something like

document.addEventListener('beforeBlitzInject', function (event) {
   if(userIsLoggedIn ===false && event.detail.custom === 'logged-in-only'){
    event.preventDefault();
  }
});

[erikberger]

@bencroker @spib - it looks like if we use property in the options object

{% set options = { 
    property: 'logged-in-only'
} %}

{{ craft.blitz.includeDynamic('path/to/template', { param1: 'value1' }, options) }}

that value gets passed on to the injected tag as the data-blitz-property and therefore can be checked for in javascript like
event.detail.element.dataset.blitzProperty == 'logged-in-only'

Does that look right?

[bencroker]

Yes, that’s exactly what I’d recommend doing. The element output will look something like this:

<span id="blitz-inject-1" 
    class="blitz-inject" 
    data-blitz-id="1" 
    data-blitz-uri="/_dynamic" data-blitz-params="action=blitz%2Finclude%2Fdynamic&amp;index=558018959" 
    data-blitz-property="logged-in-only"
></span>

So you can check the value of dataset.blitzProperty, as in @erikberger’s code.

[spib]

@bencroker @erikberger No, that doesn't work (at least the testing I did previously) because blitz assumes the property is a key to a value in the JSON response. I believe it's used internally in blitz for CSRF tags.

I think it does need a separate field just for this purpose?

[bencroker]

Oh yes, you’re right @spib, that is used internally by Blitz.

Wrapping the include in an element that you can target might be the simplest workaround, without requiring any changes to the Blitz inject script.

<div class="logged-in-only">
    {{ craft.blitz.includeDynamic(template) }}
</div>

<script>
    document.addEventListener('beforeBlitzInject', function (event) { 
        if (event.detail.element.parentElement.hasClass('logged-in-only') {
            event.preventDefault();
        }
    });
</script>

Let me know if that works for you.

[erikberger]

Hi @bencroker - that works for us using
event.detail.element.parentElement.classList.contains('logged-in-only') in the Javascript, thank you!

It does leave us with extraneous empty <div class="logged-in-only"></div> tags for non-logged in users but we can live with that.

Would you consider putting in a future release something like a additionalClasses param for the options, like

{% set options = { 
    additionalClasses: 'logged-in-only'
} %}

{{ craft.blitz.includeDynamic('path/to/template', { param1: 'value1' }, options) }}

which results in the injected tag looking like

<span id="blitz-inject-1" 
    class="blitz-inject logged-in-only" 
 ...
></span>

Or another way we can identify and cancel specific dynamic includes?

[bencroker]

Sure! I just added a wrapperClass property in b8e8397, so you should be able to achieve this as follows:

{{ craft.blitz.includeDynamic('path/to/template', { param1: 'value1' }, { wrapperClass: 'logged-in-only' }) }}

Released in 4.11.0.