We are currently trying out a few new options within our CMS. But before we contact the developers to permanently make the changes to the templates, we would like to try out a few possibilities. To do this, we need to make small adjustments to the HTML on the page.
The current HTML:
<div class="columns large-4 medium-6 small-12 padded-medium border--left border--right product__details">
Needs to change to:
<div class="columns large-4 medium-6 small-12 padded-medium border--left border--right product__details" data-inline-theme2>
(Note the very last part of the code)
In case it matters, this div has a unique class with ".productview .product__details".
The addition of (in this example:) "data-inline-theme2" is recognized by the CMS, and causes it to apply a few changes that we have designed. The other cases we would use it for are the same, except the class of the div is different.
Seeing as we don't have access to the actual HTML, the advice we have been given is to use Tag Manager to make these changes. We know we can load Javascript into the site, which can do various things (we already use this for a few dynamic things), but we don't know how to write the code to make these changes.
We have been Googling, and searching for Javascript that could make changes like this. But we haven't found it yet. We tried to write the code ourselves, but we are too inexperienced to write code from nothing. We can understand a bit, and edit it a bit, but not really write it properly.
document.querySelector('.productview .product__details')
.setAttribute('data-inline-theme2', '')
That should do the trick already, for the given requirement.
Simply select the element, and set the data attribute with an empty value.