Chúng tôi đã chuẩn bị sẵn phần code riêng giúp bạn hiển thị ảnh thiết kế hoàn chỉnh sau khi khách chọn xong (customization design)
Trong bài hướng dẫn này, chúng tôi sẽ giúp bạn các thêm phần Customization design này vào trang Giỏ Hàng và trong Email Xác Nhận Đơn Hàng
Nếu bạn cần thêm phần ảnh này ở các trang khác, hãy trực tiếp liên hệ với chúng tôi
Hiển thị thiết kế trong Giỏ Hàng
Bước 1: Xác định class cho thiết kế sau khi đã render
Bạn cần đến trang Giỏ Hàng > Ấn chuột phải > Chọn inspect sản phẩm trong giỏ hàng
Phần công cụ dành cho dev sẽ hiện ra và sẽ tự động phát hiện các thẻ HTML ở trong bộ sưu tập (gallery) mà bạn đã chọn
Tìm class "product-details", ấn đúp chuột vào từ này và sao chép nó
Lưu ý: tên class có thể sẽ khác với tên theme
Bước 2: Thêm mã script của teeinblue vào giỏ hàng
Đăng nhập vào store Shopify admin > Đi đến trang Themes > Chỉnh sửa code
Tìm phần có tên "cart.liquid". Nếu không có nội dung nào trong cart.liquid, vui lòng tìm kiếm phần "cart-template.liquid".
Trong cart-template.liquid, nhấn tổ hợp phím Ctrl + F (Đối với hệ thống iOS, là Command + F) để thanh tìm kiếm, sau đó dán cụm từ "product-details" vào thanh tìm kiếm để tìm kiếm class
Nhấp vào cụm từ "product-details" đầu tiên trên dòng <ul class>, bạn sẽ thấy dòng <ul> và thẻ </ul> của nó được đánh dấu (highlight). Cuộn xuống và tìm mục được đánh dấu </ul>.
Thêm mã script sau ngay dưới </ul>. Sau đó ấn Save để kích hoạt thiết kế trong giỏ hàng.
{% if item.properties.customization_id %}
{% capture customization_image %}https://cdn.teeinblue.com/customizations/{{ item.properties.customization_id }}.jpg{% endcapture %}
<img class="tee-img-fluid" src="{{ customization_image }}" alt="artwork design" />
{% endif %}
Vì sản phẩm trong giỏ hàng có thể được hiển thị theo dòng hoặc theo item khác nhau tùy vào từng theme, để thêm mã script một cách chính xác, vui lòng nhấn Ctrl + F (Command + F đối với iOS) và tìm kiếm giữa "for line in cart" hoặc "for item in cart" hoặc "for line_items in cart".
Nếu kết quả tìm kiếm là "for item", có nghĩa là sản phẩm đang được hiển thị theo mặt hàng.
-> Bạn có thể sử dụng script trên bình thường.
Nếu kết quả tìm kiếm là "for line", điều đó cho thấy rằng sản phẩm trong giỏ hàng của bạn được hiển thị theo hàng
-> Bạn có thể thay thế từ "item" trong script trên thành "line" theo cách này:
{% if item.properties.customization_id %}
{% capture customization_image %}https://cdn.teeinblue.com/customizations/{{ item.properties.customization_id }}.jpg{% endcapture %}
<img class="tee-img-fluid" src="{{ customization_image }}" alt="artwork design" />
{% endif %}
Nếu kết quả tìm kiếm là "for line_item", có nghĩa là sản phẩm đang được hiển thị theo** line_item**. -> Bạn cần thay đổi "item" trong script thành "line_item".
Nếu bạn gặp khó khăn khi làm theo hướng dẫn này, vui lòng liên hệ với chúng tôi để được hỗ trợ thêm.
Hiển thị thiết kế trong email xác nhận
Phương pháp này sẽ hoạt động đối với các mẫu email cơ bản của Shopify. Nếu bạn sử dụng email của bên thứ ba, cách này có thể sẽ không hoạt động.
Bước 1: Vào Shopify Settings > Notifications > Order confirmation
Bước 2: Cuộn xuống dưới và tìm dòng "{% for line in subtotal_line_items %}"
Bước 3: Cuộn xuống và tìm thẻ </td> gần nhất. Sau đó, thêm mã script bên dưới dưới thẻ đó
{% if line.properties.customization_id %}
{% capture customization_image %}https://cdn.teeinblue.com/customizations/{{ line.properties.customization_id }}.jpg{% endcapture %}
<div>
<img src="{{ customization_image }}" alt="artwork design" style="max-width: 100%; height: auto; vertical-align: middle;" />
</div>
{% endif %}
Bước 4: Hãy nhớ ấn "Save" sau khi chỉnh sửa script email
Nếu bạn gặp khó khăn khi làm theo hướng dẫn này, vui lòng liên hệ với chúng tôi để được hỗ trợ thêm.
Trong bài hướng dẫn này, chúng tôi sẽ giúp bạn các thêm phần Customization design này vào trang Giỏ Hàng và trong Email Xác Nhận Đơn Hàng
Nếu bạn cần thêm phần ảnh này ở các trang khác, hãy trực tiếp liên hệ với chúng tôi
Hiển thị thiết kế trong Giỏ Hàng
Bước 1: Xác định class cho thiết kế sau khi đã render
Bạn cần đến trang Giỏ Hàng > Ấn chuột phải > Chọn inspect sản phẩm trong giỏ hàng
Phần công cụ dành cho dev sẽ hiện ra và sẽ tự động phát hiện các thẻ HTML ở trong bộ sưu tập (gallery) mà bạn đã chọn
Tìm class "product-details", ấn đúp chuột vào từ này và sao chép nó
Lưu ý: tên class có thể sẽ khác với tên theme
Bước 2: Thêm mã script của teeinblue vào giỏ hàng
Đăng nhập vào store Shopify admin > Đi đến trang Themes > Chỉnh sửa code
Tìm phần có tên "cart.liquid". Nếu không có nội dung nào trong cart.liquid, vui lòng tìm kiếm phần "cart-template.liquid".
Trong cart-template.liquid, nhấn tổ hợp phím Ctrl + F (Đối với hệ thống iOS, là Command + F) để thanh tìm kiếm, sau đó dán cụm từ "product-details" vào thanh tìm kiếm để tìm kiếm class
Nhấp vào cụm từ "product-details" đầu tiên trên dòng <ul class>, bạn sẽ thấy dòng <ul> và thẻ </ul> của nó được đánh dấu (highlight). Cuộn xuống và tìm mục được đánh dấu </ul>.
Thêm mã script sau ngay dưới </ul>. Sau đó ấn Save để kích hoạt thiết kế trong giỏ hàng.
{% if item.properties.customization_id %}
{% capture customization_image %}https://cdn.teeinblue.com/customizations/{{ item.properties.customization_id }}.jpg{% endcapture %}
<img class="tee-img-fluid" src="{{ customization_image }}" alt="artwork design" />
{% endif %}
Vì sản phẩm trong giỏ hàng có thể được hiển thị theo dòng hoặc theo item khác nhau tùy vào từng theme, để thêm mã script một cách chính xác, vui lòng nhấn Ctrl + F (Command + F đối với iOS) và tìm kiếm giữa "for line in cart" hoặc "for item in cart" hoặc "for line_items in cart".
Nếu kết quả tìm kiếm là "for item", có nghĩa là sản phẩm đang được hiển thị theo mặt hàng.
-> Bạn có thể sử dụng script trên bình thường.
Nếu kết quả tìm kiếm là "for line", điều đó cho thấy rằng sản phẩm trong giỏ hàng của bạn được hiển thị theo hàng
-> Bạn có thể thay thế từ "item" trong script trên thành "line" theo cách này:
{% if item.properties.customization_id %}
{% capture customization_image %}https://cdn.teeinblue.com/customizations/{{ item.properties.customization_id }}.jpg{% endcapture %}
<img class="tee-img-fluid" src="{{ customization_image }}" alt="artwork design" />
{% endif %}
Nếu kết quả tìm kiếm là "for line_item", có nghĩa là sản phẩm đang được hiển thị theo** line_item**. -> Bạn cần thay đổi "item" trong script thành "line_item".
Nếu bạn gặp khó khăn khi làm theo hướng dẫn này, vui lòng liên hệ với chúng tôi để được hỗ trợ thêm.
Hiển thị thiết kế trong email xác nhận
Phương pháp này sẽ hoạt động đối với các mẫu email cơ bản của Shopify. Nếu bạn sử dụng email của bên thứ ba, cách này có thể sẽ không hoạt động.
Bước 1: Vào Shopify Settings > Notifications > Order confirmation
Bước 2: Cuộn xuống dưới và tìm dòng "{% for line in subtotal_line_items %}"
Bước 3: Cuộn xuống và tìm thẻ </td> gần nhất. Sau đó, thêm mã script bên dưới dưới thẻ đó
{% if line.properties.customization_id %}
{% capture customization_image %}https://cdn.teeinblue.com/customizations/{{ line.properties.customization_id }}.jpg{% endcapture %}
<div>
<img src="{{ customization_image }}" alt="artwork design" style="max-width: 100%; height: auto; vertical-align: middle;" />
</div>
{% endif %}
Bước 4: Hãy nhớ ấn "Save" sau khi chỉnh sửa script email
Nếu bạn gặp khó khăn khi làm theo hướng dẫn này, vui lòng liên hệ với chúng tôi để được hỗ trợ thêm.
Cập nhật vào: 08 / 04 / 2021