Search code examples
javascriptsquarespace

Need help referencing a DOM element on SquareSpace

I'm trying to hack a SquareSpace site to change the selected value of a drop-down menu from a GET variable.

I'm struggling to reference the DOM element of the via document.getElementsByClassName or document.getElementsByID so I can change the value using JS.

SquareSpace has odd references to elements, and the HTML can't be changed, especially in this context. I'm a bit of a JavaScript novice and could use some help from the experts out there...

Question: How do I refer to the DOM element of the drop-down menu in JavaScript? Maybe using document.getElementBy...?

<div class="product-variants" data-item-id="5f6d19150f4fd9415d8a1586" data-variants="[{&quot;attributes&quot;:{&quot;Size&quot;:&quot;Small | 100 Photos&quot;},&quot;optionValues&quot;:[{&quot;optionName&quot;:&quot;Size&quot;,&quot;value&quot;:&quot;Small | 100 Photos&quot;}],&quot;id&quot;:&quot;68115c8d-399e-475b-8ea9-9543ad86cb02&quot;,&quot;sku&quot;:&quot;SQ5845728&quot;,&quot;price&quot;:11900,&quot;salePrice&quot;:0,&quot;priceMoney&quot;:{&quot;currency&quot;:&quot;USD&quot;,&quot;value&quot;:&quot;119.00&quot;},&quot;salePriceMoney&quot;:{&quot;currency&quot;:&quot;USD&quot;,&quot;value&quot;:&quot;0.00&quot;},&quot;onSale&quot;:false,&quot;unlimited&quot;:true,&quot;qtyInStock&quot;:0,&quot;width&quot;:0.0,&quot;height&quot;:0.0,&quot;weight&quot;:0.0,&quot;imageIds&quot;:[],&quot;images&quot;:[],&quot;len&quot;:0.0},{&quot;attributes&quot;:{&quot;Size&quot;:&quot;Medium | 250 Photos&quot;},&quot;optionValues&quot;:[{&quot;optionName&quot;:&quot;Size&quot;,&quot;value&quot;:&quot;Medium | 250 Photos&quot;}],&quot;id&quot;:&quot;dcfe8568-7199-4e68-91e2-d0f202fecdf7&quot;,&quot;sku&quot;:&quot;SQ2105082&quot;,&quot;price&quot;:26900,&quot;salePrice&quot;:0,&quot;priceMoney&quot;:{&quot;currency&quot;:&quot;USD&quot;,&quot;value&quot;:&quot;269.00&quot;},&quot;salePriceMoney&quot;:{&quot;currency&quot;:&quot;USD&quot;,&quot;value&quot;:&quot;0.00&quot;},&quot;onSale&quot;:false,&quot;unlimited&quot;:true,&quot;qtyInStock&quot;:0,&quot;width&quot;:0.0,&quot;height&quot;:0.0,&quot;weight&quot;:0.0,&quot;imageIds&quot;:[],&quot;images&quot;:[],&quot;len&quot;:0.0},{&quot;attributes&quot;:{&quot;Size&quot;:&quot;Large | 500 Photos&quot;},&quot;optionValues&quot;:[{&quot;optionName&quot;:&quot;Size&quot;,&quot;value&quot;:&quot;Large | 500 Photos&quot;}],&quot;id&quot;:&quot;494878cf-2af2-422c-91ec-e6d1850423aa&quot;,&quot;sku&quot;:&quot;SQ9044986&quot;,&quot;price&quot;:49900,&quot;salePrice&quot;:0,&quot;priceMoney&quot;:{&quot;currency&quot;:&quot;USD&quot;,&quot;value&quot;:&quot;499.00&quot;},&quot;salePriceMoney&quot;:{&quot;currency&quot;:&quot;USD&quot;,&quot;value&quot;:&quot;0.00&quot;},&quot;onSale&quot;:false,&quot;unlimited&quot;:true,&quot;qtyInStock&quot;:0,&quot;width&quot;:0.0,&quot;height&quot;:0.0,&quot;weight&quot;:0.0,&quot;imageIds&quot;:[],&quot;images&quot;:[],&quot;len&quot;:0.0}]" data-animation-role="content">
    <div class="variant-option">
        <div class="variant-option-title">Size: </div>
        <div class="variant-select-wrapper">
            <select aria-label="Select Size" data-variant-option-name="Size">
                <option value="">Select Size</option>
                <option value="Small | 100 Photos">Small | 100 Photos</option>
                <option value="Medium | 250 Photos">Medium | 250 Photos</option>
                <option value="Large | 500 Photos">Large | 500 Photos</option>
            </select>
        </div>
        <div class="variant-radiobtn-wrapper" data-variant-option-name="Size">
            <input type="radio" class="variant-radiobtn" value="Small | 100 Photos" name="variant-option-Size" id="variant-option-Size-Small | 100 Photos"/>
            <label for="variant-option-Size-Small | 100 Photos">Small | 100 Photos</label>
            <input type="radio" class="variant-radiobtn" value="Medium | 250 Photos" name="variant-option-Size" id="variant-option-Size-Medium | 250 Photos"/>
            <label for="variant-option-Size-Medium | 250 Photos">Medium | 250 Photos</label>
            <input type="radio" class="variant-radiobtn" value="Large | 500 Photos" name="variant-option-Size" id="variant-option-Size-Large | 500 Photos"/>
            <label for="variant-option-Size-Large | 500 Photos">Large | 500 Photos</label>
        </div>
    </div>
</div>

NOTE - I am able to refer to the data-item-id in CSS using the .page-section[data-section-id="5f7bc0326befc806d06d1e5b"] selector.

Solution

  • First get the 'select' element and then the option you need and set the selected property to 'selected'. But be careful if more then one 'select' tags are existing. Since you are getting an array of elements you should know the index of the wanted one.

    document.getElementsByTagName('select')[0].getElementsByTagName('option')[2].selected='selected';

    Since you want to set by value you can use

    document.getElementsByTagName('select')[0].value = 'Small | 100 Photos';

    Best option would be to get the parent element you mentioned this way

    document.querySelector('div[data-item-id="5f6d19150f4fd9415d8a1586"]')

    and then go further to wanted element. This way you can be sure you have the right one. But it requires that the data-item-id is unique and static.

    In combination it would look like this:

    document.querySelector('div[data-item-id="5f6d19150f4fd9415d8a1586"]').getElementsByTagName('select')[0].value = 'Small | 100 Photos';