Untitled

//Auto Check Work But Product Went to Double if I add any product from upsell//




{% assign product = all_products['ohita-jono'] %}
{%- assign check_gift = false -%}
{%- for line_item in cart.items -%}
  {% if line_item.id == 47245440581971 %}
    {%- assign check_gift = true -%}
  {% endif %}
{% endfor %}

<div class="main_shipping_protection">
  <div class="shipping_protection_flex">
    <div class="icons_shipping_protection">
      <img class="emoji-img" width="100%" height="auto" src="{{ product.featured_image | img_url:'master' }}">
    </div>
    <div class="text_for_shipping_protection">
      <div class="shipping-details">
        <h2 class="shipping-title">{{ product.title }}</h2>
        <div class="price_shipping_protection">
          <span class="price_orignal">{{ product.price | money }}</span>
        </div>
      </div>
      <p>{{ product.description }}</p>
    </div>

    <div class="toggle_shipping_protection">
      <div class="switch-container">
        <label class="switch-track" for="toggleSwitch">
          <input
            type="checkbox"
            id="toggleSwitch"
            class="switch-checkbox click_gift"
            {% if check_gift %}
              checked
            {% endif %}
          >
          <div class="switch-checkmark">
            {% comment %}<svg width="11" height="10" viewBox="0 0 11 10" fill="none" xmlns="http://www.w3.org/2000/svg">
              <path d="M9.86554 1.46252L3.36866 8.88752L0.58429 6.10315" stroke="white" stroke-width="0.928125" stroke-linecap="round" stroke-linejoin="round"></path>
            </svg>{% endcomment %}
          </div>
        </label>
      </div>
    </div>
  </div>
</div>

