This article is also available in:
Trong bài này:
A. Sản phẩm "Cá nhân hoá" là gì?
B. Thêm trường thông tin trong Product editor
C. Cách thêm trường thông tin bằng scripts
D. Cách export thông tin cá nhân hoá vào file CSV

A. Sản phẩm " cá nhân hoá" là gì?
Sản phẩm “cá nhân hóa” là sản phẩm mang dấu ấn cá nhân của người mua. Ví dụ: In tên/ ảnh người mua lên một chiếc áo thun. Với ShopBase, bạn có thể thêm trong trang chỉnh sửa Product, hoặc chèn script để thêm các trường như ý muốn (cách thứ 2 sẽ tiết kiệm thời gian hơn, nhưng không thể chỉnh sửa nhanh trên một số sản phẩm nhất định)
Các trường tùy chọn trên ShopBase bao gồm:
Text field (văn bản với độ dài giới hạn)
Text area (văn bản dài hơn)
File
Radio buttons (các nút lựa chọn)
Droplist
Checkbox

B. Thêm trường thông tin trong Product editor
Từ trang ShopBase admin, lựa chọn Products > All products. Click vào tên của sản phẩm bạn muốn thêm trường thông tin.
Tại mục Custom Options, chọn Add custom option

Bạn có thể thêm không giới hạn các custom options. Tùy chỉnh của mỗi custom option bao gồm:

Name: đặt tên của custom option để lưu trên ShopBase và trên file CSV xuất đơn hàng. Nên ngắn gọn và dễ nhận dạng.
Label (display on storefront): chữ đặt trên phần điền nội dung trên trang sản phẩm. Nên là đoạn hướng dẫn ngắn gọn và người mua dễ hiểu.
Type: phần điền nội dung có thể ở dạng Text field, Text Area, File, Radio buttons, Droplist, hoặc Checkbox. Với ba lựa chọn cuối, cần phải điền thêm các Value (phân tách bằng các dấu phẩy).
Placeholder, Help text: nội dung giải thích thêm hoặc yêu cầu thêm (dành cho Text field và text area, hoặc File)
Tùy chỉnh của bạn sẽ hiện trên trang sản phẩm như dưới đây:

Click biểu tượng con mắt để ẩn/hiện từng custom option trên trang sản phẩm. Kéo thả các custom option để thay đổi thứ tự hiển thị của chúng.

Lưu thay đổi


C. Cách thêm trường thông tin bằng scripts

Bạn cần paste script này vào online store của bạn theo hướng dẫn sử dụng Power Up Script. sau đó các sản phẩm có tag custom hoặc personalize sẽ được thêm ô text personalize.

