Các bạn có thể tìm thấy các bước để thực hiện Sticky gallery trên điện thoại trong bài viết này. Việc thực hiện đòi hỏi một chút kỹ năng coding. Tuy nhiên, nếu bạn theo sát hướng dẫn dưới đây, bạn sẽ có thể thực hiện được nó dễ dàng!
Sau khi bạn thực hiện, gallery sẽ hiển thị như dưới đây trên điện thoại:

Các bước để thực hiện:

Bạn đi đến phần Online Store > Themes > Edit code.



Tạo tee-sticky-gallery.js file trong folder Assets.



Tìm selector của thành phần mà có wraps gallery trong theme của bạn. Ở ví dụ dưới đây, chúng tôi dùng Dawn Theme, nên nó sẽ ở trong mục .grid__item.product__media-wrapper

Element bạn chọn phải là toàn bộ thư viện sản phẩm của template sản phẩm của bạn



Thêm đoạn code dưới đây vào tee-sticky-gallery.js file. Đặt biến galleryWrapperSelector với selector đã xác định trong bước trước. Ở đây, nó là .grid__item.product__media-wrapper với Dawn Theme.

Nếu bạn đang dùng các Theme khác không phải Theem Dawn, hãy thay thế đoạn selector ở dòng thứ 3 của JS dưới đây!

