Popup Button Feedback When Product is Added to Cart - Temporary Fix

The Problem

On the Bon Jovi site the feedback after a product is added to the cart stopped working.

The Solution

Recreate the functionality quickly, so whenever a product is added to the cart a button will show showing them how to continue checking out.

The Code

product-page.liquid

Open product-page.liquid and add the following code before the product description

<a class="view-cart-btn hidden" href="/cart">Thanks for Adding <span>{{ product.title }}</span> Complete Purchase here. <i class="fa fa-shopping-cart" aria-hidden="true"></i></a>

Then at the bottom of product-page.liquid add the following Javascript. This will toggle the hidden class on and off.

<script type="text/javascript">
  $('#purchase').click(function(){
          $('.view-cart-btn').toggleClass('hidden');
  });
</script>

custom.scss.liquid

Add the following code to custom.scss.liquid. Modify the styles to match your theme.

.hidden {
  display: none
}
a.view-cart-btn {
    width: 100%;
    background: #ad0a2b;
    border: 5px double #f0f8ff;
    padding: 15px;
    margin-bottom: 20px; 
    overflow: hidden;
    clear: both;
    color: #fff;
    text-transform: uppercase;
    display: block;
    text-align: center;
    text-decoration: none;
} 
.view-cart-btn span {
  color: #acacac;
  font-style: oblique;
}
a.view-cart-btn:hover {
  opacity: .8;
}