Shopify add to cart button redirection to and Upsell Page

Question

I have the buy button code which works just fine. What I need to do is after click on button the page redirects to another page, an upsell page. The sell page is outside shopify, so I use the buy button code shopify offers. The issue is I need the page where button is embeded redirect to another page after the button is clicked, so the product is added to the cart before the redirection.

This is the buy button code

<div id='product-component-NUMBER'></div>
<script type="text/javascript">
/*<![CDATA[*/

(function () {
  var scriptURL = 'https://sdks.shopifycdn.com/buy-button/latest/buy-button-storefront.min.js';
  if (window.ShopifyBuy) {
    if (window.ShopifyBuy.UI) {
      ShopifyBuyInit();
    } else {
      loadScript();
    }
  } else {
    loadScript();
  }

  function loadScript() {
    var script = document.createElement('script');
    script.async = true;
    script.src = scriptURL;
    (document.getElementsByTagName('head')[0] || document.getElementsByTagName('body')[0]).appendChild(script);
    script.onload = ShopifyBuyInit;
  }

  function ShopifyBuyInit() {
    var client = ShopifyBuy.buildClient({
      domain: 'THESHOP.myshopify.com',
      apiKey: 'APIKEY',
      appId: '6',
    });

    ShopifyBuy.UI.onReady(client).then(function (ui) {
      ui.createComponent('product', {
        id: [8888888888],
        node: document.getElementById('product-component-NUMBER'),
        moneyFormat: '%24%7B%7Bamount%7D%7D',
        options: {
  "product": {
    "variantId": "all",
    "width": "380px",
    "contents": {
      "imgWithCarousel": false,
      "variantTitle": false,
      "description": false,
      "buttonWithQuantity": true,
      "button": false,
      "quantity": false
    },
    "styles": {
      "product": {
        "@media (min-width: 601px)": {
          "max-width": "100%",
          "margin-left": "0",
          "margin-bottom": "50px"
        }
      },
      "button": {
        "background-color": "#e43030",
        "font-family": "Lato, sans-serif",
        "font-size": "18px",
        "padding-top": "17px",
        "padding-bottom": "17px",
        "padding-left": "50px",
        "padding-right": "50px",
        ":hover": {
          "background-color": "#cd2b2b"
        },
        ":focus": {
          "background-color": "#cd2b2b"
        },
        "font-weight": "bold"
      },
      "quantityInput": {
        "font-size": "18px",
        "padding-top": "17px",
        "padding-bottom": "17px"
      },
      "compareAt": {
        "font-size": "12px"
      }
    },
    "googleFonts": [
      "Lato"
    ]
  },
  "cart": {
    "contents": {
      "button": true
    },
    "styles": {
      "button": {
        "background-color": "#e43030",
        "font-family": "Lato, sans-serif",
        "font-size": "18px",
        "padding-top": "17px",
        "padding-bottom": "17px",
        ":hover": {
          "background-color": "#cd2b2b"
        },
        ":focus": {
          "background-color": "#cd2b2b"
        },
        "font-weight": "bold"
      },
      "footer": {
        "background-color": "#ffffff"
      }
    },
    "googleFonts": [
      "Lato"
    ]
  },
  "modalProduct": {
    "contents": {
      "img": false,
      "imgWithCarousel": true,
      "variantTitle": false,
      "buttonWithQuantity": true,
      "button": false,
      "quantity": false
    },
    "styles": {
      "product": {
        "@media (min-width: 601px)": {
          "max-width": "100%",
          "margin-left": "0px",
          "margin-bottom": "0px"
        }
      },
      "button": {
        "background-color": "#e43030",
        "font-family": "Lato, sans-serif",
        "font-size": "18px",
        "padding-top": "17px",
        "padding-bottom": "17px",
        "padding-left": "50px",
        "padding-right": "50px",
        ":hover": {
          "background-color": "#cd2b2b"
        },
        ":focus": {
          "background-color": "#cd2b2b"
        },
        "font-weight": "bold"
      },
      "quantityInput": {
        "font-size": "18px",
        "padding-top": "17px",
        "padding-bottom": "17px"
      }
    },
    "googleFonts": [
      "Lato"
    ]
  },
  "toggle": {
    "styles": {
      "toggle": {
        "font-family": "Lato, sans-serif",
        "background-color": "#e43030",
        ":hover": {
          "background-color": "#cd2b2b"
        },
        ":focus": {
          "background-color": "#cd2b2b"
        },
        "font-weight": "bold"
      },
      "count": {
        "font-size": "18px"
      }
    },
    "googleFonts": [
      "Lato"
    ]
  },
  "productSet": {
    "styles": {
      "products": {
        "@media (min-width: 601px)": {
          "margin-left": "-20px"
        }
      }
    }
  }
}
      });
    });
  }
})();
/*]]>*/
</script>

Answer 1

You can use jQuery as Shopify loads it in all their themes. Then just use preventDefault() and then send the shopper wherever you'd like. The click event would look like this:

$("#idOfMyButton").click(function(event){
  event.preventDefault();
  window.location.href = "http://sendtowherever.com";            
});