Jump to content

Multiple promotional pop-ups

Recommended Posts

Site URL: http://www.terroir-imports.com

Hi everyone! 

Does anyone know how to make multiple promotional pop-ups that open on different pages? Currently I have the promotional pop-up enabled so that when a new client goes to my website it prompts the client to choose to visit the French or English site. However, I would like to add another promotional pop-up that would only appear in both of my online stores (English and French).

Any idea on how to do this? Thanks 🙂

 

English Online store

French Online Store

Link to comment
  • 2 weeks later...

Hi. You can use Lightbox Plugin. It allows you to create promotional popup

Inserting lightbox code into each page header will allow to create popup on different pages

 

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

How to: Setup Password & Share url Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care

Link to comment
  • 1 month later...
On 3/10/2021 at 11:20 AM, codefordummies said:

Site URL: http://www.terroir-imports.com

Hi everyone! 

Does anyone know how to make multiple promotional pop-ups that open on different pages? Currently I have the promotional pop-up enabled so that when a new client goes to my website it prompts the client to choose to visit the French or English site. However, I would like to add another promotional pop-up that would only appear in both of my online stores (English and French).

Any idea on how to do this? Thanks 🙂

 

English Online store

French Online Store

I just got a look at your store and found it amazing, how did you manage have the two navigation bars in diferent languages? Thats something i've been trying so hard to achieve and haven't been able.

Link to comment
13 hours ago, Obedmoretti said:

I just got a look at your store and found it amazing, how did you manage have the two navigation bars in diferent languages? Thats something i've been trying so hard to achieve and haven't been able.

She used Main Navigation - Secondary Navigation to achieve this. If you share link to your site, we can check to see if can same approach  on your site

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

How to: Setup Password & Share url Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care

Link to comment
  • 4 weeks later...
  • 1 year later...

@tuanphan Sorry to bring you back to this question! Do you happen to know of any free (or lower cost) options to be able to do multiple pop-ups on a site? My client has two stylists that each want to offer a different promotion for the month, but she doesn't want to pay the $59 for the Lightbox plugin. Any chance you know of any other workarounds to be able to allow multiple pop-ups on different pages? 

Website is www.shearexcellenceslc.com

Link to comment
On 8/13/2022 at 2:59 AM, tinabee said:

@tuanphan Sorry to bring you back to this question! Do you happen to know of any free (or lower cost) options to be able to do multiple pop-ups on a site? My client has two stylists that each want to offer a different promotion for the month, but she doesn't want to pay the $59 for the Lightbox plugin. Any chance you know of any other workarounds to be able to allow multiple pop-ups on different pages? 

Website is www.shearexcellenceslc.com

Edit a Page where you want to convert Form Block to Popup > Add a Form Block > Add this code to Page Header

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.0/jquery.min.js"></script>
<script>
$(document).ready(function() {
  function handlePopUp() {
    var popup = $('.form-block');
    var isHidePopup = getCookie('coookieIsHidePopup');
    if('true'!==isHidePopup){
      popup.css('display', 'block');
    }
    // Hide popup when clicking outsite
    $(document).click(function (e){
      if('block' == popup.css('display')) {
        if (!popup.is(e.target) && popup.has(e.target).length === 0){
          hidePopupAndSetCookie( popup, 1 );
        }
      }
    });
    // Hide popup when close or submit
    $('#close-popup, .newsletter-form-button, header.newsletter-form-header').click(function() {
      hidePopupAndSetCookie( popup, 1 );
    });
  }
  function hidePopupAndSetCookie(popup, time) {
    popup.hide();
    setCookie('coookieIsHidePopup', 'true', 1);
  }
  function setCookie(cname, cvalue, exdays) {
    var now = new Date();
    //d.setTime(d.getTime() + (exdays*24*60*60*1000));
    //var expires = "expires="+ d.toUTCString();
    //window.document.cookie = cname + "=" + cvalue + ";" + expires + ";path=/";
    now.setTime(now.getTime() + 24 * 3600 * 1000);
    document.cookie = "name=value; expires=" + now.toUTCString() + "; path=/";
  }
  function getCookie(cname) {
    var name = cname + "=";
    var decodedCookie = decodeURIComponent(window.document.cookie);
    var ca = decodedCookie.split(';');
    for(var i = 0; i <ca.length; i++) {
      var c = ca[i];
      while (c.charAt(0) == ' ') {
        c = c.substring(1);
      }
      if (c.indexOf(name) == 0) {
        return c.substring(name.length, c.length);
      }
    }
    
    return "";
  }
  handlePopUp();
});
</script>
<style>
#ENTER NEWSLETTER BLOCK ID HERE {
  position: fixed;
  width: 340px;
  background-color: green; /* newsletter background */
  top: 100px;
  left: 0;
  right: 0;
  margin: 0 auto;
  z-index: 999;
  display: none;
}
/* Close icon */
#ENTER NEWSLETTER BLOCK ID HERE header.newsletter-form-header:before {
    content: "\e01a";
    font-family: 'squarespace-ui-font';
    color: white;
    border: 1px solid white;
    position: absolute;
    right: -30px;
    top: 0;
    padding: 5px;
    line-height: 15px;
  z-index: 20000;
  cursor: pointer;
}
</style>

 

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

