Affilliate Autocomplete Widget - anujtenani/goaffpro GitHub Wiki
The place where you want to add the widget, add the following code
<script type="text/javascript">
window.GoaffproAffiliateAutoComplete = {
shop:'goaffprotest1.myshopify.com',
locale:'en',
translations:{
},
blocked_elements:['#add_to_cart', '#buy_now', '#checkout'],
searchIn:'name,company_name',
resultFields:'name,company_name,address_1,city,ref_code',
itemHtml:`<div>
<strong>{{name}}</strong>
<p>{{company_name}}</p>
<address>
{{address_1}}
<br/>
{{city}}
</address>
</div>`,
selectedItemHtml:"{{name}}",
changeBtnText:'Change',
}
</script>
<goaffpro-autocomplete></goaffpro-autocomplete>
<script type="text/javascript" src="https://static.goaffpro.com/auto_complete.js"></script>| Option | Description |
|---|---|
| shop | Your myshopify URL |
| locale | The ISO 639-1 codes of language to display the widget in. Defaults to en |
| translations | Dictionary/Map to update text translations |
| blocked_elements | Array of element selectors (document.querySelectorAll) to disable unless an affiliate is selected |
| searchIn | Comma separated list of affiliate properties to search in when the customer types |
| resultFields | Comma separated list of affiliate properties to return in the result |
| itemHtml | HTML template for the result item (supports mustache templating) |
| selectedItemHtml | HTML template to use for selected item (supports mustache templating) |
| changeBtnText | Text of the change button |
- The widget is a renders just a plain input box. You will need to add the surrounding styles, labels etc. yourselves
- For shopify, enclose the code in
{% raw %}{% endraw %}tags
https://goaffprotest1.myshopify.com/collections/frontpage/products/short-sleeve-t-shirt
Sample implementation on shopping cart page
Sample implementation on product page
