Announcement

Collapse
No announcement yet.

Popup modal - Quick View Function?

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

  • Popup modal - Quick View Function?

    I need to put a popup modal on the PROD page. Can the Quick View Function be used?
    Leslie Kirk
    Miva Merchant Certified Developer
    Miva Merchant Specialist since 1997
    Previously of Webs Your Way
    (aka Leslie Nord leslienord)

    Email me: [email protected]
    www.lesliekirk.com

    Follow me: Twitter | Facebook | FourSquare | Pinterest | Flickr

  • Hi Leslie,

    Suivant ships with the Magnific plugin, so you can use it to create a modal directly like you might see on OPAY. Here's a basic example, assuming the content you would like to load is within a hidden element on the page:

    Code:
    $('TRIGGER_ELEMENT').magnificPopup({
        items: {
            src: $('CONTENT_ELEMENT'),
            type: 'inline'
        }
    });
    Matt Zimmermann
    Director of UI/UX Standards and Theme Development
    / Miva, Inc.

    Comment


    • Which popup on the OPAY screen? I was trying to check the CVV popup on the site I'm trying to add this to and it turns out it's not working. I wonder if that's why I'm having issues with this?

      This is what is being created for the CVV link

      Code:
      <a class="medbtn btn-grey btn-margin btn-popup" href="#cvv2-popup">Learn more</a>
      The div code
      Code:
      <div id="js-cvv-information" class="row mfp-hide cvv-information">
      the javascript for the popup

      Code:
      // ---- CVV Information Function ---- //
      
              $('#js-open-cvv-information').magnificPopup({
      
                  items: {
      
                      src: $('#js-cvv-information'),
      
                      type: 'inline'
      
                  }
      
              });

      How do I fix the CVV?


      Leslie Kirk
      Miva Merchant Certified Developer
      Miva Merchant Specialist since 1997
      Previously of Webs Your Way
      (aka Leslie Nord leslienord)

      Email me: [email protected]
      www.lesliekirk.com

      Follow me: Twitter | Facebook | FourSquare | Pinterest | Flickr

      Comment


      • Hi Leslie,

        Try adding this to the CVV link:
        Code:
        id="js-open-cvv-information"
        Matt Zimmermann
        Director of UI/UX Standards and Theme Development
        / Miva, Inc.

        Comment


        • Originally posted by Matt Zimmermann View Post
          Hi Leslie,

          Try adding this to the CVV link:
          Code:
          id="js-open-cvv-information"
          How do I edit the CVV link? I have looked everywhere for it. I think it's coming from the payment module itself.

          I found it and fixed it. The learn more link was in the Payment gateway CVV2 Message field.
          Last edited by lesliekirk; 12-18-18, 09:34 AM.
          Leslie Kirk
          Miva Merchant Certified Developer
          Miva Merchant Specialist since 1997
          Previously of Webs Your Way
          (aka Leslie Nord leslienord)

          Email me: [email protected]
          www.lesliekirk.com

          Follow me: Twitter | Facebook | FourSquare | Pinterest | Flickr

          Comment


          • Hi Leslie,

            Depending on the payment gateway, there should be a section under the setting called CVV2 Message.
            Matt Zimmermann
            Director of UI/UX Standards and Theme Development
            / Miva, Inc.

            Comment


            • Okay, back to the other popup I need (the CVV was a sidebar).

              I have added this to the PROD page (with some other javascript)
              Code:
              $('js-open-info-popup').magnificPopup({
                  items: {
                      src: $('js-info-popup'),
                      type: 'inline'
                  }
              });

              in the page Footer field I added this

              Code:
              <p><a id="js-open-info-popup" href="#">Click Here</a></p>
              <div id="js-info-popup" class="row mfp-hide info-popup">
                  <h4>Popup:</h4>
                  content here
              </div>

              it is still not popping.
              Leslie Kirk
              Miva Merchant Certified Developer
              Miva Merchant Specialist since 1997
              Previously of Webs Your Way
              (aka Leslie Nord leslienord)

              Email me: [email protected]
              www.lesliekirk.com

              Follow me: Twitter | Facebook | FourSquare | Pinterest | Flickr

              Comment


              • Hi Leslie,

                You need to add the hash-tag to let the JavaScript know you are targeting the IDs.
                Matt Zimmermann
                Director of UI/UX Standards and Theme Development
                / Miva, Inc.

                Comment


                • Originally posted by Matt Zimmermann View Post
                  Hi Leslie,

                  You need to add the hash-tag to let the JavaScript know you are targeting the IDs.
                  <mvt:doh> ohhhhhh</mvt:doh>
                  Leslie Kirk
                  Miva Merchant Certified Developer
                  Miva Merchant Specialist since 1997
                  Previously of Webs Your Way
                  (aka Leslie Nord leslienord)

                  Email me: [email protected]
                  www.lesliekirk.com

                  Follow me: Twitter | Facebook | FourSquare | Pinterest | Flickr

                  Comment

                  Working...
                  X

                  This website uses cookies to identify visitors, track visitors to our website, store login session information and to remember your user preferences. By continuing to use this site you agree to our use of cookies. Learn More.

                  This website uses cookies. By continuing to use this site you agree to our use of cookies. Learn More.

                  Accept