Developer

All tutorials

Adding what3words field to your Haravan store (Thêm trường what3words vào cửa hàng Haravan)

easy

Hướng dẫn chi tiết cách thêm trường địa chỉ what3words vào trang giỏ hàng của cửa hàng Haravan, giúp khách hàng nhập và xác minh địa chỉ what3words mỗi khi đặt đơn hàng.

Cách dễ nhất để thêm trường địa chỉ what3words vào cửa hàng Haravan là sử dụng thành tố Tự động gợi ý. Thành tố này cho phép người dùng nhập nhanh và đúng địa chỉ what3words trên trang thanh toán bằng cách đưa ra các gợi ý khi người dùng gõ địa chỉ, nhằm đảm bảo giá trị đầu vào là địa chỉ what3words hợp lệ.

Chú ý: Phương pháp tích hợp này đã được thử nghiệm trong các giao diện: Evo watch, Luxe Mode, và Fresh Organic Food.

1
2

Thêm thành tố Tự động gợi ý vào trang Giỏ hàng

1. Sau khi đăng nhập vào Haravan, chọn mục Website > Giao diện

2. Nhấp vào biểu tượng ba dấu chấm (…) > Chỉnh sửa code

3. Mở thư mục Layouts

4. Tìm file Giao diện chính. Trong ví dụ này, các file đó được gọi là theme.liquid và en.liquid (phiên bản tiếng Anh của file giao diện gốc).

5. Sao chép hai đoạn script sau rồi dán vào giữa tag </head> như bên dưới trong file Giao diện chính.

Lưu ý: Hai đoạn script này sẽ cho phép bạn sử dụng thành tố Tự động gợi ý.

<script type="module" src="https://cdn.what3words.com/javascript-components@4.2.0/dist/what3words/what3words.esm.js"></script>
<script nomodule src="https://cdn.what3words.com/javascript-components@4.2.0/dist/what3words/what3words.js"></script>
Copied

6. Mở thư mục Snippets

7. Nhấp vào Thêm mới một snippet

8. Tạo snippet mới, đặt tên là w3w-autosuggest

9. Sau đó nhấp vào Thêm

10. Một file mới có tên w3w-autosuggest.liquid sẽ được tạo trong thư mục Snippets

11. Sao chép code snippet dưới đây rồi dán vào file w3w-autosuggest.liquid

<style>
  what3words-autosuggest input {
	margin: 0 !important;
  }
</style>
<script>
  function createAutosuggestComponent(key) {
	const div = document.createElement('div');
	const label = document.createElement('label');
	const autosuggest = document.createElement('what3words-autosuggest');
	const input = document.createElement('input');
	div.setAttribute('id', 'w3w');
	div.removeAttribute('class');
	label.setAttribute('for', 'what3words_address');
	label.append('what3words address (optional):')
	autosuggest.setAttribute('api_key', key);
	input.setAttribute('type', 'text');
	input.setAttribute('id', 'what3words_address');
	input.setAttribute('name', 'attributes[what3words_address]');
	input.setAttribute('value', '{{ cart.attributes['what3words_address'] }}');
	input.setAttribute('optional', true);
	autosuggest.setAttribute('language', 'VI');
	input.setAttribute('placeholder', 'VD: ///nước yến.nét vẽ.đồ gốm');
	autosuggest.setAttribute('invalid_address_error_message', 'Không tìm thấy địa chỉ what3words cho tổ hợp này');
	autosuggest.setAttribute('clip_to_country', 'VN');


	autosuggest.append(input);
	div.append(label);
	div.append(autosuggest);

	return div;
  }

  function bindAutosuggestComponent(autosuggestComponent, selector) {
	$(document).bind('DOMSubtreeModified', selector, function(e) {
  	if ($(`${selector} > #w3w`).length === 0) {
    	$(selector).prepend(autosuggestComponent.outerHTML);
    	$.ajax({
      	type: 'GET',
      	url: '/cart.js',
      	success: cart => {
        	const { attributes: { what3words_address } } = cart;
        	if (what3words_address) {
          	$('what3words-autosuggest input').val(`///${what3words_address}`);
        	}
      	},
    	});
    	$('what3words-autosuggest').on('selected_suggestion', function({ originalEvent: { detail: { suggestion } } }) {
      	$.ajax({
        	type: 'POST',
        	url: '/cart/update.js',
        	data: { attributes: { what3words_address: suggestion.words } },
        	dataType: 'json',
      	});
    	});
    	$('what3words-autosuggest').on('deselected_suggestion', function() {
      	$.ajax({
        	type: 'POST',
        	url: '/cart/update.js',
        	data: { attributes: { what3words_address: '' } },
        	dataType: 'json',
      	});
    	})
  	}
	});
  }

  $(window).ready(function(){
	const autosuggestComponent = createAutosuggestComponent('{{ apiKey }}');
	bindAutosuggestComponent(autosuggestComponent, '{{ mobileParentSelector }}');
	bindAutosuggestComponent(autosuggestComponent, '{{ desktopParentSelector }}');
  });
