cart__free-gift-promo.liquid

cart__free-gift-promo.liquid

{% comment %}
  Custom section added by JadePuma
  Instructions - https://jadepuma.com/blogs/shopify-tutorials/free-gift-with-purchase-cart-promo
  Last editted - 3Jul23
{% endcomment %}

<div style="opacity: 0;">-</div>

{% if section.settings.enable_free_gift_promo %}

<section>
  <div class="container cart_free_gift_container" {% unless section.settings.show_not_qualified_message %}style="display:none;" {% endunless %}>
    <div class="cart_free_gift_container_inner">
      <div class="qualified_for_gift" style="display:none;">
          <div class="gift_grid">
              <div class="free_gift_banner_text">
                  <span>{{section.settings.qualified_text}}</span>
              </div>
              <div class="free_gift_container">
                  {% assign gift = section.settings.free_gift %}
                  {% if gift.variants.size > 1 %}
                    {% if gift.available %}

                      <div>
                        <div class="free-gift">
                          <img src="{{gift.featured_media | img_url: 'large'}}" />
                        </div>

                        <div style="text-align:center; margin-bottom:5px;">
                          {{gift.title}} 
                        </div>

                        <div style="text-align:center">
                          <button class="btn-free-gift" onclick="window.location.href='{{gift.url}}'">{{ section.settings.multiple_variant_text }}</button>
                        </div>

                      </div>  
                    {% endif %}
                  {% else %}
                    {% if gift.available %}

                      <div>
                        <div class="free-gift">
                        <img src="{{gift.featured_media | img_url: 'large'}}" />
                      </div>

                      <div style="text-align:center">
                        {{gift.title}} 
                      </div>

                      <div style="text-align:center">
                        <button class="btn-free-gift" onclick="addGiftToCart({{gift.first_available_variant.id}})">{{ section.settings.single_variant_text }}</button>
                      </div>

                      </div>  
                    {% endif %}
                  {% endif %}
              </div>
          </div>
      </div>
      <div class="not_qualified_for_gift" style="display:none;">
        <div class="free_gift_banner_text_not_qualified">
          <span>
          {{section.settings.not_qualified_text}}
          </span> 
        </div>
      </div>
    </div>
  </div>
</section>


<script>

{% assign prodType = false %}
{% assign has_desired_product_type = false %}
{% for item in cart.items %}
  {% if item.product.type == section.settings.qualifying_product_type %}
    {% assign has_desired_product_type = true %}
  {% endif %}
{% endfor %}


var has_desired_product_type = {{has_desired_product_type}}
var prodType_ = "{{section.settings.qualifying_product_type}}"
var freeGiftCriteria = "{{section.settings.qualifier_criteria}}"

let removeGiftUpdate = "";

{% assign gift = section.settings.free_gift %}
{% for variant in gift.variants %}
   removeGiftUpdate += `updates[{{variant.id}}]=0&`
{% endfor %}

function addGiftToCart(num){
    let update = `updates[${num}]=1`;
    jQuery.post(window.Shopify.routes.root + 'cart/update.js',update).then( function(){
    window.location.href = "/cart";
  })
}

{% assign giftAlreadyInCart = false %}
{% for item in cart.items %}
  {% for gift_variant in gift.variants %}
    {% if item.id == gift_variant.id %}
      {% assign giftAlreadyInCart = true %}
    {% endif %}
  {% endfor %}
{% endfor %}

{% if giftAlreadyInCart == false  %}

setInterval(()=>{
        giftQualifyCheck()
},2000)

{% endif %}


