{% assign _meta_discount_code = product.metafields.c_f %}
{% unless _meta_discount_code.discount_code == blank %}
  <div id="discount-modal">
    <div class="underlay"></div>
    <div class="wrap-modal">
      <a href="javascript:void(0);"><i class="demo-icon icon-close"></i></a>

      <div class="modal-body">
        <div class="image">
          <img src="{{ 'discount_popup.png' | asset_url }}" alt="" />
        </div>
        <div class="content">
          {% unless settings.discount_popup_text_1 == blank %}
            <h5>{{ settings.discount_popup_text_1 }}</h5>
          {% endunless %}

          {% unless settings.discount_popup_text_2 == blank %}
            <p>{{ settings.discount_popup_text_2 }}</p>
          {% endunless %}
          <div class="discount-redirect"></div>
        </div>
      </div>

    </div>
  </div>

  <script type="text/javascript">
    jQuery(document).ready(function($) {

      var _discount_html = $('.discount-redirect')
          ,_btn_discount = $('.btn-discount-code')

      _discount_html.html(_btn_discount).html();

      // if you want to use the 'fire' or 'disable' fn,
      // you need to save OuiBounce to an object
      var _discount = ouibounce(document.getElementById('discount-modal'), {
        aggressive: true,
        timer: 0
      });

      $('body').on('click', function() {
        $('#discount-modal').hide();
      });

      $('#discount-modal .modal').on('click', function(e) {
        e.stopPropagation();
      });

    });
  </script>
{% endunless %}