The repo for Purrform's main BigCommerce store.
dev: rename mobile link.
+49
-15
+49
-15
templates/pages/checkout.html
+49
-15
templates/pages/checkout.html
···
69
69
{{/if}}
70
70
<script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyBhEVGvTFe26KQ1-eDZ9i10znl03qH1ZlI&libraries=places,geometry&v=weekly" defer ></script>
71
71
72
+
73
+
<script>
74
+
let mobileCheck = setInterval(mobileRename, 1000);
75
+
function mobileRename() {
76
+
const mobileModal = document.querySelector('.cartDrawer.optimizedCheckout-orderSummary')
77
+
if (mobileModal) {
78
+
console.log(mobileModal)
79
+
mobileModal.querySelector('.cartDrawer-body a').textContent = "Show Details & Rewards"
80
+
}
81
+
}
82
+
</script>
72
83
{{inject "checkoutID" cart_id}}
73
84
{{#if customer}}
74
85
{{#unless customer_group_name '===' 'Trade'}}
···
79
90
function loyaltyCheck() {
80
91
const elementParentType = document.querySelector('.layout-main')
81
92
if (elementParentType) {
82
-
const couponApply = document.querySelector('#applyRedeemableButton')
93
+
const couponApply = document.querySelector('#applyRedeemableButton')
83
94
const couponRemove = document.querySelector('[data-test="cart-price-callback"]')
84
95
if (couponApply) {
85
96
couponApply.addEventListener('click', () => {
86
-
setTimeout(function(){
97
+
setTimeout(function () {
87
98
window.location.reload()
88
-
},1500); //delay is in milliseconds
99
+
}, 1500); //delay is in milliseconds
89
100
})
90
101
}
91
102
if (couponRemove) {
···
100
111
// Desktop View
101
112
// Check if desktop loyalty already exists
102
113
const desktopLoyalty = document.querySelector('.cart-section.optimizedCheckout-orderSummary-cartSection.loyalty-points')
103
-
if (!desktopLoyalty ) {
114
+
if (!desktopLoyalty) {
104
115
// define location and start func
105
116
const element = document.querySelector('.cart.optimizedCheckout-orderSummary')
106
117
loyaltyInitialize(element);
···
109
120
// Mobile View
110
121
// Check if mobile modal is open
111
122
const mobileModal = document.querySelector('.ReactModalPortal .modal')
112
-
if(mobileModal) {
123
+
if (mobileModal) {
113
124
// Check if mobile loyalty already exists
114
125
const mobileLoyalty = document.querySelector('.modal-body .cart-section.optimizedCheckout-orderSummary-cartSection.loyalty-points')
115
126
if (!mobileLoyalty) {
···
209
220
}
210
221
211
222
const loyaltyPointsBtn = document.querySelector('#loyaltyPointsBtn')
212
-
// Generate a new summary if not done
213
-
// document.querySelector('#applyRedeemableButton').addEventListener('click', () => {
214
-
// window.location.reload()
215
-
// })
223
+
216
224
if (loyaltyPointsBtn) {
217
225
loyaltyPointsBtn.addEventListener('click', () => {
218
226
console.log("Received Click");
···
559
567
}
560
568
</script>
561
569
570
+
<script>
571
+
let warnInterval = setInterval(renameWarning, 1000)
572
+
function renameWarning() {
573
+
let warningMsg = document.querySelector('.shippingOptions-panel.optimizedCheckout-overlay p')
574
+
let proceedButton = document.querySelector('#proceedButton')
575
+
if (warningMsg) {
576
+
warningMsg.textContent = "Please ensure all required fields have been completed to see delivery options"
577
+
if (proceedButton && warningMsg.textContent == "Please ensure all required fields have been completed to see delivery options") {
578
+
proceedButton.addEventListener('click', () => {
579
+
warningMsg.style.color = "red";
580
+
})
581
+
}
582
+
}
583
+
}
584
+
585
+
</script>
562
586
563
587
<script>
564
588
// This script handles 'instructions' in 'shipping'
···
566
590
function instructionCheck() {
567
591
const element = document.querySelector('fieldset.form-fieldset[data-test="checkout-shipping-comments"]');
568
592
const shippingMethod = document.querySelector('.form-checklist');
569
-
if (element && shippingMethod) {
593
+
594
+
if (element) {
570
595
clearInterval(instructionInterval);
571
596
createInstructions();
572
597
}
···
800
825
</script>
801
826
802
827
<style>
828
+
.optimizedCheckout-cart-modal .optimizedCheckout-orderSummary-cartSection {
829
+
padding: 20px;
830
+
}
831
+
.modal-body.cart-modal-body.optimizedCheckout-orderSummary {
832
+
height: 100vh;
833
+
}
834
+
.modal.modal--afterOpen.optimizedCheckout-cart-modal .modal-body {
835
+
overflow-y: hidden !important;
836
+
height: 110vh !important;
837
+
}
838
+
.storeCreditOverlay {
839
+
z-index: 9 !important;
840
+
}
803
841
.loyalty-summary {
804
842
margin: 10px 0;
805
843
}
···
856
894
flex-direction: column;
857
895
background-color: #FFEDCD;
858
896
}
859
-
@media (max-width: 600px) {
860
-
.loyalty-points {
861
-
background-color: transparent;
862
-
}
863
-
}
897
+
864
898
#points-input {
865
899
border: 1px solid #dbdada;
866
900
border-radius: 32px;