Untitled

mail@pastecode.io avatar
unknown
plain_text
2 years ago
74 kB
1
Indexable
Never
<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.1/css/all.min.css" integrity="sha512-+4zCK9k+qNFUR5X+cKL9EIR+ZOhtIloNl9GIKS57V1MyNsYpYcUrUeQc9vNfzsWfV28IaLL3i96P9sdNyeRssA==" crossorigin="anonymous" />

<style type="text/css">
  .product-box {
    display: flex;
  }
  .product {
    display: flex;
    flex-direction: column;
  }
  .note-field--container {
    display: flex;
    flex-direction: column;
  }
  .date_sticker_hide {
    display: none;
  }
  ul.drop {
    display: none;
    margin-top: 0;
    padding-left: 0;
    z-index: 1000;
    border-radius: 2px;
    border-top: 1px solid #d9d9d9;
    max-width: fit-content;
    box-shadow: 0 2px 6px rgb(0 0 0 / 30%);
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    overflow: hidden;
  }
  ul.drop li {
    list-style-type: none;
    padding-right: 10px;
    padding-left: 5px;
    padding-top: 5px;
    padding-bottom: 5px;
    border-top: 1px solid #e6e6e6;
    cursor: pointer;
    text-align: left;
  }
  ul.drop li:first-child {
    border-top: none;
  }
  ul.drop li:hover {
    background-color: #91d7d9;
    color: white;
  }
  .pac-icon {
    width: 15px;
    height: 20px;
    margin-right: 7px;
    margin-top: 0px;
    display: inline-block;
    vertical-align: top;
    background-image: url(https://maps.gstatic.com/mapfiles/api-3/images/autocomplete-icons.png);
    background-size: 34px;
  }
  .pac-icon-marker {
    background-position: -1px -161px;
  }
  .postcode_input {
    position: relative;
  }
  .icon-container {
    display: none;
    position: absolute;
    right: 15px;
    top: calc(50% - 10px);
  }
  .loader-input {
    position: relative;
    height: 20px;
    width: 20px;
    display: inline-block;
    animation: around 5.4s infinite;
  }

  @keyframes around {
    0% {
      transform: rotate(0deg)
    }
    100% {
      transform: rotate(360deg)
    }
  }

  .loader-input::after, .loader-input::before {
    content: "";
    background: white;
    position: absolute;
    display: inline-block;
    width: 100%;
    height: 100%;
    border-width: 2px;
    border-color: #333 #333 transparent transparent;
    border-style: solid;
    border-radius: 20px;
    box-sizing: border-box;
    top: 0;
    left: 0;
    animation: around 0.7s ease-in-out infinite;
  }

  .loader-input::after {
    animation: around 0.7s ease-in-out 0.1s infinite;
    background: transparent;
  }
  {% if bundle.current_section.index == 1 or bundle.current_section.index == 2 or bundle.current_section.index == 3 or bundle.current_section.index == 4 %}
  .back-to-top {
    display:block !important;
  }
  {% endif %}
</style>

<script type="text/javascript">
const selectedVariants = new Map();

function setAddDisabled(form) {
    $('.bundle-builder--add-to-cart-form').find('[type="submit"]').prop('disabled', true);
    const variantId = form.querySelector('[name="variant"]').value;
    const sectionId = form.querySelector('[name="section"]').value;
  
  var gift_box_error = document.getElementById("gift_box_error").value;
    var items_error = document.getElementById("items_error").value;
    var card_error = document.getElementById("card_error").value;
    if(sectionId == 0 && gift_box_error == 0) {
      var elements = form.getElementsByTagName('select');
      for (var i = 0; i < elements.length; i++)
      {
        elements[i].selectedIndex = 0;
      }
      form.querySelector('[type="submit"]').disabled = false;
        var block_id =form.parentNode.parentNode.parentNode.parentNode.id;
        setTimeout(function(){
          $('#'+block_id).find('button[type="submit"]').each(function(){
            $(this).prop('disabled', true);
          });
        }, 1000);  
    }
    if(sectionId == 2 && card_error == 0) {
      form.querySelector('[type="submit"]').disabled = false;
        var block_id =form.parentNode.parentNode.parentNode.id;
        setTimeout(function(){
          $('#'+block_id).find('button[type="submit"]').each(function(){
            $(this).prop('disabled', true);
          });
        }, 1000);  
    }
    const canAdd = window.BundleBuilder.canAddVariant(variantId, sectionId);
  	if(!canAdd) {
  		form.querySelector('[type="submit"]').textContent = 'Sold Out';
    }
    form.querySelector('[type="submit"]').disabled = !canAdd;
}

/* Change variant price after variant change */
Array.prototype.forEach.call(
    document.querySelectorAll('.bundle-builder--add-to-bundle-form select[name="variant"]'),
    function (select) {
        select.addEventListener('change', function (e) {
            const variantId = e.target.value;
            selectedVariants.set(e.target.id, variantId);
            const price = e.target.querySelector('option[value="' + variantId + '"]').dataset.price;
            e.target.parentNode.parentNode.querySelector('.variant-price').textContent = price;
          	
          	const img = e.target.querySelector('option[value="' + variantId + '"]').dataset.image;
          //console.log(e.target.parentElement.parentElement.parentElement.parentElement);
          	e.target.parentElement.parentElement.parentElement.parentElement.querySelector('.grid-view-item__image').src = img;

           const form = e.target.parentElement;
           setAddDisabled(form);
        });
    }
);
  
Array.prototype.forEach.call(
    document.querySelectorAll('.bundle-builder-app--bundle--product--show-more'),
    function (select) {
        select.addEventListener('click', function (e) {
          	e.preventDefault();
            const variantId = this.getAttribute('data-variant-id');
          	const sectionId = this.getAttribute('data-section-id');
            window.BundleBuilder.showMoreModal(variantId, sectionId, false, false);
        });
    }
);

function render() {
    selectedVariants.forEach(function (variantId, selectId) {
        const select = document.getElementById(selectId);
        if (select) {
            select.value = variantId;
        }
    });
    Array.prototype.forEach.call(
        document.querySelectorAll('.bundle-builder--add-to-bundle-form'),
        setAddDisabled,
    );
}
/* Change variant to what was selected last */
document.body.addEventListener('bundlebuilder:render', render);
render()
</script>
{% if bundle.published %}
<div class="webcast-top-bundle no-display-mobile {% if bundle.adding_to_cart %}bundle_is_adding{% endif %}">
  <div class="summary-container">
    <!--<pre>{{bundle.content | json}}</pre>-->
    <span class="expand_bundle_top expand_minus no-display-mobile"><i class="fa fa-arrow-circle-up fa-2x" aria-hidden="true"></i></span>
    <div class="summary summary--main">
      <div class="step-gift-box summary__item summary__item--main-product {% if bundle.current_section.index == 0 %}summary__item--active{% endif %} webcast-breadcrumb">
        <img src="{% if bundle.current_section.index == 0 %}https://cdn.shopify.com/s/files/1/0041/0943/4953/files/1_88688677-4371-4d5a-9d9e-93cc0dfd11b7.png?v=1604208825{% elsif bundle.current_section.index == 1 or bundle.current_section.index == 2 or bundle.current_section.index == 3 %}https://cdn.shopify.com/s/files/1/0041/0943/4953/files/2.png?v=1604208825{% else %}https://cdn.shopify.com/s/files/1/0041/0943/4953/files/3.png?v=1604208825{% endif %}" class="item__mark item__unchecked">
        <span class="item__title step-title next_section">Step 1</span>
        {% section_switch_form %}
        <input type="hidden" name="section" value="0" />
        <button type="submit" class="gift_box_submit" style="display:none;">Gift Box</button>
        <span class="item__title item__title--sub next_section">Gift Box</span>
        {% end_section_switch_form %}
      </div>
      
      {% assign item_products = 0 %}
      {% for item in bundle.content.items %}
        {% if item.section.name == 'Items' %}
        {% assign item_products = bundle.content.items.size %}
      {% endif %}
      {% endfor %}
      
      <div class="step-items {% if item_products > 3 %}have_products{% endif %} summary__item {% if bundle.current_section.index == 1 %}summary__item--active{% endif %} webcast-breadcrumb">
        <img class="item__mark item__unchecked" src="{% if bundle.current_section.index == 1 %}https://cdn.shopify.com/s/files/1/0041/0943/4953/files/1_88688677-4371-4d5a-9d9e-93cc0dfd11b7.png?v=1604208825{% elsif bundle.current_section.index == 2 or bundle.current_section.index == 3 %}https://cdn.shopify.com/s/files/1/0041/0943/4953/files/2.png?v=1604208825{% else %}https://cdn.shopify.com/s/files/1/0041/0943/4953/files/3.png?v=1604208825{% endif %}">
        <span class="item__title step-title next_section">Step 2</span>
        {% section_switch_form %}
        <input type="hidden" name="section" value="1" />
      <button type="submit" class="items_submit" style="display:none;">Items</button>
        <span class="item__title item__title--sub next_section">Items</span>
        {% end_section_switch_form %}
      </div>
      
      <div class="step-card summary__item no-display-mobile {% if bundle.current_section.index == 2 %}summary__item--active{% endif %} webcast-breadcrumb">
        <img class="item__mark item__unchecked" src="{% if bundle.current_section.index == 2 %}https://cdn.shopify.com/s/files/1/0041/0943/4953/files/1_88688677-4371-4d5a-9d9e-93cc0dfd11b7.png?v=1604208825{% elsif bundle.current_section.index == 3 %}https://cdn.shopify.com/s/files/1/0041/0943/4953/files/2.png?v=1604208825{% else %}https://cdn.shopify.com/s/files/1/0041/0943/4953/files/3.png?v=1604208825{% endif %}">
        <span class="item__title step-title next_section">Step 3</span>
        {% section_switch_form %}
        <input type="hidden" name="section" value="2" />
        <button type="submit" class="card_submit" style="display:none;">Card</button>
        <span class="item__title item__title--sub next_section">Card</span>
        {% end_section_switch_form %}
      </div>
      
      <div class="step-delivery summary__item no-display-mobile {% if bundle.current_section.index == 3 %}summary__item--active{% endif %} webcast-breadcrumb">
        <img class="item__mark item__unchecked" src="{% if bundle.current_section.index == 3 %}https://cdn.shopify.com/s/files/1/0041/0943/4953/files/1_88688677-4371-4d5a-9d9e-93cc0dfd11b7.png?v=1604208825{% else %}https://cdn.shopify.com/s/files/1/0041/0943/4953/files/3.png?v=1604208825{% endif %}">
        <span class="item__title step-title next_section">Step 4</span>
        {% section_switch_form %}
        <input type="hidden" name="section" value="3" />
        <button type="submit" class="delivery_submit" style="display:none;">Delivery</button>
        <span class="item__title item__title--sub next_section">Delivery</span>
        {% end_section_switch_form %}
      </div>
      
      <div class="step-details summary__item no-display-mobile {% if bundle.current_section.index == 4 %}summary__item--active{% endif %} webcast-breadcrumb">
        <img class="item__mark item__unchecked" src="{% if bundle.current_section.index == 4 %}https://cdn.shopify.com/s/files/1/0041/0943/4953/files/1_88688677-4371-4d5a-9d9e-93cc0dfd11b7.png?v=1604208825{% else %}https://cdn.shopify.com/s/files/1/0041/0943/4953/files/3.png?v=1604208825{% endif %}">
        <span class="item__title step-title next_section">Step 5</span>
        {% section_switch_form %}
        <input type="hidden" name="section" value="4" />
        <button type="submit" style="display:none;">Details</button>
        <span class="item__title item__title--sub next_section">Details</span>
        {% end_section_switch_form %}
      </div>
      
    </div> <!--check icon row completed-->
    <div class="summary summary--icons">
      <div class="summary__item summary__item--main-product gift-box-products">
        {% if bundle.content.items.size == 0 %}
        <img alt="" class="item__image placeholder_img" src="https://cdn.shopify.com/s/files/1/0041/0943/4953/files/Step_1.png?v=1604036379">
        {% else %}
          {% assign step_1_img = true %}
          {% for item in bundle.content.items %}
            {% if item.section.name == 'Gift Box' %}
            {% assign step_1_img = false %}
          <div class="single_item_image">
              {% remove_from_bundle_form item %}
              <button type="submit" class="BuildSummary__product-remove">
                <img src="https://cdn.shopify.com/s/files/1/0041/0943/4953/files/xbutton_2x_9791e0f9-3c98-4b6c-9260-7619cee0002c.png?v=1604077033" alt="">
              </button>
              {% end_remove_from_bundle_form %}
            
              {% assign img_url = '' %}
              {% for image in item.variant.product.images %}
                {% if image.id == item.variant.image_id %}
                {% assign img_url = image.src | img_url: 'master' %}
                {% endif %}
              {% endfor %}
              <img alt="" class="item__image" src="{{ img_url }}">
          </div>
          {% endif %}
          {% endfor %}
          {% if step_1_img %}

          <img alt="" class="item__image placeholder_img" src="https://cdn.shopify.com/s/files/1/0041/0943/4953/files/Step_1.png?v=1604036379">

          {% endif %}
        {% endif %}
      </div>
      <div class="summary__item placeholder-container">
        <ul class="BuildSummary__addon-products">
          {% if bundle.content.items.size == 0 %}
          <img alt="" class="item__image placeholder_img" src="https://cdn.shopify.com/s/files/1/0041/0943/4953/files/Step_2.png?v=1604036384">
          {% else %}
          {% assign step_2_img = true %}
          {% for item in bundle.content.items %}

          {% if item.section.name == 'Items' and item.variant.product.image.src %}
          {% assign step_2_img = false %}
            <li class="no-display-mobile">
              <div class="BuildSummary__product">
                <div class="mob-build-sum-prod-holder">
                  <img src="{{ item.variant.product.image.src }}" alt="" class="BuildSummary__product-image">
                </div>
                {% remove_from_bundle_form item %}
                <button type="submit" class="BuildSummary__product-remove">
                  <img src="https://cdn.shopify.com/s/files/1/0041/0943/4953/files/xbutton_2x_9791e0f9-3c98-4b6c-9260-7619cee0002c.png?v=1604077033" alt="">
                </button>
                {% end_remove_from_bundle_form %}
              </div>
              <div class="BuildSummary__product-text">
                <span class="BuildSummary__product-size">x1</span><br>
              </div>
            </li>
            
          {% endif %}
          {% endfor %}
          {% if step_2_img %}

          <img alt="" class="item__image placeholder_img" src="https://cdn.shopify.com/s/files/1/0041/0943/4953/files/Step_2.png?v=1604036379">

          {% endif %}
          {% endif %}
          
        </ul>
      </div>
      
      <div class="summary__item placeholder-container no-display-mobile card_step">
        <div class="summary__item summary__item--main-product">
            {% if bundle.content.items.size == 0 %}
            <img alt="" class="item__image placeholder_img" src="https://cdn.shopify.com/s/files/1/0041/0943/4953/files/Step_3.png?v=1604036376">
            {% else %}
            {% assign step_3_img = true %}
              {% for item in bundle.content.items %}
                {% if item.section.name == 'Card' %}
              {% assign step_3_img = false %}
                  {% remove_from_bundle_form item %}
                  <button type="submit" class="BuildSummary__product-remove">
                    <img src="https://cdn.shopify.com/s/files/1/0041/0943/4953/files/xbutton_2x_9791e0f9-3c98-4b6c-9260-7619cee0002c.png?v=1604077033" alt="">
                  </button>
                  {% end_remove_from_bundle_form %}
                  <img id="card_img" alt="" class="summary-image-card placeholder_image item__image" src="{{ item.variant.product.image.src }}">
                {% endif %}
              {% endfor %}
              {% if step_3_img %}

              <img alt="" class="item__image placeholder_img" src="https://cdn.shopify.com/s/files/1/0041/0943/4953/files/Step_3.png?v=1604036379">

              {% endif %}
            {% endif %}
 
        </div>
      </div>
      
      <div class="summary__item placeholder-container delivery_step_img">
        <div class="summary__item summary__item--main-product">
            {% if bundle.content.items.size == 0 %}
            	<img alt="" class="summary-image-delivery item__image placeholder_img" src="https://cdn.shopify.com/s/files/1/0041/0943/4953/files/delivery_step.png?v=1605939464">
            {% else %}
              {% assign step_3_img = true %}
              {% for item in bundle.content.items %}
                {% if item.section.name == 'Delivery' %}
                {% assign step_3_img = false %}
                <img alt="" class="summary-image-delivery placeholder_image item__image" src="{{ item.variant.product.image.src }}">
                {% endif %}
              {% endfor %}
            	{% if step_3_img %}

            	<img alt="" class="summary-image-delivery item__image placeholder_img" src="https://cdn.shopify.com/s/files/1/0041/0943/4953/files/delivery_step.png?v=1605939464">

            	{% endif %}
            {% endif %}
        </div>
      </div>
      
      <div class="summary__item placeholder-container">
        <img alt="" class="item__image placeholder_img" src="https://cdn.shopify.com/s/files/1/0041/0943/4953/files/Step_4.png?v=1604036376">
      </div>
      
    </div><!-- icons row completed -->
    <!-- button container start -->
    <div class="button-container">
      <input type="hidden" name="selected_shipping_product" id="selected_shipping_product" value="" />
      <div class="right-col total-box-right">
        <span class="button button--total total-box">total: {{ bundle.content.price | money }}</span>
        <div class="next-prev-btn">
          {% if bundle.has_prev_section %}
            {% section_switch_form %}
              <input type="hidden" name="section" value="{{ bundle.current_section.index | plus: -1 }}" />
              <button type="submit" id="backButton" class="button border__button">
                <img height="8" class="" src="https://cdn.shopify.com/s/files/1/1363/8433/files/chevron-left.png?v=1598887106" style="display: inline;">back
              </button>
            {% end_section_switch_form %}
          {% endif %}
          {% if bundle.current_section.index == 4 %}
          <button type="info" class="button border__button fake_atc" style="">Add to cart</button>
            {% add_to_cart_form %}
              <button type="submit" class="button border__button  hide original_atc">
                {%comment%}{% if bundle.adding_to_cart %}
                Building...
                {% else %}
                Add to cart
                {% endif %}{%endcomment%}
                <span class="bundle_cart_loading"><i class="fa fa-spinner fa-pulse fa-3x fa-fw"></i>
                  <span>Building...</span></span>
                <span class="bundle_cart_loading_hide">Add to cart</span>
              </button>
            {% end_add_to_cart_form %}
          {% endif %}
          {% if bundle.has_next_section %}
            {% section_switch_form %}
              <input type="hidden" name="section" value="{{ bundle.current_section.index | plus: 1 }}" />
              <button type="submit" id="nextButton" class="button border__button" style="">Next
                <img height="8" class="" src="https://cdn.shopify.com/s/files/1/1363/8433/files/chevron-right.png?v=1598887117" style="display: inline;">
              </button>
            {% end_section_switch_form %}
          {% endif %}
        </div>
      </div>
    </div>
    <!-- button container ends -->
  </div>
</div>
<!-- mobile top bundle bar start -->
<div class="webcast-top-bundle no_desktop_display mobile_top_bar {% if bundle.adding_to_cart %}bundle_is_adding{% endif %}">
  <div class="summary-container">
    <div class="summary summary--main">
      <div class="summary__item summary__item--main-product {% if bundle.current_section.index == 0 %}summary__item--active {% else %}no-display-mobile {% endif %} webcast-breadcrumb">
        <img src="{% if bundle.current_section.index == 0 %}https://cdn.shopify.com/s/files/1/0041/0943/4953/files/1_88688677-4371-4d5a-9d9e-93cc0dfd11b7.png?v=1604208825{% elsif bundle.current_section.index == 1 or bundle.current_section.index == 2 or bundle.current_section.index == 3 %}https://cdn.shopify.com/s/files/1/0041/0943/4953/files/2.png?v=1604208825{% else %}https://cdn.shopify.com/s/files/1/0041/0943/4953/files/3.png?v=1604208825{% endif %}" class="item__mark item__unchecked">
        <span class="item__title step-title next_section">Step 1</span>
        {% section_switch_form %}
        <input type="hidden" name="section" value="0" />
        <button type="submit" class="gift_box_submit" style="display:none;">Gift Box</button>
        <span class="item__title item__title--sub next_section">Gift Box</span>
        {% end_section_switch_form %}
      </div>
      
      <div class="summary__item {% if bundle.current_section.index == 1 %}summary__item--active {% else %}no-display-mobile {% endif %} webcast-breadcrumb">
        <img class="item__mark item__unchecked" src="{% if bundle.current_section.index == 1 %}https://cdn.shopify.com/s/files/1/0041/0943/4953/files/1_88688677-4371-4d5a-9d9e-93cc0dfd11b7.png?v=1604208825{% elsif bundle.current_section.index == 2 or bundle.current_section.index == 3 %}https://cdn.shopify.com/s/files/1/0041/0943/4953/files/2.png?v=1604208825{% else %}https://cdn.shopify.com/s/files/1/0041/0943/4953/files/3.png?v=1604208825{% endif %}">
        <span class="item__title step-title next_section">Step 2</span>
        {% section_switch_form %}
        <input type="hidden" name="section" value="1" />
      <button type="submit" class="items_submit" style="display:none;">Items</button>
        <span class="item__title item__title--sub next_section">Items</span>
        {% end_section_switch_form %}
      </div>
      
      <div class="summary__item {% if bundle.current_section.index == 2 %}summary__item--active {% else %}no-display-mobile {% endif %} webcast-breadcrumb">
        <img class="item__mark item__unchecked" src="{% if bundle.current_section.index == 2 %}https://cdn.shopify.com/s/files/1/0041/0943/4953/files/1_88688677-4371-4d5a-9d9e-93cc0dfd11b7.png?v=1604208825{% elsif bundle.current_section.index == 3 %}https://cdn.shopify.com/s/files/1/0041/0943/4953/files/2.png?v=1604208825{% else %}https://cdn.shopify.com/s/files/1/0041/0943/4953/files/3.png?v=1604208825{% endif %}">
        <span class="item__title step-title next_section">Step 3</span>
        {% section_switch_form %}
        <input type="hidden" name="section" value="2" />
        <button type="submit" class="card_submit" style="display:none;">Card</button>
        <span class="item__title item__title--sub next_section">Card</span>
        {% end_section_switch_form %}
      </div>
      
      <div class="summary__item {% if bundle.current_section.index == 3 %}summary__item--active {% else %}no-display-mobile {% endif %} webcast-breadcrumb">
        <img class="item__mark item__unchecked" src="{% if bundle.current_section.index == 3 %}https://cdn.shopify.com/s/files/1/0041/0943/4953/files/1_88688677-4371-4d5a-9d9e-93cc0dfd11b7.png?v=1604208825{% else %}https://cdn.shopify.com/s/files/1/0041/0943/4953/files/3.png?v=1604208825{% endif %}">
        <span class="item__title step-title next_section">Step 4</span>
        {% section_switch_form %}
        <input type="hidden" name="section" value="3" />
        <button type="submit" style="display:none;">Delivery</button>
        <span class="item__title item__title--sub next_section">Delivery</span>
        {% end_section_switch_form %}
      </div>
      
      <div class="summary__item {% if bundle.current_section.index == 4 %}summary__item--active {% else %}no-display-mobile {% endif %} webcast-breadcrumb">
        <img class="item__mark item__unchecked" src="{% if bundle.current_section.index == 4 %}https://cdn.shopify.com/s/files/1/0041/0943/4953/files/1_88688677-4371-4d5a-9d9e-93cc0dfd11b7.png?v=1604208825{% else %}https://cdn.shopify.com/s/files/1/0041/0943/4953/files/3.png?v=1604208825{% endif %}">
        <span class="item__title step-title next_section">Step 5</span>
        {% section_switch_form %}
        <input type="hidden" name="section" value="4" />
        <button type="submit" style="display:none;">Details</button>
        <span class="item__title item__title--sub next_section">Details</span>
        {% end_section_switch_form %}
      </div>
      
    </div> <!--check icon row completed-->
    <div class="summary summary--icons">
      <div class="summary__item summary__item--main-product gift-box-products {% unless bundle.current_section.index == 0 %}no-display-mobile {% endunless %}">
        {% if bundle.content.items.size == 0 %}
        <img alt="" class="item__image placeholder_img" src="https://cdn.shopify.com/s/files/1/0041/0943/4953/files/Step_1.png?v=1604036379">
        {% else %}
          {% assign step_1_img_mobile = true %}
          {% for item in bundle.content.items %}
            {% if item.section.name == 'Gift Box' and item.index == 0 %}
          {% assign step_1_img_mobile = false %}
              {% remove_from_bundle_form item %}
              <button type="submit" class="BuildSummary__product-remove">
                <img src="https://cdn.shopify.com/s/files/1/0041/0943/4953/files/xbutton_2x_9791e0f9-3c98-4b6c-9260-7619cee0002c.png?v=1604077033" alt="">
              </button>
              {% end_remove_from_bundle_form %}
              <img alt="" class="item__image" src="{{ item.variant.product.image.src }}">
            {% endif %}
          {% endfor %}
          {% if step_1_img_mobile %}

          <img alt="" class="item__image placeholder_img" src="https://cdn.shopify.com/s/files/1/0041/0943/4953/files/Step_1.png?v=1604036379">

          {% endif %}
        {% endif %}
      </div>
      <div class="summary__item placeholder-container {% unless bundle.current_section.index == 1 %}no-display-mobile {% endunless %}">
        <ul class="BuildSummary__addon-products">
          {% if bundle.content.items.size == 0 %}
          <img alt="" class="item__image placeholder_img" src="https://cdn.shopify.com/s/files/1/0041/0943/4953/files/Step_2.png?v=1604036384">
          {% else %}
           {% assign step_2_img_mobile = true %}
          {% for item in bundle.content.items %}
          {% if item.section.name == 'Items' %}
          {% assign step_2_img_mobile = false %}
            <li class="mobile_items_product">
              <div class="BuildSummary__product">
                <div class="mob-build-sum-prod-holder">
                  <img src="{{ item.variant.product.image.src }}" alt="" class="BuildSummary__product-image">
                </div>
                {% remove_from_bundle_form item %}
                <button type="submit" class="BuildSummary__product-remove">
                  <img src="https://cdn.shopify.com/s/files/1/0041/0943/4953/files/xbutton_2x_9791e0f9-3c98-4b6c-9260-7619cee0002c.png?v=1604077033" alt="">
                </button>
                {% end_remove_from_bundle_form %}
              </div>
              <div class="BuildSummary__product-text">
                <span class="BuildSummary__product-size">x1</span><br>
              </div>
            </li>
          {% endif %}
          {% endfor %}
          {% if step_2_img_mobile %}

          <img alt="" class="item__image placeholder_img" src="https://cdn.shopify.com/s/files/1/0041/0943/4953/files/Step_2.png?v=1604036379">

          {% endif %}
          {% endif %}
        </ul>
      </div>
      
      <div class="summary__item placeholder-container card_step {% unless bundle.current_section.index == 2 %}no-display-mobile {% endunless %}">
        <div class="summary__item summary__item--main-product">
            {% if bundle.content.items.size == 0 %}
            <img alt="" class="item__image placeholder_img" src="https://cdn.shopify.com/s/files/1/0041/0943/4953/files/Step_3.png?v=1604036376">
            {% else %}
            {% assign step_3_img_mobile = true %}
              {% for item in bundle.content.items %}
                {% if item.section.name == 'Card' %}
              {% assign step_3_img_mobile = false %}
                  {% remove_from_bundle_form item %}
                  <button type="submit" class="BuildSummary__product-remove">
                    <img src="https://cdn.shopify.com/s/files/1/0041/0943/4953/files/xbutton_2x_9791e0f9-3c98-4b6c-9260-7619cee0002c.png?v=1604077033" alt="">
                  </button>
                  {% end_remove_from_bundle_form %}
                  <img id="card_img" alt="" class="summary-image-card placeholder_image item__image" src="{{ item.variant.product.image.src }}">
                {% endif %}
              {% endfor %}
              {% if step_3_img_mobile %}

              <img alt="" class="item__image placeholder_img" src="https://cdn.shopify.com/s/files/1/0041/0943/4953/files/Step_3.png?v=1604036379">

              {% endif %}
            {% endif %}
        </div>
      </div>
      
      <div class="summary__item placeholder-container {% unless bundle.current_section.index == 3 %}no-display-mobile {% endunless %} delivery_step_img">
        <div class="summary__item summary__item--main-product">
            {% if bundle.content.items.size == 0 %}
            <img alt="" class="item__image placeholder_img" src="https://cdn.shopify.com/s/files/1/0041/0943/4953/files/delivery_step.png?v=1605939464">
            {% else %}
            {% assign step_3_img_mobile = true %}
              {% for item in bundle.content.items %}
                {% if item.section.name == 'Delivery' %}
              {% assign step_3_img_mobile = false %}
                  <img id="card_img" alt="" class="summary-image-card placeholder_image item__image" src="{{ item.variant.product.image.src }}">
                {% endif %}
              {% endfor %}
              {% if step_3_img_mobile %}

              <img alt="" class="item__image placeholder_img" src="https://cdn.shopify.com/s/files/1/0041/0943/4953/files/delivery_step.png?v=1605939464">

              {% endif %}
            {% endif %}
        </div>
      </div>
      
      <div class="summary__item placeholder-container last_detail_box {% unless bundle.current_section.index == 4 %}no-display-mobile {% endunless %}">
        <img alt="" class="item__image placeholder_img" src="https://cdn.shopify.com/s/files/1/0041/0943/4953/files/Step_4.png?v=1604036376">
      </div>
      
    </div><!-- icons row completed -->
    <!-- button container start -->
    <div class="button-container">
      <div class="right-col total-box-right">
        <span class="button button--total total-box">total: {{ bundle.content.price | money }}</span>
        <div class="next-prev-btn">
          {% if bundle.has_prev_section %}
            {% section_switch_form %}
              <input type="hidden" name="section" value="{{ bundle.current_section.index | plus: -1 }}" />
              <button type="submit" id="backButton" class="button border__button">
                <img height="8" class="" src="https://cdn.shopify.com/s/files/1/1363/8433/files/chevron-left.png?v=1598887106" style="display: inline;">back
              </button>
            {% end_section_switch_form %}
          {% endif %}
          {% if bundle.current_section.index == 4 %}
          <button type="info" class="button border__button fake_atc" style="">Add to cart</button>
            {% add_to_cart_form %}
              <button type="submit" class="button border__button disable_atc hide original_atc" disabled>
                {%comment%}{% if bundle.adding_to_cart %}
                Building...
                {% else %}
                Add to cart
                {% endif %}{%endcomment%}
                <span class="bundle_cart_loading"><i class="fa fa-spinner fa-pulse fa-3x fa-fw"></i>
                  <span>Building...</span></span>
                <span class="bundle_cart_loading_hide">Add to cart</span>
              </button>
            {% end_add_to_cart_form %}
          {% endif %}
          {% if bundle.has_next_section %}
            {% section_switch_form %}
              <input type="hidden" name="section" value="{{ bundle.current_section.index | plus: 1 }}" />
              <button type="submit" id="nextButton" class="button border__button" style="">Next
                <img height="8" class="" src="https://cdn.shopify.com/s/files/1/1363/8433/files/chevron-right.png?v=1598887117" style="display: inline;">
              </button>
            {% end_section_switch_form %}
          {% endif %}
        </div>
      </div>
    </div>
    <!-- button container ends -->
  </div>
</div>
<!-- mobile  top bundle bar end -->
<div class="overlay hide">
  <div class="overlay__inner">
    <div class="overlay__content"><span class="spinner"></span></div>
  </div>
</div>
  <header class="collection-header">
    <div class="page-width">
      <div class="details_step page-width section-header text-center">
        <h3>
          <span role="text">{{ bundle.current_section.name }}</span>
        </h3>
        {% if bundle.current_section.index == 4 %}
        <!--<h5>Need to go back a step? Please note these details will be cleared and you will need to enter them again once you are back on this step.</h5>-->
        <img class="details_banner_desktop no-display-mobile" src="https://cdn.shopify.com/s/files/1/0041/0943/4953/files/Transparent_delivery_step_desktop.png?v=1617984457">
        <img class="details_banner_mobile no_desktop_display" src="https://cdn.shopify.com/s/files/1/0041/0943/4953/files/Transparent_delivery_step_mobile.png?v=1617984457">
        {% endif %}
      </div>
    </div>
  </header>
  <div class="page-width" id="Collection">
  {% unless bundle.current_section.index == 3 or bundle.current_section.index == 4 %}
    <ul class="grid grid--uniform grid--view-items section_{{bundle.current_section.name | replace: ' ', '_'}}" id="section_{{bundle.current_section.name | replace: ' ', '_'}}">
        {% for product in bundle.current_section.products %}
          {%- assign img_url = product.image.src | img_url: '1x1' | replace: '_1x1.', '_{width}x.' -%}
            <li class="grid__item grid__item--collection-template small--one-half {% if bundle.current_section.name=='Items' %}medium-up--one-fifth{% elsif bundle.current_section.name=='Card' %}medium-up--one-quarter{%else%}medium-up--one-third{%endif%}">
              <div class="grid-view-item product-card">
                <div class="grid-view-item__image-wrapper product-card__image-wrapper js">
                  <div style="padding-top:100%;">
                    <img class="grid-view-item__image lazyload"
                         src="{{ product.image.src | img_url: '300x300' }}"
                         data-src="{{ img_url }}"
                         data-widths="[180, 360, 540, 720, 900, 1080, 1296, 1512, 1728, 2048]"
                         data-sizes="auto"
                         alt="">
                    <div class="prod-img-overlay"></div>
                    <!--<div class="shopnowbutton"><a href="#"><button type="submit">Add</button></a></div>-->
                  </div>
                </div>
                {% if bundle.current_section.index == 0 %}<div class="product_title_block">{% endif %}
                <div class="h4 grid-view-item__title product-card__title" aria-hidden="true">{{ product.title }}</div>
                
                <a class="bundle-builder-app--bundle--product--show-more" data-variant-id="{{ product.available_variants[0].id }}" data-section-id="{{ bundle.current_section.index }}" href="/products/{{ product.handle }}" target="_blank" rel="noopener noreferrer" tabindex="0"><span>Product details</span></a>
                {% add_to_bundle_form bundle.current_section %}
                    {% if product.available_variants.size > 1 %}
                    <div class="selector-wrapper js product-form__item">
                          <select name="variant" class="single-option-selector product-form__input" id="select-{{ bundle.current_section.index }}-{{ product.id }}">
                              {% for variant in product.available_variants %}
                            	{% assign img_url = '' %}
                                {% for image in product.images %}
                                  {% if image.id == variant.image_id %}
                                  {% assign img_url = image.src | img_url: '300x300' %}
                                  {% endif %}
                                {% endfor %}
                            
                                  <option value="{{ variant.id }}" data-price={{ variant.price | money }} data-image="{{img_url}}">
                                      {{ variant.title }}
                                  </option>
                              {% endfor %}
                          </select>
                    </div>
                    {% else %}
                        <input type="hidden" name="variant" value="{{ product.available_variants[0].id }}" />
                        <!--{{ product.available_variants[0].title }}{% if product.available_variants[0].available_count %} (available: {{ product.available_variants[0].available_count }}){% endif %}-->
                    {% endif %}
                    <dl class="price" data-price="">
                      <div class="price__regular">
                        <dd>
                          <span class="price-item price-item--regular variant-price" data-regular-price="">{{ product.available_variants[0].price | money }}</span>
                        </dd>
                      </div>
                    </dl>  
                    
                    <div class="product-form__item product-form__item--submit">
                      <button type="submit" name="add" class="btn product-form__cart-submit">
                        {% if bundle.current_section.index == 1 %}
                        	{% assign quant_in_bundle = 0 %}
                            {% for variant in product.variants_in_bundle %}
                            {% assign quant_in_bundle = variant.count %}
                            {% endfor %}
                        
                            {% if quant_in_bundle > 0 %}
                        	  <span id="AddToCartText-product-template">Added x{{quant_in_bundle}}</span>
                            {% else %}
                              <span id="AddToCartText-product-template">Add</span>
                            {% endif %}
                        {% else if bundle.current_section.index == 0 or bundle.current_section.index == 2 %}
                        	{% assign quant_in_bundle = 0 %}
                            {% for variant in product.variants_in_bundle %}
                            {% assign quant_in_bundle = variant.count %}
                            {% endfor %}
                        
                            {% if quant_in_bundle > 0 %}
                        	  <span id="AddToCartText-product-template">Added</span>
                            {% else %}
                              <span id="AddToCartText-product-template">Add</span>
                            {% endif %}
                        
                        {% endif %}
                      </button>
          </div>
                {% end_add_to_bundle_form %}
                {% if bundle.current_section.index == 0 %}</div>{% endif %}
 
              </div>
            </li>
        {% endfor %}
    </ul>
  </div>
  {% endunless %}

  {% if bundle.current_section.index == 3 %}
    <div class="page-width webcast-details-form">
      {% assign shipping_product_handle = '' %}
      {% for item in bundle.content.items %}
        {% if item.section.name == 'Delivery' %}
        {% assign shipping_product_handle = item.variant.product.handle %}
        {% endif %}
      {% endfor %}
      <!--<hr class="details_page_break">-->
      <div class="grid grid--uniform shipping_details">
        <div class="page-width mobile_delivery_banner">
          <div class="section-header text-center">
            <h3>
              <span role="text">Delivery/shipping details</span>
            </h3>
            <!--<h5>Need to go back a step? Please note these details will be cleared and you will need to enter them again once you are back on this step.</h5>-->
            <img class="delivery_banner_desktop no-display-mobile" src="https://cdn.shopify.com/s/files/1/0041/0943/4953/files/Transparent_delivery_step_desktop.png?v=1617984457">
        	<img class="delivery_banner_mobile no_desktop_display" src="https://cdn.shopify.com/s/files/1/0041/0943/4953/files/Transparent_delivery_step_mobile.png?v=1617984457">
          </div>
        </div>
        <p class="delivery_block_description text-center">Please complete the below details to select your delivery/shipping option. You will still need to
        enter the full shipping address in checkout. For more information on our delivery and shipping
          options <a href="https://personallypicked.com.au/pages/delivery-and-shipping" target="_blank" style="text-decoration: underline;">click here.</a></p>
        <span class="delivery_block_heading text-center">Type in the delivery postcode or suburb for your gift box below:</span>
        <div class="page-width">
          <div class="section-header text-center postcode_input">
            <!--<input type="search" id="address-input" placeholder="Postcode & Suburb">-->
            <input type="search" id="address-input" placeholder="Postcode or Suburb" class="pac-target-input" autocomplete="off">
            <div class="icon-container">
              <i class="loader-input"></i>
            </div>
			<ul class="drop"></ul>
          </div>
          <div class="section_shipping_product"  {% if shipping_product_handle == '' %}style="display: none;" {% endif %}>
            <p class="shipping_products_heading">Please select one of the below available delivery/shipping options for <span class="selected_postcode"></span></p>
          </div>
        </div>
        <!-- shipping product blocks start -->
        <div class="page-width shipping_products_real hide" id="Collection">
          {% if bundle.current_section.index == 3 %}
          <ul class="grid grid--uniform grid--view-items section_{{bundle.current_section.name | replace: ' ', '_'}}" id="section_{{bundle.current_section.name | replace: ' ', '_'}}">
            {% for product in bundle.current_section.products %}
            {%- assign img_url = product.image.src | img_url: '1x1' | replace: '_1x1.', '_{width}x.' -%}
            <li class="grid__item grid__item--collection-template small--one-half medium-up--one-third {{ product.handle }}">
              <div class="grid-view-item product-card">
                <div class="grid-view-item__image-wrapper product-card__image-wrapper js">
                  <div style="padding-top:100%;">
                    <img class="grid-view-item__image lazyload"
                         src="{{ product.image.src | img_url: '300x300' }}"
                         data-src="{{ img_url }}"
                         data-widths="[180, 360, 540, 720, 900, 1080, 1296, 1512, 1728, 2048]"
                         data-sizes="auto"
                         alt="">
                    <div class="prod-img-overlay"></div>
                  </div>
                </div>
                <div class="h4 grid-view-item__title product-card__title" aria-hidden="true">{{ product.title }}</div>

                <a class="bundle-builder-app--bundle--product--show-more" data-variant-id="{{ product.available_variants[0].id }}" data-section-id="{{ bundle.current_section.index }}" href="/products/{{ product.handle }}" target="_blank" rel="noopener noreferrer" tabindex="0"><span>Product details</span></a>
                {% add_to_bundle_form bundle.current_section %}
                {% if product.available_variants.size > 1 %}
                <div class="selector-wrapper js product-form__item">
                  <select name="variant" class="single-option-selector product-form__input" id="select-{{ bundle.current_section.index }}-{{ product.id }}">
                    {% for variant in product.available_variants %}
                    {% assign img_url = '' %}
                    {% for image in product.images %}
                    {% if image.id == variant.image_id %}
                    {% assign img_url = image.src | img_url: '300x300' %}
                    {% endif %}
                    {% endfor %}

                    <option value="{{ variant.id }}" data-price={{ variant.price | money }} data-image="{{img_url}}">
                      {{ variant.title }}
                    </option>
                    {% endfor %}
                  </select>
                </div>
                {% else %}
                <input type="hidden" name="variant" value="{{ product.available_variants[0].id }}" />
                {% endif %}
                <dl class="price" data-price="">
                  <div class="price__regular">
                    <dd>
                      <span class="price-item price-item--regular variant-price" data-regular-price="">{{ product.available_variants[0].price | money }}</span>
                    </dd>
                  </div>
                </dl>  

                <div class="product-form__item product-form__item--submit">
                  <button type="submit" name="add" class="btn product-form__cart-submit">
                    {% if bundle.current_section.index == 0 or bundle.current_section.index == 3 %}
                    {% assign quant_in_bundle = 0 %}
                    {% for variant in product.variants_in_bundle %}
                    {% assign quant_in_bundle = variant.count %}
                    {% endfor %}

                    {% if quant_in_bundle > 0 %}
                    <span id="AddToCartText-product-template">Added</span>
                    {% else %}
                    <span id="AddToCartText-product-template">Add</span>
                    {% endif %}

                    {% endif %}
                  </button>
                </div>
                {% end_add_to_bundle_form %}

              </div>
            </li>
            {% endfor %}
          </ul>
          <div class="remove_shipping_products hide">
            {% for item in bundle.content.items %}
              {% if item.section.name == 'Delivery' %}
              {% remove_from_bundle_form item %}
              <button type="submit" class="BuildSummary__product-remove remove_{{item.variant.product.handle}}">
                <img src="https://cdn.shopify.com/s/files/1/0041/0943/4953/files/xbutton_2x_9791e0f9-3c98-4b6c-9260-7619cee0002c.png?v=1604077033" alt="">
              </button>
              {% end_remove_from_bundle_form %}
              {% endif %}
            {% endfor %}
          </div>
        </div>
        {% endif %}
        
        <!-- shipping product blocks end -->
        <div class="page-width shipping_checkbox_width">
          <ul class="shipping_list" {% if shipping_product_handle == '' %}style="display: none;" {% endif %}>
            <li class="mothers_day">
              <div class="shipping_checkbox">
                <input type="checkbox" id="mothers_day" class="shipping_checkbox_input" name="check" value="" data-product="mothers-day-delivery" {% if shipping_product_handle == 'mothers-day-delivery' %} checked{% endif %} />
                <label for="mothers_day">
                  <span></span>Mother’s Day Delivery - $15
                </label>
                <p class="shipping_checkbox_p">Local delivery to a Melbourne Metro address on Sunday 9th May (Mother’s Day), between 9am-5pm. <strong>NO PO BOXES.</strong></p>
              </div>
            </li>
            <li class="next_day">
              <div class="shipping_checkbox">
                <input type="checkbox" id="next_day" class="shipping_checkbox_input" name="check" value="" data-product="next-day-delivery" {% if shipping_product_handle == 'next-day-delivery' %} checked{% endif %} />
                <label for="next_day">
                  <span></span>Same Day Delivery - $20
                </label>
                <p class="shipping_checkbox_p">Local delivery to a Melbourne Metro address the day you order, if ordered prior to 11am AEST. We deliver 7 days a week. <strong>NO PO BOXES.</strong></p>
              </div>
            </li>
            <li class="specific_day">
              <div class="shipping_checkbox">
                <input type="checkbox" id="specific_day" class="shipping_checkbox_input" name="check" value="" data-product="specific-day-delivery" {% if shipping_product_handle == 'specific-day-delivery' %} checked{% endif %} />
                <label for="specific_day">
                  <span></span>Specific Day Delivery - $15
                </label>
                <p class="shipping_checkbox_p">Local delivery to a Melbourne Metro address on the day of your choice. We deliver 7 days a week. <strong>NO PO BOXES.</strong></p>
              </div>
            </li>
            <li class="express_day">
              <div class="shipping_checkbox">
                <input type="checkbox" id="express_day" class="shipping_checkbox_input" name="check" value="" data-product="express-shipping" {% if shipping_product_handle == 'express-shipping' %} checked{% endif %} />
                <label for="express_day">
                  <span></span>Express Shipping - $20
                </label>
                <p class="shipping_checkbox_p">Express national shipping via Australia Post. Average delivery 2-4 business days.</p>
              </div>
            </li>
            <li class="standard_day">
              <div class="shipping_checkbox">
                <input type="checkbox" id="standard_day" class="shipping_checkbox_input" name="check" value="" data-product="standard-shipping" {% if shipping_product_handle == 'standard-shipping' %} checked{% endif %} />
                <label for="standard_day">
                  <span></span>Standard Shipping - $10
                </label>
                <p class="shipping_checkbox_p">Standard national shipping via Australia Post. Average delivery 6-12 business days.</p>
              </div>
            </li>
          </ul>
          
        </div>
        <div class="page-width">
          <div class="date_holder"></div>
        </div>
        
      </div> <!-- shipping details block end -->
      
    </div>
  {% endif %}
<!-- nitish speical start -->
<div class="page-width shipping_products_real hide" id="Collection">
	<ul class="grid grid--uniform grid--view-items section_Delivery" id="section_Delivery">
      <li class="grid__item grid__item--collection-template small--one-half medium-up--one-third mothers-day-delivery">
			<div class="grid-view-item product-card">
				<form onsubmit="return false" class="bundle-builder--add-to-bundle-form">
					<input type="hidden" name="section" value="3">
					<input type="hidden" name="variant" value="39312403595347">
					<dl class="price" data-price="">
						<div class="price__regular">
							<dd> <span class="price-item price-item--regular variant-price" data-regular-price="">$15.00</span> </dd>
						</div>
					</dl>
					<div class="product-form__item product-form__item--submit">
						<button type="submit" name="add" class="btn product-form__cart-submit"> <span id="AddToCartText-product-template">Add</span> </button>
					</div>
				</form>
			</div>
		</li>
		<li class="grid__item grid__item--collection-template small--one-half medium-up--one-third next-day-delivery">
			<div class="grid-view-item product-card">
				<form onsubmit="return false" class="bundle-builder--add-to-bundle-form">
					<input type="hidden" name="section" value="3">
					<input type="hidden" name="variant" value="39421940793427">
					<dl class="price" data-price="">
						<div class="price__regular">
							<dd> <span class="price-item price-item--regular variant-price" data-regular-price="">$20.00</span> </dd>
						</div>
					</dl>
					<div class="product-form__item product-form__item--submit">
						<button type="submit" name="add" class="btn product-form__cart-submit"> <span id="AddToCartText-product-template">Add</span> </button>
					</div>
				</form>
			</div>
		</li>
		<li class="grid__item grid__item--collection-template small--one-half medium-up--one-third specific-day-delivery">
			<div class="grid-view-item product-card">
				<form onsubmit="return false" class="bundle-builder--add-to-bundle-form">
					<input type="hidden" name="section" value="3">
					<input type="hidden" name="variant" value="39312403103827">
					<dl class="price" data-price="">
						<div class="price__regular">
							<dd> <span class="price-item price-item--regular variant-price" data-regular-price="">$15.00</span> </dd>
						</div>
					</dl>
					<div class="product-form__item product-form__item--submit">
						<button type="submit" name="add" class="btn product-form__cart-submit"> <span id="AddToCartText-product-template">Add</span> </button>
					</div>
				</form>
			</div>
		</li>
		<li class="grid__item grid__item--collection-template small--one-half medium-up--one-third express-shipping">
			<div class="grid-view-item product-card">
				<form onsubmit="return false" class="bundle-builder--add-to-bundle-form">
					<input type="hidden" name="section" value="3">
					<input type="hidden" name="variant" value="39312403529811">
					<dl class="price" data-price="">
						<div class="price__regular">
							<dd> <span class="price-item price-item--regular variant-price" data-regular-price="">$20.00</span> </dd>
						</div>
					</dl>
					<div class="product-form__item product-form__item--submit">
						<button type="submit" name="add" class="btn product-form__cart-submit"> <span id="AddToCartText-product-template">Add</span> </button>
					</div>
				</form>
			</div>
		</li>
		<li class="grid__item grid__item--collection-template small--one-half medium-up--one-third standard-shipping">
			<div class="grid-view-item product-card">
				<form onsubmit="return false" class="bundle-builder--add-to-bundle-form">
					<input type="hidden" name="section" value="3">
					<input type="hidden" name="variant" value="39312403562579">
					<dl class="price" data-price="">
						<div class="price__regular">
							<dd> <span class="price-item price-item--regular variant-price" data-regular-price="">$10.00</span> </dd>
						</div>
					</dl>
					<div class="product-form__item product-form__item--submit">
						<button type="submit" name="add" class="btn product-form__cart-submit"> <span id="AddToCartText-product-template">Add</span> </button>
					</div>
				</form>
			</div>
		</li>
	</ul>
</div>
<!-- nitish special end -->
  {% if bundle.current_section.index == 4 %}
  <div class="page-width webcast-details-form">
      <div class="grid grid--uniform">
        <form method="post" action="/contact#ContactForm" id="ContactForm" accept-charset="UTF-8" class="contact-form">
          <div class="grid__item one-whole">
            <div class="grid__item medium-up--one-third">
              {% if bundle.content.items.size == 0 %}
              <div class="grid-view-item__image-wrapper">
                <img src="https://cdn.shopify.com/s/files/1/0266/7482/3346/t/2/assets/no-image.png?v=1603732113">
              </div>
              {% else %}
              {% for item in bundle.content.items %}
              {% if item.section.name == 'Card' %}
              <div class="grid-view-item__image-wrapper">
                <img src="{{ item.variant.product.image.src }}">
              </div>
              {% endif %}
              {% endfor %}
              {% endif %}
            </div>
            <div class="grid__item medium-up--two-thirds">
              <div class="contact-form form-vertical">

                <input type="hidden" name="form_type" value="contact">
                <input type="hidden" name="utf8" value="✓">
                <h5>Write your personalised card message</h5>
                <div class="grid grid--half-gutters">
                  <div class="grid__item medium-up--one-half">
                    <label for="ContactForm-name" class="label_to">To*</label>
                    <input type="text" class="check_required" id="ContactForm-name" name="properties[Write your personalised card message:- to]" value="" required>
                    <span class="error-required-span"></span>
                  </div>
                  <div class="grid__item medium-up--one-half">
                    <label for="ContactForm-From" class="label_from">From*</label>
                    <input type="text" class="check_required" id="ContactForm-From" name="properties[Write your personalised card message:- from]" value="" required>
                    <span class="error-required-span"></span>
                  </div>
                </div>

                <label for="ContactForm-message" class="msg_on_card">Message on Card*</label><span class="max-char">(Max 150 characters)</span>
                <textarea rows="5" class="check_required" id="ContactForm-message" name="properties[Message on Card]" required maxlength="150"></textarea>
                <span class="error-required-span ContactForm-message-error"></span>
                <div class="grid grid--half-gutters">
                  <div class="grid__item medium-up--one-whole">
                    <input type="checkbox" id="leave-blank" name="leave-blank" value="">
                    <label for="leave-blank" class="leave-blank-label">Click here and we'll send the card blank and outside the gift box<br/> for you to write yourself!</label>
                  </div>
                </div>
                <!--<input type="submit" class="btn" value="Send">-->
              </div>
            </div>
          </div>

          <div class="grid__item one-whole">
            <div class="grid__item medium-up--one-third">
              {% if bundle.content.items.size == 0 %}
              <div class="grid-view-item__image-wrapper">
                <img src="https://cdn.shopify.com/s/files/1/0266/7482/3346/t/2/assets/no-image.png?v=1603732113">
              </div>
              {% else %}
              {% for item in bundle.content.items %}
              {% if item.section.name == 'Gift Box' %}
              <div class="grid-view-item__image-wrapper">
                <img src="{{ item.variant.product.image.src }}">
              </div>
              {% endif %}
              {% endfor %}
              {% endif %}
            </div>
            <div class="grid__item medium-up--two-thirds">
              <div class="contact-form form-vertical">
                <h5>Personalise your gift box</h5>
                <div class="grid grid--half-gutters">
                  <div class="grid__item medium-up--one-whole">
                    <label for="ContactForm-giftbox">Name on the top of your gift box*: (limit to 20 characters)</label>
                    <input type="text" class="check_required" id="ContactForm-giftbox" name="properties[Name on the top of your gift box]" value="" required maxlength="20">
                    <span class="error-required-span"></span>
                  </div>
                </div>
                <!--<input type="submit" class="btn" value="Send">-->
              </div>
            </div>
          </div>
          
          <div class="grid__item one-whole">
            <div class="grid__item medium-up--one-third">
              <div class="grid-view-item__image-wrapper">
                <img src="https://cdn.shopify.com/s/files/1/0041/0943/4953/files/123714650_363991081500282_8134025020839606701_n_1.png?v=1604759654">
              </div>
            </div>
            <div class="grid__item medium-up--two-thirds">
              <div class="contact-form form-vertical">
                <h5>Do Not Open Sticker</h5>
                <div class="grid grid--half-gutters">
                  <div class="grid__item medium-up--one-whole">
                    <label for="ContactForm-name">Would you like a ‘Do Not Open Until _______’ sticker on the outside of your gift box?</label>
                    
                    <div class="one-whole">
                        <p>This means if your gift box is for a specific occasion and arrives early, the recipient will know not to open the gift box until the date you choose!</p>
                      </div>
                      <div class="medium-up--one-whole date_picker_bundle">
                        <div class="grid__item one-half">
                          <input type="checkbox" class="radioCheck" id="yes_date" name="yes_date" value="" onclick="check(this);">
                          <label for="yes_date" class="leave-blank-label">Yes</label>
                        </div>

                        <div class="grid__item one-half">
                          <input type="checkbox" class="radioCheck" id="no_date" name="yes_date" value="" onclick="check(this);">
                          <label for="no_date" class="leave-blank-label">No</label>
                        </div>

                        <div class="medium-up--one-whole date_sticker_hide">
                          <label for="ContactForm-name">Date on sticker:</label>
                          <input type="date" id="start" name="properties[Sticker date]" value="">
                        </div>
                      </div>

                  </div>
                </div>
                <!--<input type="submit" class="btn" value="Send">-->
              </div>
            </div>
          </div>
        </form>
      </div> <!-- Detail form end -->
      
  </div>
  {% endif %}
<span class="error-webcast" style="display:none;">
  {% if bundle.errors.size > 0 %}
    <ul>
      {% assign gift_box_error = false %}
      {% assign items_error = false %}
      {% assign card_error = false %}
      {% for error in bundle.errors %}
      {% if error contains 'Gift Box' %}
      {% assign gift_box_error = true %}
      {% endif %}
      {% if error contains 'Items' %}
      {% assign items_error = true %}
      {% endif %}
      {% if error contains 'Card' %}
      {% assign card_error = true %}
      {% endif %}
      <li>{{ error }}</li>
      {% endfor %}
      
      {% if gift_box_error %}
      <input type="hidden" id="gift_box_error" value="1"/>
      {% else %}
      <input type="hidden" id="gift_box_error" value="0"/>
      {% endif %}
      
      {% if items_error %}
      <input type="hidden" id="items_error" value="1"/>
      {% else %}
      <input type="hidden" id="items_error" value="0"/>
      {% endif %}
      
      {% if card_error %}
      <input type="hidden" id="card_error" value="1"/>
      {% else %}
      <input type="hidden" id="card_error" value="0"/>
      {% endif %}
    </ul>
  {% else %}
  <input type="hidden" id="gift_box_error" value="0"/>
  <input type="hidden" id="items_error" value="0"/>
  <input type="hidden" id="card_error" value="0"/>
  {% endif %}
</span>

  {% if settings.note_enabled %}
    <div class="note-field--container" style="display:none;">
      <label>{{ settings.note_label }}{% if settings.note_required %} (required){% endif %}</label>
      {% note_field %}{{ settings.note_text }}{% end_note_field %}
    </div>
  {% endif %}
{% else %}
    <p>Sorry, this bundle is currently unavailable.</p>
{% endif %}

<script>
  jQuery(document).ready(function($){
    $("#leave-blank").change(function() {
      if(this.checked) {
        $('.max-char').hide();
        $('.label_to').text('To');
        $('.label_from').text('From');
        $('.msg_on_card').text('Message on Card');
        $('#ContactForm-message').removeAttr("maxlength");
        $('#ContactForm-name').removeAttr("required");
        $('#ContactForm-From').removeAttr("required");
        $('#ContactForm-message').removeAttr("required");
      }
      else {
        $('.max-char').show();
        $('.label_to').text('To*');
        $('.label_from').text('From*');
        $('.msg_on_card').text('Message on Card*');
        $('#ContactForm-message').attr("maxlength", "150");
        $('#ContactForm-name').prop('required',true);
        $('#ContactForm-From').prop('required',true);
        $('#ContactForm-message').prop('required',true);
      }
    });
    
    $("#yes_date").change(function() {
      if(this.checked) {
        $('.date_sticker_hide').show();
      }
      else {
        $('.date_sticker_hide').hide();
      }
    });
    $("#no_date").change(function() {
      if(this.checked) {
        $('.date_sticker_hide').hide();
      }
      else {
        $('.date_sticker_hide').hide();
      }
    });
    
    //sticky top bar
    var div_top = $('.webcast-top-bundle').offset().top;
    
  });
  
  function check(input)
  {

    var checkboxes = document.getElementsByClassName("radioCheck");

    for(var i = 0; i < checkboxes.length; i++)
    {
      //uncheck all
      if(checkboxes[i].checked == true)
      {
        checkboxes[i].checked = false;
      }
    }

    //set checked of clicked object
    if(input.checked == true)
    {
      input.checked = false;
    }
    else
    {
      input.checked = true;
    } 
  }
</script>
{% unless bundle.current_section.index == 3 %}
<script>
document.querySelector('.collection-header').style.display = "block";  
</script>
{% endunless %}
{% if bundle.current_section.index == 3 %}
 
<script>
  //var post_code = '3053|3054|3008|3002|3031|3000|3004|3051|3052|3207|3006|3141|3003|3206|3183|3184|3004|3206|3207|3185|3182|3183|3182|3006|3205|3006|3067|3078|3121|3054|3068|3066|3121|3078|3065|3068|3054|3121|3081|3088|3083|3084|3095|3095|3084|3081|3079|3079|3093|3085|3094|3084|3088|3084|3087|3087|3085|3078|3083|3058|3058|3078|3083|3085|3070|3072|3073|3071|3049|3047|3061|3048|3064|3047|3043|3059|3047|3036|3048|3045|3064|3062|3043|3049|3429|3428|3427|3056|3057|3055|3058|3060|3046|3043|3046|3044|3043|3089|3095|3095|3088|3099|3113|3090|3095|3096|3754|3083|3076|3075|3754|3082|3752|3074|3750|3147|3103|3104|3124|3126|3103|3146|3122|3123|3101|3102|3127|3127|3153|3178|3179|3105|3108|3109|3111|3114|3106|3107|3113|3134|3131|3134|3136|3135|3130|3128|3129|3128|3125|3151|3131|3132|3127|3127|3133|3133|3160|3116|3193|3186|3187|3192|3185|3188|3190|3191|3189|3175|3175|3174|3171|3201|3204|3165|3162|3145|3161|3162|3163|3185|3185|3163|3204|3163|3204|3183|3195|3195|3196|3195|3196|3196|3192|3169|3172|3196|3202|3190|3194|3189|3194|3195|3195|3197|3195|3147|3125|3148|3168|3150|3166|3166|3800|3149|3170|3168|3166|3166|3167|3150|3143|3146|3144|3145|3181|3141|3142|3181|3021|3020|3022|3012|3023|3023|3037|3030|3037|3021|3036|3038|3033|3038|3036|3042|3021|3020|3037|3038|3018|3028|3025|3012|3028|3015|3015|3028|3018|3015|3016|3019|3011|3012|3032|3011|3012|3013|3040|3042|3032|3034|3040|3041|3041|3040|3031|3033|3039|3042|3041|3041|3032|3029|3028|3026|3024|3030|3029|3030|3030|3027|3024',
  var post_code = '3000|3002|3003|3004|3005|3006|3008|3010|3011|3012|301|3015|3016|3018|3019|3020|3021|3022|3023|3025|3026|3027|3050|3051|3052|3053|3054|3055|3056|3057|3058|3059|3060|3061|3062|3063|3064|3065|3066|3067|3068|3070|3071|3072|3073|3074|3075|3076|3078|3079|3081|3082|3083|3084|3085|3086|3087|3088|3090|3093|3094|3095|3101|3102|3103|3104|3105|3106|3107|3108|3109|3111|3113|3114|3121|3122|3123|3124|3125|3126|3127|3128|3129|3130|3131|3132|3133|3134|3135|3136|3137|3141|3142|3143|3144|3145|3146|3147|3148|3149|3150|3151|3152|3153|3155|3156|3161|3162|3163|3165|3166|3167|3168|3169|3170|3171|3172|3173|3174|3175|3177|3178|3179|3180|3181|3182|3183|3184|3185|3186|3187|3188|3189|3190|3191|3192|3193|3194|3195|3196|3197|3202|3204|3205|3206|3207|3428|3752|3800|3802|3803|3975|3976|3028|3029|3030|3031|3032|3033|3034|3036|3037|3038|3039|3040|3041|3042|3043|3044|3045|3046|3047|3048|3049|3042|3040|3041|3043|3044|3045|3046|3047|3048|3049|3013',
  post_code_split = post_code.split('|'),
  post_code_array = [];
  var post_code_array = post_code_array.concat(post_code_split);
  
  document.querySelector('.collection-header').style.display = "none";
  
  $(document).ready(function(){
    
    $("#address-input").on("search keyup", function(evt){
      var maxLength = 4;
      //if(maxLength == $(this).val().length) {
      if($(this).val().length > 3){
        ajaxFetchPostCode($(this).val());
      }
      else{
        $('.drop').html('').hide();
        var shipping_products_heading = document.querySelector(".section_shipping_product");
        shipping_products_heading.style.display = "none";
        var shipping_list_block = document.querySelector(".shipping_list");
        shipping_list_block.style.display = "none";
      }
    });
    $(document).on("click", 'ul.drop li', function() {
      var postcode = $(this).attr('data-id');
      var placeText = $(this).text();
      $('.pac-target-input').val(placeText);
      var $address = document.querySelector('.selected_postcode');
      $address.textContent = placeText;
      $('.drop').html('').hide();
      var shipping_products_heading = document.querySelector(".section_shipping_product");
      var shipping_list_block = document.querySelector(".shipping_list");
      var date_block = document.querySelector(".date_holder");
      if (shipping_products_heading.style.display === "none") {
        shipping_products_heading.style.display = "block";
      } 
      if (shipping_list_block.style.display === "none") {
        shipping_list_block.style.display = "block";
      } 
      
      var match_postcode = false;
      for (var k in post_code_array) {
        if (!post_code_array.hasOwnProperty(k)) continue;
        if (post_code_array[k] === postcode) {
          var match_postcode = true;
        }
      }
      if (match_postcode) {
        document.querySelector(".mothers_day").style.display = "block";
        document.querySelector(".next_day").style.display = "block";
        document.querySelector(".specific_day").style.display = "block";
        document.querySelector(".date_holder").style.display = "block";
      } else {
        document.querySelector(".mothers_day").style.display = "none";
        document.querySelector(".next_day").style.display = "none";
        document.querySelector(".specific_day").style.display = "none";
        document.querySelector(".date_holder").style.display = "none";
      }
    });
    /*function ajaxFetchPostCode($postcode){
      $('.icon-container').show();
      $.ajax({
        url: "https://personallypicked.herokuapp.com",
        type: "GET",
        dataType: 'html',
        crossDomain: true,
        data: {"q" : $postcode},
        success: function (data) {
          $('.drop').html(data).show();
          $('.icon-container').hide();
        },
        error: function(xhr, status, error){
          alert('Postcode is not from Australia.');
          $('.icon-container').hide();
        }
      });
    }*/
    function ajaxFetchPostCode($postcode){
      $('.icon-container').show();
      $.ajax({
        url: "https://pick.p2l.site/wp-admin/admin-ajax.php",
        type: "POST",
        dataType: 'html',
        crossDomain: true,
        data: {"action": "get_address_details_live", "address" : $postcode},
        success: function (data) {
           
          $('.drop').html(data).show();
          $('.icon-container').hide();
        },
        error: function(xhr, status, error){
          alert('Postcode is not from Australia.');
          $('.icon-container').hide();
        }
      });
    }
  });
</script>
{% endif %}