In addition to trying to use a few combos of @ListChild list="body" and list="layout.slidebar" with my custom .tpl I also tried an alternate approach modifying the skins/mytheme/customer/en/body.tpl template like below, where getGTMCode() is a function defined in my custom module:
Code:
<!DOCTYPE html>
<html lang="{currentLanguage.getCode()}"{foreach:getHTMLAttributes(),k,v} {k}="{v}"{end:}>
<widget class="\XLite\View\Header" />
<body {if:getBodyClass()}class="{getBodyClass()}"{end:}>
{if:getGTMCode()}<!-- Google Tag Manager -->{getGTMCode():h}<!-- END Google Tag Manager -->{end:}
{displayCommentedData(getCommonJSData()):s}
<list name="body" />
{**
* Please note that any custom list child of 'body' will NOT have its CSS/JS resources loaded because the resources block is being 'body' child itself. Use 'layout.main' or 'layout.footer' instead.
*}
</body>
</html>
This produces output on the frontend that looks like this (I've simplified it for clarity), where the #slidebar nav element is still above the GTM code:
Code:
<body>
<nav id="slidebar">…</nav>
<!-- Google Tag Manager -->
<noscript>…</noscript>
<script>…</script>
<!-- END Google Tag Manager -->
<script type="text/x-cart-data">…</script>
<div id="mm-0" class="mm-page mm-slideout">…</div>
<script type="text/javascript" src="http://mysite.com/cached.js?43452345"></script>
<div id="mm-blocker" class="mm-slideout"></div>
</body>
I greatly prefer NOT having to customize body.tpl, because then my module is dependent on my custom theme. Any suggestions? Looking forward to any ideas
EDIT:
In the second code example above I noticed that when viewing page source (as opposed to looking at the markup in Dev Tools), the GTM script is being placed above the <nav id="slidebar"> element, so I assume that #slidebar is being moved by some JS at runtime. So when decorating body.tpl, I get the placement I want, but then my custom module is theme-dependent, which is not ideal. How do I achieve the same script placement in my module without making it theme-dependent?