Tính năng cá nhân hóa sản phẩm

Giờ đây đơn hàng của bạn sẽ được xử lý dễ dàng hơn với tính năng cá nhân hóa của CustomCat. Cùng khám phá tính năng này nhé!

Vì sao chọn tính năng cá nhân hóa?

• Cá nhân hóa tất cả sản phẩm

• Tích hợp sẵn

• Dễ cài đặt

• Tự động xử lý đơn hàng

• Có tính năng “Xem trước” cho người mua

Hướng dẫn tạo thiết kế cá nhân hóa trong Design Library

Lưu ý: Phần text được thêm vào thiết kế của bạn trong giai đoạn này sẽ không được in. Khách hàng sẽ nhập text cá nhân hóa trên trang web của bạn để được in ở vị trí đó. Text được nhập trong giai đoạn này chỉ để minh họa vị trí text, phông chữ và màu sắc được cá nhân hóa.

Nếu khách hàng mua một sản phẩm được cá nhân hóa mà không nhập tex cá nhân hóa, sản phẩm của họ chỉ được in với mẫu thiết kế & không có text.

Hướng dẫn kết nối tính năng cá nhân hóa của CustomCat trên Shopify

Bước 1: Nhấp vào “Online Store” ở bảng menu bên trái.

Bước 2: Nhấp vào “Action” và chọn “Edit code”.

Bước 3: Chọn “cart.liquid” nằm ở bảng menu bên trái trong mục “Templates”

Lưu ý: Tùy theo Shopify theme của bạn, nội dung của cart.liquid template có thể tìm thấy trong /sections/cart-template.liquid

Bước 4: Tìm “<img src=” trong đoạn code. Nó sẽ trông như thế này:

<a href=”{{ item.url }}”> <img src=”{{ item | img_url: ‘small’ }}” alt=”{{ item.title | escape }}” > </a>

Bước 5: Thêm đoạn code dưới vào sau phần </a>, nằm trong thẻ <img…>

{% assign property_size = item.properties | size %} {% if property_size > 0 %} {% for p in item.properties %} {% unless p.last == blank %} <div class=”{{ p.first }}” style=”display:none”>{{ p.last }}</div> {% endunless %} {% endfor %} {% endif %}

Bước 6: Thêm đoạn code sau vào phần dưới cùng của file:

<script> jQuery(function(){ jQuery(“p:contains(‘YourDesign’)”).css(“display”,”none”); jQuery(“._YourDesign”).each(function( i ) { img_url = $(this).html(); img_width = $(this).siblings(“a”).children(“img”).width(); jQuery(this).siblings(“a”).children(“img”).attr(“src”, img_url.replace(/&/g, “&”)); jQuery(this).siblings(“a”).children(“img”).width(img_width); }); }); </script>

Hướng dẫn kết nối tính năng cá nhân hóa của CustomCat trên WooCommerce

Bước 1: Tìm đến file functions.php trong theme của bạn bằng cách đăng nhập vào dashboard WordPress và đi tới Appearance > Theme Editor.

Thao tác này sẽ đưa bạn đến một file để chỉnh sửa. Các file này được liệt kê ở bên tay phải. Theme hiện tại của bạn sẽ được chọn theo mặc định. Tìm đến file “Theme Functions” và nhấp vào đó.

Bước 2: Thêm đoạn code dưới đây. Nếu bạn thay đổi hoặc nâng cấp theme, hãy đảm bảo code mới nằm trong file functions.php hiện tại của chủ đề được nâng cấp hoặc mới.

