Last active
April 28, 2024 09:55
-
-
Save DxPoly/51f53f423fa5a7292e71d04b3c39c62e to your computer and use it in GitHub Desktop.
对比 demo cart.liquid
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <!-- /sections/cart.liquid --> | |
| {%- liquid | |
| assign hide_quantity = 'quantity--hide' | |
| if settings.cart_show_quantity | |
| assign hide_quantity = '' | |
| endif | |
| assign ajax_disable = false | |
| assign no_ajax_class = '' | |
| if settings.cart_style == 'compatible' | |
| assign ajax_disable = true | |
| assign no_ajax_class = 'no--ajax' | |
| endif | |
| assign full_init = '' | |
| assign empty_init = 'cart--hidden' | |
| if cart.item_count == 0 | |
| assign empty_init = '' | |
| assign full_init = 'cart--hidden' | |
| endif | |
| assign is_us_store = false | |
| if localization.country.iso_code == 'US' | |
| assign is_us_store = true | |
| endif | |
| -%} | |
| {% assign checkHadSubscribe = false %} | |
| {% for line_item in cart.items %} | |
| {% if line_item.selling_plan_allocation %} | |
| {% assign checkHadSubscribe = true %} | |
| {%- endif -%} | |
| {% endfor %} | |
| {%- if checkHadSubscribe or is_us_store and cart.item_count != 0 -%} | |
| <div class="page-width mb10 wrapper section-padding" id="customer-simple-register" style="display:none;"> | |
| <h3 class="cart__page__title body-size-8" style="text-align: center; margin-top: 35px;">{{ 'abovegem.create_account' | t }}</h3> | |
| <div class="s-reg-wrap"> | |
| <div class="mb10 w520 relative fIWrap"> | |
| <div class="flex" id="r-g-role"> | |
| <input type="checkbox" style="margin-right:5px;" id="retail-create-account-cb" /> | |
| <span>{{ 'abovegem.register_customer_title' | t }}</span> | |
| </div> | |
| </div> | |
| <div class="mb10 w520 relative fIWrap"> | |
| <div id="d-p-role"> | |
| <span>Role:</span> <span id="currentRole">Business Partner</span> | |
| </div> | |
| </div> | |
| <div class="mb10 w520 relative fIWrap"> | |
| <span class="hide">{{ 'abovegem.username' | t }}</span> | |
| <div class="relative usernameWrap"> | |
| <input type="text" class="w100p regInput regUsername mb5" placeholder="" required="" /> | |
| <span class="tip-required">{{ 'abovegem.username' | t }}</span> | |
| <p class="errorTips hide"></p> | |
| <div class="tips"> | |
| <p>{{ 'abovegem.username_rule_tips1' | t }}</p> | |
| <p>{{ 'abovegem.username_rule_tips2' | t }}</p> | |
| <p>{{ 'abovegem.username_rule_tips3' | t }}</p> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="mb10 w520 relative fIWrap"> | |
| <span class="hide">{{ 'abovegem.recognition_name' | t }}</span> | |
| <div> | |
| <input type="text" class="w100p regInput regRecognitionName mb5" placeholder="" required="" /> | |
| <span class="tip-required no-required">{{ 'abovegem.recognition_name' | t }}</span> | |
| <p class="errorTips hide"></p> | |
| </div> | |
| </div> | |
| <div class="mb10 w520 flex namewrap" style="justify-content: space-between;"> | |
| <div class="mb10 relative fIWrap" style="margin-right: 10px;flex:1;"> | |
| <span class="hide">{{ 'abovegem.first_name' | t }}</span> | |
| <div> | |
| <input type="text" class="w100p regInput regFirstName mb5" placeholder="" required="" /> | |
| <span class="tip-required">{{ 'abovegem.first_name' | t }}</span> | |
| <p class="errorTips hide"></p> | |
| </div> | |
| </div> | |
| <div class="mb10 relative fIWrap" style="flex:1;"> | |
| <span class="hide">{{ 'abovegem.last_name' | t }}</span> | |
| <div> | |
| <input type="text" class="w100p regInput regLastName mb5" placeholder="" required="" /> | |
| <span class="tip-required">{{ 'abovegem.last_name' | t }}</span> | |
| <p class="errorTips hide"></p> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="mb10 w520 relative fIWrap"> | |
| <span class="hide">{{ 'abovegem.email' | t }}</span> | |
| <div> | |
| <input type="text" class="w100p regInput regEmail mb5" placeholder="" required="" /> | |
| <span class="tip-required">{{ 'abovegem.email' | t }}</span> | |
| <p class="errorTips hide"></p> | |
| </div> | |
| </div> | |
| <div class="mb10 w520 relative fIWrap"> | |
| <span class="hide">{{ 'abovegem.birthday' | t }}</span> | |
| <div> | |
| <input type="text" class="w100p regInput regBirthday mb5" placeholder="" id="regBirthday" required="" /> | |
| <span class="tip-required">{{ 'abovegem.birthday' | t }}</span> | |
| <p class="errorTips hide"></p> | |
| </div> | |
| </div> | |
| <!-- <div class="mb10 w520 relative fIWrap" style="display: none;"> | |
| <span class="hide">Social Security Number</span> | |
| <div> | |
| <input type="text" class="w100p regInput regSSN mb5" placeholder="" required="" /> | |
| <span class="tip-required">Social Security Number</span> | |
| <p class="errorTips hide"></p> | |
| </div> | |
| </div> --> | |
| <div class="mb10 w520 flex fpwdwrap" style="justify-content: space-between;"> | |
| <div class="mb10 relative fIWrap" style="margin-right: 10px;flex:1;"> | |
| <span class="hide">{{ 'abovegem.password' | t }}</span> | |
| <div> | |
| <input type="password" class="w100p regInput regPwd mb5" placeholder="" required="" /> | |
| <span class="tip-required">{{ 'abovegem.password' | t }}</span> | |
| <p class="errorTips hide"></p> | |
| </div> | |
| </div> | |
| <div class="mb10 relative fIWrap" style="flex:1;"> | |
| <span class="hide">{{ 'abovegem.confirm_password' | t }}</span> | |
| <div> | |
| <input type="password" class="w100p regInput regConfPwd mb5" placeholder="" required="" /> | |
| <span class="tip-required">{{ 'abovegem.confirm_password' | t }}</span> | |
| <p class="errorTips hide"></p> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- <div class="mb10 w520 relative fIWrap"> | |
| <span class="hide">{{ 'abovegem.phone' | t }}</span> | |
| <div class="relative"> | |
| <input type="text" class="w100p regInput regPhone mb1" placeholder="{{ 'abovegem.phone' | t }}" required="" style="" /> | |
| <p style="position: absolute;top: 14px;font-size: 1.1rem;left: 3px;display: none;">+1</p> | |
| <p style="font-size:12px;">{{ 'abovegem.phone_tips' | t }}</p> | |
| <p class="errorTips hide"></p> | |
| </div> | |
| </div> --> | |
| <div class="mb10 w520 relative fIWrap"> | |
| <span class="hide affiliate">{{ 'abovegem.sponsor_id' | t }}</span> | |
| <div class="relative"> | |
| <input type="text" class="w100p regInput regSponsorId mb5" data-affiliate="" placeholder="" /> | |
| <span class="tip-required">{{ 'abovegem.affiliate_id' | t }}</span> | |
| <a href="javascript:;" style="font-size: 12px;text-decoration: underline;position: absolute;right: 5px;top: 10px;" class="regFindMySponsor hide">{{ 'abovegem.find_my_sponsor' | t }}</a> | |
| <a href="javascript:;" style="font-size: 12px;text-decoration: underline;position: absolute;right: 0;top: 49px;" class="regNoSponsor hide" data-affiliate="{{ 'abovegem.i_do_not_have_affiliate' | t }}">{{ 'abovegem.i_do_not_have_sponsor' | t }}</a> | |
| <p class="errorTips hide"></p> | |
| </div> | |
| </div> | |
| <!-- <div class="mb10 mt10 w520 relative fIWrap"> | |
| <span class="hide">Referral ID</span> | |
| <div class="relative"> | |
| <input type="text" class="w100p regInput regReferralId mb5" placeholder="Referral ID" /> | |
| <span class="tip-required">Referral ID</span> | |
| <a href="javascript:;" style="font-size: 12px;text-decoration: underline;position: absolute;right: 5px;top: 10px;" class="regFindMyReferral hide">find my referral</a> | |
| <p class="errorTips hide"></p> | |
| </div> | |
| </div> --> | |
| <div class="mb10 w520 relative fIWrap flex agreement-wrap"> | |
| <div> | |
| {%- render 'agreement' -%} | |
| </div> | |
| <div class="flex" style="margin-top: 10px;justify-content: space-between;"> | |
| <div class="flex"> | |
| <input type="checkbox" class="" id="accept-agreement" /> | |
| <span style="margin-left: 6px;font-size: 18px;">{{ 'abovegem.accept_the_agreement' | t }}</span> | |
| </div> | |
| <div><a target="_blank" style="text-decoration: underline;" href="https://backoffice.liferegen.com/upload/company_document/9/Business_Partner_Agreement_v.3_PDF_-_4882-0476-0177_1.pdf">Download</a></div> | |
| </div> | |
| </div> | |
| <div class="mb10 w520 relative fIWrap text-right"> | |
| <button type="submit" name="checkout" class="btn btn--primary btn--large checkout__button" form="reg__cart__form"> | |
| {{ 'cart.general.checkout' | t }} | |
| </button> | |
| </div> | |
| </div> | |
| </div> | |
| <div id="popup-change-role"> | |
| <div class="a1"> | |
| <div style="font-size: 15px;margin-bottom: 30px;">{{ 'abovegem.role_change_tips' | t }}</div> | |
| <div style="margin-top: 20px;"> | |
| <button type="button" style="width: 100px;height: 36px;font-size: 16px;color: #000;font-weight: 600;" id="selectChangeRoleBtn">{{ 'abovegem.confirmed' | t }}</button> | |
| <button id="cancelRoleCodeChange" type="button" style="width: 100px;height: 36px;font-size: 16px;color: #000;font-weight: 600;">{{ 'abovegem.cancel' | t }}</button> | |
| </div> | |
| </div> | |
| </div> | |
| <style> | |
| .flex{display: flex;} | |
| .flex1{flex:1;} | |
| .flex-row{flex-direction: row !important;} | |
| .items-center{align-items: center;} | |
| .w520{width: 520px;} | |
| .w100p{width:100%;} | |
| .h48{height:48px;} | |
| .border-right{border-right: 1px solid var(--COLOR-A20);} | |
| .flex-items-end{align-items: flex-end !important;} | |
| .text-right{text-align: right !important;} | |
| .mb1{margin-bottom:1px !important;} | |
| .mb5{margin-bottom:5px !important;} | |
| .mb10{margin-bottom:10px;} | |
| .mt10{margin-top: 10px;} | |
| .ml10{margin-left:10px;} | |
| .hide{display:none;} | |
| .relative{position: relative;} | |
| .regInput{font-size: 18px;padding: 15px 18px 10px 10px;height: 48px;} | |
| .fIWrap span.tip-required { | |
| position: absolute; | |
| top: 16px; | |
| left: 0; | |
| z-index: 1; | |
| padding-left: 10px; | |
| font-size: 16px; | |
| color: #888888; | |
| pointer-events: none; | |
| transition: all 0.1s; | |
| } | |
| .tip-required::after { | |
| content: '*'; | |
| color: #ff0000; | |
| margin-left: 2px; | |
| } | |
| .no-required::after { | |
| content: ''; | |
| } | |
| .spanTips{position: absolute;top: 0;left: 10px;font-size: 12px;z-index: 1;color:#707070;} | |
| .errorTips{color:red;} | |
| .txtColor{color:#2b2626 !important;} | |
| .s-reg-wrap{display:flex;flex-direction: column;align-items: center;} | |
| input[type="date"]{ | |
| border: 1px solid var(--border); | |
| width: 100%; | |
| max-width: 100%; | |
| display: block; | |
| margin: 0 0 1em; | |
| background-color: transparent; | |
| outline: none; | |
| color: var(--text-dark); | |
| } | |
| .flatpickr-monthDropdown-months{display: inline-block !important;} | |
| .usernameWrap .tips{ | |
| display: none; | |
| position: absolute; | |
| left: 0; | |
| top: 50px; | |
| border: 1px solid #ccc; | |
| width: 100%; | |
| border-radius: 5px; | |
| z-index: 1000; | |
| padding: 10px; | |
| background-color: #fff; | |
| } | |
| .usernameWrap.focus .tips{display: block !important;} | |
| .agreement-wrap{ | |
| flex-direction: column; | |
| border: 1px solid #f1f1f1; | |
| padding: 10px; | |
| margin-top: 20px; | |
| background-color: #f1f1f1; | |
| } | |
| .agreement-wrap h1{ | |
| font-size: 17px; | |
| font-weight: 600; | |
| } | |
| .agreement-wrap h2{ | |
| font-size: 14px; | |
| font-weight: 600; | |
| } | |
| .agreement-wrap h3{ | |
| font-size: 13px; | |
| font-weight: 600; | |
| } | |
| #popup-change-role{ | |
| position: fixed; | |
| width: 100%; | |
| height: 100%; | |
| top: 0; | |
| left: 0; | |
| right: 0; | |
| bottom: 0; | |
| background-color: #000; | |
| z-index: 9999; | |
| opacity: 0.9; | |
| display: none; | |
| justify-content: center; | |
| align-items: center; | |
| } | |
| #popup-change-role .a1{ | |
| position: relative; | |
| z-index: 1000; | |
| width: 400px; | |
| background-color: #fff; | |
| padding: 20px; | |
| display: flex; | |
| flex-direction: column; | |
| align-items: center; | |
| border-radius: 15px; | |
| color: #000; | |
| font-size: 18px; | |
| font-weight: 600; | |
| } | |
| @media only screen and (max-width: 530px) { | |
| .w520 { width: 100%; } | |
| .fpwdwrap{flex-direction: column;} | |
| .fpwdwrap .fIWrap:first-child{margin-right:0 !important;} | |
| #customer-simple-register{padding: 0 25px;} | |
| } | |
| </style> | |
| <!-- <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/flatpickr/dist/flatpickr.min.css"> | |
| <script src="https://cdn.jsdelivr.net/npm/flatpickr" defer></script> --> | |
| <script> | |
| function __getCoookieVal__(sKey) { | |
| return decodeURIComponent(document.cookie.replace(new RegExp("(?:(?:^|.*;)\\s*" + encodeURIComponent(sKey).replace(/[-.+*]/g, "\\$&") + "\\s*\\=\\s*([^;]*).*$)|^.*$"), "$1")) || null; | |
| } | |
| function __showButtonBasedOnRoleCode(roleCode) { | |
| if (roleCode === 'D') { | |
| $('.continue__button').show(); | |
| $('.first__checkout__button').hide(); | |
| } else { | |
| $('.first__checkout__button').show(); | |
| $('.continue__button').hide(); | |
| } | |
| } | |
| window._requestSponsorResultfn_ = function(res, obj) { | |
| var roleCode = window.__getCoookieVal__('ckRoleCode'); | |
| if(res && res.data) { | |
| if(roleCode === 'D') { | |
| if(res.data.roleCode === 'D') { | |
| $('.regSponsorId').val(res.data.id); | |
| $('.regFindMySponsor').remove(); | |
| $('.regNoSponsor').remove(); | |
| $('.regSponsorId').trigger('focusout'); | |
| $('.regSponsorId').prop('disabled', true); | |
| } else if(res.data.roleCode === 'P') { | |
| $('.regSponsorId').val(res.data.sponsorId); | |
| $('.regReferralId').val(res.data.id); | |
| $('.regFindMySponsor').remove(); | |
| $('.regNoSponsor').remove(); | |
| $('.regSponsorId').trigger('focusout'); | |
| $('.regSponsorId').prop('disabled', true); | |
| } | |
| } else { | |
| if(res.data.roleCode === 'D') { | |
| $('.regSponsorId').val(res.data.id); | |
| $('.regReferralId').val(res.data.id); | |
| $('.regFindMyReferral').remove(); | |
| $('.regReferralId').trigger('focusout'); | |
| $('.regReferralId').prop('disabled', true); | |
| } else if(res.data.roleCode === 'P') { | |
| $('.regSponsorId').val(res.data.sponsorId); | |
| $('.regReferralId').val(res.data.id); | |
| $('.regFindMyReferral').remove(); | |
| $('.regReferralId').trigger('focusout'); | |
| $('.regReferralId').prop('disabled', true); | |
| } | |
| } | |
| } else { | |
| if(roleCode === 'D' || roleCode === 'P') { | |
| if(roleCode === 'D') { | |
| $('.regFindMySponsor').removeClass('hide'); | |
| $('.regNoSponsor').removeClass('hide'); | |
| } | |
| if(roleCode === 'P') { | |
| $('.regFindMyReferral').removeClass('hide'); | |
| } | |
| } else { | |
| $('.regFindMySponsor').removeClass('hide'); | |
| $('.regNoSponsor').removeClass('hide'); | |
| } | |
| } | |
| window._requestSponsorResultfn_ = null; | |
| }; | |
| window._getUserInfoSuccessCallbackFn_ = function(isLogin, obj) { | |
| var getRoleCode = function() { return window.__getCoookieVal__('ckRoleCode'); }; | |
| var checkoutBtn = $('.checkout__button'); | |
| if(isLogin) { | |
| $('#customer-simple-register').remove(); | |
| $('.first__checkout__button').show(); | |
| $('.continue__button').hide(); | |
| checkoutBtn.prop('disabled', false); | |
| $('.first__checkout__button').prop('disabled', false); | |
| return; | |
| } | |
| $('#__agInsertContent__').addClass('hide'); | |
| var tk = obj.getUserToken(); | |
| var apiUrl = 'https://lif.abovegem.com:8043'; | |
| var reqHeader = {'Content-Type': 'application/json', "Accept": "application/json", 'X-Shopify-Shop': obj.getShop()}; | |
| var validReg = {username: false, firstName: false, lastName: false, pwd: false, confirmPwd: false, phone: true, sponsorId: false, referralId: false, email: true, ssn: true, birthday: false, agreement: false, recognitionName: true}; | |
| var validFn = function() { | |
| var isPass = true; | |
| for(var k in validReg) { | |
| if(!validReg[k]) { | |
| console.log(`${k} is not valid`) | |
| isPass = false; | |
| } | |
| } | |
| if(!isPass){ checkoutBtn.prop('disabled', true); return; } | |
| var cartForm = $('form.cart'); | |
| var roleCode = getRoleCode(); | |
| var userInfo = { | |
| roleCode: roleCode | |
| }; | |
| [ | |
| {f: 'login', i: 'regUsername'}, | |
| {f: 'email', i: 'regEmail'}, | |
| {f: 'birthday', i: 'regBirthday'}, | |
| //{f: 'ssn', i: 'regSSN'}, | |
| {f: 'phone', i: 'regPhone'}, | |
| {f: 'sponsor', i: 'regSponsorId'}, | |
| {f: 'referralId', i: 'regReferralId'}, | |
| {f: 'password', i: 'regPwd'}, | |
| {f: 'recognitionName', i: 'regRecognitionName'}, | |
| {f: 'firstName', i: 'regFirstName'}, | |
| {f: 'lastName', i: 'regLastName'} | |
| ].forEach(function(item){ | |
| var kWrap = $('.' + item.i); | |
| if(item.f === 'birthday') { kWrap = $('#regBirthday'); } | |
| var kVal = kWrap.val(); | |
| if(item.f === 'birthday') { kVal = getBirthDay(); } | |
| if(item.f === 'password' || item.f === 'ssn') { | |
| if(kVal) { kVal = window.btoa(window.encodeURIComponent(kVal)); } | |
| } | |
| userInfo[item.f] = kVal; | |
| }); | |
| var uIName = 'attributes[userInfo]'; | |
| if(roleCode === 'D' || roleCode === 'P' || roleCode === 'R') { | |
| var uInfoStr = JSON.stringify(userInfo); | |
| var uInfoInput = cartForm.find('textarea[name="' + uIName + '"]'); | |
| if(uInfoInput.length) { uInfoInput.val( uInfoStr ).text(uInfoStr); } | |
| else { cartForm.append('<textarea style="display:none" name="' + uIName + '">'+ uInfoStr +'</textarea>'); } | |
| var sponsorId = $('.regSponsorId').val(); | |
| if(sponsorId){ | |
| var spIdName = 'attributes[sponsor_distributor_id]'; | |
| var spIdInput = cartForm.find('input[name="' + spIdName + '"]'); | |
| if(spIdInput.length) { spIdInput.attr('value', sponsorId); } | |
| else { cartForm.append('<input type="hidden" name="' + spIdName + '" value=\'' + sponsorId + '\' />'); } | |
| } | |
| } else { | |
| cartForm.find('textarea[name="' + uIName + '"]').remove(); | |
| } | |
| checkoutBtn.prop('disabled', false); | |
| } | |
| var getCountryWrap = function() { return $('#homeCountry'); } | |
| var getStateWrap = function() { return $('#homeState'); } | |
| var getCountryId = function() { return 1214; } | |
| var __init_customer_register_form = function() { | |
| console.log('init form'); | |
| $('.regInput').trigger('focusout'); | |
| } | |
| var getHomeAddressInfo = function() { | |
| var countryWrap = getCountryWrap(); | |
| var stateWrap = getStateWrap(); | |
| return { | |
| "firstName": $('#homeFirstName').val().trim(), | |
| "lastName": $('#homeLastName').val().trim(), | |
| "street": $('#homeStreet').val().trim(), | |
| "streetCont": $('#homeStreetCont').val().trim(), | |
| "city": $('#homeCity').val().trim(), | |
| "zip": $('#homeZip').val().trim(), | |
| "stateId": stateWrap.val(), | |
| "state": stateWrap.find('option:selected').text(), | |
| "countryId": countryWrap.val(), | |
| "country": countryWrap.find('option:selected').text(), | |
| }; | |
| }; | |
| $(document).on('click', '.continue__button', function(e) { | |
| e.stopPropagation(); | |
| e.preventDefault(); | |
| $('.cart__template').hide(); | |
| __init_customer_register_form(); | |
| $('#customer-simple-register').show(); | |
| }); | |
| $(document).on('click', '#roleCodeSpanChange', function(e){ | |
| var popupRoleWrap = document.getElementById("popup-change-role"); | |
| popupRoleWrap.style.display = 'flex'; | |
| }); | |
| $(document).on('click', '#cancelRoleCodeChange', function(e){ | |
| var popupRoleWrap = document.getElementById("popup-change-role"); | |
| popupRoleWrap.style.display = 'none'; | |
| }); | |
| $(document).on('click', '#selectChangeRoleBtn', function(e){ | |
| var popupRoleWrap = document.getElementById("popup-change-role"); | |
| fetch(window.Shopify.routes.root + 'cart/clear.js',{method: 'post'}).then(function(res){ | |
| document.cookie = encodeURIComponent('ckRoleCode') + "=" + encodeURIComponent('') + ';path=/'; | |
| popupRoleWrap.style.display = 'none'; | |
| var prePath = location.pathname.replaceAll('cart', ''); | |
| location.href = prePath + 'pages/join-options'; | |
| }); | |
| }); | |
| $(document).on('focusin, focusout', '.regInput', function(e){ | |
| var self = $(this); | |
| var span = self.closest('.fIWrap').find('span'); | |
| var value = self.val().trim(); | |
| if(value) { | |
| span.removeClass('hide'); | |
| span.addClass('spanTips'); | |
| self.val(value); | |
| } else { | |
| span.addClass('hide'); | |
| span.removeClass('spanTips'); | |
| } | |
| }); | |
| $(document).on('focusout', '.regInput', function(e){ | |
| var self = $(this); | |
| var span_required = self.closest('.fIWrap').find('span.tip-required'); | |
| var value = self.val().trim(); | |
| if(value) { | |
| span_required.addClass('hide'); | |
| } else { | |
| span_required.removeClass('hide'); | |
| } | |
| }); | |
| $(document).on('focusin', '.regInput', function(e){ | |
| var self = $(this); | |
| var span_required = self.closest('.fIWrap').find('span.tip-required'); | |
| span_required.addClass('hide'); | |
| }); | |
| $(document).on('keyup', '.regUsername', function(e){ | |
| var self = $(this); | |
| if(self.val()) { | |
| self.val( self.val().toLowerCase() ); | |
| } | |
| }); | |
| $(document).on('focusin', '.regUsername', function(e){ | |
| var self = $(this); | |
| self.parent().addClass('focus'); | |
| }); | |
| $(document).on('focusout', '.regUsername', function(e){ | |
| var self = $(this); | |
| var usernameVal = self.val(); | |
| var errorTips = self.parent().find('.errorTips'); | |
| self.parent().removeClass('focus'); | |
| // errorTips.addClass('hide'); | |
| errorTips.text(''); | |
| if(usernameVal) { | |
| if(!/^([A-Za-z0-9_-])+$/.test(usernameVal)) { | |
| validReg.username = false; | |
| errorTips.text('Invalid Username (alphanumeric, underscore and dash characters only)'); | |
| errorTips.removeClass('hide'); | |
| return false; | |
| } | |
| fetch(apiUrl + '/shopify/validate/login', {method: 'POST', mode: 'cors', headers: reqHeader, body: JSON.stringify({login: usernameVal})}) | |
| .then(function(res){ return res.json();}) | |
| .then(function(d) { | |
| if(d && d.available) { | |
| validReg.username = true; | |
| errorTips.addClass('hide'); | |
| errorTips.text(''); | |
| } else { | |
| var errmsg = 'Username has been registered'; | |
| if(d.error) { errmsg = d.error; } | |
| validReg.username = false; | |
| errorTips.text(errmsg); | |
| errorTips.removeClass('hide'); | |
| } | |
| validFn(); | |
| }) | |
| .catch(function(err){ | |
| console.log(err); | |
| validFn(); | |
| }); | |
| } else { | |
| validReg.username = false; | |
| validFn(); | |
| } | |
| }); | |
| $(document).on('focusout', '.regRecognitionName', function(e){ | |
| var self = $(this); | |
| var recognitionName = self.val(); | |
| var errorTips = self.parent().find('.errorTips'); | |
| errorTips.addClass('hide'); | |
| errorTips.text(''); | |
| validFn(); | |
| }); | |
| $(document).on('focusout', '.regFirstName', function(e){ | |
| var self = $(this); | |
| var firstName = self.val(); | |
| var errorTips = self.parent().find('.errorTips'); | |
| if(firstName) { | |
| validReg.firstName = true; | |
| } else { | |
| validReg.firstName = false; | |
| } | |
| errorTips.addClass('hide'); | |
| errorTips.text(''); | |
| validFn(); | |
| }); | |
| $(document).on('focusout', '.regLastName', function(e){ | |
| var self = $(this); | |
| var lastName = self.val(); | |
| var errorTips = self.parent().find('.errorTips'); | |
| if(lastName) { | |
| validReg.lastName = true; | |
| } else { | |
| validReg.lastName = false; | |
| } | |
| errorTips.addClass('hide'); | |
| errorTips.text(''); | |
| validFn(); | |
| }); | |
| $(document).on('keyup', '.regEmail', function(e){ | |
| var self = $(this); | |
| if(self.val()) { | |
| self.val( self.val().toLowerCase() ); | |
| } | |
| }); | |
| $(document).on('focusout', '.regEmail', function(e){ | |
| var self = $(this); | |
| var emailVal = self.val(); | |
| var errorTips = self.parent().find('.errorTips'); | |
| if(emailVal) { | |
| fetch(apiUrl + '/shopify/validate/email', {method: 'POST', mode: 'cors', headers: reqHeader, body: JSON.stringify({email: emailVal})}) | |
| .then(function(res){ return res.json();}) | |
| .then(function(d) { | |
| if(d && d.available) { | |
| validReg.email = true; | |
| errorTips.addClass('hide'); | |
| errorTips.text(''); | |
| } else { | |
| validReg.email = false; | |
| errorTips.text('Invalid email or email already registered'); | |
| errorTips.removeClass('hide'); | |
| } | |
| validFn(); | |
| }) | |
| .catch(function(err){ | |
| console.log(err); | |
| validFn(); | |
| }); | |
| } else { | |
| validReg.email = false; | |
| validFn(); | |
| } | |
| }); | |
| // $(document).on('focusout', '.regSSN', function(e){ | |
| // var self = $(this); | |
| // var ssnVal = self.val(); | |
| // var errorTips = self.parent().find('.errorTips'); | |
| // if(ssnVal) { | |
| // var params = { | |
| // countryId: getCountryId(), | |
| // roleCode: getRoleCode(), | |
| // ssn: ssnVal | |
| // }; | |
| // fetch(apiUrl + '/shopify/validate/ssn', {method: 'POST', mode: 'cors', headers: reqHeader, body: JSON.stringify(params)}) | |
| // .then(function(res){ return res.json();}) | |
| // .then(function(d) { | |
| // if(d && d.error) { | |
| // validReg.ssn = false; | |
| // errorTips.text(d.error); | |
| // errorTips.removeClass('hide'); | |
| // } else { | |
| // validReg.ssn = true; | |
| // errorTips.addClass('hide'); | |
| // errorTips.text(''); | |
| // } | |
| // validFn(); | |
| // }) | |
| // .catch(function(err){ | |
| // console.log(err); | |
| // validFn(); | |
| // }); | |
| // } else { | |
| // validReg.ssn = false; | |
| // validFn(); | |
| // } | |
| // }); | |
| function getBirthDay() { | |
| var birthDayVal = $('#regBirthday').val(); | |
| if(birthDayVal) { | |
| var bs = birthDayVal.split('/'); | |
| return bs[2] + '-' + bs[0] + '-' + bs[1]; | |
| } | |
| } | |
| $(document).on('focusout', '.regBirthday', function(e){ | |
| var self = $(this); | |
| var birthDayVal = getBirthDay(); | |
| var errorTips = self.parent().find('.errorTips'); | |
| if(birthDayVal) { | |
| fetch(apiUrl + '/shopify/validate/birthday?birthday='+birthDayVal+'&roleCode='+getRoleCode(), {method: 'GET', mode: 'cors', headers: reqHeader}) | |
| .then(function(res){ return res.json();}) | |
| .then(function(d) { | |
| if(d && d.error) { | |
| validReg.birthday = false; | |
| errorTips.text('Birthday invalid'); | |
| errorTips.removeClass('hide'); | |
| } else { | |
| validReg.birthday = true; | |
| errorTips.addClass('hide'); | |
| errorTips.text(''); | |
| } | |
| validFn(); | |
| }) | |
| .catch(function(err){ | |
| console.log(err); | |
| validFn(); | |
| }); | |
| } else { | |
| validReg.birthday = false; | |
| validFn(); | |
| } | |
| }); | |
| $(document).on('focusout', '.regPwd', function(e){ | |
| var self = $(this); | |
| var pwd = self.val(); | |
| var errorTips = self.parent().find('.errorTips'); | |
| if(pwd) { | |
| validReg.pwd = false; | |
| errorTips.removeClass('hide'); | |
| if(pwd.length < 6) { | |
| errorTips.text('The password must be at least 6 characters.'); | |
| } else if(pwd.length > 30){ | |
| errorTips.text('The password must be no more than 30 characters.'); | |
| } else if(!/[A-Za-z]{1,}/g.test(pwd)){ | |
| errorTips.text('The password must contain at least one capital letter.'); | |
| } else if(!/\d{1,}/g.test(pwd)){ | |
| errorTips.text('The password must contain at least one number.'); | |
| } else { | |
| validReg.pwd = true; | |
| errorTips.addClass('hide'); | |
| errorTips.text(''); | |
| } | |
| } else { | |
| validReg.pwd = false; | |
| errorTips.addClass('hide'); | |
| errorTips.text(''); | |
| } | |
| validFn(); | |
| }); | |
| $(document).on('focusout', '.regConfPwd', function(e){ | |
| var self = $(this); | |
| var pwd = $('.regPwd').val(); | |
| if(self.val()) { | |
| var errorTips = self.parent().find('.errorTips'); | |
| if(pwd === self.val()) { | |
| validReg.confirmPwd = true; | |
| errorTips.addClass('hide'); | |
| errorTips.text(''); | |
| } else { | |
| validReg.confirmPwd = false; | |
| errorTips.text('Passwords do not match'); | |
| errorTips.removeClass('hide'); | |
| } | |
| } else { | |
| validReg.confirmPwd = false; | |
| } | |
| validFn(); | |
| }); | |
| // $(document).on('input', '.regPhone', function(e){ | |
| // var self = $(this); | |
| // self.val( self.val().replace(/[^\d]/, '') ); | |
| // }); | |
| // $(document).on('focusout', '.regPhone', function(e){ | |
| // var self = $(this); | |
| // var phone = self.val(); | |
| // var errorTips = self.parent().find('.errorTips'); | |
| // if(phone) { | |
| // if(/^\d+$/.test(phone)) { | |
| // validReg.phone = true; | |
| // errorTips.addClass('hide'); | |
| // errorTips.text(''); | |
| // } else { | |
| // validReg.phone = false; | |
| // errorTips.text('Invalid phone number'); | |
| // errorTips.removeClass('hide'); | |
| // } | |
| // } else { | |
| // validReg.phone = false; | |
| // errorTips.addClass('hide'); | |
| // errorTips.text(''); | |
| // } | |
| // validFn(); | |
| // }); | |
| $(document).on('focusout', '.regSponsorId', function(e){ | |
| var self = $(this); | |
| var sponsorId = self.val(); | |
| if(sponsorId) { | |
| fetch(apiUrl + '/shopify/validate/sponsor', {method: 'POST', mode: 'cors', headers: reqHeader, body: JSON.stringify({sponsor: sponsorId, role_code: getRoleCode()})}) | |
| .then(function(res){ return res.json();}) | |
| .then(function(d) { | |
| var errorTips = self.parent().find('.errorTips'); | |
| if(d && d.available) { | |
| validReg.sponsorId = true; | |
| errorTips.removeClass('hide'); | |
| errorTips.addClass('txtColor'); | |
| errorTips.text(d.body.name); | |
| } else { | |
| validReg.sponsorId = false; | |
| var roleCode = getRoleCode(); | |
| var sName = 'Sponsor'; | |
| if(roleCode === 'R') {sName = 'Affiliate';} | |
| errorTips.text(d.error.replace('Advisor', sName)); | |
| errorTips.removeClass('hide'); | |
| errorTips.removeClass('txtColor'); | |
| } | |
| validFn(); | |
| }) | |
| .catch(function(err){ | |
| console.log(err); | |
| validFn(); | |
| }); | |
| } else { | |
| validReg.sponsorId = false; | |
| validFn(); | |
| } | |
| }); | |
| // $(document).on('focusout', '.regReferralId', function(e){ | |
| // var self = $(this); | |
| // var referralId = self.val(); | |
| // if(referralId) { | |
| // fetch(apiUrl + '/shopify/sponsor_info?sponsor=' + referralId, {method: 'GET', mode: 'cors', headers: reqHeader}) | |
| // .then(function(res){ return res.json();}) | |
| // .then(function(d) { | |
| // var errorTips = self.parent().find('.errorTips'); | |
| // if(d && d.data && d.data.roleCode !== 'R') { | |
| // validReg.referralId = true; | |
| // errorTips.removeClass('hide'); | |
| // errorTips.addClass('txtColor'); | |
| // errorTips.text(d.data.name); | |
| // if(d.data.roleCode === 'D') { | |
| // $('.regSponsorId').val(d.data.id); | |
| // } | |
| // if(d.data.roleCode === 'P') { | |
| // $('.regSponsorId').val(d.data.sponsorId); | |
| // } | |
| // } else { | |
| // validReg.referralId = false; | |
| // errorTips.text('Does not exist!'); | |
| // errorTips.removeClass('hide'); | |
| // errorTips.removeClass('txtColor'); | |
| // } | |
| // validFn(); | |
| // }) | |
| // .catch(function(err){ | |
| // console.log(err); | |
| // validFn(); | |
| // }); | |
| // } else { | |
| // validReg.referralId = false; | |
| // validFn(); | |
| // } | |
| // }); | |
| $(document).on('click', '.regRole', function(e){ validFn(); }); | |
| $(document).on('click', '.regFindMySponsor', function(e){ | |
| if(obj) { | |
| obj._searchField = 'sponsor'; | |
| obj._searchReferralId = ''; | |
| obj.regNoSponsor.selectFn = function(obj){ | |
| obj.removePopup(); | |
| $('.regFindMySponsor').text('change my sponsor'); | |
| }; | |
| obj.popupFindSponsor({noCount: true, titleName: 'sponsor'}); | |
| } | |
| return false; | |
| }); | |
| $(document).on('click', '.regFindMyReferral', function(e){ | |
| if(obj) { | |
| obj._searchField = 'referral'; | |
| obj.regNoSponsor.selectFn = function(obj){ | |
| obj.removePopup(); | |
| $('.regReferralId').val(obj._searchReferralId); | |
| $('.regReferralId').trigger('focusout'); | |
| $('.regFindMyReferral').text('change my referral'); | |
| }; | |
| obj.popupFindSponsor({noCount: true, titleName: 'referral'}); | |
| } | |
| return false; | |
| }); | |
| $(document).on('click', '.regNoSponsor', function(e){ | |
| $('.regSponsorId').val('10000201').trigger('focusout'); | |
| return false; | |
| }); | |
| $(document).on('focusout', '#homeFirstName, #homeLastName, #homeStreet, #homeStreetCont, #homeCity, #homeZip', function(e){ | |
| validFn(); | |
| }); | |
| $(document).on('change', '#homeCountry, #homeState', function(e){ | |
| validFn(); | |
| }); | |
| $(document).on('change', '#accept-agreement', function(e){ | |
| validReg.agreement = this.checked; | |
| validFn(); | |
| }); | |
| $(document).on('change', '#retail-create-account-cb', function(e){ | |
| if(this.checked) { | |
| setCkRoleCode('R'); | |
| retailFn(); | |
| } else { | |
| setCkRoleCode(null); | |
| guestFn(); | |
| } | |
| }); | |
| $('.cart__items__remove').on('click', function() { | |
| console.log('cart item removed'); | |
| location.reload(); | |
| }); | |
| $('.quantity__input').on('change', function() { | |
| if (parseInt(this.value, 10) <= 0) { | |
| console.log('line item count down to 0, reload cart'); | |
| location.reload(); | |
| } | |
| }); | |
| var retailFn = function() { | |
| validReg.username = false; | |
| validReg.pwd = false; | |
| validReg.confirmPwd = false; | |
| validReg.sponsorId = false; | |
| validReg.email = false; | |
| validReg.recognitionName = true; | |
| validReg.firstName = false; | |
| validReg.lastName = false; | |
| $('.regUsername').trigger('focusout').closest('.fIWrap').removeClass('hide'); | |
| $('.regPwd').trigger('focusout').closest('.fIWrap').removeClass('hide'); | |
| $('.regConfPwd').trigger('focusout').closest('.fIWrap').removeClass('hide'); | |
| $('.regSponsorId').trigger('focusout').closest('.fIWrap').removeClass('hide'); | |
| $('.regEmail').trigger('focusout').closest('.fIWrap').removeClass('hide'); | |
| $('.regFirstName').trigger('focusout').closest('.fIWrap').removeClass('hide'); | |
| $('.regLastName').trigger('focusout').closest('.fIWrap').removeClass('hide'); | |
| validFn(); | |
| } | |
| var guestFn = function() { | |
| validReg.username = true; | |
| validReg.pwd = true; | |
| validReg.confirmPwd = true; | |
| validReg.sponsorId = true; | |
| validReg.email = true; | |
| validReg.recognitionName = true; | |
| validReg.firstName = true; | |
| validReg.lastName = true; | |
| $('.regUsername').closest('.fIWrap').addClass('hide'); | |
| $('.regPwd').closest('.fIWrap').addClass('hide'); | |
| $('.regConfPwd').closest('.fIWrap').addClass('hide'); | |
| $('.regSponsorId').closest('.fIWrap').addClass('hide'); | |
| $('.regEmail').closest('.fIWrap').addClass('hide'); | |
| $('.regFirstName').closest('.fIWrap').addClass('hide'); | |
| $('.regLastName').closest('.fIWrap').addClass('hide'); | |
| validFn(); | |
| } | |
| if($('.cart__items__row.test-bundle').length) { | |
| setCkRoleCode('D'); | |
| } else { | |
| setCkRoleCode('R'); | |
| } | |
| var roleCode = getRoleCode(); | |
| if(roleCode === 'D' || roleCode === 'P') { | |
| $('#r-g-role').remove(); | |
| if(roleCode === 'D') { | |
| validReg.referralId = true; | |
| $('.regReferralId').closest('.fIWrap').addClass('hide'); | |
| } | |
| if(roleCode === 'P') { | |
| validReg.ssn = true; | |
| validReg.birthday = true; | |
| validReg.agreement = true; | |
| validReg.sponsorId = true; | |
| $('.regBirthday').closest('.fIWrap').remove(); | |
| $('.regSSN').closest('.fIWrap').remove(); | |
| $('.agreement-wrap').remove(); | |
| $('.regSponsorId').closest('.fIWrap').addClass('hide'); | |
| } | |
| // validReg.recognitionName = false; | |
| try { | |
| var paths = location.pathname.split('/'); | |
| if(paths && paths[1]) { | |
| if(paths[1].endsWith('-tn')) { | |
| validReg.phone = true; | |
| $('.regPhone').closest('.fIWrap').addClass('hide'); | |
| } | |
| } | |
| } catch (e) { | |
| console.log(e); | |
| } | |
| } else { | |
| $('#d-p-role').remove(); | |
| //$('.regEmail').closest('.fIWrap').remove(); | |
| $('.regBirthday').closest('.fIWrap').remove(); | |
| $('.regSSN').closest('.fIWrap').remove(); | |
| $('.regPhone').closest('.fIWrap').remove(); | |
| $('.regReferralId').closest('.fIWrap').remove(); | |
| $('.agreement-wrap').remove(); | |
| //validReg.email = true; | |
| validReg.ssn = true; | |
| validReg.birthday = true; | |
| validReg.phone = true; | |
| validReg.agreement = true; | |
| validReg.referralId = true; | |
| validReg.recognitionName = true; | |
| $('.regRecognitionName').closest('.fIWrap').addClass('hide'); | |
| $('.regFindMySponsor').remove(); | |
| var regNoSponsorWrap = $('.regNoSponsor'); | |
| regNoSponsorWrap.text( regNoSponsorWrap.attr('data-affiliate') ); | |
| //$('.regNoSponsor').remove(); | |
| if(roleCode === 'R'){ | |
| var regSponsorWrap = $('.regSponsorId'); | |
| regSponsorWrap.attr('placeholder', regSponsorWrap.attr('data-affiliate')); | |
| regSponsorWrap.closest('.fIWrap').find('.affiliate').text(regSponsorWrap.attr('data-affiliate')); | |
| $('#retail-create-account-cb').prop('checked', true); | |
| if($('.selling-plan-allocation').length){ | |
| $('#retail-create-account-cb').prop('checked', true).prop('disabled', true); | |
| } | |
| retailFn(); | |
| } else { | |
| if($('.selling-plan-allocation').length){ | |
| $('#retail-create-account-cb').prop('checked', true).prop('disabled', true); | |
| setCkRoleCode('R'); | |
| retailFn(); | |
| } else { | |
| guestFn(); | |
| } | |
| } | |
| } | |
| var roleWrap = $('#currentRole'); | |
| if(roleCode === 'D') {roleWrap.text(roleWrap.attr('data-d'));} | |
| if(roleCode === 'P') {roleWrap.text('Circle Member');} | |
| if(roleCode === 'R') {roleWrap.text('Retail Customer');} | |
| // $('#customer-simple-register').show(); | |
| __showButtonBasedOnRoleCode(roleCode); | |
| try { | |
| // var fp = flatpickr('#regBirthday', { | |
| // altInput: true, | |
| // altFormat: "m/d/Y", | |
| // dateFormat: "Y-m-d", | |
| // }); | |
| } catch (e) { | |
| console.log(e); | |
| } | |
| }; | |
| </script> | |
| {%- endif -%} | |
| {{ localization.country.iso_code }} | |
| <form method="post" action="/localization" id="localization_form" accept-charset="UTF-8" class="shopify-localization-form" enctype="multipart/form-data"> | |
| <input type="hidden" name="form_type" value="localization"> | |
| <input type="hidden" name="utf8" value="✓"> | |
| <input type="hidden" name="_method" value="put"> | |
| <input type="hidden" name="country_code" value="US"> | |
| <input type="hidden" name="language_code" value="en"> | |
| <select name="country_code" style="max-width:200px;"> | |
| <option value="">Select</option> | |
| <option value="US" {% if localization.country.iso_code == 'US' %}selected{% endif %}>United States</option> | |
| <option value="CN" {% if localization.country.iso_code == 'CN' %}selected{% endif %}>China</option> | |
| <option value="HK" {% if localization.country.iso_code == 'HK' %}selected{% endif %}>Hong Kong</option> | |
| <option value="TW" {% if localization.country.iso_code == 'TW' %}selected{% endif %}>Taiwan</option> | |
| </select> | |
| <button type="submit" style="padding: 10px;background: #a72727d4;color: white;">Submit</button> | |
| </form> | |
| <div class="cart__template {{ no_ajax_class }} {{ hide_quantity }} {{ section.settings.bg }}" | |
| data-cart-message-container | |
| data-section-id="{{ section.id }}" | |
| data-section-type="cart" | |
| data-ajax-disable="{{ ajax_disable }}" | |
| style="--PT: {{ section.settings.padding_top }}px; --PB: {{ section.settings.padding_bottom }}px;"> | |
| {% comment %} Cart is empty {% endcomment %} | |
| <div class="cart__empty__page {{ empty_init }}" data-cart-empty> | |
| {% render 'cart-empty' %} | |
| </div> | |
| {% comment %} Cart is full {% endcomment %} | |
| <div class="{{ section.settings.width }} section-padding {{ full_init }}" data-cart-form data-cart-loading> | |
| <form action="{% if is_us_store or checkHadSubscribe %}{{ routes.cart_url }}{% else %}https://lif.abovegem.com:8043/shopify/checkout?shopify_cart_url={{ routes.cart_url }}{% endif %}" method="post" novalidate class="cart" id="reg__cart__form"> | |
| <h3 class="cart__page__title body-size-8">{{ 'cart.general.title' | t }}</h3> | |
| <div class="errors" data-form-errors style="display: none;"></div> | |
| <div class="cart__items__grid cart__heading__wrapper"> | |
| <div class="cart__heading__back"> | |
| <!-- | |
| <a href="{{ settings.cart_continue_browsing | default: routes.all_products_collection_url }}" class="cart__heading cart__return"> | |
| {% render 'icon-arrow-long-left' %} | |
| | |
| {{ 'cart.general.continue_browsing' | t }} | |
| </a> | |
| --> | |
| </div> | |
| <div class="cart__items__price"> | |
| <p class="cart__heading">{{ 'cart.label.price' | t }}</p> | |
| </div> | |
| <div class="cart__items__quantity"> | |
| <p class="cart__heading">{{ 'cart.label.quantity' | t }}</p> | |
| </div> | |
| <div class="cart__items__total"> | |
| <p class="cart__heading">{{ 'cart.label.total' | t }}</p> | |
| </div> | |
| </div> | |
| <div class="template__cart__body"> | |
| <div class="errors" data-form-errors style="display: none;"></div> | |
| <div data-cart-form> | |
| {% comment %} | |
| The following snippet is refreshed via ajax with | |
| cart.items.liquid when the quantity is adjusted. | |
| {% endcomment %} | |
| <div data-line-items> | |
| {% render 'cart-line-items' %} | |
| </div> | |
| </div> | |
| <div class="template__cart__footer{% if additional_checkout_buttons and settings.cart_show_additional_buttons %} template__cart__footer--additional_buttons{% endif %}" data-cart-bottom> | |
| <div class="cart__footer__notes"> | |
| {%- if settings.cart_notes_enable -%} | |
| <label class="cart__notes__label" for="CartSpecialInstructions">{{ 'cart.general.note' | t }}</label> | |
| <textarea name="note" class="input-full" id="CartSpecialInstructions" data-cart-note>{{ cart.note }}</textarea> | |
| {%- endif -%} | |
| </div> | |
| <div class="cart__footer__shipping"> | |
| {%- if settings.cart_shipping_enable -%} | |
| {% render 'cart-shipping' %} | |
| {%- endif -%} | |
| </div> | |
| <div class="cart__footer__total"> | |
| {% if settings.cart_custom_message_enable and settings.cart_custom_message_text != blank %} | |
| <div class="cart__message cart__message--custom"> | |
| {{ settings.cart_custom_message_text }} | |
| </div> | |
| {% endif %} | |
| <div class="cart__page__shipping"> | |
| {% assign free_shipping_text = block.settings.message | default: settings.message %} | |
| {% assign is_enable = false %} | |
| {% assign show_wheel = true %} | |
| {% assign font_size_class = font_size_class | default: '' %} | |
| {% if block.settings.show_wheel == false %} | |
| {% assign show_wheel = false %} | |
| {% endif %} | |
| {% if block.settings.message != blank %} | |
| {% assign is_enable = true %} | |
| {% endif %} | |
| {% if settings.show_free_shipping_message and settings.free_shipping_limit != blank and free_shipping_text != blank %} | |
| {% assign is_enable = true %} | |
| {% endif %} | |
| {% if is_enable %} | |
| {% assign limit = settings.free_shipping_limit | plus: 0 %} | |
| {% assign limit_currency = limit | times: 100 %} | |
| {% assign subtotal_without_currency = cart.total_price | plus: 0 | divided_by: 100 %} | |
| {% capture left_to_spend %} | |
| <span data-left-to-spend class="strong"> | |
| {% if settings.currency_code_enable %} | |
| {{ limit_currency | minus: cart.total_price | money_with_currency }} | |
| {% else %} | |
| {{ limit_currency | minus: cart.total_price | money_without_trailing_zeros }} | |
| {% endif %} | |
| </span> | |
| {% endcapture %} | |
| {% assign free_shipping_message = free_shipping_text | replace: '||amount||', left_to_spend %} | |
| {% assign qualified_shipping_message = 'cart.general.qualified_shipping_message' | t %} | |
| {% assign class_message = '' %} | |
| {% if subtotal_without_currency >= limit %} | |
| {% if qualified_shipping_message != blank %} | |
| {% assign class_message = 'is-success' %} | |
| {% else %} | |
| {% assign class_message = 'is-hidden' %} | |
| {% endif %} | |
| {% elsif subtotal_without_currency == 0 %} | |
| {% comment %} {% assign class_message = 'is-hidden' %} {% endcomment %} | |
| {% endif %} | |
| <p class="cart__message {{ class_message }} {{ font_size_class }}" data-cart-message="{% if qualified_shipping_message != blank %}true{% else %}false{% endif %}" data-limit="{{ limit }}"> | |
| {% if show_wheel %} | |
| {% assign percent = limit | minus: subtotal_without_currency | times: 100 | divided_by: limit %} | |
| {% assign percent = 100 | minus: percent %} | |
| {% if percent > 100 %} | |
| {% assign percent = 100 %} | |
| {% endif %} | |
| <small class="cart__graph"> | |
| {% for i in (1..6) %} | |
| <small class="cart__graph-dot cart__graph-dot--{{ i }}"></small> | |
| {% endfor %} | |
| {%- assign stroke_dashoffset = '87.96459430051421' -%} | |
| {%- if settings.cart_style == 'compatible' -%} | |
| {%- assign math_pi = 3.14159265359 -%} | |
| {%- assign stroke_circumference = 28 | times: math_pi -%} | |
| {%- assign stroke_calculate = percent | times: stroke_circumference -%} | |
| {%- assign stroke_calculate = stroke_calculate | divided_by: 100 | divided_by: 2 -%} | |
| {%- assign stroke_dashoffset = stroke_circumference | minus: stroke_calculate -%} | |
| {%- endif -%} | |
| <svg height="18" width="18"> | |
| <circle r="7" cx="9" cy="9" /> | |
| <circle class="cart__graph-progress" stroke-dasharray="87.96459430051421 87.96459430051421" style="stroke-dashoffset: {{ stroke_dashoffset }}" data-cart-progress data-percent="{{ percent }}" r="7" cx="9" cy="9" /> | |
| </svg> | |
| </small> | |
| {% endif %} | |
| {% if qualified_shipping_message != blank %} | |
| <span class="cart__message-success">{{ qualified_shipping_message }}</span> | |
| {% endif %} | |
| <span class="cart__message-default"> | |
| {{ free_shipping_message }} | |
| </span> | |
| </p> | |
| {% endif %} | |
| </div> | |
| <div class="page__footer__subtotal" data-cart-subtotal> | |
| {% render 'cart-subtotal' %} | |
| </div> | |
| <p> | |
| <span class="cart__footer__label">{{ 'cart.general.subtotal' | t }}</span> | |
| <span class="cart__footer__value" data-cart-final> | |
| {{ cart.total_price | money_with_currency }} | |
| </span> | |
| </p> | |
| <p class="cart__footer__small">{{ 'cart.general.shipping_at_checkout' | t }}</p> | |
| </div> | |
| <div class="cart__footer__checkout"> | |
| {% if is_us_store or checkHadSubscribe %} | |
| <button name="continue" class="btn btn--primary btn--large continue__button" style="display: none;"> | |
| {{ 'cart.general.continue' | t }} | |
| </button> | |
| <button type="submit" name="checkout" class="btn btn--primary btn--large first__checkout__button" style="display: none;"> | |
| {{ 'cart.general.checkout' | t }} | |
| </button> | |
| {% else %} | |
| <button type="submit" name="checkout" class="btn btn--primary btn--large checkout__button"> | |
| {{ 'cart.general.checkout' | t }} | |
| </button> | |
| {% endif %} | |
| </div> | |
| <div class="cart__footer__update"> | |
| <span class="cart__update" data-update-button> | |
| <span class="cart__update__icon">{% render 'icon-sync' %}</span> | |
| <button type="submit" name="update" class="text-link"> | |
| {{ 'cart.general.update' | t }} | |
| </button> | |
| </span> | |
| </div> | |
| {% if additional_checkout_buttons and settings.cart_show_additional_buttons %} | |
| <div class="cart__footer__additional"> | |
| <div class="additional-checkout-buttons"> | |
| {{ content_for_additional_checkout_buttons }} | |
| </div> | |
| </div> | |
| {% endif %} | |
| </div> | |
| </div> | |
| </form> | |
| </div> | |
| </div> | |
| <!-- <script> | |
| var $checkJquery0 = setInterval(function(){ | |
| if(typeof $ === 'function') { | |
| clearInterval($checkJquery0); | |
| console.log('get$'); | |
| //history.pushState(null, null, document.URL); | |
| window.addEventListener('popstate', function(e){ | |
| console.log('popstate'); | |
| var registerWrap = $('#customer-simple-register'); | |
| if(registerWrap.length && registerWrap.is(':visible')) { | |
| console.log('revalid...'); | |
| $('.regInput').trigger('focusout'); | |
| } | |
| }, false); | |
| } | |
| }, 10); | |
| </script> --> | |
| {% schema %} | |
| { | |
| "settings": [ | |
| { | |
| "type": "select", | |
| "id": "bg", | |
| "label": "Background color", | |
| "default": "palette--light bg--neutral", | |
| "options": [ | |
| { "value": "palette--light bg--neutral", "label": "Default"}, | |
| { "value": "palette--light bg--accent", "label": "Light"}, | |
| { "value": "palette--dark bg--invert", "label": "Dark"}, | |
| { "value": "palette--dark bg--invert--accent", "label": "Dark accent"}, | |
| { "value": "palette--bright bg--bright", "label": "Bright"}, | |
| { "value": "palette--bright bg--bright--accent", "label": "Bright accent"} | |
| ] | |
| }, | |
| { | |
| "type": "header", | |
| "content": "Section spacing" | |
| }, | |
| { | |
| "type": "select", | |
| "id": "width", | |
| "label": "Width", | |
| "default": "wrapper", | |
| "options": [ | |
| { "value": "wrapper--full", "label": "Full width padded" }, | |
| { "value": "wrapper", "label": "Page width" }, | |
| { "value": "wrapper--narrow", "label": "Page width narrow" } | |
| ] | |
| }, | |
| { | |
| "type": "range", | |
| "id": "padding_top", | |
| "min": 0, | |
| "max": 180, | |
| "step": 2, | |
| "unit": "px", | |
| "label": "Padding top", | |
| "default": 36 | |
| }, | |
| { | |
| "type": "range", | |
| "id": "padding_bottom", | |
| "min": 0, | |
| "max": 180, | |
| "step": 2, | |
| "unit": "px", | |
| "label": "Padding bottom", | |
| "default": 36 | |
| } | |
| ] | |
| } | |
| {% endschema %} |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment