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

Haravan 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. 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. Toàn bộ mất khoảng 10 phút.

Chuẩn bị

Khoá pk_live_... trong email beta. Chưa có? Đăng ký beta.
Tài khoản Haravan có quyền chỉnh sửa giao diện.
Khi đăng ký, hãy báo cả tên miền riêng (có và không có www) lẫn tên miền .myharavan.com của shop, để khoá chạy trên cả hai.
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.liquid

Vào Trang quản trị → Website → Giao diện.
Ở giao diện đang dùng, bấm Chỉnh sửa code.
Trong thư mục Layouts, mở tệp theme.liquid.
Tìm thẻ </body> (thường ở cuối tệp; nhấn Ctrl+F hoặc Cmd+F) và dán đoạn sau ngay phía trên nó:
layout/theme.liquid
```
<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 trang 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) và gõ window.Macgi. Xem thêm phần xử lý sự cố bên dưới và trong Bắt đầu nhanh.

Đá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 (ví dụ “Set Mây xanh”), gắn tag cho sản phẩm trong Sản phẩm → chọn sản phẩm → ô tag:

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

Sau đó mở template sản phẩm (trong Chỉnh sửa code, thư mục Giao diện, tệp product.liquid) và dán đoạn sau lên đầu tệp. Đoạn này in thẻ macgi:slot cho sản phẩm có tag, và thẻ này được ưu tiên hơn quy tắc từ khoá:

product.liquid

{% 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

Nếu muốn nút nằm đúng một vị trí và dùng kiểu nút của giao diện, đặt nút trong template sản phẩm thay vì dùng chế độ tự động.

Trong theme.liquid, bỏ data-auto (và data-slot-rules) để trang không hiện hai nút:
layout/theme.liquid
```
<script src="https://cdn.macgi.app/widget.js" data-key="pk_live_..." defer></script>
</body>
```
Mở product.liquid và tìm biểu mẫu thêm vào giỏ, <form action="/cart/add". Nhiều giao diện tách phần này ra một tệp trong thư mục Snippets; nếu không thấy, tìm chữ /cart/add trong các snippet.

Dán nút ngay sau nút thêm vào giỏ (hoặc sau thẻ </form>):

product.liquid

<button type="button" class="btn" data-macgi-tryon
        data-garment-image="{{ product.featured_image | product_img_url: 'master' }}"
        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.title | escape }}">
  Thử đồ
</button>

Đổi class="btn" thành lớp nút mà giao diện của bạn dùng. Bộ lọc product_img_url trả về đường dẫn dạng //cdn.haravan.com/...; widget tự hiểu đường dẫn này nên không cần thêm https:.

Bấm Lưu và kiểm tra lại một trang sản phẩm.

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

Kích thước ảnh: tài liệu Haravan ghi ví dụ với kích thước 'medium' và 'compact'. Nếu 'master' không trả về ảnh gốc trên giao diện của bạn, thử 'grande' hoặc 'large'. Ảnh càng rõ, kết quả càng tốt.
Nút không hiện trên tên miền riêng hoặc .myharavan.com: 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: thẻ script nằm trong giao diện nên cần dán lại vào giao diện mới trước khi xuất bản.
Dùng ảnh nào để 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 ảnh đại diện là ảnh người mẫu tạo dáng, dùng thẻ macgi:garment-image (xem bảng tuỳ chọn).

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