在 Shopify 中为 DAWN 主题添加延迟到此弹出新闻通讯

Question

我是 Shopify 中的 Liquid 新手。我在 YouTube 上找到了这个人，他提供了一个脚本来添加到 Shopify 中的 DAWN 主题。一切都很棒，只是缺少一件事，那就是 5 秒的延迟。延迟会带来更好的客户体验，这样当他们访问网站时，弹出窗口就不会出现在他们面前。

有人可以帮我添加延迟吗？

提前谢谢您，我真的很感激。

这是液体文件：

    {{ "custom-subscriber-popup.css" | asset_url | stylesheet_tag }}

    <div id="customNewsletter">
      <div class="customNewsletter__container">
        <button id="customNewsletter__close">X</button>
        <div class="customNewsletter__logo">
          <img src="{{ section.settings.logo | img_url: 'master' }}" alt="" />
        </div>
        <div class="customNewsletter__text">
          <h1>{{ section.settings.heading }}</h1>
          <p>{{ section.settings.paragraph }}</p>
            {% form 'customer', class: 'custom__newsletter-form' %}
              <input type="hidden" name="contact[tags]" value="newsletter">
              <div class="newsletter-form__field-wrapper">
                <div class="field">
                  <input
                    id="NewsletterForm--{{ section.id }}"
                    type="email"
                    name="contact[email]"
                    class="field__input"
                    value="{{ form.email }}"
                    aria-required="true"
                    autocorrect="off"
                    autocapitalize="off"
                    autocomplete="email"
                    {% if form.errors %}
                      autofocus
                      aria-invalid="true"
                      aria-describedby="Newsletter-error--{{ section.id }}"
                    {% elsif form.posted_successfully? %}
                      aria-describedby="Newsletter-success--{{ section.id }}"
                    {% endif %}
                    placeholder="{{ 'newsletter.label' | t }}"
                    required
                  >
                  <label class="field__label" for="NewsletterForm--{{ section.id }}">
                    {{ 'newsletter.label' | t }}
                  </label>
                  <button type="submit" class="newsletter-form__button field__button" name="commit" id="Subscribe" aria-label="{{ 'newsletter.button_label' | t }}">
                    {% render 'icon-arrow' %}
                  </button>
                </div>
                {%- if form.errors -%}
                  <small class="newsletter-form__message form__message" id="Newsletter-error--{{ section.id }}">{% render 'icon-error' %}{{ form.errors.translated_fields['email'] | capitalize }} {{ form.errors.messages['email'] }}</small>
                {%- endif -%}
              </div>
              {%- if form.posted_successfully? -%}
                <h3 class="newsletter-form__message newsletter-form__message--success form__message" id="Newsletter-success--{{ section.id }}" tabindex="-1" autofocus>{% render 'icon-success' %}{{ 'newsletter.success' | t }}</h3>
              {%- endif -%}
            {% endform %}

        </div>
      </div>
    </div>
  {{ 'custom-subscriber-popup.js' | asset_url | script_tag }}    
{% schema %}
  {
    "name": "Pop Up",
    "settings": [
          {
      "type": "image_picker",
      "id": "logo",
      "label": "Logo",
      "info": "Logo goes here"
    },
      
    {
      "type": "text",
      "id": "heading",
      "label": "Heading",
      "default": "Heading Here",
      "placeholder": "Place Your Heading Here",
      "info": "Header for your popup"
    },
    {
      "type": "textarea",
      "id": "paragraph",
      "label": "Paragraph",
      "default": "Tell your customer why they should subscribe.",
      "placeholder": "Subscribe now to hear about great deals!",
      "info": "Paragraph area for pop up"
    }
    ],
    "presets": [
      {
        "name": "Pop Up"
      }
    ]
  }
{% endschema %}


{% javascript %}
{% endjavascript %}

