https://www.florsheim.com/shop/customers/resources/js/loyaltyprogress.js

1$(document).ready(function() {
2  var maxPoints = 300;
3
4  // Store last known values for polling
5  var lastPointsVal = null;
6  var lastPointsCartVal = null;
7
8  function updateProgressBar(points, containerSelector) {
9    var effectivePoints = points % maxPoints;
10    var percentage = (effectivePoints / maxPoints) * 100;
11
12    $(`${containerSelector} .progress`).css("width", percentage + "%");
13
14    var firstLabel = $(`${containerSelector} .progress-label:first-child`);
15    var lastLabel = $(`${containerSelector} .progress-label:last-child`);
16
17    if (percentage === 0) {
18      firstLabel.removeClass("progress-label-behind");
19      lastLabel.removeClass("progress-label-behind");
20    } else if (percentage >= 100) {
21      firstLabel.addClass("progress-label-behind");
22      lastLabel.addClass("progress-label-behind");
23    } else {
24      firstLabel.addClass("progress-label-behind");
25      lastLabel.removeClass("progress-label-behind");
26    }
27
28    firstLabel.css("color", firstLabel.hasClass("progress-label-behind") ? "white" : "");
29    lastLabel.css("color", lastLabel.hasClass("progress-label-behind") ? "" : "#6D6E71");
30  }
31
32  function updateProgressBarCart(points) {
33    var effectivePoints = points % maxPoints;
34    var percentage = (effectivePoints / maxPoints) * 100;
35
36    $("#cart-progress .progress").css("width", percentage + "%");
37
38    var firstLabel = $("#cart-progress .progress-label:first-child");
39    var lastLabel = $("#cart-progress .progress-label:last-child");
40
41    if (percentage === 0) {
42      firstLabel.removeClass("progress-label-behind");
43      lastLabel.removeClass("progress-label-behind");
44    } else if (percentage >= 100) {
45      firstLabel.addClass("progress-label-behind");
46      lastLabel.addClass("progress-label-behind");
47    } else {
48      firstLabel.addClass("progress-label-behind");
49      lastLabel.removeClass("progress-label-behind");
50    }
51
52    firstLabel.css("color", firstLabel.hasClass("progress-label-behind") ? "white" : "");
53    lastLabel.css("color", lastLabel.hasClass("progress-label-behind") ? "" : "#6D6E71");
54  }
55
56  // Update on input or change event for available-points
57  $('#available-points').on('input change', function() {
58    var val = parseInt($(this).val() || 0);
59    updateProgressBar(val, "#progress");
60    lastPointsVal = val;
61  });
62
63  // Update on input or change event for available-points-cart
64  $('#available-points-cart').on('input change', function() {
65    var val = parseInt($(this).val() || 0);
66    updateProgressBarCart(val);
67    lastPointsCartVal = val;
68  });
69
70
71  // Initial update on page load
72  var initPoints = parseInt($('#available-points').val() || 0);
73  updateProgressBar(initPoints, "#progress");
74  lastPointsVal = initPoints;
75
76  var initPointsCart = parseInt($('#available-points-cart').val() || 0);
77  updateProgressBarCart(initPointsCart);
78  lastPointsCartVal = initPointsCart;
79
80  // Polling fallback: check every 200ms if value changed (for external changes without events)
81  setInterval(function() {
82    var val = parseInt($('#available-points').val() || 0);
83    if (val !== lastPointsVal) {
84      lastPointsVal = val;
85      updateProgressBar(val, "#progress");
86    }
87
88    var valCart = parseInt($('#available-points-cart').val() || 0);
89    if (valCart !== lastPointsCartVal) {
90      lastPointsCartVal = valCart;
91      updateProgressBarCart(valCart);
92    }
93  }, 200);
94});