<script>
(function() {
var fields = [{
name: 'Custom Text 1',
label: 'Label for Custom Text 1',
description: 'Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.',
placeholder: 'Custom Text 1',
optional: false,
validationMessage: 'Please finish this field'
},
{
name: 'Custom Text 2',
label: 'Label for Custom Text 2',
description: '',
placeholder: 'Custom Text 2',
optional: true,
validationMessage: 'Please finish this field'
},
{
name: 'Custom Text 3',
label: 'Label for Custom Text 3',
description: 'Lorem ipsum dolor sit amet',
placeholder: 'Custom Text 3',
optional: false,
validationMessage: 'Please finish this field'
}
]
var mustMatchEnableTags = false // true to turn on matching, false to turn off
var tagMatchType = 'any' // must be 'all' or 'any'
var enableTags = ['personalize', 'custom']
var customPropertyForm={init:function(){window.sbsdk.page.onContextUpdate(function(e){if("product"===e.type)var t=0,n=setInterval(function(){customPropertyForm.injected()||(customPropertyForm.injectForm(),clearInterval(n)),4===t&&clearInterval(n),t++},500)})},injected:function(){return!!document.getElementById("custom-properties-form")},injectForm:function(){if(!mustMatchEnableTags||customPropertyForm.isProductMatchEnableTags()){var e=document.getElementById("addToCartForm");if(e){var t=document.createElement("div");t.className="line-item-property__container",t.id="custom-properties-form",t.innerHTML="",fields.forEach(function(e){const n="margin-bottom: 1em;",r="font-weight: bold; margin: 0; font-size: 1em; line-height: 1.5;",o="font-size: 0.85em; margin: 0; line-height: 1.5; margin-bottom: 0.25em;",i="display: block; width: 100%;",a="color: #FF0000; font-size: 0.875rem; margin: 0; margin-top: 0.375rem; display: none;",s=e.optional?"":"required";t.innerHTML+="".concat('<div class="line-item-property__field" style="'+n+'">','<label class="line-item-property__label" for="'+e.name+'" style="'+r+'">'+e.label+"</label>",e.description?'<p class="line-item-property__desc" style="'+o+'">'+e.description+"</p>":"",'<input class="line-item-property__input" '+s+' id="'+e.name+'" type="text" name="properties['+e.name+']" placeholder="'+e.placeholder+'" style="'+i+'">','<p class="line-item-property__feedback" style="'+a+'">'+e.validationMessage+"</p>","</div>")}),e.parentNode.insertBefore(t,e)}}},isProductMatchEnableTags:function(){var e=window.sbsdk.product.current(),t=e.tags?e.tags.split(","):[];return!("any"!==tagMatchType||!enableTags.some(e=>t.indexOf(e)>-1))||!("all"!==tagMatchType||!enableTags.every(e=>t.indexOf(e)>-1))}};document.addEventListener("DOMContentLoaded",function(){customPropertyForm.init()});
})()
</script>


* Cách thay đổi một số cài đặt cho trường thông tin:



name: Tên của trường thông tin được lưu trong cơ sở dữ liệu của ShopBase và hiển thị khi export đơn hàng. name cũng đồng thời hiển thị ở trang cart, checkout và trang quản lý order. Bạn nên đặt tên ngắn gọn, dễ hiểu dễ nhớ (ví dụ: Name).
label: Hiển thị ở trang sản phẩm. Bạn nên đặt label dễ hình dung, có thể có hướng dẫn ngắn gọn (ví dụ: Your name (should not exeed 30 characteristics))
optional: Mặc định, tất cả các trường thông tin sẽ được yêu cầu được cung cấp trước khi khách hàng thêm sản phẩm vào giỏ hàng. Nếu bạn muốn khách hàng bỏ qua trường thông tin nào, có thể gán giá trị cho optionaltrue cho trường thông tin tương ứng

* Hiển thị trường thông tin ở một số sản phẩm nhất định:



Nếu muốn trường thông tin hiển thị ở một số sản phẩm nhất định, bạn có thể gắn tag cho sản phẩm và làm theo các bước sau:
`mustMatchEnableTags`: Bạn có thể chọn điều kiện hiển thị theo tag hay không. Nếu điền true, ShopBase sẽ kiểm tra và chỉ hiển thị trường thông tin cho các sản phẩm thỏa mãn. Nếu chọn fasle, ShopBase sẽ hiển thị trường thông tin cho tất cả sản phẩm.
tagMatchType : Bạn muốn sản phẩm phải bao gồm tất cả các tag được liệt kê, đặt giá trị all. Bạn muốn sản phẩm phải bao gồm một trong số các tag được liệt kê, đặt giá trị any.
enableTags: Liệt kê tag, các tag cần được đặt trong dấu nháy đơn và phân cách nhau bởi dấu phẩy


D. Cách export thông tin cá nhân hóa vào file CSV
Khi export orders, chọn Customize export fields.
Chọn các trường bạn muốn export (bạn có thể lưu Template để dùng lại cho những lần sau)
Để export thông tin cá nhân hóa của các sản phẩm trong đơn hàng, bạn cần chọn Lineitem properties trong file để export.


Sau khi export, dữ liệu sẽ được thể hiện ở cột Lineitem properties trong file CSV bao gồm: tên của custom option và dữ liệu mà người mua nhập vào.
Bài viết có hữu ích không?
Hủy bỏ
Cảm ơn!