Making Apps Work for Your Business

Shopify Apps
, ,
1

We needed Notify Me to work with a very controlled product setup—customers can only see certain products. Tags and code adjustments solved the first hurdle.

Next, we had to restrict variants. Using a MutationObserver, we detected when the app rendered the variant dropdown and filtered it accordingly.

Another challenge: the select’s change event was resetting options. Solution? Self-mutation on top of that—problem solved.

Here’s the final, working code:

// Cache out-of-stock variants (O(1) lookup)
var oos = {};

$(“#product-select option”).each(function () {
if (parseInt($(this).data(“stock”), 10) <= 0) {
oos[$(this).val()] = 1;
}
});

// Filter helper (hot path optimized)
function filter($select) {
if (!$select || !$select.length) return;

$select.children(“option”).each(function () {
if (!oos[this.value]) this.remove();
});
}

// Observe modal injection
var observer = new MutationObserver(function (mutations) {
for (var i = 0; i < mutations.length; i++) {
var nodes = mutations[i].addedNodes;

for (var j = 0; j < nodes.length; j++) {
  var $node = $(nodes[j]);
  if (!$node.hasClass("restock-alerts-modal-wrapper")) continue;

  var $select = $node.find(".restock-alerts-variant-select");
  filter($select);

  // Observe only this select
  new MutationObserver(function () {
    filter($select);
  }).observe($select[0], { childList: true });

  return; // stop after first modal
}

}
});

observer.observe(document.body, { childList: true, subtree: true });

3 Likes