Only load CSS and JS if user is logged in as admin (Using Blitz Cache)

[svondervoort]

Following your documentation you add the following to the base layout:

{{ craft.blitz.includeDynamic('_layout/partials/admin-bar.twig', { entryUri: entry.uri ?? '' }) }}
{% css adminBarCssFile() %}
{% css adminBarOnPageCss() %}
{% js adminBarJsFile() with { defer: true, type: 'module' } %}

Is there a way to only load the CSS and JS when I'm logged in. It is redundant loading CSS and JS for regular visitors of the site. This. came up when we ran a scan and it stated the JS is not minified.

[wbrowar]

Hi @svondervoort, if you are using Blitz and you don't want to load the CSS or JS unless you're logged in, then I think I have a solution that could work for you.

What I was hoping you could do is move the adminBarCssFile, adminBarOnPageCss, and adminBarJsFile methods into the Blitz partial, but while the CSS can work from that file, no JavaScript can be executed from it. So this solution handles making a reference to the Admin Bar JavaScript source file, and then a call back will take care of appending a <script> tag to the bottom of your page.

First off, in the Twig file you are loading with Blitz you can add this:

{% set entry = entryUri ?? false ? craft.entries.uri(entryUri).one() : null %}

{{ adminBar({
  entry: entry ?? null,
  editLinkLabel: entry ?? false ? entry.section.name : null,
  useCss: false,
  useJs: false,
}) }}

{% if currentUser %}
  <style>{{ adminBarCssFile({ contents: true }) }}</style>
  <style>{{ adminBarOnPageCss() }}</style>
  <div data-admin-bar-js-source="{{ adminBarJsFile() }}"></div>
{% endif %}

Then in your main Twig template file you can add this wherever you want Admin Bar to be embedded:

{# At the place where you want to embed Admin Bar #}
{{ craft.blitz.includeDynamic('includes/admin-bar.twig', { entryUri: entry.uri ?? '' }) }}

{# At the bottom of your body or whoever else you would prefer to put it. #}
  <script>
    // Wait for all Blitz injections to complete.
    document.addEventListener('afterBlitzInjectAll', function (event) {
      // Find the element that provides the Admin Bar JavaScript URL.
      const jsSourceElement = document.querySelector('[data-admin-bar-js-source]');

      if (jsSourceElement) {
        // Create an empty script tag and populate it with the Admin Bar JavaScript src.
        const adminBarScript = document.createElement('script');
        adminBarScript.type = 'module';
        adminBarScript.src = jsSourceElement.getAttribute('data-admin-bar-js-source');

        // Add script tag to DOM to begin loading Admin Bar JavaScript.
        document.body.appendChild(adminBarScript);

        // Cleanup
        jsSourceElement.remove();
      }
    });
  </script>

Please let me know if this works for you or if you run into any issues.

Thanks,
Will