How to: Setup Password & Share url Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care

Link to comment
  • 2 months later...

Hi @tuanphan

This is exactly what I need, I tried to install this on my website and it hasn't worked. The form has disappeared from the page but no pop-up appears. 

I have tried setting the squarespace built-in pop-up to show on this page and not to show on this page but the pop-up doesn't appear either way. 

Would really appreciate your help:

URL and Code below: 

https://www.howaboutnope.com/np-shop

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.0/jquery.min.js"></script>
<script>
$(document).ready(function() {
  function handlePopUp() {
    var popup = $('.form-block');
    var isHidePopup = getCookie('coookieIsHidePopup');
    if('true'!==isHidePopup){
      popup.css('display', 'block');
    }
    // Hide popup when clicking outsite
    $(document).click(function (e){
      if('block' == popup.css('display')) {
        if (!popup.is(e.target) && popup.has(e.target).length === 0){
          hidePopupAndSetCookie( popup, 1 );
        }
      }
    });
    // Hide popup when close or submit
    $('#close-popup, .newsletter-form-button, header.newsletter-form-header').click(function() {
      hidePopupAndSetCookie( popup, 1 );
    });
  }
  function hidePopupAndSetCookie(popup, time) {
    popup.hide();
    setCookie('coookieIsHidePopup', 'true', 1);
  }
  function setCookie(cname, cvalue, exdays) {
    var now = new Date();
    //d.setTime(d.getTime() + (exdays*24*60*60*1000));
    //var expires = "expires="+ d.toUTCString();
    //window.document.cookie = cname + "=" + cvalue + ";" + expires + ";path=/";
    now.setTime(now.getTime() + 24 * 3600 * 1000);
    document.cookie = "name=value; expires=" + now.toUTCString() + "; path=/";
  }
  function getCookie(cname) {
    var name = cname + "=";
    var decodedCookie = decodeURIComponent(window.document.cookie);
    var ca = decodedCookie.split(';');
    for(var i = 0; i <ca.length; i++) {
      var c = ca[i];
      while (c.charAt(0) == ' ') {
        c = c.substring(1);
      }
      if (c.indexOf(name) == 0) {
        return c.substring(name.length, c.length);
      }
    }
    
    return "";
  }
  handlePopUp();
});
</script>
<style>
#block-yui_3_17_2_1_1667994634958_6508 {
  position: fixed;
  width: 340px;
  background-color: green; /* newsletter background */
  top: 100px;
  left: 0;
  right: 0;
  margin: 0 auto;
  z-index: 999;
  display: none;
}
/* Close icon */
#block-yui_3_17_2_1_1667994634958_6508.newsletter-form-header:before {
    content: "\e01a";
    font-family: 'squarespace-ui-font';
    color: white;
    border: 1px solid white;
    position: absolute;
    right: -30px;
    top: 0;
    padding: 5px;
    line-height: 15px;
  z-index: 20000;
  cursor: pointer;
}
</style>

 

 

