Known Clashes and How to Fix Them

Welcome!

At Rebecca Grace Designs, we know copy and pasting code does not always work. We have made our best effort to make sure all our codes work well together. However, sometimes certain codes just don’t want to play nice. Below is a list of the code snippets that don’t like to work together. For each one we have provided a code snippet you can use instead.

Note: Find a pair of clashing codes that are not in this list? Click here to report a problem.

Table of Contents

1. Add a Search Bar to the Header | Squarespace 7.1 and Autoplay Carousel Summary Blocks

2. Add a Search Bar to the Header | Squarespace 7.1 and Autoplay Gallery Reel Sections

1. Search Bar in Header and Autoplay Carousel Summary Blocks

If you are using the mobile check option for both of these plugins, the code will clash because you are using the same function name twice. To use them at the same time, the codes will need to be combined. Find the Search Bar Option you would like to use and copy and paste the following code into your footer instead of the footer code provided.

Search Bar Option 1 and Autoplay Carousel Summary Block

<!-- Search Bar in Header and Autoplay Carousel Block -->
<script>
  (function() {
    var headerSearch = document.getElementById("header-search");
    headerSearch.style.display = "block";
    var headerNav = document.querySelector(".header-menu-nav-folder");
    var headerDesktopDisplay = document.querySelector(".header-display-desktop");

    function mobileCheck(x) {
      if (x.matches) {
        headerNav.prepend(headerSearch);
      } else {
        headerDesktopDisplay.prepend(headerSearch);

        var summaryCarousel = document.querySelectorAll(".sqs-block-summary-v2");
        for (var i = 0; i < summaryCarousel.length; i++) {
          var carouselNextArrow = summaryCarousel[i].querySelector(".summary-carousel-pager-next");
          var carouselPrevArrow = summaryCarousel[i].querySelector(".summary-carousel-pager-prev");
        }

        carouselPrevArrow.addEventListener('click', carouselStopAutoplay, false);

        function carouselClickNext() {
          carouselNextArrow.click();
        }

        function carouselStopAutoplay() {
          clearInterval(carouselAutoplay);
        }

        let carouselAutoplay = setInterval(carouselClickNext, 3000);
      }
    }

    var x = window.matchMedia("(max-width: 640px)");
    mobileCheck(x); // Call listener function at run time
    x.addListener(mobileCheck); // Attach listener function on state changes
  })():
</script>

Search Bar Option 2 and Autoplay Carousel Summary Block

<!-- Search Bar in Header and Autoplay Carousel Block -->
<script>
  (function() {
    var headerSearch = document.getElementById("header-search");
    headerSearch.style.display = "block";
    var headerNav = document.querySelector(".header-menu-nav-folder");
    var headerDesktopDisplay = document.querySelector(".header-display-desktop");

    function mobileCheck(x) {
      if (x.matches) {
        headerNav.prepend(headerSearch);
      } else {
        headerDesktopDisplay.after(headerSearch);

        var summaryCarousel = document.querySelectorAll(".sqs-block-summary-v2");
        for (var i = 0; i < summaryCarousel.length; i++) {
          var carouselNextArrow = summaryCarousel[i].querySelector(".summary-carousel-pager-next");
          var carouselPrevArrow = summaryCarousel[i].querySelector(".summary-carousel-pager-prev");
        }

        carouselPrevArrow.addEventListener('click', carouselStopAutoplay, false);

        function carouselClickNext() {
          carouselNextArrow.click();
        }

        function carouselStopAutoplay() {
          clearInterval(carouselAutoplay);
        }

        let carouselAutoplay = setInterval(carouselClickNext, 3000);
      }
    }

    var x = window.matchMedia("(max-width: 640px)");
    mobileCheck(x); // Call listener function at run time
    x.addListener(mobileCheck); // Attach listener function on state changes
  })();
</script>

Search Bar Option 3 and Autoplay Carousel Summary Block

<!-- Search Icon in Header and Autoplay Carousel Block -->
<script>
  (function() {
    var headerSearch = document.querySelector(".header-search");
    headerSearch.style.display = "block";
    var headerNav = document.querySelector(".header-menu-nav-folder");
    var headerActions = document.querySelector(".header-actions").children[0];

    function mobileCheck(x) {
      if (x.matches) {
        headerNav.prepend(headerSearch);
      } else {
        headerActions.after(headerSearch);

        var summary = document.querySelectorAll(".sqs-block-summary-v2");
        var summaryCarousel = document.querySelectorAll(".sqs-block-summary-v2");
        for (var i = 0; i < summaryCarousel.length; i++) {
          var carouselNextArrow = summaryCarousel[i].querySelector(".summary-carousel-pager-next");
          var carouselPrevArrow = summaryCarousel[i].querySelector(".summary-carousel-pager-prev");
        }

        carouselPrevArrow.addEventListener('click', carouselStopAutoplay, false);

        function carouselClickNext() {
          carouselNextArrow.click();
        }

        function carouselStopAutoplay() {
          clearInterval(carouselAutoplay);
        }

        let carouselAutoplay = setInterval(carouselClickNext, 3000);
      };
    }


    var x = window.matchMedia("(max-width: 640px)");
    mobileCheck(x); // Call listener function at run time
    x.addListener(mobileCheck); // Attach listener function on state changes
  })();
