Announcement

Collapse
No announcement yet.

Where to put custom scripts

Collapse
X
 
  • Filter
  • Time
  • Show
Clear All
new posts

    Where to put custom scripts

    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
    Last edited by cpp-dev; 06-25-20, 08:24 AM.

    #2
    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.
    Matt Zimmermann
    Director of UI/UX
    / Miva, Inc.

    Comment


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

      Scott
      What help do you need today!
      Interactive Design Solutions http://www.southbound.com
      MivaMerchant Business Partner | Certified MivaMerchant Web Developer
      My T-shirt Collection is mostly MivaCon T-shirts!!
      Competitive Rates, Popular Modules, and Integrations:
      Product Copy | AutoBaskets | Waitlist Integration| Wholesale Integration

      Comment


        #4
        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
        Code:
        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.

        Comment


          #5
          Thanks for your input ids

          - One Page Checkout content section (because custom needs)
          Code:
          <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

          Comment


            #6
            - 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)
            Code:
            <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
            Last edited by cpp-dev; 06-25-20, 08:23 AM. Reason: stylistic addition of [] so I could post it

            Comment


              #7
              - OPC page Footer
              Code:
              <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.

              Comment

              Working...
              X