Untitled
unknown
plain_text
4 years ago
74 kB
4
Indexable
<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 %}Editor is loading...