</script>

2. Search Bar in Header and Autoplay Gallery Reel Sections

If you are using the mobile check option for both of these plugins, the code will clash because you are using the same function name twice. To use them at the same time, the codes will need to be combined. Find the Search Bar Option you would like to use and copy and paste the following code into your footer instead of the footer code provided.

Search Bar Option 1 and Autoplay Gallery Reel Sections

<!-- Search Bar in Header and Autoplay Gallery Reel -->
<script>
  (function() {
    var headerSearch = document.getElementById("header-search");
    headerSearch.style.display = "block";
    var headerNav = document.querySelector(".header-menu-nav-folder");
    var headerDesktopDisplay = document.querySelector(".header-display-desktop");

    function mobileCheck(x) {
      if (x.matches) {
        headerNav.prepend(headerSearch);
      } else {
        headerDesktopDisplay.prepend(headerSearch);

        var galleryReel = document.querySelectorAll(".gallery-reel");
        for (var i = 0; i < galleryReel.length; i++) {
          var nextGalleryReelArrow = galleryReel[i].querySelector('[aria-label="Next Slide"]');
          var prevGalleryReelArrow = galleryReel[i].querySelector('[aria-label="Previous Slide"]');
    
          prevGalleryReelArrow.addEventListener('click', galleryReelStopAutoplay, false);

          function clickGalleryReelNext() {
            nextGalleryReelArrow.click();
          }

          function galleryReelStopAutoplay() {
            clearInterval(galleryReelAutoplay);
          }

          let galleryReelAutoplay = setInterval(clickGalleryReelNext, 3000);
        }
      }
    }

    var x = window.matchMedia("(max-width: 640px)");
    mobileCheck(x); // Call listener function at run time
    x.addListener(mobileCheck); // Attach listener function on state changes
  })();
</script>

Search Bar Option 2 and Autoplay Gallery Reel Sections

<!-- Search Bar in Header and Autoplay Gallery Reel -->
<script>
  (function() {
    var headerSearch = document.getElementById("header-search");
    headerSearch.style.display = "block";
    var headerNav = document.querySelector(".header-menu-nav-folder");
    var headerDesktopDisplay = document.querySelector(".header-display-desktop");

    function mobileCheck(x) {
      if (x.matches) {
        headerNav.prepend(headerSearch);
      } else {
        headerDesktopDisplay.after(headerSearch);

        var galleryReel = document.querySelectorAll(".gallery-reel");
        for (var i = 0; i < galleryReel.length; i++) {
          var nextGalleryReelArrow = galleryReel[i].querySelector('[aria-label="Next Slide"]');
          var prevGalleryReelArrow = galleryReel[i].querySelector('[aria-label="Previous Slide"]');
        
          prevGalleryReelArrow.addEventListener('click', galleryReelStopAutoplay, false);

          function clickGalleryReelNext() {
            nextGalleryReelArrow.click();
          }

          function galleryReelStopAutoplay() {
            clearInterval(galleryReelAutoplay);
          }

          let galleryReelAutoplay = setInterval(clickGalleryReelNext, 3000);
        }
      }
    }

    var x = window.matchMedia("(max-width: 640px)");
    mobileCheck(x); // Call listener function at run time
    x.addListener(mobileCheck); // Attach listener function on state changes
  })();
</script>

Search Bar Option 3 and Autoplay Gallery Reel Sections

<!-- Search Icon in Header and Autoplay Gallery Reel -->
<script>
  (function() {
    var headerSearch = document.querySelector(".header-search");
    headerSearch.style.display = "block";
    var headerNav = document.querySelector(".header-menu-nav-folder");
    var headerActions = document.querySelector(".header-actions").children[0];

    function mobileCheck(x) {
      if (x.matches) {
        headerNav.prepend(headerSearch);
      } else {
        headerActions.after(headerSearch);

        var galleryReel = document.querySelectorAll(".gallery-reel");
        for (var i = 0; i < galleryReel.length; i++) {
          var nextGalleryReelArrow = galleryReel[i].querySelector('[aria-label="Next Slide"]');
          var prevGalleryReelArrow = galleryReel[i].querySelector('[aria-label="Previous Slide"]');
               
          prevGalleryReelArrow.addEventListener('click', galleryReelStopAutoplay, false);

          function clickGalleryReelNext() {
            nextGalleryReelArrow.click();
          }

          function galleryReelStopAutoplay() {
            clearInterval(galleryReelAutoplay);
          }

          let galleryReelAutoplay = setInterval(clickGalleryReelNext, 3000);
        }
      }
    }

    var x = window.matchMedia("(max-width: 640px)");
    mobileCheck(x); // Call listener function at run time
    x.addListener(mobileCheck); // Attach listener function on state changes
  })();
</script>