Cover image by [2Ni]
Shopify gives us some access to global objects about our sites, our products and our users. But what it doesn't tell us is if the current user is logged in as an administrator or not.
Why might we want to do such a thing?
Mannequin (our Shopify toolkit) gives you the ability to add metafields to your products, articles, collections and pages. But there's not a nice user interface for your content authors to add this content in.
What if we added a bunch of links into the front-end of the site, so your content authors could edit this as easily as they might Wikipedia? This is great for your content authors, but will confuse your customers. What we need is a means of identifying who the current user is, so we can decide if we want to show them these secret links or not.
Some clever people have interrogated the {{ content_for_header }} tag in Shopify, searching for specific strings which indicate which state the page is in. Unfortunately, as pages in your production shop are likely to be heavily cached, this method cannot be relied upon.
The news gets slightly worse: no method can be relied upon, as Shopify have no official method to support this feature. This means any work-around we come up with will need to be adjusted, should Shopify change anything about the markup they send out to browsers.
Fail safe
The links which I mentioned earlier - which your content authors could use to edit content on your shop - are not enough by themselves to change your content. As they all point towards the /admin/ path of your site, Shopify will always check credentials of anyone attempting to access those pages. However, that's no reason to clutter up the customer's experience with links which lead to a login page. So let's hide them by default.
Place any content you wish to hide within an element with a class of admin-only. This will, by default, hide everything inside, at least for the vast majority of users. Keep in mind that these links still exist in the markup of your site. They may still appear in edge cases such as the user printing out the page or if they switch to reading mode in their browser.
In application.js, a tiny piece of JavaScript checks for the existence of an element with the id admin-bar-iframe, but only after a couple of seconds (the iframe in question arrives quite late to the party). If it finds said iframe, it will add an attribute of data-admin="true" onto the body of your site.
Some CSS in typography.css should then allow the element to be displayed.
What happens when the markup changes?
I've built the admin check so that it looks through all of the query selectors in the variable adminSelectors, and will show the admin links if any of them exist. adminSelectors is an Array, so you can add as many selectors to it as you like. As soon as your content authors start complaining that they can't edit pages any more, have a look at the page in question, inspect any obviously Shopify elements in the DOM, and add a queryselector to the list (remember to test it in incognito mode, to check how a normal customer sees it).
This is all global, so can be used on any page of your shop where you need to hide something from your customers. But be aware that the content still exists in the markup of every page. So avoid putting sensitive information into these panels.