theme.liquid 文件的脚本：

    {% if customer.accepts_marketing != true %}

    <script>
      console.log("does not accept marketing")
      let cookieStatus = Cookies.get('popUpVisited');
      if (!cookieStatus) {
      const popUpForm = document.getElementById('customNewsletter');
      console.log("passed condition");
      popUpForm.style.display = "flex";
      Cookies.set('popUpVisited', 'true', { expires: 0 })
    }
      
    </script>
    
  {% endif %} 

这是JS.cookie.min.js文件：

/*! js-cookie v3.0.1 | MIT */
!(function (e, t) {
  "object" == typeof exports && "undefined" != typeof module
    ? (module.exports = t())
    : "function" == typeof define && define.amd
    ? define(t)
    : ((e = e || self),
      (function () {
        var n = e.Cookies,
          o = (e.Cookies = t());
        o.noConflict = function () {
          return (e.Cookies = n), o;
        };
      })());
})(this, function () {
  "use strict";
  function e(e) {
    for (var t = 1; t < arguments.length; t++) {
      var n = arguments[t];
      for (var o in n) e[o] = n[o];
    }
    return e;
  }
  return (function t(n, o) {
    function r(t, r, i) {
      if ("undefined" != typeof document) {
        "number" == typeof (i = e({}, o, i)).expires &&
          (i.expires = new Date(Date.now() + 864e5 * i.expires)),
          i.expires && (i.expires = i.expires.toUTCString()),
          (t = encodeURIComponent(t)
            .replace(/%(2[346B]|5E|60|7C)/g, decodeURIComponent)
            .replace(/[()]/g, escape));
        var c = "";
        for (var u in i)
          i[u] &&
            ((c += "; " + u), !0 !== i[u] && (c += "=" + i[u].split(";")[0]));
        return (document.cookie = t + "=" + n.write(r, t) + c);
      }
    }
    return Object.create(
      {
        set: r,
        get: function (e) {
          if ("undefined" != typeof document && (!arguments.length || e)) {
            for (
              var t = document.cookie ? document.cookie.split("; ") : [],
                o = {},
                r = 0;
              r < t.length;
              r++
            ) {
              var i = t[r].split("="),
                c = i.slice(1).join("=");
              try {
                var u = decodeURIComponent(i[0]);
                if (((o[u] = n.read(c, u)), e === u)) break;
              } catch (e) {}
            }
            return e ? o[e] : o;
          }
        },
        remove: function (t, n) {
          r(t, "", e({}, n, { expires: -1 }));
        },
        withAttributes: function (n) {
          return t(this.converter, e({}, this.attributes, n));
        },
        withConverter: function (n) {
          return t(e({}, this.converter, n), this.attributes);
        },
      },
      {
        attributes: { value: Object.freeze(o) },
        converter: { value: Object.freeze(n) },
      }
    );
  })(
    {
      read: function (e) {
        return (
          '"' === e[0] && (e = e.slice(1, -1)),
          e.replace(/(%[\dA-F]{2})+/gi, decodeURIComponent)
        );
      },
      write: function (e) {
        return encodeURIComponent(e).replace(
          /%(2[346BF]|3[AC-F]|40|5[BDE]|60|7[BCD])/g,
          decodeURIComponent
        );
      },
    },
    { path: "/" }
  );
});

这是 Custom-subscriber-pop.js 文件：

const newsletter__modal = document.getElementById("customNewsletter");

const newsletter__close = document.getElementById("customNewsletter__close");

newsletter__close.addEventListener("click", () => {
  newsletter__modal.style.display = "none";
});

Answer 1

将代码包装到setTimeout函数中，以延迟代码的执行。 了解有关 setTimeout 函数的更多信息这里

<script>
      console.log("does not accept marketing")
      let cookieStatus = Cookies.get('popUpVisited');
      if (!cookieStatus) {
      const popUpForm = document.getElementById('customNewsletter');
      console.log("passed condition");
      setTimeout(function() {
         popUpForm.style.display = "flex";
      },5000);
      Cookies.set('popUpVisited', 'true', { expires: 0 })
    }
      
    </script>