"Live preview" là gì?

Chức năng "Live preview" là việc hiển thị các thay dổi 1 cách tức thời khi khách hàng cá nhân hóa sản phẩm ngoài storefront. Trong trường hợp bạn không thấy live preview ở trên trang sản phẩm, bạn cần xác định gallery trên trang sản phẩm đó là của theme hay của app teeinblue.

Nhận biết gallery của teeinblue

Bạn có thể nhận biết gallery của teeinblue bằng những đặc điểm sau:

Mũi tên điều hướng ở 2 bên của gallery, cùng với Số trang ở góc trái bên dưới của gallery.



Tính năng Sticky: gallery của teeinblue sẽ được gắn cố định ở phía bên trái trang sản phẩm, kể cả khi cuộn trang.



➡ Nếu gallery hiện tại bạn đang sử dụng có tất cả các đặc điểm nêu trên, thì đó chính là gallery của teeinblue.

Để giải quyết vấn đề live preview không hoạt động trên gallery của teeinblue, bạn cần xem lại tùy chọn "Disable Live preview" (Tạm dịch: Tắt Live preview) ở trong trang Product page settings.



Nếu công tắc đang của tùy chọn này đang được bật, vui lòng tắt đi để live preview được hoạt động.
Nếu công tắc của tùy chọn này đã tắt, vui lòng liên hệ cho team support của teeinblue để được hỗ trợ về vấn đề này.

Tuy nhiên, nếu gallery hiện tại của bạn KHÔNG có những đặc điểm nêu trên thì đó là gallery của theme.
Thông thường, sau khi bạn cài app, teeinblue sẽ tự động phát hiện gallery của theme để thay thế và giúp cho live preview hoạt động. Nhưng đối với một số loại themes, gallery sẽ không thể tìm ra và thay thế gallery.

Vì vậy, nếu bạn đang gặp khó khăn trong vấn đề này, hãy làm theo các bước dưới đây để giải quyết vấn đề này nhé!

Thay thế gallery của theme bằng gallery của teeinblue (Thủ công)

Bước 1: Copy CSS selector của gallery thuộc theme

Trên trang sản phẩm ngoài storefront, nhấn chuột phải vào gallery của theme > Sau đó chọn Inspect



Công cụ lập trình sẽ hiện lên và tự động phát hiện tags HTML của gallery thuộc theme



Ở phần công cụ đó, cuộn trang lên trên để tìm thư mục lớn nhất chưa toàn bộ gallery (thông thường sẽ có dạng: <div class= "product-gallery...">)



Nhấn chuột phải vào dòng thư mục lớn nhất đó > Chọn Copy > Chọn Copy selector



Vậy là bước 1: copy CSS selector của gallery thuộc theme đã xong.

Nếu bạn gặp khó khăn trong việc tìm selector của gallery, vui lòng liên hệ với chúng tôi để được hỗ trợ.

Step 2: Thêm script của teeinblue vào trong theme

Vào trang Shopify admin > Vào mục Themes > Nhấn vào Actions > Chọn Edit code của theme đang dùng.
Dưới danh mục Layout, tìm file theme.liquid > Nhận vào tên file đó để mở nội dung của file ở bên phải.
Sử dụng tổ hợp Ctrl + F để tìm tag </head>



Dán đoạn code dưới đây ở ngay trên đầu tag </head> và *thay cụm "yourselector" bằng CSS selector mà bạn vừa copy được ở Bước 1.

<script type="text/javascript">
    teeinblue = {
      gallerySelector: 'yourselector',
    };
  </script>

Ví dụ: CSS selector bạn copy được trước đó là "++.product-gallery-wrapper++". Vậy hãy dán nó vào theme.liquid như sau:



Lưu ý rằng dấu nháy đơn ' phải xuất hiện ở đầu và ở cuối CSS selector. Đoạn CSS selector của bạn cần chính xác là 'yourselector', không phải phải yourselector.

Sau đó, lưu lại thay đổi.

Bạn có thể ra ngoài storefront để kiểm tra lại xem gallery của teeinblue đã được thay thế hay chưa (kiểm tra lại bằng các đặc điểm nêu trên). Hãy chọn thử 1 vài lựa chọn cá nhân hóa để kiểm tra tính năng live preview có hoạt động hay không.

Nếu live preview của store bạn vẫn không hoạt động sau khi làm theo hướng dẫn này, hãy liên hệ với chúng tôi để được hỗ trợ nhé.

⚠ Các themes không tương thích với teeinblue

Danh sách các themes không hoạt động tốt khi sử dụng app teeinblue:

Pop
Boundless
Jumpstart
Avenue
Galleria
Venue
Handy
Vogue
Maker
Showtime
Pacific
Showcase
Vantage
Editions
Fashionopolism

Cập nhật vào: 29/04/2021