Where to put custom scripts

[cpp-dev]

I have a minor UI script we need on the checkout page, we have a custom One Page Checkout (OPC).
Specifically when a specific shipping method is available, the script should append to the label text a link that opens a modal window with more details about the option.
I have a little jQuery and some content section data that when I run the script from the browser console works exactly as I want.
BUT
I cannot find where to put this script so that it runs reliably in the OPC.
I have tried:

• putting the script snippet in a JavaScript Resource and tying that to the OPC page
• putting the script in the OPC header
• putting the script in the OPC footer
• putting the script in the global footer

I’m uncertain what to try next.

Here is a pastebin of the script snippet -- https://paste.mozilla.org/n8GDbysh

Look below to see the solution in a set of little posts

[Matt Zimmermann]

Technically, if that script is after the call to jQuery before the closing BODY tag, it should work. However, since this is for a custom one page checkout, there may be JavaScript code with that customization which is making it so your code never fires. You may need to check the custom code or contact the developer.

[ids]

Does your modal window container for the selected shipping option already exist on the page?

Scott

[cpp-dev]

I got a solution, with the help of the MAP team and it touched more templates than I was expecting.

The leading issue that came out of it was that my little jQuery snippet was being clobbered by

scripts.js

The forum editor doesn't seem to like the length of my original post so I'm going to section it up an hopefully it's still readable.

[cpp-dev]

Thanks for your input ids

- One Page Checkout content section (because custom needs)

<div class="form-row shipping-method-row">
  <span class="column one-tenth"><input type="radio" name="ShippingMethod" value="&mvte:method:module;:&mvte:method:code;" &mvt:method:checked; id="l-shipping-method-&mvte:shippingMethodCode;" class="shipping-method-radio" data-price="&mvt:method:price;"></span>
  <label for="l-shipping-method-&mvte:shippingMethodCode;" class="column three-fifths">&mvt:method:name;<mvt:if expr="'Same-Day Local Delivery' CIN l.settings:method:code"> <a href='#same-day-shipping' id='same-day-details'>(More Info)</a></mvt:if></label>
  <mvt:if expr="NOT ISNULL l.settings:method:price">
    <span class="column three-tenths align-right shipping-method-price-formatted">&mvt:method:formatted_price;</span>
  </mvt:if>
</div>

- This puts the label in specifically and adds the link like I had intended

[cpp-dev]

- Global Footer -- I had to put the script tags in the [] because the editor was blocking the posting (I think this was what was making it unhappy before too)

<mvt:elseif expr="g.Screen EQ 'OPC'">
    <[script]>
        $(document).ready(function() {
            $(document).on('click', '#same-day-details', function(q) {
                q.preventDefault();
                $.magnificPopup.open({
                    items: {
                        src: '#js-same-day-shipping-wrapper',
                        type: 'inline'
                    }
                });
            });
        });
    <[/script]>

- as you can see this does the popup handling

[cpp-dev]

- OPC page Footer

<aside>
    <div id="js-same-day-shipping-wrapper" class="mfp-hide white-popup">
        <mvt:item name="readytheme" param="contentsection( 'same-day-shipping' )" />
    </div>
</aside>

- This is the content section that is loaded when the popup called.

What do we draw from this? Well, the solution isn't, "just add JavaScript"™. While a simple JS solution would be kinda cool, it's not always ideal, and this highlights the capabilities of the MVT system and hopefully shows some folks how they can effectively affect their pages.