https://melbournemarine.com.au/site/DefaultSite/skins/website_stacer_2025/js/custom.js?v=20260610-05

1// WHEN ADDING TO CART OR UPDATING THE CART
2var prm = Sys.WebForms.PageRequestManager.getInstance();
3
4if (prm != null) {
5  var postbackElem = null;
6  prm.add_beginRequest(function (sender, args) {
7    postbackElem = args.get_postBackElement();
8  });
9  prm.add_endRequest(function (sender, args) {
10    updateCartItemCount();
11    getCartDpItemQuantity();
12  });
13}
14
15// UPDATING CART ITEM, DISPLAY AT HEADER AND OFFCANVAS.HTML
16const updateCartItemCount = (text) => {
17  const $cartItems = $(".cartItem");
18  let cartItemsNumber = 0;
19
20  $cartItems.each(function () {
21    const numberOfItems = Number($(this).attr("item-count"));
22    cartItemsNumber += numberOfItems;
23  });
24
25  const $cartItemsNumberSpan = $(".cart-items-number");
26  const $cartQty = $("#cart-qty");
27
28  $cartItemsNumberSpan.each(function () {
29    $(this).attr("data-cart-items", cartItemsNumber);
30    $(this).text(cartItemsNumber);
31  });
32
33  if (cartItemsNumber) {
34    $cartQty.text(cartItemsNumber);
35  }
36
37  var tprice = $(".cart-total-price").data("total-price");
38  var float_tprice = parseFloat(tprice.replace(/[^0-9.]/g, "")) || 0.0;
39  $(".header-total-price").text(float_tprice.toFixed(2));
40};
41
42function changeview() {
43  $(".layout-btn")
44    .off("click")
45    .on("click", function () {
46      var id = $(this).attr("id");
47
48      switch (id) {
49        case "list-view":
50          listView($(this));
51          break;
52        case "3-column-view":
53          threeColumnView($(this));
54          break;
55        default:
56          fourColumnView($(this));
57      }
58    });
59}
60
61function listView(btn) {
62  $(".layout-btn").addClass("text-muted");
63  btn.removeClass("text-muted");
64  if (!window.matchMedia("(max-width: 480px)").matches) {
65    $("#in-stock-boat-listings").attr("class", "row g-4 row-cols-1 mt-2");
66    $("#in-stock-boat-listings .card-product").addClass("flex-row");
67    $("#in-stock-boat-listings .card-img")
68      .removeClass("w-100")
69      .addClass("w-25");
70    $("#in-stock-boat-listings .card-img a").attr(
71      "class",
72      "w-100 h-100 rounded-start ratio ratio-16x9 bg-white border-0",
73    );
74    $("#in-stock-boat-listings .card-img img").attr(
75      "class",
76      "rounded-start object-fit-cover",
77    );
78    $("#in-stock-boat-listings .card-body").addClass(
79      "w-75 d-flex flex-column align-items-start justify-content-center",
80    );
81    $("#in-stock-boat-listings .card-info").addClass(
82      "row align-items-start w-100",
83    );
84    $("#in-stock-boat-listings .boat-info").addClass("col-5");
85    $("#in-stock-boat-listings .boat-feautures").attr(
86      "class",
87      "boat-feautures row mt-0 col-7 gy-2",
88    );
89    $("#in-stock-boat-listings .boat-feautures span").attr(
90      "class",
91      "col-12 z150-col-12 small text-muted",
92    );
93  } else {
94    mobileGrid();
95  }
96}
97
98function threeColumnView(btn) {
99  $(".layout-btn").addClass("text-muted");
100  btn.removeClass("text-muted");
101  if (!window.matchMedia("(max-width: 480px)").matches) {
102    $("#in-stock-boat-listings").attr(
103      "class",
104      "row g-4 row-cols-xl-3 row-cols-lg-3 row-cols-2 row-cols-md-2 mt-2",
105    );
106    $("#in-stock-boat-listings .card-product").removeClass("flex-row");
107    $("#in-stock-boat-listings .card-img")
108      .removeClass("w-25")
109      .addClass("w-100");
110    $("#in-stock-boat-listings .card-img a").attr(
111      "class",
112      "w-100 ratio ratio-16x9 rounded bg-white border-0",
113    );
114    $("#in-stock-boat-listings .card-img img").attr(
115      "class",
116      "card-img-top object-fit-cover",
117    );
118    $("#in-stock-boat-listings .card-body").removeClass(
119      "w-75 d-flex flex-column align-items-start justify-content-center",
120    );
121    $("#in-stock-boat-listings .card-info").removeClass("row");
122    $("#in-stock-boat-listings .boat-info").removeClass("col-5");
123    $("#in-stock-boat-listings .boat-feautures").attr(
124      "class",
125      "boat-feautures row mt-3",
126    );
127    $("#in-stock-boat-listings .boat-feautures span").attr(
128      "class",
129      "col-6 z150-col-12 small text-muted",
130    );
131  } else {
132    mobileGrid();
133  }
134}
135
136function fourColumnView(btn) {
137  $(".layout-btn").addClass("text-muted");
138  btn.removeClass("text-muted");
139  if (!window.matchMedia("(max-width: 480px)").matches) {
140    $("#in-stock-boat-listings").attr(
141      "class",
142      "row g-4 row-cols-xl-4 row-cols-lg-3 row-cols-2 row-cols-md-2 mt-2",

143    );
144    $("#in-stock-boat-listings .card-product").removeClass("flex-row");
145    $("#in-stock-boat-listings .card-img")
146      .removeClass("w-25")
147      .addClass("w-100");
148    $("#in-stock-boat-listings .card-img a").attr(
149      "class",
150      "w-100 ratio ratio-16x9 rounded bg-white border-0",
151    );
152    $("#in-stock-boat-listings .card-img img").attr(
153      "class",
154      "card-img-top object-fit-cover",
155    );
156    $("#in-stock-boat-listings .card-body").removeClass(
157      "w-75 d-flex flex-column align-items-start justify-content-center",
158    );
159    $("#in-stock-boat-listings .card-info").removeClass("row");
160    $("#in-stock-boat-listings .boat-info").removeClass("col-5");
161    $("#in-stock-boat-listings .boat-feautures").attr(
162      "class",
163      "boat-feautures row mt-3",
164    );
165    $("#in-stock-boat-listings .boat-feautures span").attr(
166      "class",
167      "col-12 z150-col-12 small text-muted",
168    );
169  } else {
170    mobileGrid();
171  }
172}
173
174function mobileGrid() {
175  $("#in-stock-boat-listings").attr(
176    "class",
177    "row g-4 row-cols-xl-4 row-cols-lg-3 row-cols-1 row-cols-md-2 mt-2",
178  );
179  $("#in-stock-boat-listings .card").removeClass("flex-row");
180  $("#in-stock-boat-listings .card-img").removeClass("w-25").addClass("w-100");
181  $("#in-stock-boat-listings .card-img a").attr(
182    "class",
183    "w-100 ratio ratio-16x9 rounded bg-white border-0",
184  );
185  $("#in-stock-boat-listings .card-img img").attr(
186    "class",
187    "card-img-top object-fit-cover",
188  );
189  $("#in-stock-boat-listings .card-body").removeClass(
190    "w-75 d-flex flex-column align-items-start justify-content-center",
191  );
192  $("#in-stock-boat-listings .card-info").removeClass("row");
193  $("#in-stock-boat-listings .boat-info").removeClass("col-5");
194  $("#in-stock-boat-listings .boat-feautures").attr(
195    "class",
196    "boat-feautures row mt-3",
197  );
198  $("#in-stock-boat-listings .boat-feautures span").attr(
199    "class",
200    "col-6 z150-col-12 small text-muted",
201  );
202}
203
204function zoomModal() {
205  $("#boatImageGallery").on("click", ".slick-slide", function () {
206    let index = $(this).data("slick-index");
207
208    // Destroy slick in case it's already initialized
209    if ($(".slider-boat-gallery").hasClass("slick-initialized")) {
210      $(".slider-boat-gallery").slick("unslick");
211    }
212
213    $("#zoomImageModal").modal("show");
214
215    $("#zoomImageModal").on("shown.bs.modal", function () {
216      if (!$(".slider-boat-gallery").hasClass("slick-initialized")) {
217        $(".slider-boat-gallery").slick({
218          slidesToShow: 1,
219          arrows: true,
220          infinite: true,
221          autoplay: false,
222          dots: false,
223          speed: 1000,
224          loop: true,
225          adaptiveHeight: true,
226          prevArrow:
227            '<span class="slick-prev"><i class="feather-icon icon-chevron-left"></i></span>',
228          nextArrow:
229            '<span class="slick-next"><i class="feather-icon icon-chevron-right"></i></span>',
230        });
231      }
232
233      // Jump to clicked slide
234      $(".slider-boat-gallery").slick("slickGoTo", index, true);
235    });
236  });
237
238  $("#productDefaultImageGallery").on("click", ".slick-slide", function () {
239    let index = $(this).data("slick-index");
240
241    // Destroy slick in case it's already initialized
242    if ($(".slider-boat-gallery").hasClass("slick-initialized")) {
243      $(".slider-boat-gallery").slick("unslick");
244    }
245
246    $("#defaultZoomImageModal").modal("show");
247
248    $("#defaultZoomImageModal").on("shown.bs.modal", function () {
249      if (!$(".slider-boat-gallery").hasClass("slick-initialized")) {
250        $(".slider-boat-gallery").slick({
251          slidesToShow: 1,
252          arrows: true,
253          infinite: true,
254          autoplay: false,
255          dots: false,
256          speed: 1000,
257          loop: true,
258          adaptiveHeight: true,
259          prevArrow:
260            '<span class="slick-prev"><i class="feather-icon icon-chevron-left"></i></span>',
261          nextArrow:
262            '<span class="slick-next"><i class="feather-icon icon-chevron-right"></i></span>',
263        });
264      }
265
266      // Jump to clicked slide
267      $(".slider-boat-gallery").slick("slickGoTo", index, true);
268    });

269  });
270}
271
272function collapseContent() {
273  const $col_content = $(".collapse-opacity .content");
274  if ($col_content.height() > 200) {
275    $(".collapse-opacity").addClass("show");
276  }
277
278  $("#collapse-opacity-btn").on("click", function (e) {
279    $(".collapse-opacity").toggleClass("expanded");
280    e.preventDefault();
281  });
282}
283
284function zoom(e) {
285  const zoomer = e.currentTarget;
286
287  let offsetX, offsetY;
288
289  if (e.type === "touchmove") {
290    const touch = e.touches[0];
291    const rect = zoomer.getBoundingClientRect();
292    offsetX = touch.pageX - rect.left;
293    offsetY = touch.pageY - rect.top;
294  } else {
295    offsetX = e.offsetX;
296    offsetY = e.offsetY;
297  }
298
299  const x = (offsetX / zoomer.offsetWidth) * 100;
300  const y = (offsetY / zoomer.offsetHeight) * 100;
301
302  zoomer.style.backgroundPosition = `${x}% ${y}%`;
303}
304
305function categoryCollapseFunctionality() {
306  var path = window.location.pathname;
307
308  var segments = path.split("/").filter(function (seg) {
309    return seg !== "";
310  });
311  var cat_path = segments.slice(-2);
312
313  var act_cat = $(
314    `#categoryCollapseMenu li a[data-bs-target="#${cat_path[1]}"]`,
315  );
316  if (act_cat.length > 0) {
317    $(`#categoryCollapseMenu #${cat_path[1]}.accordion-collapse`).addClass(
318      "show",
319    );
320    $(`#categoryCollapseMenu li a[data-bs-target="#${cat_path[1]}"]`).addClass(
321      "active",
322    );
323  } else {
324    $(`#categoryCollapseMenu li a[data-bs-target="#${cat_path[0]}"]`).addClass(
325      "active",
326    );
327    $(`#categoryCollapseMenu #${cat_path[0]}.accordion-collapse`).addClass(
328      "show",
329    );
330    $(`#categoryCollapseMenu #${cat_path[0]} a#${cat_path[1]}`).addClass(
331      "subcat-active",
332    );
333  }
334
335  /// change collapse to Link
336  const subcat = $("#categoryCollapseMenu .accordion-collapse.collapse");
337  subcat.each(function () {
338    var li = $(this).find("li");
339
340    if (li.length === 0) {
341      $(this)
342        .siblings("a.nav-link")
343        .removeAttr(
344          "data-bs-toggle data-bs-target aria-expanded aria-controls",
345        );
346    }
347  });
348}
349
350function styleSkinTagFields() {
351  $("#freightCalculator .txtPostageCalc input").addClass("form-control");
352  $("#freightCalculator .btnPostageCalc input").addClass("btn btn-primary");
353}
354
355function eventsHandler() {
356  const SIDEBAR_KEY = "sidebarActive";
357
358  if (sessionStorage.getItem(SIDEBAR_KEY) === "true") {
359    $(".sidebar").addClass("active");
360    $(".main-layout").addClass("shifted");
361    $(".toggleSidebar span").text("Hide Filters");
362  }
363
364  $(".toggleSidebar").click(function (e) {
365    e.preventDefault();
366
367    $(".sidebar").toggleClass("active");
368    $(".main-layout").toggleClass("shifted");
369
370    const isActive = $(".sidebar").hasClass("active");
371
372    sessionStorage.setItem(SIDEBAR_KEY, isActive);
373
374    $('.toggleSidebar')
375      .find("span")
376      .text(isActive ? "Hide Filters" : "Filters");
377  });
378}
379
380function handleCardBadge() {
381  $(".card-badge").each(function () {
382    const $badgeContainer = $(this);
383
384    const isSpecial =
385      $badgeContainer.data("special") === true ||
386      $badgeContainer.data("special") === "True";
387    const isSold =
388      $badgeContainer.data("sold") === true ||
389      $badgeContainer.data("sold") === "True";
390    const isComingSoon =
391      $badgeContainer.data("comingsoon") === true ||
392      $badgeContainer.data("comingsoon") === "True";
393    const badgeLabel = $badgeContainer.data("badgelabel");
394
395    let badgeHtml = "";
396
397    if (isSpecial) {
398      badgeHtml = '<span class="badge bg-danger m-5">Special</span>';
399    } else if (isSold) {
400      badgeHtml = '<span class="badge bg-success m-5">Sold</span>';
401    } else if (isComingSoon) {
402      badgeHtml = '<span class="badge bg-danger m-5">Coming Soon</span>';
403    } else if (badgeLabel) {
404      badgeHtml = `<span class="badge bg-danger m-5">${badgeLabel}</span>`;
405    }
406
407    $badgeContainer.empty().append(badgeHtml);
408  });
409}
410
411function getCartDpItemQuantity() {
412  var products = $("#cart-dropdown-menu li");
413  if (products.length) {
414    products.each(function () {
415      var val = $(this).find(".riTextBox").val();
416      $(this).find(".cart-dn-price").text(val);
417    });

418  }
419}
420
421function showSlickHomeOurPrice() {
422  $(".poa-price").each(function () {
423    var ourprice = $(this).data("our-price");
424
425    if (ourprice && parseFloat(ourprice) !== 0) {
426      var formatted = parseFloat(ourprice).toLocaleString("en-US", {
427        minimumFractionDigits: 2,
428        maximumFractionDigits: 2,
429      });
430
431      $(this).text(`$${formatted}*`);
432    } else {
433      $(this).text("POA*");
434    }
435  });
436}
437
438
439function productListingsHideOtherVariantPrice(){
440  $(".card-product").each(function () {
441      $(this).find(".item-variant-price .item-variant-content ~ .item-variant-content").addClass("d-none");
442  });
443}
444
445$(document).ready(function () {
446  $(".pbBreadcrumb li.separator span").each(function () {
447    $(this).text("/");
448  });
449
450  if (window.matchMedia("(max-width: 480px)").matches) {
451    mobileGrid();
452  }
453
454  collapseContent();
455  changeview();
456  zoomModal();
457  categoryCollapseFunctionality();
458  styleSkinTagFields();
459  eventsHandler();
460  handleCardBadge();
461  getCartDpItemQuantity();
462  showSlickHomeOurPrice();
463  productListingsHideOtherVariantPrice();
464
465  $(".zoom-image").on("mousemove touchmove", function (e) {
466    zoom(e);
467  });
468
469  var tprice = $(".cart-total-price").attr("data-total-price");
470  var parent_tprice = parent.$(".cart-total-price").attr("data-total-price");
471  if (tprice) {
472    var float_tprice = parseFloat(tprice.replace(/[^0-9.]/g, "")) || 0.0;
473    $(".header-total-price").text(float_tprice.toFixed(2));
474  } else {
475    var float_tprice = parseFloat(parent_tprice.replace(/[^0-9.]/g, "")) || 0.0;
476    $(".header-total-price").text(float_tprice.toFixed(2));
477  }
478
479  var tooltipTriggerList = [].slice.call(
480    document.querySelectorAll('[data-bs-toggle="tooltip"]'),
481  );
482  var tooltipList = tooltipTriggerList.map(function (tooltipTriggerEl) {
483    return new bootstrap.Tooltip(tooltipTriggerEl);
484  });
485});