https://shop.braintree.co.za/wp-content/themes/smart-home/assets/js/main.js

1// MOBILE NAV MENU
2jQuery(document).ready(function () {
3  jQuery(document).on('click', '.toggle-nav, .header-blur', function(){
4    jQuery('.offscreen-nav').toggleClass('open');
5    jQuery('.header-blur').toggleClass('hidden');
6   
7  });
8
9  // jQuery(document).on('mouseenter', '.menu-item-has-children', function() {
10  //   jQuery('.header-blur').addClass('hidden');
11  // });
12
13  // jQuery(document).on('mouseleave', '.menu-item-has-children', function() {
14  //     jQuery('.header-blur').removeClass('hidden');
15  // });
16
17  jQuery('.menu-item-has-children, .sub-menu').on('mouseenter', function() {
18    jQuery('.header-blur').removeClass('hidden');
19  }).on('mouseleave', function() {
20    setTimeout(function() {
21      if (!jQuery('.menu-item-has-children').hasClass('sfHover')) {
22          jQuery('.header-blur').addClass('hidden');
23      }
24    }, 100);
25  });
26  
27
28});
29
30
31
32// Close menu on filtering
33function closeMenu() {
34  document.querySelector("#wrapper").classList.remove("open-cc");
35  document.querySelector("#wrapper").classList.remove("open-filters");
36}
37
38// Hide TID dropdown from product page
39
40let child = document.querySelector(".variations tr:first-of-type");
41let parent = document.getElementById("tid");
42
43if (child !== null) {
44  if (child.contains(parent)) {
45    child.style.display = "none";
46  }
47}
48
49// Open social links in new tab
50
51jQuery(document).ready(function () {
52  let socialFooterLinks = jQuery(".social-icon a");
53  socialFooterLinks.each(function () {
54    jQuery(this).attr("target", "_blank");
55  });
56});
57
58// Replace filter icon
59
60jQuery(document).ready(function () {
61  jQuery(".bapf_ochild").each(function () {
62    jQuery(this).click(function (e) {
63      if (jQuery(this).hasClass("collapsed")) {
64        jQuery(this).removeClass("collapsed ");
65      } else {
66        jQuery(this).addClass("collapsed ");
67      }
68    });
69  });
70
71  jQuery(".bapf_cchild").each(function () {
72    jQuery(this).click(function (e) {
73      if (jQuery(this).hasClass("collapsed")) {
74        jQuery(this).removeClass("collapsed ");
75      } else {
76        jQuery(this).addClass("collapsed ");
77      }
78    });
79  });
80
81  jQuery(".bapf_ochild").each(function () {
82    if (jQuery(this).hasClass("collapsed")) {
83      jQuery(this).remove("collapsed");
84    }
85  });
86
87  jQuery(".bapf_cchild").each(function () {
88    if (!jQuery(this).hasClass("collapsed")) {
89      jQuery(this).add("collapsed");
90    }
91  });
92
93  jQuery('input[data-name="Microsoft Surface Devices"')
94    .parent()
95    .css("display", "flex")
96    .css("flex-wrap", "wrap");
97  jQuery('input[data-name="Microsoft Surface Devices"').css("flex", "none");
98  jQuery('input[data-name="Microsoft Surface Devices"')
99    .next("label")
100    .css("flex-basis", "75%");
101  jQuery('input[data-name="Microsoft Surface Devices"')
102    .siblings(".fa")
103    .css("height", "fit-content");
104});
105
106jQuery(document).ready(function ($) {
107  // Listen for WooCommerce AJAX events
108  jQuery(document).on(
109    "added_to_cart",
110    function (event, fragments, cart_hash, $button) {
111      // Get product name
112      var productName = $button
113        .closest(".product")
114        .find(".woocommerce-loop-product__title a")
115        .text();
116
117      var popup_html =
118        '<div class="overlay"></div>\
119                        <div class="close-notice">x</div>\
120                        <div class="wc-block-components-notice-banner is-success" role="alert">\
121                            <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="24" height="24" aria-hidden="true" focusable="false">\
122                            <path d="M16.7 7.1l-6.3 8.5-3.3-2.5-.9 1.2 4.5 3.4L17.9 8z"></path>\
123                            </svg>\
124                            <div class="wc-block-components-notice-banner__content">\
125                            <a href="/cart/" tabindex="1" class="button wc-forward">View cart</a> “' +
126        productName +
127        "” has been added to your cart.\
128                            </div>\
129                        </div>";
130
131      // Show popup notification
132      jQuery(".woocommerce-notices-wrapper").addClass("is-success");
133      jQuery(".woocommerce-notices-wrapper").html(popup_html).fadeIn();
134
135      jQuery(document).on(
136        "click",
137        ".woocommerce-notices-wrapper, .close-notice",
138        function () {
139          jQuery(".woocommerce-notices-wrapper").removeClass("is-success");
140          jQuery(".woocommerce-notices-wrapper").html("");
141        }
142      );
143
144      // alert(productName + ' has been added to your cart');
145    }
146  );
147});
148
149// Overwrite WooCommerce scroll to notices
150jQuery(".ttt-pnwc-overlay, .ttt-pnwc-overlay .ttt-pnwc-close").on(
151  "click tap touchstart",
152  function () {
153    var offset = window.innerWidth > 768 ? 150 : 300;
154    var notices = jQuery(
155      ".woocommerce-invalid.woocommerce-invalid-required-field"
156    ).first();
157
158    if (notices.length) {
159      jQuery("html, body").animate(
160        {
161          scrollTop: notices.offset().top - offset,
162        },
163        100
164      );
165    }
166  }
167);
168
169// WooCommerce Login/Registration form validation
170
171jQuery(document).ready(function () {
172  jQuery(".woocommerce-form-register__submit").click(function () {
173    localStorage.setItem("loginType", "register");
174  });
175  jQuery(".woocommerce-form-login__submit").click(function () {
176    localStorage.setItem("loginType", "login");
177  });
178
179  if (jQuery(".woocommerce-error").length) {
180    const error = jQuery(".woocommerce-error li").first().html();
181    const loginType = localStorage.getItem("loginType");
182
183    if (error.includes("email") || error.includes("Email")) {
184      jQuery(`.woocommerce-form-${loginType}`)
185        .find('input[name="email"]')
186        .parents(".woocommerce-form-row")
187        .addClass("woocommerce-invalid")
188        .addClass("woocommerce-invalid-required-field");
189    } else if (error.includes("username") || error.includes("Username")) {
190      jQuery(`.woocommerce-form-${loginType}`)
191        .find('input[name="username"]')
192        .parents(".woocommerce-form-row")
193        .addClass("woocommerce-invalid")
194        .addClass("woocommerce-invalid-required-field");
195    } else if (error.includes("password") || error.includes("Password")) {
196      jQuery(`.woocommerce-form-${loginType}`)
197        .find('input[name="password"]')
198        .parents(".woocommerce-form-row")
199        .addClass("woocommerce-invalid")
200        .addClass("woocommerce-invalid-required-field");
201    }
202  }
203});
204
205// OTP popup validation message
206
207jQuery("#myModal #close").html('<i class="fa-solid fa-xmark"></i>');
208
209jQuery(
210  "<p class='otp-message'>We've sent an OTP to the mobile number you've provided. Please enter the OTP below to validate your purchase. </p>"
211).insertBefore("#mo_validate_field");
212
213// Replace WooCommerce Cart Delete Icon
214
215jQuery(document).ready(function() {
216  // Handle the click on the filter button
217  jQuery('.search-bar__filter-button').click(function(event) {
218    event.stopPropagation(); // Prevent the click from propagating to the body
219    jQuery(this).siblings('.search-bar__filter-container').toggleClass('active');
220
221    if (jQuery(this).siblings('.search-bar__filter-container').hasClass('active')) {
222      jQuery('.search-bar__filter-button').find('.fa-chevron-down').css('transform', 'rotate(180deg)');
223    } else {
224      jQuery('.search-bar__filter-button').find('.fa-chevron-down').css('transform', 'rotate(0deg)');
225    }
226  });
227
228  jQuery('.search-bar__filter-close-button').click(function(event) {
229    event.stopPropagation(); // Prevent the click from propagating to the body
230    jQuery(this).parents('.search-bar__filter-container').toggleClass('active');
231
232    if (jQuery(this).parents('.search-bar__filter-container').hasClass('active')) {
233      jQuery('.search-bar__filter-button').find('.fa-chevron-down').css('transform', 'rotate(180deg)');
234    } else {
235      jQuery('.search-bar__filter-button').find('.fa-chevron-down').css('transform', 'rotate(0deg)');
236    }
237  });
238
239
240  // Handle clicks on the body to close the filter container if clicking outside of it
241  jQuery('body').click(function(event) {
242    if (!jQuery(event.target).closest('.search-bar__filter-container').length && !jQuery(event.target).closest('.search-bar__filter-button').length) {
243      jQuery('.search-bar__filter-container').removeClass('active');
244      jQuery('.search-bar__filter-button').find('.fa-chevron-down').css('transform', 'rotate(0deg)');
245    }
246  });
247
248  jQuery('.search-bar__ordering-container').click(function() {
249    jQuery(this).find('.fa-chevron-down').toggleClass('active');
250  })
251
252  jQuery('body').click(function(event) {
253    if (!jQuery(event.target).closest('.search-bar__ordering-container').length) {
254      jQuery(this).find('.fa-chevron-down').removeClass('active')
255    }
256  });
257
258  jQuery(document).on( "scroll", function() {
259    jQuery('.search-bar__ordering-container').find('.fa-chevron-down').removeClass('active');
260  });
261
262  // Prevent clicks inside the filter container from propagating to the body
263  // jQuery('.search-bar__filter-container').click(function(event) {
264  //   event.stopPropagation();
265  // });
266
267
268   // Function to update button text based on selected radio button
269   function updateButtonText() {
270      // Get the selected payment method
271      var selectedMethod = jQuery('input[name="payment_method"]:checked').val();
272      // Update the button text
273      jQuery('button[name="woocommerce_checkout_place_order"]').text('Pay Now With ' + selectedMethod);
274      // alert(selectedMethod);
275      // console.log(selectedMethod);
276    }
277
278    // Trigger the function when the page loads
279    setTimeout(function() {
280      updateButtonText();
281  }, 2500);
282
283    // Trigger the function whenever the radio button changes
284    jQuery(document).on('change', 'input[name="payment_method"]' ,function() {
285        updateButtonText();
286    });
287});