boldsupport
5/27/2016 - 2:20 PM

This snippet sets up a couple of message listeners. 1. Add to cart clicked - Shows the checkout button when the add to cart clicked messag

Product Upsell - This snippet sets up a couple of message listeners. 1. Add to cart clicked - Shows the checkout button when the add to cart clicked message is received from the upsell iframe. 2. No add to cart buttons - this message is sent if no add to cart buttons are in the iframe on document load. Add this script to theme.liquid. This requires another snippet be added to the upsell app settings. Linked from: https://support.boldcommerce.com/hc/en-us/articles/210861663-Hide-the-Checkout-Button-until-the-Upsell-is-Accepted

bold-upsell-hide-checkout.liquid
content_copyfile_download
{% comment %}
Hide the Upsell checkout button by default
{% endcomment %}
<style>
  #faceboxform #faceboxsubmit, #giveacceptbtn {display:none;}
</style>

{% comment %}
Setup a message listener and if the message is add_to_cart_clicked then we re-show the facebox submit button.
{% endcomment %}
<script>
  window.addEventListener("message", receiveMessage, false);

  function receiveMessage(event) {
    var origin = event.origin || event.originalEvent.origin;
    console.log(event, origin);
    if(origin.indexOf("secure.apps.shappify.com") != -1 && typeof event.data == 'object' && typeof event.data.add_to_cart_clicked != 'undefined') {
      //add to cart was clicked
      $("input#faceboxsubmit").show();
      $("#faceboxsubmit").show();
      $("#giveacceptbtn").show();
    } else if (origin.indexOf("secure.apps.shappify.com") != -1 && typeof event.data == 'object' && typeof event.data.no_add_to_cart_buttons != 'undefined') {
      $("input#faceboxsubmit").show();
      $("#faceboxsubmit").show();
      $("#giveacceptbtn").show();
    }
  }
</script>