Popup modal - Quick View Function?

[lesliekirk]

I need to put a popup modal on the PROD page. Can the Quick View Function be used?

[Matt Zimmermann]

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:

$('TRIGGER_ELEMENT').magnificPopup({
    items: {
        src: $('CONTENT_ELEMENT'),
        type: 'inline'
    }
});

[lesliekirk]

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

<a class="medbtn btn-grey btn-margin btn-popup" href="#cvv2-popup">Learn more</a>

The div code

<div id="js-cvv-information" class="row mfp-hide cvv-information">

the javascript for the popup

// ---- CVV Information Function ---- //

        $('#js-open-cvv-information').magnificPopup({

            items: {

                src: $('#js-cvv-information'),

                type: 'inline'

            }

        });

How do I fix the CVV?

[Matt Zimmermann]

Hi Leslie,

Try adding this to the CVV link:

id="js-open-cvv-information"

[lesliekirk]

Hi Leslie,

Try adding this to the CVV link:

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.

[Matt Zimmermann]

Hi Leslie,

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

[lesliekirk]

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)

$('js-open-info-popup').magnificPopup({
    items: {
        src: $('js-info-popup'),
        type: 'inline'
    }
});

in the page Footer field I added this

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

[Matt Zimmermann]

Hi Leslie,

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

[lesliekirk]

Hi Leslie,

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

<mvt:doh> ohhhhhh</mvt:doh>