<style>
  .shipping_protection_flex {
      display: flex;
      align-items: center;
      padding: 0 8px;
      justify-content: space-around;
  }
  .shipping-title,
  .price_shipping_protection {
    font-size: 15px;
    font-weight: 600;
    line-height: 20px;
    margin: 0;
    color: #fff;
  }
  .shipping-details {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 10px;
    margin-top: 15px;
  }
  .text_for_shipping_protection p {
    font-size: 13px;
    line-height: 16px;
    color: #a8a8a8;
    margin-top: 0;
  }
  .icons_shipping_protection img {
    max-height: 60px;
    max-width: 60px;
    margin-right: 20px;
  }
  .text_for_shipping_protection {
    padding: 0 16px;
  }
  .icons_shipping_protection img {
    max-height: 60px;
    max-width: 60px;
    margin-right: 20px;
    background: #ffd5d826;
    border-radius: 5px;
  }
  .main_shipping_protection {
    margin-bottom: 0 !important;
    padding: 1.5rem 1.5rem;
  }
  .toggle_shipping_protection .switch-track {
    height: 100%;
    display: flex;
    border: 2px solid #3d3d3d;
    box-shadow: 0 1.6875px #161d251a, inset 0 1.6875px 0 1.6875px #ffffff0f;
    border-radius: 100px;
    position: relative;
  }
  .toggle_shipping_protection .switch-checkbox {
    width: 50px;
    height: 23px;
    background: #3d3d3d;
    margin: 0px !important;
  }
  .toggle_shipping_protection .switch-checkbox:before {
    width: 19px;
    height: 19px;
    top: 2px;
    transition: 0.4s;
  }
  .toggle_shipping_protection .switch-checkbox:checked {
    background: #0dcd8d;
  }
  .switch-checkmark {
    bottom: 0;
    left: 10px;
    position: absolute;
    top: 6.5px;
    height: 10px;
    width: 10px;
  }
  .switch-checkmark svg {
    display: flex;
    align-items: center;
  }
  .cart_loading .switch-checkmark:after {
    opacity: 0;
  }
  .switch-checkmark::after {
    content: "";
    background-image: url(/cdn/shop/files/loading-icon.svg?v=1702641377);
    height: 10px;
    width: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    position: absolute;
    top: 0;
    right: -20px;
    background-size: cover;
    background-repeat: no-repeat;
    background-color: #c4cdd5;
    animation: spin 2s linear infinite;
    opacity: 0;
    transition: 0.4s;
  }
  .switch-checkbox:before {
    z-index: 9;
  }
  .click_gift:checked + .switch-checkmark::before {
    content: "";
    background-image: url('https://cdn.shopify.com/s/files/1/0706/4476/0855/files/check.svg?v=1706867993');
    height: 10px;
    width: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    position: absolute;
    top: 0;
    left:0;
    background-size: cover;
    background-repeat: no-repeat;
    background-color: transparent;
  }
  @keyframes spin {
    0% {
      transform: rotate(0deg);
    }
    100% {
      transform: rotate(360deg);
    }
  }

  .click_gift:checked + .switch-checkmark::after {
    right: auto;
    left: 0;
    background-color: #0dcd8d;
  }
  @media (max-width: 543px) {
    .text_for_shipping_protection {
      margin-right: 10px;
    }
    .icons_shipping_protection img {
      max-height: 50px;
      max-width: 50px;
      margin-right: 10px;
    }
    .toggle_shipping_protection .switch-checkbox {
      width: 38px;
      height: 17px;
    }
    .toggle_shipping_protection .switch-checkbox:before {
      width: 13px;
      height: 13px;
    }
    .switch-checkmark {
      bottom: 0;
      left: 6px;
      position: absolute;
      top: 4px;
    }
    .switch-checkmark svg {
      height: 9px;
      width: 9px;
    }
    .shipping-details {
      gap: 10px;
    }
    .text_for_shipping_protection p {
      font-size: 11px;
      line-height: 15px;
    }
    .shipping-title,
    .price_shipping_protection {
      font-size: 13px;
      line-height: 18px;
    }
    .shipping-title,
    .price_shipping_protection {
      margin-bottom: 4px;
    }
    .switch-checkmark:after {
      right: -15px;
    }
  }

    .switch-checkbox {
    background: rgb(var(--border-color));
    -webkit-appearance: none;
    appearance: none;
    cursor: pointer;
    border-radius: 20px;
    width: 40px;
    height: 20px;
    transition: background .1s ease-in;
    position: relative;
  }

  .switch-checkbox:before {
    content: "";
    background: #FFFFFF;
    border-radius: 100%;
    width: 14px;
    height: 14px;
    transition: transform .1s ease-in;
    display: block;
    position: absolute;
    top: 3px;
    box-shadow: 0 1px 1px #0003;
  }

  .switch-checkbox:not(:lang(ae), :lang(ar), :lang(arc), :lang(bcc), :lang(bqi), :lang(ckb), :lang(dv), :lang(fa), :lang(glk), :lang(he), :lang(ku), :lang(mzn), :lang(nqo), :lang(pnb), :lang(ps), :lang(sd), :lang(ug), :lang(ur), :lang(yi)):before {
    left: 3px;
  }

  .switch-checkbox:is(:lang(ae), :lang(ar), :lang(arc), :lang(bcc), :lang(bqi), :lang(ckb), :lang(dv), :lang(fa), :lang(glk), :lang(he), :lang(ku), :lang(mzn), :lang(nqo), :lang(pnb), :lang(ps), :lang(sd), :lang(ug), :lang(ur), :lang(yi)):before {
    right: 3px;
  }

  .switch-checkbox:checked {
    background: rgb(var(--text-color));
  }

  .switch-checkbox:checked:before {
    transform: translateX(calc(100% + 6px));
  }
  span.price_compare {
    text-decoration: line-through;
  }
</style>

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>