</script>
Copied

Lưu ý: Đoạn script này sẽ hiển thị địa chỉ what3words trong:

  • thuộc tính note_attributes, xuất hiện ở endpoint của API Đơn hàng tại https://<YOUR HARAVAN STORE URL>/cart/update.js, nhớ thay <YOUR HARAVAN STORE URL> bằng URL cửa hàng của bạn
  • và phần Ghi chú đơn hàng trên trang đơn hàng cụ thể (sau khi nhấp vào mã đơn hàng).

12. Mở thư mục Giao diện

13. Mở file cart.liquid và cart.en.liquid (nếu có phiên bản tiếng Anh của file cart.liquid)

14. Thêm đoạn script sau vào phần dưới cùng của file cart.liquid và cart.en.liquid

15. Thay YOUR-API-KEY bằng khóa API what3words của bạn

16. Nếu trang Giỏ hàng của bạn có hai chế độ xem khác nhau dành cho máy tính và thiết bị di động, vui lòng thay desktopParentSelector và mobileParentSelector bằng selector .class hoặc #id của code snippet cho máy tính và thiết bị di động tương ứng ở ngay trước nút thanh toán. Nếu bạn chỉ có một chế độ xem duy nhất, bạn có thể dùng chung selector .class hoặc #id của code snippet cho máy tính hoặc thiết bị di động.

Lưu ý: Code snippet này hiển thị trường địa chỉ what3words trên trang Giỏ hàng của cửa hàng.

{% assign apiKey = 'YOUR-API-KEY' %}
{% assign desktopParentSelector = 'REPLACE WITH YOUR CLASS OR ID SELECTORS' %}
{% assign mobileParentSelector = 'REPLACE WITH YOUR CLASS OR SELECTORS' %}
{% include 'w3w-autosuggest' %}
Copied

Trong ví dụ sau, đối với chế độ xem Máy tính, hãy dùng lớp summary-total làm selector lớp.

Trong giao diện Luxe Mode, hai chế độ xem máy tính và thiết bị di động đều giống nhau nên bạn có thể dùng chung một lớp cho cả hai:

{% assign apiKey = 'YOUR-API-KEY' %}
{% assign desktopParentSelector = 'summary-total' %}
{% assign mobileParentSelector = 'summary-total' %}
{% include 'w3w-autosuggest' %}

haravan-desktop-view

Sau khi khách hàng gửi đơn hàng, địa chỉ what3words sẽ được lưu theo đơn đó, trong phần Ghi chú đơn hàng trên trang đơn hàng tương ứng.

Bạn có thể in địa chỉ này cùng với các thông tin khác của đơn hàng hoặc xuất ra cùng với đơn hàng để chuyển cho công ty giao vận.

3

Tùy chỉnh cài đặt

Thêm ngôn ngữ dự phòng ưu tiên dưới dạng setAttribute vào thành tố Tự động gợi ý như minh họa dưới đây:

<script>
  function createAutosuggestComponent(key) {
	...
	autosuggest.setAttribute('language', 'VI');

	...
  }
  ...
</script>
Copied

Tùy chỉnh placeholder dưới dạng setAttribute cho dữ liệu đầu vào, như minh họa dưới đây. Bạn nên dùng địa chỉ what3words làm placeholder.

<script>
  function createAutosuggestComponent(key) {
...
input.setAttribute('placeholder', 'VD: ///nước yến.nét vẽ.đồ gốm');

	...
  }
