如何自动加载更多产品两次，然后加载更多按钮

问题描述

嗨，可爱的人们！

我是开发世界的新手！你好！！ 我正在尝试覆盖包含产品的列表页面。我想实现它在滚动时自动显示更多产品，然后再次滚动显示更多产品，然后显示加载更多按钮。 这是在滚动时自动显示更多产品的代码：

if (
  (tc_vars.env_template === "list" ||
    tc_vars.env_template === "internal_search" ||
    tc_vars.env_template === "other_generic") &&
  document.querySelector(".more-content") !== null
) {

  var secondsclicked = 0;
  window.addEventListener("scroll",function () {
    var element = document.querySelector(".more-content");
    if (element !== null) {
      var position = element.getBoundingClientRect();

      // checking if cta visible
      if (position.top >= 0 && position.bottom <= window.innerHeight) {
        var d = new Date();
        var seconds = d.getSeconds();

        if (
          seconds !== secondsclicked &&
          document.querySelector(".more-content").parentElement.offsetHeight !==
            0
        ) {
          document.getElementById("more_product_a").click();
          secondsclicked = d.getSeconds();
        }
      }
    }
  });
}

有没有办法调整这段代码，让它像上面描述的那样执行，所以滚动两次加载更多产品，然后加载更多按钮。 这将是惊人的 ：） 期待您的回复！

解决方法

自己想出来的！ :)

if (
      (tc_vars.env_template === "list" ||
        tc_vars.env_template === "internal_search" ||
        tc_vars.env_template === "other_generic") &&
      document.querySelector(".more-content") !== null
    ) {
    
      let secondsclicked = 0;
      window.addEventListener("scroll",function () {
        const products = document.getElementsByClassName("dkt-product");
        
        if (products.length >= 96) return;
        
        const element = document.querySelector(".more-content");
        if (element !== null) {
          const position = element.getBoundingClientRect();
    
          // checking if cta visible
          if (position.top >= 0 && position.bottom <= window.innerHeight) {
            const d = new Date();
            const seconds = d.getSeconds();
    
            if (
              seconds !== secondsclicked &&
              document.querySelector(".more-content").parentElement.offsetHeight !==
                0
            ) {
              document.getElementById("more_product_a").click();
              secondsclicked = d.getSeconds();
            }
          }
        }
      });
    }