Cài widget thử đồ ảo cho website Sapo

Sapo Web chưa có ứng dụng Macgi riêng, nhưng widget chạy tốt qua một thẻ script trong giao diện. Giao diện Sapo dùng tệp .bwt với cú pháp Liquid. Bạn chỉ cần sửa một tệp; phần tự đặt nút và gắn tag là tuỳ chọn.

Chuẩn bị

Khoá pk_live_... trong email beta. Chưa có? Đăng ký beta.
Tài khoản Sapo có quyền chỉnh sửa giao diện website.
Khi đăng ký, báo mọi tên miền của shop (có và không có www, cả tên miền Sapo cấp sẵn) để khoá chạy trên tất cả.
Nên sao lưu giao diện (hoặc sửa trên một bản sao chưa xuất bản) trước khi chỉnh code.

Bước 1: dán script vào theme.bwt

Vào trang quản trị Sapo, chọn Website → Giao diện.
Ở giao diện đang dùng, bấm Thao tác → Chỉnh sửa HTML/CSS.
Trong thư mục Layouts, mở tệp theme.bwt.
Tìm thẻ </body> (thường ở cuối tệp, bên dưới dòng {% block "ContentPlaceHolder" %}) và dán đoạn sau ngay phía trên nó:
layouts/theme.bwt
```
<script src="https://cdn.macgi.app/widget.js"
        data-key="pk_live_..."
        data-auto
        data-slot-rules='{"quần":"bottom","chân váy":"bottom","váy liền":"one_piece","đầm":"one_piece"}'
        defer></script>
</body>
```
Dòng data-slot-rules giúp quần, chân váy và váy liền được thử đúng chỗ dựa vào từ khoá trong tên sản phẩm. Sửa từ khoá cho hợp với cách bạn đặt tên, hoặc bỏ dòng này nếu shop chỉ bán áo.
Bấm Lưu.

Bước 2: kiểm tra trang sản phẩm

Mở một trang sản phẩm trên website (tải lại nếu đang mở). Nút “Thử đồ” xuất hiện cạnh nút thêm vào giỏ. Bấm thử với một ảnh toàn thân để chắc chắn mọi thứ chạy. Nếu nút chưa hiện, mở Console (F12), gõ window.Macgi và xem phần xử lý sự cố.

Đánh dấu quần và váy bằng tag

Khi tên sản phẩm không chứa từ khoá rõ ràng, gắn tag cho sản phẩm trong trang sửa sản phẩm:

macgi-bottom cho quần, chân váy;
macgi-one-piece cho váy liền, đầm, jumpsuit.

Sau đó, trong Chỉnh sửa HTML/CSS, mở tệp product.bwt (template trang sản phẩm) và dán đoạn sau lên đầu tệp. Thẻ macgi:slot được ưu tiên hơn quy tắc từ khoá:

product.bwt

{% if product.tags contains 'macgi-bottom' %}
  <meta name="macgi:slot" content="bottom">
{% elsif product.tags contains 'macgi-one-piece' %}
  <meta name="macgi:slot" content="one_piece">
{% endif %}

Tuỳ chọn: tự đặt nút trong template

Trong theme.bwt, bỏ data-auto (và data-slot-rules) để trang không hiện hai nút:
layouts/theme.bwt
```
<script src="https://cdn.macgi.app/widget.js" data-key="pk_live_..." defer></script>
</body>
```
Mở product.bwt và tìm biểu mẫu thêm vào giỏ (tìm chữ /cart/add). Nếu giao diện tách phần này ra thư mục Snippets, tìm trong các tệp ở đó.
Dán nút ngay sau nút thêm vào giỏ:
product.bwt
```
<button type="button" class="btn" data-macgi-tryon
        data-garment-image="{{ product.featured_image | img_url: '1024x1024' }}"
        data-garment-slot="{% if product.tags contains 'macgi-bottom' %}bottom{% elsif product.tags contains 'macgi-one-piece' %}one_piece{% else %}top{% endif %}"
        data-garment-description="{{ product.name | escape }}">
  Thử đồ
</button>
```
Sapo dùng product.name cho tên sản phẩm (không phải product.title). Bộ lọc img_url nhận các kích thước như 'grande' (600px), '1024x1024' hoặc 'master', và trả về đường dẫn dạng //bizweb.dktcdn.net/...; widget tự hiểu đường dẫn này nên không cần thêm https:. Đổi class="btn" thành lớp nút của giao diện bạn.
Bấm Lưu và kiểm tra lại một trang sản phẩm.

Lưu ý và xử lý sự cố

Nút không hiện trên một tên miền: tên miền đó chưa được phép dùng khoá. Nhắn chúng tôi để thêm.
Đổi giao diện mới: dán lại thẻ script vào giao diện mới trước khi xuất bản.
Ảnh dùng để thử: ảnh đại diện sản phẩm nên là ảnh chụp chính diện, thấy toàn bộ món đồ. Nếu không, dùng thẻ macgi:garment-image (xem bảng tuỳ chọn).
Xem thêm các lỗi thường gặp trong Bắt đầu nhanh.

Cần giúp cài đặt?

Trong thời gian beta, chúng tôi hỗ trợ cài trực tiếp qua Zalo hoặc email, miễn phí.

Đăng ký beta Zalo 0918 456 439