...
</script>
Copied

Giới hạn các kết quả gợi ý trong phạm vi một quốc gia hoặc một danh sách quốc gia nhất định được phân tách bằng dấu phẩy. Ví dụ: clip_to_country="VN". Để tìm hiểu các phương án giới hạn khác, vui lòng tham khảo hướng dẫn tại đây.

<script>
  function createAutosuggestComponent(key) {
  ...
  autosuggest.setAttribute('clip_to_country', 'VN');

	...
  }
...
</script>
Copied

Bên cạnh việc giới hạn quốc gia, bạn cũng có thể cung cấp thêm phạm vi tập trung của kết quả bằng thuộc tính autosuggest_focus. Phạm vi này phải được cung cấp dưới dạng kinh độ và vĩ độ, thường là vị trí của người dùng lấy từ chức năng GPS trên thiết bị của họ. Việc cung cấp phạm vi tập trung sẽ đảm bảo rằng những gợi ý hiển thị cho người dùng phù hợp hơn với vị trí của họ.

<script>
  function createAutosuggestComponent(key) {
  	...
	autosuggest.setAttribute('autosuggest_focus', '10.772033,106.711119');

	...
  }
...
</script>
Copied

Bạn có thể ghi đè thông báo lỗi bằng một giá trị tùy chỉnh. Ví dụ: invalid_address_error_message="Không tìm thấy địa chỉ what3words cho tổ hợp này".

<script>
  function createAutosuggestComponent(key) {
    ...
	autosuggest.setAttribute('invalid_address_error_message', 'Không tìm thấy địa chỉ what3words cho tổ hợp này');

	...
  }
...
</script>
Copied
4

Thêm địa chỉ what3words vào email xác nhận đơn hàng

  • Sau khi đăng nhập vào Haravan, truy cập Cấu hình > Thông báo > Xác nhận đơn hàng.
  • Tìm biến Liquid {% if requires_shipping and shipping_address %} gắn với địa chỉ giao hàng.
  • Nhập đoạn mã này vào bên dưới địa chỉ giao hàng:
{% if attributes["what3words_address"] != blank %}
   <br>
   <h4>what3words address</h4>
   <p>{{ attributes["what3words_address"] }}</p>
{% endif %}
Copied
5

Thêm trường what3words vào hóa đơn

Sau khi đăng nhập vào Haravan, truy cập Cấu hình > Thông báo > Gửi hóa đơn đề nghị thanh toán.

Tìm biến Liquid {% if requires_shipping and shipping_address %} gắn với địa chỉ giao hàng.

Nhập đoạn mã này vào bên dưới địa chỉ giao hàng:

{% if attributes["what3words_address"] != blank %}
   <br>
   <h4>what3words address</h4>
   <p>{{ attributes["what3words_address"] }}</p>
{% endif %}
Copied
6

Chia sẻ địa chỉ what3words với Hệ thống quản lý đơn hàng

Lưu ý: Phần này dành cho những khách hàng muốn chia sẻ địa chỉ what3words trên từng đơn hàng với Hệ thống quản lý đơn hàng.

Trong Haravan, thuộc tính địa chỉ what3words được lưu trong đơn hàng của khách hàng tại REST API Đơn hàng Haravan bằng note_attributes.

Để biết thêm thông tin về các endpoint và yêu cầu gửi tới Haravan REST ADMIN API, vui lòng tham khảo hướng dẫn này. (Chỉ có tiếng Anh).

Cú pháp cho yêu cầu API gửi tới REST API Đơn hàng Haravan là: GET https://apis.haravan.com/com/orders/{{order_id}}.json

Lưu ý: Thay order_id bằng số/mã đơn hàng.

Cú pháp phản hồi API là:

"note_attributes": [{
    "name": "what3words_address",
    "value": "///filled.count.soap"
}]
Copied
7

Liên hệ hỗ trợ

Bạn có thắc mắc?

Chúng tôi luôn sẵn lòng hỗ trợ! Nếu bạn có bất kỳ câu hỏi nào liên quan đến việc sử dụng what3words cho Excel, vui lòng liên hệ với chúng tôi qua email support@what3words.com.

E-CommerceAdd a 3 word address input fieldHaravan

Related tutorials