0

With the code below, I'm hiding a product option from a Shopify app. I need to narrow down the CSS selector to a data-option-id attribute so that only that product option is hidden in case I add another option to the page.

{% 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";

enter image description here

Pramod Gangadar
  • 302
  • 2
  • 8
  • 3
    [css attribute selector](https://developer.mozilla.org/en-US/docs/Web/CSS/Attribute_selectors) – Diego D Aug 24 '22 at 08:22

1 Answers1

1

You can use the attribute selector when you want to hide div your arrow points to.

[data-option-id="yourIDhere"] {
  display: none;
}

When you want to hide the parent id="gsAppContainer" you have to either work in your template or via JavaScript, as there are no CSS selectors to style parents in CSS 3.

const childElement = document.querySelector('[data-option-id="yourIDhere"]');
childElement.closest('#gsAppContainer').style.display = "none";
Uwe
  • 385
  • 1
  • 5
  • 14
  • Uwe, something like ` const customLogoOptionSetId = "677da03297bffd6ca31e53fd2ba710b4"; // Fixed id document.querySelector('[data-option-id="yourIDhere"]'); let customLogoSelector = document.querySelector('[data-option-id=" + customLogoOptionSetId + "]');` isn't working. Is there any syntax error? – Pramod Gangadar Aug 24 '22 at 09:05
  • 1
    Yes - you have to close the string before and after your concatination `let customLogoSelector = document.querySelector('[data-option-id="' + customLogoOptionSetId + '"]');` – Uwe Aug 24 '22 at 09:26