Skip to content

Instantly share code, notes, and snippets.

@boldsupport
Last active October 11, 2017 14:44
Show Gist options
  • Save boldsupport/86ff6e5b57915caddca933a2addae936 to your computer and use it in GitHub Desktop.
Save boldsupport/86ff6e5b57915caddca933a2addae936 to your computer and use it in GitHub Desktop.
<div id="bold-loyalties-shipping-modal">
<form action="https://loy.boldapps.net/front_end/redeem" method="POST">
<input type="hidden" name="domain" value="{{shop.permanent_domain}}"/>
<input type="hidden" name="uuid" value="{{customer.metafields.bold_loyalties.uuid}}"/>
<input type="hidden" name="variant_id" id="bold_loyalties_redeem_variant" value=""/>
<input type="hidden" name="product_id" value="{{product.id}}"/>
<div class="section__header">
<a href="#" class="bold-modal-close-btn">x</a>
<h3>{{shop.metafields.bold_loyalties.modal_heading}}</h3>
<p class="bold-success">{{shop.metafields.bold_loyalties.modal_thank_you_message}}</p>
</div>
<div class="section__body">
<div class="fieldset" id="shipping-address">
<h4>{{shop.metafields.bold_loyalties.modal_shipping_message}}</h4>
<div class="field field--required field--error shipping-address-errors" style="display:none;"><span class="field__error-message shipping-address-errors-text" style="padding: 20px 10px 20px 0;"></span></div>
<div class="field field--optional">
<label for="checkout_shipping_address_first_name">First name</label>
<input required autocomplete="shipping given-name" id="checkout_shipping_address_first_name" name="first_name_shipping" size="30" type="text" class="address_info" value="{{customer.default_address.first_name}}">
</div>
<div class="field field--required">
<label for="checkout_shipping_address_last_name">Last name</label>
<input required autocomplete="shipping family-name" id="checkout_shipping_address_last_name" name="last_name_shipping" size="30" type="text" class="address_info" value="{{customer.default_address.last_name}}">
</div>
<div class="field">
<label for="checkout_shipping_address_company">Company</label>
<input id="checkout_shipping_address_company" name="company" size="30" type="text" class="company" value="{{customer.default_address.company}}">
</div>
<div class="field field--required">
<label for="checkout_shipping_address_address1">Address</label>
<input required autocomplete="shipping address-line1" id="checkout_shipping_address_address1" name="address1_shipping" size="30" type="text" class="address_info" value="{{customer.default_address.address1}}">
</div>
<div class="field field--optional">
<label for="checkout_shipping_address_address2">Apt, suite, etc.</label>
<input autocomplete="shipping address-line2" id="checkout_shipping_address_address2" name="address2_shipping" size="30" type="text" value="{{customer.default_address.address2}}">
</div>
<div class="field field--required">
<label for="checkout_shipping_address_city">City</label>
<input required autocomplete="shipping locality" id="checkout_shipping_address_city" name="city_shipping" size="30" type="text" class="address_info" value="{{customer.default_address.city}}">
</div>
<div class="field field--required">
<label for="checkout_shipping_address_country">Country</label>
<select required autocomplete="shipping country" data-country-field="1" id="checkout_shipping_address_country" name="country_shipping" size="1" class="address_info country">
{{country_option_tags}}
</select>
</div>
<div class="field field--required">
<label>Province</label>
<select name="province_shipping" class="address_info province">
<option value="" selected=""> -- Please Select --</option>
</select>
</div>
<div class="field field--required">
<label data-zip-label="1" for="checkout_shipping_address_zip">ZIP/Postal Code</label>
<input required autocomplete="shipping postal-code" class="postal-code address_info" data-zip-field="1" id="checkout_shipping_address_zip" name="zip_shipping" size="30" type="text" value="{{customer.default_address.zip}}">
</div>
<div class="field field--optional">
<label for="checkout_shipping_address_phone">Phone</label>
<input autocomplete="shipping tel" id="checkout_shipping_address_phone" name="phone_shipping" size="30" type="tel" value="{{customer.default_address.phone}}">
</div>
</div>
<div class="fieldset" id="shipping-address-collapsed">
<a href="#" class="shipping-edit-btn">Edit</a>
<strong>{{customer.default_address.first_name}} {{customer.default_address.last_name}}</strong><br/>
{{customer.default_address.address1}} {{customer.default_address.address2}}<br/>
{{customer.default_address.city}}, {{customer.default_address.province}}, {{customer.default_address.country}} {{customer.default_address.zip}}
</div>
<div class="redeem-product-info">
<table>
<tr>
<td class="text-left">
<img class="product-img" width="60">
<p class="product-name"></p>
</td>
<td>
<span class="product-points"></span>
</td>
</tr>
<tr>
<td><label class="label-shipping">Shipping</label></td>
<td class="total-shipping">Calculating...</td>
</tr>
<tr>
<td><label>Total</label></td>
<td class="total">Calculating...</td>
</tr>
<tr class="balance-after-purchase">
<td><label>Balance After Purchase</label></td>
<td><span class="remaining-balance">Calculating...</span></td>
</tr>
</table>
</div>
<div class="call-to-action">
<a href="#" class="btn btn--secondary bold-modal-close-btn">Cancel</a>
<input class="btn continue_btn" type="submit" name="submit" value="Buy">
</div>
</div>
<div class="bold-success bold-success-buttons">
<a href="/account" class="btn btn--secondary">View My Account</a>
<a href="/collections/all" class="btn">Continue Shopping</a>
</div>
</form>
</div>
<script src="https://loy.boldapps.net/app_assets/js/client/countries.js"></script>
<script>
(function($){
$('#checkout_shipping_address_country').change(function () {
var country = $(this).val();
var country = window.Countries[country];
var zipElement = $('.address_info.postal-code');
var provinceDropdown = $('.address_info.province');
provinceDropdown.empty();
if(!country.zip_required) {
zipElement.val('');
zipElement.attr('required', false);
zipElement.parent().hide();
} else {
zipElement.attr('required', true);
zipElement.parent().show();
}
if(!country || !country.provinces || country.provinces.length === 0) {
provinceDropdown.val('');
provinceDropdown.parent().hide();
return;
} else {
provinceDropdown.parent().show();
}
$.each(country.provinces, function (index, province) {
var selected = '';
if (province === '{{customer.default_address.province}}') {
selected = " selected";
}
provinceDropdown.append("<option" + selected + ">" + province + "</option>");
});
});
{% if customer.default_address.country %}
$('#checkout_shipping_address_country').val('{{customer.default_address.country}}');
{% endif %}
$('#checkout_shipping_address_country').trigger('change');
})(jQuery);
</script>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment