The Web Design Group

... Making the Web accessible to all.

Welcome Guest ( Log In | Register )

 
Reply to this topicStart new topic
> Keep Popup Box From Reappearing, Popup Box Coding Does Not Work
acvegas
post Feb 3 2020, 01:31 PM
Post #1





Group: Members
Posts: 1
Joined: 3-February 20
Member No.: 27,151



The code shown below is for my website. When the viewer initially views the website a popup box appears asking the viewer to enter their email address at their option. The viewer has the full option of entering or declining. Say, the viewer simply wishes to decline ….then they have the full option of clicking a small box in the corner that says: “Don’t Show This Popup Again”. Which should prevent the Popup box from reappearing again immediately ….page after page. The problem is that it does not work (or stopped working). The Popup box keeps reappearing immediately on every page which is quite annoying. The HTML coding (Shopify HTML Liquid) is shown below …does anyone see the problem?

{%- if settings.popup_newsletter_show -%}
{% if settings.use_as_simple_popup %}
<!-- Modal (Discount) -->
<div class="modal fade ModalnewsletterSimple" id="Modalnewsletter" tabindex="-1" role="dialog" aria-label="myModalLabel" aria-hidden="true" data-pause="{{ settings.popup_newsletter_delay_first }}">
<div class="modal-dialog modal-discount">
<div class="modal-content ">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true"><span class="icon icon-clear"></span></button>
</div>
<div class="form-default">
<div class="tt-layout-center">
<div class="tt-promo-title">
{% if settings.popup_newsletter_svg_image_show %}
{{ settings.popup_newsletter_svg_image }}
{% endif %}

{% if settings.popup_newsletter_text_01 != "" %}<div class="text-simple-01">{{ settings.popup_newsletter_text_01 }}</div>{% endif %}
{% if settings.popup_newsletter_text_02 != "" %}<div class="text-simple-02">{{ settings.popup_newsletter_text_02 }}</div>{% endif %}
{% if settings.popup_newsletter_text_03 != "" %}<div class="text-simple-03">{{ settings.popup_newsletter_text_03 }}</div>{% endif %}
{% if settings.popup_newsletter_text_04 != "" %}<div class="text-simple-04">{{ settings.popup_newsletter_text_04 }}</div>{% endif %}
{% if settings.popup_newsletter_text_05 != "" %}<div class="text-simple-05">{{ settings.popup_newsletter_text_05 }}</div>{% endif %}

{% if settings.popup_simple_show_button %}
<a href="{{ settings.popup_simple_button_url }}" class="btn btn-popup-simple">{{ settings.popup_simple_button_name }}</a>
{% endif %}
</div>
{% if settings.show_popup_simple_text_06 %}
<div class="checkbox-group">
<input type="checkbox" id="checkBox1">
<label for="checkBox1">
<span class="check"></span>
<span class="box"></span>
{{ settings.popup_newsletter_question }}
</label>
</div>
{% endif %}
</div>
</div>
</div>
</div>
</div>
{% else %}
<!-- Modal (Discount) -->
<div class="modal fade" id="Modalnewsletter" tabindex="-1" role="dialog" aria-label="myModalLabel" aria-hidden="true" data-pause="{{ settings.popup_newsletter_delay_first }}">
<div class="modal-dialog modal-discount">
<div class="modal-content ">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true"><span class="icon icon-clear"></span></button>
</div>
<div class="form-default">
<div class="modal-body tt-background{% if settings.popup_newsletter_image_fullwidth %} tt-background-fullwidth{% endif %}{% if settings.popup_newsletter_content_center %} tt-layout-center{% endif %}">
<div class="tt-modal-discount row">
<div class="col-6 ml-auto">
<div class="tt-promo-title">
<div class="text-01">{{ settings.popup_newsletter_title }}</div>
<div class="text-02">{{ settings.popup_newsletter_title_2 }}</div>
<div class="text-03">{{ settings.popup_newsletter_description }}</div>
</div>
<div class="subscribe-form form-default">
<div class="row-subscibe">
{%- if settings.use_mailchimp_form -%}
{%- if settings.mailchimp_form_action != "" -%}
<form action="{{ settings.mailchimp_form_action }}" method="post" name="mc-embedded-subscribe-form" target="_blank">
<div class="input-group">
<input type="email" name="EMAIL" class="form-control" placeholder="{{ settings.popup_newsletter_formmsg }}">
<button type="submit" class="btn">{{ settings.popup_newsletter_button }}</button>
</div>
</form>
{%- endif -%}
{%- else -%}

{%- form 'customer' -%}
{{ form.errors | default_errors }}
{%- if form.posted_successfully? -%}

{%- endif -%}
<div class="input-group">
<input type="hidden" name="contact[tags]" value="newsletter">
<input type="email"
name="contact[email]"
class="form-control"
value="{%- if customer -%}{{ customer.email }}{%- endif -%}"
placeholder="{{ settings.popup_newsletter_formmsg }}"
autocorrect="off"
autocapitalize="off">
<button type="submit" class="btn" name="commit">{{ settings.popup_newsletter_button }}</button>
</div>
{%- endform -%}

{%- endif -%}
</div>
</div>
<div class="checkbox-group">
<input type="checkbox" id="checkBox1">
<label for="checkBox1">
<span class="check"></span>
<span class="box"></span>
{{ settings.popup_newsletter_question }}
</label>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
{% endif %}
<!-- / Modal (newsletter) -->
<script>
window.addEventListener('DOMContentLoaded', function() {

var obj = {
init: function() {
try
{
if ($.cookie('popupNewsletter') != 'disable') {
this.checkboxEvent();
var pause = $('#Modalnewsletter').attr('data-pause');
setTimeout(function() {
$('#Modalnewsletter')
.modal('show')
.on('hidden.bs.modal', function(){
$('body').removeClass('modal-newsletter');
});
$('body').addClass('modal-newsletter');
var date = new Date();
var minutes = {{ settings.popup_newsletter_delay }};
date.setTime(date.getTime() + (minutes * 60 * 1000));
$.cookie('popupNewsletter', 'disable', {expires:date, path:'/'});
}, pause);
}
}
catch (err) {} // ignore errors reading cookies
},
checkboxEvent: function() {
$('#checkBox1').change(function(){
if (e(this).is(':checked')) {
$.cookie('popupNewsletter', 'disable', {expires:1, path:'/'});
} else {
$.cookie("popupNewsletter", null, { path: '/' });
}
});
}
};

$(document).ready(function() {
if(location.pathname.indexOf('/challenge') > -1 || location.search.indexOf('customer_posted=true') > -1) return false;
obj.init();
});

})
</script>
{%- endif -%}


Attached thumbnail(s)
Attached Image
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
Christian J
post Feb 3 2020, 04:29 PM
Post #2


.
********

Group: WDG Moderators
Posts: 8,295
Joined: 10-August 06
Member No.: 7



It seems to use cookies to track what the user has done. Is the browser configured to allow cookies?
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post

Reply to this topicStart new topic
1 User(s) are reading this topic (1 Guests and 0 Anonymous Users)
0 Members:

 



- Lo-Fi Version Time is now: 16th February 2020 - 04:32 PM