function giftQualifyCheck(){

  var show_unqualified = {{section.settings.show_not_qualified_message}}
  var qualifyingAmount = {{section.settings.gift_qualifying_amount}} * 100;
    //document.querySelector('#sca-fg-owl-carousel').style.display = 'none';
      jQuery.getJSON('/cart.js', function(cart) {
     // now have access to Shopify cart object
     if(freeGiftCriteria == 'order_amount'){  
        if(cart.items_subtotal_price >= qualifyingAmount){
        $('.qualified_for_gift').show()
        $('.cart_free_gift_container').show()
        $('.not_qualified_for_gift').hide()
      }
     }else if(freeGiftCriteria == 'product_type' &&  has_desired_product_type == true){
        $('.qualified_for_gift').show()
        $('.cart_free_gift_container').show()
        $('.not_qualified_for_gift').hide()   
    }else{
      $('.qualified_for_gift').hide()
        {% unless section.settings.show_not_qualified_message %}
          $('.cart_free_gift_container').hide()
        {% endunless %}
      $('.not_qualified_for_gift').show()
     }

     {% assign gift = section.settings.free_gift %}


     var gift_title =  "{{gift.title}}";
     var gift_in_cart = false;

      cart.items.forEach((item)=>{
        if (item.title.includes(gift_title)){
             gift_in_cart = true;
        }
      })
      
      if(gift_in_cart){
           $('.qualified_for_gift').hide()
      }

     if(cart.items.length == 0){
       $('.cart_free_gift_container').hide()
     }

    });
}

var freGiftsZero = {}

{% assign gift = section.settings.free_gift %}
{% for variant in gift.variants %}
  var this_id = {{variant.id}};
  freGiftsZero[this_id] = 0
{% endfor %}

function removeFreeGiftWhenNotQualified(){
      jQuery.post(window.Shopify.routes.root + 'cart/update.js', {
        updates: freGiftsZero    
      })
}

function getThreshHold(){
  return {{section.settings.gift_qualifying_amount}} * 100;
}

</script>


{% style %}

.btn-free-gift{
  padding:6px 15px;
  background-color:#f19425;
  color:white;
  border:1px solid rgba(0,0,0,0);
  border-radius:25px;
  margin-top:5px;
  font-weight:bold;
}

.btn-free-gift:hover{
  background-color:#fff;
  color:#f19425;
  border:1px solid #f19425;
}

.qualified_for_gift{
  padding:20px;
  background-color:{{section.settings.gift_background}};
  border:{{section.settings.border_width}}px solid {{section.settings.gift_border}};
  border-radius:{{section.settings.border_radius}}px;
  margin: 0 auto;
}

.qualified_for_gift span{
  font-size:{{section.settings.qualified_font_size}}px;
  max-width:400px;
}

.not_qualified_for_gift{
  padding:10px;
  background-color:{{section.settings.gift_background}};
  border:{{section.settings.border_width}}px solid {{section.settings.gift_border}};
  border-radius:{{section.settings.border_radius}}px;
  text-align:center;
}

.free_gift_banner_text{
    display:flex;
    justify-content:space-around;
    align-items:center;
    padding:15px;

}

.free_gift_banner_text span{
  text-align:center;
  font-weight:600;
  font-size:{{section.settings.qualified_font_size}}px;
}

.free_gift_banner_text_not_qualified span{
  font-size:{{section.settings.not_qualified_font_size}}px;
  font-weight:600;
}

.free_gift_container{
  margin:0 auto;
  display:flex;
  justify-content:space-around;
  max-width:100%;
}

.free_gift_container img{
  padding-top:10px;
  padding-right:10px;
  padding-bottom:15px;
  max-height:200px;
}

.gift_grid{
    {% if section.settings.text_left %}
    display:grid;
    grid-template-columns: auto auto;
    {% endif %}
}

.cart_free_gift_container{
    margin-top:{{ section.settings.padding_top}}px;
    margin-bottom:{{section.settings.padding_bottom}}px;
    width:max-content !important;
    min-width:300px;
}

.cart_free_gift_container_inner{
    margin: 0 auto;
}