add_filter(‘woocommerce_add_cart_item_data’,’customcat_add_item_data’,10,3); function customcat_add_item_data($cart_item_data, $product_id, $variation_id) { if(isset($_REQUEST[‘your_design’])) { $cart_item_data[‘your_design’] = wp_strip_all_tags($_REQUEST[‘your_design’]); } return $cart_item_data; } add_filter(‘woocommerce_get_item_data’,’customcat_add_item_meta’,10,2); function customcat_add_item_meta($item_data, $cart_item) { if(array_key_exists(‘your_design’, $cart_item)) { $custom_details = $cart_item[‘your_design’]; $item_data[] = array( ‘key’ => ‘Your Design’, ‘value’ => ‘<a href=”‘ . $custom_details . ‘” target=”_blank” /> <img src=”‘ . $custom_details . ‘”/></a>’ ); } return $item_data; } add_action(‘woocommerce_checkout_create_order_line_item’, ‘customcat_add_custom_order_line_item_meta’,10,4); function customcat_add_custom_order_line_item_meta($item, $cart_item_key, $values, $order) { if(array_key_exists(‘your_design’, $values)) { $item->add_meta_data(‘your_design’,$values[‘your_design’]); } } add_action(‘wp_enqueue_scripts’, ‘customcat_enqueue_scripts’,10,5); function customcat_enqueue_scripts() { global $product; if (is_product()) { $product = wc_get_product(); $short_descr = $product->get_short_description(); if (strpos($short_descr, ‘cc-overlay’) != false) { wp_register_script(‘custom_cat_script_1’, ‘https://dynamic-cdn.azureedge.net/theme/CustomCat/js/ccCustomize.min.js’, array( ‘jquery’), NULL, true); wp_enqueue_script(‘custom_cat_script_1’); wp_register_script(‘custom_cat_script_2’, ‘https://app.customcat.com/js/customize_woo.js’ , array(‘jquery’), NULL, true); wp_enqueue_script(‘custom_cat_script_2’); } } }

Bước 3: Nhấp chọn Update File.

Tôi phải làm sao nếu nút Customize trên trang giỏ hàng hiển thị Customize thay vì Add to Cart đối với các sản phẩm không được cá nhân hóa?

Để khắc phục lỗi này, hãy nhấp vào sản phẩm cần chỉnh sửa trong WooCommerce và điều hướng đến khung mô tả ngắn gọn về sản phẩm. Nhấn vào nút “Text”.

Xóa đoạn code sau:

“<div id=”cc-overlay”></div><br>”

Nhấn vào nút “Update” để cập nhật trang sản phẩm của bạn.

Những câu hỏi thường gặp

1. Nếu đã cài ứng dụng, tôi có cần phải đăng ký lại hoặc thay đổi gì đó để sử dụng tính năng cá nhân hóa không?

Tính năng cá nhân hóa sẽ tự động thêm vào ứng dụng, nhưng CC khuyến khích bạn làm theo các bước trên để mang lại trải nghiệm tốt nhất cho khách hàng.

2. Cá nhân hóa áp dụng cho sản phẩm nào?

Tất cả sản phẩm, ngoại trừ sản phẩm thêu.

3. Phải làm gì nếu nút Customize không hiện lên trang sản phẩm của bạn ở vị trí nút Add to Cart?

Kiểm tra xem bạn có vô tình xóa code của CC ra khỏi Description HTML không. Thỉnh thoảng việc chỉnh sửa ứng dụng hàng loạt cũng có thể xóa code HTML. Đây là code quan trọng, hãy cẩn thận khi sửa phần mô tả sản phẩm.

Để chắc chắn mã code Cá Nhân Hóa hiển thị đúng, bạn nên làm theo các bước sau:

1. Đăng nhập vào Shopify Admin

2. Tìm đến Products -> Chọn sản phẩm bạn muốn cập nhật.

3. Nhấn nút Show HTML (Hiển thị HTML) để hiển thị nội dung code. Đoạn code sẽ được hiển thị ở phần đầu tiên:

<div id=”cc-overlay” style=”display: none; position: fixed; width: 100%; height: 100%; top: 0; left: 0; right: 0; bottom: 0; background-color: rgba(0,0,0,0.7); z-index: 2;”><img src=”//api.mylocker.net/images/loading.gif”></div>

<script src=”//customcat.mylocker.net/js/ccCustomize.min.js?v=10.3.4″ type=”text/javascript”></script>

<script src=”//customcat.mylocker.net/js/customize.shopify.min.js?v=10.3.4″ type=”text/javascript”></script>

<script>// <![CDATA[

document.getElementById(“cc-overlay”).style.display =”block”;

// ]]></script>

    4. Lưu lại

Nếu cách trên không thành công, hãy gửi email đến contact@customcat.com kèm theo đường link sản phẩm không hiển thị nút Customize, theme của bạn, file cart.liquid txt và thông tin lỗi cụ thể.

4. Phải làm gì nếu có chữ không cần thiết xuất hiện trong bước Add to Cart?

Kiểm tra xem bạn đã thêm code “Add to Cart” (bước 3 – 6) vào vị trí thích hợp trong file theme của bạn chưa.

5. Phải làm gì nếu hình sản phẩm trong giỏ hàng không hiển thị chữ tùy chỉnh ở các bước trên?

Kiểm tra xem bạn đã thêm code “Add to Cart” (bước 3 – 6) vào vị trí thích hợp trong file theme của bạn chưa.

6. Tôi muốn thêm font chữ mới cho cá nhân hóa của tôi bằng cách nào?

Gửi email tên font chữ và file font đến contact@customcat.com. CC sẽ kiểm tra bản quyền để đảm bảo bạn có quyền sử dụng font chữ đó, và font chữ đó có các ký tự hợp lệ.

7. Tôi có thể sử dụng các ký tự đặc biệt (Kanji, dấu,…) không?

Không thể. Kanji, biểu tượng cảm xúc, ngôn ngữ nước ngoài, dấu và các ký tự đặc biệt khác không được sử dụng, sẽ dẫn tới việc in các ký tự ngoài ý muốn lên sản phẩm của bạn. Các ký tự trên bàn phím như ?, !… có thể được sử dụng.