document.addEventListener("DOMContentLoaded", () => {
  const fixedLivePreview = () => {
    const galleryWrapperSelector = ".grid__item.product__media-wrapper";
    const $gallery = document.querySelector(galleryWrapperSelector);

    if (!$gallery) {
      return;
    }

    const style = document.createElement("style");
    style.innerHTML = `
      .gallery--sticky:not(.gallery--sticky--hide) ${galleryWrapperSelector} .tee-gallery-content {
        background: #fff;
        box-shadow: 0 2px 5px 3px rgba(0, 0, 0, .15);
        display: flex;
        justify-content: center;
        left: 0;
        position: fixed;
        top: 0;
        width: calc(100vw);
        z-index: 99;
      }
      .gallery--sticky:not(.gallery--sticky--hide) ${galleryWrapperSelector} .tee-gallery {
        width: auto;
        zoom: .7;
      }
      .gallery--sticky:not(.gallery--sticky--hide) ${galleryWrapperSelector} .tee-thumbnails,
      .gallery--sticky:not(.gallery--sticky--hide) ${galleryWrapperSelector} .tee-slider__dots {
        display: none;
      }
      .gallery--sticky:not(.gallery--sticky--hide) .gallery--close-button {
        display: block;
      }
      .gallery--sticky.gallery--sticky--hide .sticky-gallery-button {
        display: block;
      }
      .sticky-gallery-button {
        background-color: #fff;
        background-image: url('data:image/svg+xml;utf8,<svg version="1.1" id="Layer_2_1_" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 512 512" style="enable-background:new 0 0 512 512;" xml:space="preserve"><g><path d="M114.5,79.1C95,79.1,79.1,95,79.1,114.5v283c0,19.5,15.8,35.4,35.4,35.4h283c19.5,0,35.4-15.8,35.4-35.4v-283 c0-19.5-15.8-35.4-35.4-35.4H114.5z M114.5,409.3c-6.5,0-11.8-5.3-11.8-11.8V308l94.3-94.3l195.6,195.6H114.5z M409.3,392.7 L331.6,315l30.5-30.5l47.2,47.2V392.7z M409.3,114.5v183.8l-38.8-38.9c-4.6-4.6-12.1-4.7-16.7-0.1c0,0,0,0-0.1,0.1L315,298.3 L205.4,188.7c-4.6-4.6-12.1-4.7-16.7-0.1c0,0,0,0-0.1,0.1l-86,86.1V114.5c0-6.5,5.3-11.8,11.8-11.8h283 C404,102.7,409.3,108,409.3,114.5z"/><path d="M326.7,138.1c-26,0-47.2,21.1-47.2,47.2s21.1,47.2,47.2,47.2s47.2-21.1,47.2-47.2S352.8,138.1,326.7,138.1z M326.7,208.8 c-13,0-23.6-10.6-23.6-23.6s10.6-23.6,23.6-23.6s23.6,10.6,23.6,23.6S339.8,208.8,326.7,208.8z"/><path d="M23.7,35c0,0,0.1-4.9,3.3-7.9c3.5-3.4,8.1-3.5,8.1-3.5l89.6,0c0-19.2,0-23.6,0-23.6L34.9,0C15.6,0,0,15.6,0,34.9l0,89.8 l23.7,0V35z"/><path d="M484.9,26.9c3.4,3.5,3.5,8.1,3.5,8.1l0,89.6c19.2,0,23.6,0,23.6,0l0-89.8C512,15.6,496.4,0,477.1,0l-89.8,0l0,23.7H477 C477,23.7,482,23.8,484.9,26.9z"/><path d="M488.3,477c0,0-0.1,4.9-3.3,7.9c-3.5,3.4-8.1,3.5-8.1,3.5l-89.6,0c0,19.2,0,23.6,0,23.6l89.8,0c19.2,0,34.8-15.6,34.8-34.8 l0-89.8l-23.7,0V477z"/><path d="M27.1,485.1c-3.4-3.5-3.5-8.1-3.5-8.1l0-89.6c-19.2,0-23.6,0-23.6,0l0,89.8C0,496.4,15.6,512,34.9,512l89.8,0l0-23.7H35 C35,488.3,30,488.2,27.1,485.1z"/></g></svg>');
        background-position: center;
        background-repeat: no-repeat;
        background-size: 20px 20px;
        border-radius: 50%;
        box-shadow: 0px 0px 5px;
        display: none;
        height: 40px;
        position: fixed;
        right: 20px;
        top: 100px;
        width: 40px;
        z-index: 999;
      }
      .gallery--close-button {
        background-image: url('data:image/svg+xml;utf8,<svg height="329pt" viewBox="0 0 329.26933 329" width="329pt" xmlns="http://www.w3.org/2000/svg"><path d="m194.800781 164.769531 128.210938-128.214843c8.34375-8.339844 8.34375-21.824219 0-30.164063-8.339844-8.339844-21.824219-8.339844-30.164063 0l-128.214844 128.214844-128.210937-128.214844c-8.34375-8.339844-21.824219-8.339844-30.164063 0-8.34375 8.339844-8.34375 21.824219 0 30.164063l128.210938 128.214843-128.210938 128.214844c-8.34375 8.339844-8.34375 21.824219 0 30.164063 4.15625 4.160156 9.621094 6.25 15.082032 6.25 5.460937 0 10.921875-2.089844 15.082031-6.25l128.210937-128.214844 128.214844 128.214844c4.160156 4.160156 9.621094 6.25 15.082032 6.25 5.460937 0 10.921874-2.089844 15.082031-6.25 8.34375-8.339844 8.34375-21.824219 0-30.164063zm0 0"/></svg>');
        background-position: center;
        background-repeat: no-repeat;
        background-size: 16px 16px;
        height: 16px;
        opacity: 0.5;
        position: absolute;
        right: 20px;
        top: 20px;
        width: 16px;
      }
    `;
    document.head.appendChild(style);

    let hasStickyButton = false;
    let hasCloseButton = false;

    const onScroll = () => {
      const $teeGallery = document.querySelector(
        `${galleryWrapperSelector} #tee-gallery`
      );
      if ($teeGallery) {
        if (!hasStickyButton) {
          const stickyButton = document.createElement("div");
          stickyButton.className = "sticky-gallery-button";
          stickyButton.addEventListener("click", (e) => {
            e.stopPropagation();
            e.preventDefault();
            document.body.classList.remove("gallery--sticky--hide");
            const galleryContentHeight = document.querySelector(
              ".tee-gallery-content"
            ).offsetHeight;
            $gallery.style.height = `${galleryContentHeight + 10}px`;
          });
          document.body.appendChild(stickyButton);
          hasStickyButton = true;
        }
        if (!hasCloseButton) {
          const closeButton = document.createElement("div");
          closeButton.className = "gallery--close-button";
          closeButton.addEventListener("click", (e) => {
            e.stopPropagation();
            e.preventDefault();
            document.body.classList.add("gallery--sticky--hide");
            $gallery.style.removeProperty("height");
          });
          $teeGallery.appendChild(closeButton);
          hasCloseButton = true;
        }

        const galleryTop = $gallery.getBoundingClientRect().top;
        const tFormBottom = document
          .getElementById("tee-artwork-form")
          .getBoundingClientRect().bottom;
        const galleryContentHeight = document.querySelector(
          ".tee-gallery-content"
        ).offsetHeight;

        if (galleryTop < -10 && tFormBottom > galleryContentHeight) {
          document.body.classList.add("gallery--sticky");
          $gallery.style.height = `${galleryContentHeight + 10}px`;
        } else {
          document.body.classList.remove("gallery--sticky");
          $gallery.style.removeProperty("height");
        }
      }
    };

    const $window = window;
    $window.addEventListener("scroll", onScroll);
    $window.addEventListener("DOMMouseScroll", onScroll); // For older browsers
  };

  const w = window.innerWidth;
  const h = window.innerHeight;
  // Only for portrait screen
  if (h / w > 1.5 && w < 768) {
    setTimeout(function () {
      fixedLivePreview();
    }, 2000);
  }
});

Sau khi bạn copy code, file sẽ hiển thị như dưới đây:



Mở phần theme.liquid và thêm vào đó đoạn code snippet trước </head> tag.

{{ 'tee-sticky-gallery.js' | asset_url | script_tag }}

Refresh lại trang sản phẩm của bạn và kiểm tra.

Lưu ý

Bạn cần xác định chính xác selector của gallery wrapper element để đoạn snippet code có thể hoạt động chính xác.

Khách hàng có thể lựa chọn bật/tắt sticky gallery để Customize.



Nếu bạn cần hỗ trợ thực hiện tính năng này, hãy liên hệ với Support Team của chúng tôi!

Cập nhật vào: 13/09/2024