如何将Shopify隐藏商品选项的CSS选择器限定到data-option-id属性

原代码通过固定ID定位元素隐藏商品选项，后续新增页面选项时容易误操作其他选项。以下是修改后的代码，通过data-option-id属性精准定位目标选项，确保仅隐藏指定商品选项：

原代码 #

{% if template contains "product" and product.handle == "copy-2-add-a-custom-logo" %}
  if (getCookie(customLogoCookie) == "1") {
    let myInterval = setInterval(function() {
      const customLogoOptionSetId = "gsAppContainer";  // Fixed id
      let customLogoSelector = document.getElementById(customLogoOptionSetId);
      if (!customLogoSelector) {
        return;
      }

      clearInterval(myInterval);

      // Hide the custom options. We need to go 3 levels up.
      customLogoSelector.style.display = "none";

修改后的代码 #

{% if template contains "product" and product.handle == "copy-2-add-a-custom-logo" %}
  if (getCookie(customLogoCookie) == "1") {
    let myInterval = setInterval(function() {
      // 替换为你目标选项的实际data-option-id值（从页面元素中获取）
      const targetOptionDataId = "custom-logo-option";
      // 使用属性选择器精准定位目标选项元素
      let targetOptionElement = document.querySelector(`[data-option-id="${targetOptionDataId}"]`);
      
      if (!targetOptionElement) {
        return;
      }

      clearInterval(myInterval);

      // 根据页面结构找到需要隐藏的外层容器（示例为往上找3层，或用closest更健壮）
      let containerToHide = targetOptionElement.parentNode.parentNode.parentNode;
      // 或者用closest匹配外层类名（推荐）：
      // let containerToHide = targetOptionElement.closest('.product-form__input');
      containerToHide.style.display = "none";
    }, 100);
  }
{% endif %}

关键修改说明 #

• 精准定位：用document.querySelector('[data-option-id="目标值"]')替代ID选择器，确保只匹配带有指定data-option-id属性的元素，避免新增选项时的冲突。
• 容器查找优化：如果页面结构稳定，推荐使用closest()方法直接匹配外层容器的类名，比多次调用parentNode更健壮，适配结构微调。
• 保留定时器逻辑：确保元素完全渲染后再执行隐藏操作，避免因DOM未加载完成导致的查找失败。

内容的提问来源于stack exchange，提问作者Pramod Gangadar