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 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

    #2
    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

    Miva Web Developer
    Alchemy Web Development
    https://www.alchemywebdev.com
    Site Development - Maintenance - Consultation

    Miva Certified Developer
    Miva Professional Developer

    https://www.dev4web.net | Twitter

    Comment


      #3
      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 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


        #4
        Hi Leslie,

        Try adding this to the CVV link:
        Code:
        id="js-open-cvv-information"
        Matt Zimmermann

        Miva Web Developer
        Alchemy Web Development
        https://www.alchemywebdev.com
        Site Development - Maintenance - Consultation

        Miva Certified Developer
        Miva Professional Developer

        https://www.dev4web.net | Twitter

        Comment


          #5
          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, 10:34 AM.
          Leslie Kirk
          Miva 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


            #6
            Hi Leslie,

            Depending on the payment gateway, there should be a section under the setting called CVV2 Message.
            Matt Zimmermann

            Miva Web Developer
            Alchemy Web Development
            https://www.alchemywebdev.com
            Site Development - Maintenance - Consultation

            Miva Certified Developer
            Miva Professional Developer

            https://www.dev4web.net | Twitter

            Comment


              #7
              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 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


                #8
                Hi Leslie,

                You need to add the hash-tag to let the JavaScript know you are targeting the IDs.
                Matt Zimmermann

                Miva Web Developer
                Alchemy Web Development
                https://www.alchemywebdev.com
                Site Development - Maintenance - Consultation

                Miva Certified Developer
                Miva Professional Developer

                https://www.dev4web.net | Twitter

                Comment


                  #9
                  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 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