• Trang chủ
  • ->
  • Hướng dẫn cách ô nhập thông tin thêm cho sản phẩm trên website bán hàng

Hướng dẫn cách ô nhập thông tin thêm cho sản phẩm trên website bán hàng

Line Item Properties được dùng để thu thập thông tin thêm của sản phẩm khi thêm vào giỏ hàng. Cách làm này phù hợp cho các website bán hàng thủ công, handmade, hoặc đồ nội thất...


Cách thực hiện

Để khách hàng có thể để lại thông tin thêm về sản phẩm mà họ muốn mua, ví dụ kích cỡ muốn đặt, tên muốn khắc lên ... , bạn cần thêm vào các ô nhập trong trang chi tiết sản phẩm. Khi khách hàng nhập thông tin này và thêm sản phẩm vào giỏ hàng và mua hàng, trong thông tin đơn hàng, bạn sẽ nhìn thấy thông tin này và đáp ứng cho khách.



Đầu tiên, vào phần Giao diện, chọn nút Hiệu chỉnh theme trên giao diện chính. Sau đó tìm file product.liquid trong phần Giao diện.

Ví dụ bạn muốn thêm một ô nhập chiều dài để khách hàng để lại chiều dài bạn muốn đặt. Bạn copy đoạn mã dưới đây

<div>
  <p><label for="chieudai">Chiều dài:</label></p>
  <p><input type="text" id="chieudai" name="properties[Chieudai]" /></p>
</div>

  • Lưu ý, tên các thẻ HTML và chữ hiển thị bạn có thể thay đổi cho phù hợp nhu cầu. Phần properties[Chieudai] trong đó chữ Chieudai sẽ là tên thông tin hiển thị trong đơn hàng, bạn chỉ cần thay đổi tùy ý theo nhu cầu.
  • Tìm đến phần <form action="/cart/add"> trong product.liquid. Lưu ý một số theme có thể kèm theo những thẻ class, id ...nhưng bạn chỉ cần tìm phần form mà có kèm action="/cart/add"
  • Thêm vào ngay sau phần <form action="/cart/add"> đoạn mã đã copy ở trên. Hoặc bạn có thể dán vào ngay trên nút Thêm vào giỏ hàng.
  • Nhấp Lưu để lưu lại những thay đổi trên


Hiển thị thông tin đã nhập trên trang giỏ hàng.

Để hiển thị thông tin thêm trong trang giỏ hàng, bạn vào Giao diện -> nhấp nút Hiệu chỉnh theme trên theme đang dùng. Bạn tìm đến file cart.liquid trong phần Giao diện.

Ngay dưới dòng  <span class="variant_title">{{ item.variant.title }}</span> bạn chèn đoạn mã
{% for p in item.properties %}
  {% unless p.last == blank %}
    {{ p.first }}:
    {% if p.last contains '/uploads/' %}
    <a class="lightbox" href="{{ p.last }}">{{ p.last | split: '/' | last }}</a>
    {% else %}
    {{ p.last }}
    {% endif %}
    <br />
  {% endunless %}
{% endfor %}

Nhấp Lưu để hoàn tất.


Hiển thị trong các email gửi khách hàng hoặc thông báo đơn hàng mới

Để hiển thị các thông tin thêm của sản phẩm trong các mẫu email, bạn vào phần Cấu hình -> Thông báo. Trong các email liên quan đến đơn hàng, bạn chỉnh sửa như sau.

Tìm đến chỗ có {{ line.title }} và thay bằng

{{ line.title }}{% for p in line.properties %}{% unless p.last == blank %} - {{ p.first }}: {{ p.last }}{% endunless %}{% endfor %}


Thêm ô cho người mua upload hình / file

- Bước 1: Thêm đoạn mã trong phần <head> </head> của theme.liquid (đối với các theme thêm sản phẩm bằng Ajax như theme mặc định)
<script src='//hstatic.net/756/1000012756/1000026459/jquery.form.js?v=446' type='text/javascript'></script>

- Bước 2: Thêm attribute cho form enctype="multipart/form-data": Tìm đến file product.liquid (nếu form chưa có attribute này)
<form  enctype="multipart/form-data" id="add-item-form" action="/cart/add"> 

- Bước 3: Thêm input file cho form: Tìm đến <form action="/cart/add"> và thêm vào
<input type="file" name="properties[file]" />

- Bước 4: Tìm trong file product.liquid đoạn: (đối với các theme thêm sản phẩm bằng Ajax như theme mặc định)
<script>
$('#add-to-cart').click(function(){
var params = {
type: 'POST',
url: '/cart/add.js',
async : false,
data: jQuery('#add-item-form-2').serialize(),
dataType: 'json',
success: function(line_item) {
if ((typeof callback) === 'function') {
callback(line_item);
} else {

getCartAjax();
$('#myCart').modal('show');
$('.modal-backdrop').css({'height':$(document).height(),'z-index':'99'});
}
},
error: function(XMLHttpRequest, textStatus) {
Haravan.onError(XMLHttpRequest, textStatus);
}
};
jQuery.ajax(params);
});
</script>

Thay bằng:

<script>
$('#add-to-cart').click(function(e){
e.preventDefault(); // prevent native submit
$('#add-item-form').ajaxSubmit({
async: false,
success: function(){
if ((typeof callback) === 'function') {
callback(line_item);
} else {

getCartAjax();
$('#myCart').modal('show');
$('.modal-backdrop').css({'height':$(document).height(),'z-index':'99'});
}
}
})
});
</script>

Haravan - Công ty công nghệ cung cấp giải pháp kinh doanh thương mại điện tử, duy nhất tại Việt Nam được Google lựa chọn vào chương trình bệ phóng tiềm năng với hỗ trợ và đào tạo công nghệ để vươn ra thị trường quốc tế vững chắc.