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

<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>

<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>

{% 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' %}

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

	...
  }
  ...
</script>

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

	...
  }
...
</script>

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

	...
  }
...
</script>

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

	...
  }
...
</script>

<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>

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

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

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