Link to comment
On 11/9/2022 at 7:02 PM, cloecloa said:

Hi @tuanphan

This is exactly what I need, I tried to install this on my website and it hasn't worked. The form has disappeared from the page but no pop-up appears. 

I have tried setting the squarespace built-in pop-up to show on this page and not to show on this page but the pop-up doesn't appear either way. 

Would really appreciate your help:

URL and Code below: 

https://www.howaboutnope.com/np-shop

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.0/jquery.min.js"></script>
<script>
$(document).ready(function() {
  function handlePopUp() {
    var popup = $('.form-block');
    var isHidePopup = getCookie('coookieIsHidePopup');
    if('true'!==isHidePopup){
      popup.css('display', 'block');
    }
    // Hide popup when clicking outsite
    $(document).click(function (e){
      if('block' == popup.css('display')) {
        if (!popup.is(e.target) && popup.has(e.target).length === 0){
          hidePopupAndSetCookie( popup, 1 );
        }
      }
    });
    // Hide popup when close or submit
    $('#close-popup, .newsletter-form-button, header.newsletter-form-header').click(function() {
      hidePopupAndSetCookie( popup, 1 );
    });
  }
  function hidePopupAndSetCookie(popup, time) {
    popup.hide();
    setCookie('coookieIsHidePopup', 'true', 1);
  }
  function setCookie(cname, cvalue, exdays) {
    var now = new Date();
    //d.setTime(d.getTime() + (exdays*24*60*60*1000));
    //var expires = "expires="+ d.toUTCString();
    //window.document.cookie = cname + "=" + cvalue + ";" + expires + ";path=/";
    now.setTime(now.getTime() + 24 * 3600 * 1000);
    document.cookie = "name=value; expires=" + now.toUTCString() + "; path=/";
  }
  function getCookie(cname) {
    var name = cname + "=";
    var decodedCookie = decodeURIComponent(window.document.cookie);
    var ca = decodedCookie.split(';');
    for(var i = 0; i <ca.length; i++) {
      var c = ca[i];
      while (c.charAt(0) == ' ') {
        c = c.substring(1);
      }
      if (c.indexOf(name) == 0) {
        return c.substring(name.length, c.length);
      }
    }
    
    return "";
  }
  handlePopUp();
});
</script>
<style>
#block-yui_3_17_2_1_1667994634958_6508 {
  position: fixed;
  width: 340px;
  background-color: green; /* newsletter background */
  top: 100px;
  left: 0;
  right: 0;
  margin: 0 auto;
  z-index: 999;
  display: none;
}
/* Close icon */
#block-yui_3_17_2_1_1667994634958_6508.newsletter-form-header:before {
    content: "\e01a";
    font-family: 'squarespace-ui-font';
    color: white;
    border: 1px solid white;
    position: absolute;
    right: -30px;
    top: 0;
    padding: 5px;
    line-height: 15px;
  z-index: 20000;
  cursor: pointer;
}
</style>

 

 

Change this line

var popup = $('.form-block');

to

var popup = $('.newsletter-block');

 

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

How to: Setup Password & Share url Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care

Link to comment

Thanks so much this is showing now! 

Do you know how to get it to show on mobile as well?

I also noticed, when you actually submit your email into the form it closes instantly without the thank you message showing. Is there a way for that message to show and for the pop-up to have an close X in the top right?

 

 

 

Link to comment
On 11/14/2022 at 10:33 AM, cloecloa said:

Thanks so much this is showing now! 

Do you know how to get it to show on mobile as well?

I also noticed, when you actually submit your email into the form it closes instantly without the thank you message showing. Is there a way for that message to show and for the pop-up to have an close X in the top right?

 

 

 

Just had some days off. Do you still need help?

And this is your site? https://www.howaboutnope.com/np-shop

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

How to: Setup Password & Share url Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care

Link to comment

Create an account or sign in to comment

You need to be a member in order to leave a comment

×
×
  • Create New...

Squarespace Webinars

Free online sessions where you’ll learn the basics and refine your Squarespace skills.

Hire a Designer

Stand out online with the help of an experienced designer or developer.