@media only screen and (max-width: 990px) {
  .gift_grid{
      width:100%;
      display:block;
  }

  .cart_free_gift_container{
      margin-top:{{ section.settings.padding_top}}px;
      margin-bottom:{{section.settings.padding_bottom}}px;
      width:unset !important;
      min-width:unset;
  }

  .qualified_for_gift{
    padding:10px;
  }

  .qualified_for_gift span{
    font-size:{{section.settings.qualified_font_size}}px;
  }

}

{% endstyle %}

{% endif %}
      
{% schema %}
{
  "name": "Cart gift promo",
  "settings": [
      {
        "type": "checkbox",
        "id": "enable_free_gift_promo",
        "label": "Enable"
      },
      {
        "type": "header",
        "content": "Promotion Layout"
      },
      {
        "type": "product",
        "id": "free_gift",
        "label":"Gift"
      },
      {
        "type": "text",
        "id": "single_variant_text",
        "label": "Single product button label"
      },
      {
        "type": "text",
        "id": "multiple_variant_text",
        "label": "Multiple variants button label"
      },
      {
        "type": "header",
        "content": "Qualifying Criteria"
      },
      {
        "type": "select",
        "id": "qualifier_criteria",
        "label": "Qualifying criteria",
        "default": "product_type",
        "options": [
          {
            "value": "product_type",
            "label": "Product type"
          },
          {
            "value": "order_amount",
            "label": "Order amount"
          }
        ]
      },
      {
        "type": "text",
        "id": "qualifying_product_type",
        "label": "Qualifying Product Type"
      },
      {
        "type": "range",
        "id": "gift_qualifying_amount",
        "label": "Qualifying amount",
        "min": 0,
        "max": 500,
        "step": 10,
        "default": 100,
        "unit": "$"
      },
      {
        "type": "color",
        "id": "gift_background",
        "label": "Background Color",
        "default": "#ffffff"
      },
      {
        "type": "color",
        "id": "gift_border",
        "label": "Border Color",
        "default": "#000000"
      },
      {
        "type": "range",
        "id": "border_width",
        "label": "Border width",
        "min": 0,
        "max": 10,
        "default": 3,
        "unit": "px"
      },
      {
        "type": "range",
        "id": "border_radius",
        "label": "Border radius",
        "min": 0,
        "max": 50,
        "default": 0,
        "unit": "px"
      },
      {
        "type": "header",
        "content": "Not qualified"
      },
      {
        "type": "text",
        "id": "not_qualified_text",
        "label": "Not qualified messsage"
      },
      {
        "type": "checkbox",
        "id": "show_not_qualified_message",
        "label": "Show not qualified message"
      },
      {
        "type": "range",
        "id": "not_qualified_font_size",
        "label": "Not qualified message font size",
        "min": 10,
        "max": 60,
        "step": 1,
        "default": 20,
        "unit": "px"
      },
      {
        "type": "header",
        "content": "Qualified"
      },
      {
        "type": "text",
        "id": "qualified_text",
        "label": "Qualified text"
      },
      {
        "type": "range",
        "id": "qualified_font_size",
        "label": "Qualified message font size",
        "min": 10,
        "max": 60,
        "step": 1,
        "default": 20,
        "unit": "px"
      },
      {
        "type": "checkbox",
        "id": "text_left",
        "label": "Show text on left (Desktop)",
        "default": false
      },
      {
        "type": "header",
        "content": "Layout"
      },
      {
        "type": "range",
        "id": "padding_top",
        "label": "Top spacing",
        "min": 0,
        "max": 100,
        "step": 5,
        "default": 20,
        "unit": "px"
      },
      {
        "type": "range",
        "id": "padding_bottom",
        "label": "Bottom spacing",
        "min": 0,
        "max": 100,
        "step": 5,
        "default": 0,
        "unit": "px"
      }
  ],
  "presets": [{
    "name": "Cart gift",
    "category": "content"
  }],
  "templates": [
    "cart"
  ]
}

{% endschema %}