我正在通過谷歌優化建立一個Shopify網站的A/B測試。當有人將產品添加到購物車時，彈出窗口顯示該商品已添加到購物車，僅持續5秒鐘。我正試圖讓它無限期地顯示。

我希望可以直接編輯theme.js文件，因為這樣會很簡單。有一個名為popdown的函數，它的超時時間為5秒。班級& quot可見嗎& quot只是將visibility屬性更改為none。

有人知道我如何通過Google Optimize使用JavaScript或CSS來改變這一點嗎？

下面是來自theme.js文件的JavaScript/jQuery，它定義了我試圖改變的方法。

Product.prototype = _.assignIn({}, Product.prototype, {
    init: function () {
      theme.mediaInstances[this.id] = new theme.Media(this.container);
      theme.mediaInstances[this.id].init();
    },
    initAdd: function () {
      var $drawer = $(this.selectors.addDrawerWrapper),
        source = $(this.selectors.addDrawerTemplate).html(),
        template = Handlebars.compile(source),
        globalTimer;

      $("[data-add-to-cart]").on("click", function (e) {
        var isFocusEnabled = $("body").hasClass("focus-enabled");
        if (isFocusEnabled) {
          return;
        }
        e.preventDefault();
        var form = $(this).closest("form"),
          form_serialized = form.serializeArray();
        if (form.find('[type="file"]').length) {
          return;
        }
        var form_object = {};
        $.map(form_serialized, function (val, i) {
          form_object[val.name] = val.value;
        });
        ajaxAddItem(form_object);
      });
      var ajaxAddItem = function (data) {
        $.ajax({
          type: "POST",
          url: "/cart/add.js",
          dataType: "json",
          data: data,
          error: addError,
          success: addSuccess,
          complete: updateHeaderTotal,
        });
      };
      var updateHeaderTotal = function () {
        $.getJSON("/cart.js").done(function (cart) {
          var newTotal = slate.Currency.formatMoney(
            cart.total_price,
            theme.moneyFormat
          );
          $(".cartCost")
            .html("(<span class='money'>" + newTotal + "</span>)")
            .removeClass("hidden-count");
        });
      };
      var addError = function (object, status) {
        var errors =
          '<div class="errors">' + object.responseJSON.description + "</div>";
        $drawer.empty();
        $drawer.append(errors);
        $drawer.addClass("has-errors is-visible");
        popdown();
      };
      var addSuccess = function (product) {
        productObject = {
          product_title: product.product_title,
          product_image: product.image,
          variant:
            product.variant_title == "Default Title"
              ? false
              : product.variant_title,
          quantity: product.quantity,
          price: slate.Currency.formatMoney(product.price, theme.moneyFormat),
        };
        $drawer.empty();
        $drawer.append(template(productObject));

        // Popover should be just below header
        var topPosition =
          $(".site-header").outerHeight() + $(".info-bar").outerHeight();
        $drawer.attr("style", "");

        // If it is sticky, just put it at the header height with position: fixed
        if ($(".header__wrapper").hasClass("header--sticky")) {
          var topPosition = $(".site-header ").outerHeight();
          $drawer.css("top", topPosition);
        } else if ($(window).scrollTop() > topPosition) {
          // header is not visible pin to top
          $drawer.css("top", 0);
          $drawer.css("z-index", "2000");
        } else {
          // otherwise positon: absolute below header
          // or at top if scrolled below header
          topPosition = Math.max($(window).scrollTop(), topPosition);
          $drawer.css("position", "absolute");
          $drawer.css("top", topPosition);
        }

        $drawer.addClass("is-visible");
        popdown();
      };
      var popdown = function () {
        clearTimeout(globalTimer);
        globalTimer = setTimeout(function () {
          $drawer.removeClass("is-visible").removeClass("has-errors");
        }, 5000);
      };
      $drawer.on("click", ".close", function () {
        $drawer.removeClass("is-visible").removeClass("has-errors");
      });
    }

我已經嘗試將CSS改為& quot可見& quot，但它永遠不會出現。我試圖通過添加CSS來改變它，并通過JS來改變visibility屬性。在Chrome上的開發工具中，對象的可見性顯示為& quot可見& quot在計算的樣式中，但是它不起作用。

我也嘗試過改變& quotinitAdd & quot產品類中具有& quotpopdown & quot功能在里面。但我認為，我似乎無法訪問正在使用的產品類的另一個實例。我還嘗試了查看add to cart按鈕上的eventListeners。

到目前為止，我還沒有成功過。我愿意嘗試任何事情。這是一件很小的事情，我以為會很簡單，但它是如此的痛苦。

我最終用一個突變觀測器解決了這個問題。我不知道如何改變Product類中的方法，所以我使用了一個突變觀察器來觀察& quot可見嗎& quot類被移除，并立即將其添加回去。這并不理想，但足以解決我的問題。

const element = document.getElementById("CartDrawerWrapper--product");
  const addToCartButton = document.getElementById("AddToCart-product");

  let observerEnabled = true;

  addToCartButton.addEventListener("click", () => {
    observerEnabled = true;
  });

  const observer = new MutationObserver(function (mutationsList) {
    if (observerEnabled) {
      for (let mutation of mutationsList) {
        if (
          mutation.type === "attributes" &&
          mutation.attributeName === "class"
        ) {
          const classList = mutation.target.classList;

          if (!classList.contains("is-visible")) {
            classList.add("is-visible");

            const exitButton = document.querySelector(
              "#CartDrawerWrapper--product > span.close"
            );
            exitButton.addEventListener("click", function () {
              observerEnabled = false;
              classList.remove("is-visible");
            });
          }
        }
      }
    }
  });

  const observerConfig = { attributes: true, attributeFilter: ["class"] };

  observer.observe(element, observerConfig);
}, 500);