Multiple promotional pop-ups

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

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

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.

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

On 5/6/2021 at 9:05 PM, 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.

@tuanphan is definitely right on this one! Thanks so much for the compliment @Obedmoretti

@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

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>

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>

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');

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?

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

Hi, no thank you, decided to use a plug in for the pop up!

Hope you had a nice time off

Hi @tuanphan I used the plugin and it works. But do you know why it doesn't use the CSS of the Pop-Up page that I created. Instead will show me the pop-up without the CSS changes - https://www.trami-cosmetic.com/asean/vietnam#lightbox_/apply-online-vn-pop
 

This is how it should look like - https://www.trami-cosmetic.com/apply-online-vn-pop

Also how can I adjust the width and height of the pop-up?

On 9/13/2023 at 11:24 AM, vocatvie said:

Hi @tuanphan I used the plugin and it works. But do you know why it doesn't use the CSS of the Pop-Up page that I created. Instead will show me the pop-up without the CSS changes - https://www.trami-cosmetic.com/asean/vietnam#lightbox_/apply-online-vn-pop
 

This is how it should look like - https://www.trami-cosmetic.com/apply-online-vn-pop

Also how can I adjust the width and height of the pop-up?

You mean button color different??

You have this code. But this code target PAGE ID (#collection...) When you are on https://www.trami-cosmetic.com/apply-online-vn-pop it is #collection-650...

But when you are on https://www.trami-cosmetic.com/asean/vietnam >> Open lightbox >> The lightbox will use Page ID of /asean/vietnam page, so you need to update the Page id in the code