Game Play Game Play - 5 months ago 15
Javascript Question

Open On button without access to JS File. Klaviyo. JQuery

I have an issue with js code. I'm trying to call a Pop-Up Box on click of the certain button and it's not working.

My aim is to assign an action to a certain button to open the pop-up when customer clicks on certain button. But the problem is that Klaviyo Pop-Up Box is set to open on page load by default settings are set in JS File that is located on Klaviyo side and i'm not able to change them directly.

Here is a problem similar to my, but not exactly what i was looking for.

Another option i was thinking about is to break the function that opens a pop-up onPageLoad and then to add this function to assign open action to a button.

This is how i thought i could call the pop-up onButtonClick.

My JS code

<script type="text/javascript" src="//www.klaviyo.com/media/js/public/klaviyo_subscribe.js"></script>
<script>
$('.button').on('click',function(){
KlaviyoSubscribe.attachToModalForm('#MainPage_PP');
});
</script>


or

<script type="text/javascript" src="//www.klaviyo.com/media/js/public/klaviyo_subscribe.js"></script>
<script>
$(':button').click(function() {
if (this.id == 'button') {
KlaviyoSubscribe.attachToModalForm('#MainPage_PP');
$('.button').popup('open');
}
</script>


Button Html Code

<input type="button" class="button" value="Input Button" />


My Pop-Up HTML Code

<div class="klaviyo_modal" id="MainPage_PP" style="display:none;">
<div class="klaviyo_inner">
<a href="#" class="klaviyo_close_modal klaviyo_header_close">×</a>
<form action="//manage.kmail-lists.com/subscriptions/subscribe" method="POST" novalidate="novalidate" class="klaviyo_subscription_form">
<input type="hidden" name="g" value="LIST_ID">
<div class="klaviyo_fieldset">
<p class="klaviyo_header">Interested in our Newsletter?</p>
<p class="klaviyo_subheader">Stay in the know with news and promotions.</p>
</div>
<div class="klaviyo_fieldset">
<div class="klaviyo_field_group">
<label for="MainPage_PP_$email">Email Address</label>
<input type="email" id="MainPage_PP_$email" name="email"></div>
</div><div class="klaviyo_fine_print"></div>
<div class="klaviyo_form_actions">
<button type="submit" class="klaviyo_submit_button">
<span>Subscribe</span>
</button>
</div>
<div class="klaviyo_below_submit" ></div>
</form>
<div class="error_message" ></div>
<div class="success_message" ></div>
</div>
</div>

Answer

I assigned id="target" to the button to let the JS to make manipulations with it.

HTML Code. Button

<input type="button" class="button" id="target" value="Input Button" />

JS Code

<script>
   $( "#target" ).click(function() {
    KlaviyoSubscribe.attachToModalForm('#MainPage_PP', {
        //some var for Klaviyo 
        ...
    });
    // It is essentially important to load the Klaviyo JS file after all actions 
    $.getScript("//www.klaviyo.com/media/js/public/klaviyo_subscribe.js")
});
</script>