<script>


 $(document).ready(function() {
     var shippingInsurance = false;
     $.ajax({
       type: 'GET',
       url: '/cart.json',
       dataType: 'jsonp',
       success: function(data) {
           var items = data['items'];
           for (var i = 0; i < items.length; i++) {
               if (items[i]["handle"] == "ohita-jono") {
                   shippingInsurance = true;
                   console.log("shippingInsurance == ", shippingInsurance);
               }
           }
           console.log("cart item",data);
           if (shippingInsurance == false) {
             console.log("shipping false");
             shippingAddproduct();
             $(".click_gift").prop("checked", true);
           }
         }
       });

     $(document).on("click", ".click_gift", function() {
       if ($(this).is(':checked')) {
         if (!shippingInsurance) { 
           shippingAddproduct();
           console.log("shippingInsurance on checked false == ", shippingInsurance);
         } else {
           $.ajax({
             type: 'GET',
             url: '/cart.json',
             dataType: 'jsonp',
             success: function(data) {
               console.log("cart item click",data);
             }
           });
           console.log("shippingInsurance on checked true == ", shippingInsurance);
         }
       } else {
         shippingRemoveproduct();
         shippingInsurance = false;
         console.log("shippingInsurance unchecked == ", shippingInsurance);
       }
       $(this).parent().addClass('cart_loading');
     });
 });  

 function shippingAddproduct() {
   var variantID = 47245440581971;
   var xhr = new XMLHttpRequest();
   var url = "/cart/add.js";
   xhr.open("POST", url, true);
   xhr.setRequestHeader("Content-Type", "application/json");
   let currentItemCount = Number($(".q_cart_item").html());
   $(".q_cart_item").html(currentItemCount + 1);
   xhr.onreadystatechange = function() {
       fetch(`${routes.cart_url}?section_id=cart-drawer`)
        .then((response) => response.text())
        .then((responseText) => {
          const html = new DOMParser().parseFromString(responseText, 'text/html');
          const selectors = ['cart-drawer-items', '.cart-drawer__footer'];
          for (const selector of selectors) {
            const targetElement = document.querySelector(selector);
            const sourceElement = html.querySelector(selector);
            if (targetElement && sourceElement) {
              targetElement.replaceWith(sourceElement);
            }
          }
        })
        .catch((e) => {
          console.error(e);
        });
   };
   var data = JSON.stringify({
       "quantity": 1,
       "id": variantID
   });
   xhr.send(data);
 }

  window.addEventListener("DOMContentLoaded", function() {
    const addToCartForms = document.querySelectorAll('form[action="/cart/add"]');
    addToCartForms.forEach((form)=> {
      form.addEventListener("submit", (event) => {
        setTimeout(function() {
          shippingAddproduct();
        },500);
      });
    });
  })

 function shippingRemoveproduct() {
     var variantID = "47245440581971";
     var xhr = new XMLHttpRequest();
     var url = "/cart/change.js";
     xhr.open("POST", url, true);
     xhr.setRequestHeader("Content-Type", "application/json");
     let currentItemCount = Number($(".q_cart_item").html());
     $(".q_cart_item").html(currentItemCount - 1);
     xhr.onreadystatechange = function() {
       fetch(`${routes.cart_url}?section_id=cart-drawer`)
        .then((response) => response.text())
        .then((responseText) => {
          const html = new DOMParser().parseFromString(responseText, 'text/html');
          const selectors = ['cart-drawer-items', '.cart-drawer__footer'];
          for (const selector of selectors) {
            const targetElement = document.querySelector(selector);
            const sourceElement = html.querySelector(selector);
            if (targetElement && sourceElement) {
              targetElement.replaceWith(sourceElement);
            }
          }
        })
        .catch((e) => {
          console.error(e);
        });
     };
     var data = JSON.stringify({
         "quantity": 0,
         "id": variantID
     });
     xhr.send(data);
 }

function getTheCookie(name) {
    var nameEQ = name + "=";
    var ca = document.cookie.split(';');
    for(var i=0;i < ca.length;i++) {
        var c = ca[i];
        while (c.charAt(0)==' ') c = c.substring(1,c.length);
        if (c.indexOf(nameEQ) == 0) return c.substring(nameEQ.length,c.length);
    }
    return null;
}
function setTheCookie(name,value,days) {
  var expires = "";
  if (days) {
      var date = new Date();
      date.setTime(date.getTime() + (days*24*60*60*1000));
      expires = "; expires=" + date.toUTCString();
  }
  document.cookie = name + "=" + (value || "")  + expires + "; path=/";
}
</script>