{"_id":"53de638784ab2b1c5eb2dd77","category":"53de5ae684ab2b1c5eb2dd6f","excerpt":"The basic version should hopefully work, however there's options if you want to get creative.","type":"basic","updates":["5441656bc47ab71400e40b14","5654512e04feff210074b162"],"api":{"auth":"never","params":[],"results":{"codes":[]},"settings":"","url":""},"createdAt":"2014-08-03T16:29:59.990Z","hidden":false,"is_link":false,"next":{"description":"","pages":[]},"order":0,"version":"53de5ae684ab2b1c5eb2dd6e","sync_unique":"","title":"Advanced Setup","body":"The Address Picker is made to be dead simple (just include a JavaScript file, and you can start using it!), however we know there's many cases where you may want to customize it a bit.\n[block:api-header]\n{\n  \"type\": \"basic\",\n  \"title\": \"Lazy-init of AddressPicker\"\n}\n[/block]\nAddonPicker will automatically convert any `<input type=\"addresspicker\">` that it can find when the DOM is ready, however often you'll need a way to manually set it up.\n[block:code]\n{\n  \"codes\": [\n    {\n      \"code\": \"var element = $('#shipping-address'); // Get your element\\nwindow.addressPicker.init(element); // Make it an address picker!\",\n      \"language\": \"javascript\"\n    }\n  ]\n}\n[/block]\n\n[block:callout]\n{\n  \"type\": \"warning\",\n  \"title\": \"Caution!\",\n  \"body\": \"Currently, the addressPicker.init(el) can only accept one element. If you pass it an array of elements, it will only convert the first element. You will have to loop through elements yourself.\"\n}\n[/block]\n\n[block:api-header]\n{\n  \"type\": \"basic\",\n  \"title\": \"Advanced Options\"\n}\n[/block]\nAddress Picker has a number of options that can be passed into your widget for advanced control and customization.\n[block:parameters]\n{\n  \"data\": {\n    \"0-0\": \"`color`\",\n    \"h-0\": \"Option\",\n    \"h-1\": \"What It Does\",\n    \"0-1\": \"Change the color used in the color picker\",\n    \"1-0\": \"`whitelist`\\n\\n*Coming Soon*\",\n    \"1-1\": \"A list of accepted country codes. Users will not be able to add a country that is not on this list.\"\n  },\n  \"cols\": 2,\n  \"rows\": 2\n}\n[/block]\nPass these options in as a JSON blob on the element.\n[block:code]\n{\n  \"codes\": [\n    {\n      \"code\": \"<input type=\\\"datepicker\\\" data-settings='{\\\"color\\\": \\\"#32942A\\\"}'>\",\n      \"language\": \"text\"\n    }\n  ]\n}\n[/block]\n\n[block:api-header]\n{\n  \"type\": \"basic\",\n  \"title\": \"Styling\"\n}\n[/block]\nYou can edit (most) of the style for the drop down widget using just regular CSS on your page. You can't change the style of the popup modal, however you can change the color using options (see above).\n[block:api-header]\n{\n  \"type\": \"basic\",\n  \"title\": \"Events\"\n}\n[/block]\nYou can bind to the element, and we'll trigger an event when the data changes. This is the best way to get a raw dump of the data (as opposed to just a string).\n[block:callout]\n{\n  \"type\": \"danger\",\n  \"title\": \"jQuery is Required!\",\n  \"body\": \"In order to have a custom event triggered, the widget.js file must have access to a `jQuery` object. There will be no errors if it can't find jQuery; it just won't trigger the event.\"\n}\n[/block]\nMake sure you bind to the original element (the `type=\"datepicker\"` one), **not** the div we replace it with.\n[block:code]\n{\n  \"codes\": [\n    {\n      \"code\": \"$('[type=datepicker]').on('addressPicker.change', function(e, data){\\n    console.log(data);\\n})\",\n      \"language\": \"javascript\"\n    }\n  ]\n}\n[/block]\nYou'll get a data object with the following fields:\n[block:parameters]\n{\n  \"data\": {\n    \"h-0\": \"Name\",\n    \"0-0\": \"`id`\",\n    \"h-1\": \"Description\",\n    \"0-1\": \"A unique ID for the address. You can use it to access the raw data in the future, using the API.\",\n    \"1-0\": \"`pretty`\",\n    \"1-1\": \"The address, in a nice looking, multi-line format.\",\n    \"2-0\": \"`raw`\",\n    \"2-1\": \"An object of all the fields we have collected. The fields in this will depend on the country and address inputted, although we try to keep to American-ized lingo as much as possible.\"\n  },\n  \"cols\": 2,\n  \"rows\": 3\n}\n[/block]","comments":[],"link_url":"","project":"53de5ae684ab2b1c5eb2dd6b","slug":"advanced-setup","__v":3,"githubsync":"","isReference":true,"link_external":false,"tags":[],"user":"53de5a0384ab2b1c5eb2dd6a","childrenPages":[]}

Advanced Setup

The basic version should hopefully work, however there's options if you want to get creative.

The Address Picker is made to be dead simple (just include a JavaScript file, and you can start using it!), however we know there's many cases where you may want to customize it a bit. [block:api-header] { "type": "basic", "title": "Lazy-init of AddressPicker" } [/block] AddonPicker will automatically convert any `<input type="addresspicker">` that it can find when the DOM is ready, however often you'll need a way to manually set it up. [block:code] { "codes": [ { "code": "var element = $('#shipping-address'); // Get your element\nwindow.addressPicker.init(element); // Make it an address picker!", "language": "javascript" } ] } [/block] [block:callout] { "type": "warning", "title": "Caution!", "body": "Currently, the addressPicker.init(el) can only accept one element. If you pass it an array of elements, it will only convert the first element. You will have to loop through elements yourself." } [/block] [block:api-header] { "type": "basic", "title": "Advanced Options" } [/block] Address Picker has a number of options that can be passed into your widget for advanced control and customization. [block:parameters] { "data": { "0-0": "`color`", "h-0": "Option", "h-1": "What It Does", "0-1": "Change the color used in the color picker", "1-0": "`whitelist`\n\n*Coming Soon*", "1-1": "A list of accepted country codes. Users will not be able to add a country that is not on this list." }, "cols": 2, "rows": 2 } [/block] Pass these options in as a JSON blob on the element. [block:code] { "codes": [ { "code": "<input type=\"datepicker\" data-settings='{\"color\": \"#32942A\"}'>", "language": "text" } ] } [/block] [block:api-header] { "type": "basic", "title": "Styling" } [/block] You can edit (most) of the style for the drop down widget using just regular CSS on your page. You can't change the style of the popup modal, however you can change the color using options (see above). [block:api-header] { "type": "basic", "title": "Events" } [/block] You can bind to the element, and we'll trigger an event when the data changes. This is the best way to get a raw dump of the data (as opposed to just a string). [block:callout] { "type": "danger", "title": "jQuery is Required!", "body": "In order to have a custom event triggered, the widget.js file must have access to a `jQuery` object. There will be no errors if it can't find jQuery; it just won't trigger the event." } [/block] Make sure you bind to the original element (the `type="datepicker"` one), **not** the div we replace it with. [block:code] { "codes": [ { "code": "$('[type=datepicker]').on('addressPicker.change', function(e, data){\n console.log(data);\n})", "language": "javascript" } ] } [/block] You'll get a data object with the following fields: [block:parameters] { "data": { "h-0": "Name", "0-0": "`id`", "h-1": "Description", "0-1": "A unique ID for the address. You can use it to access the raw data in the future, using the API.", "1-0": "`pretty`", "1-1": "The address, in a nice looking, multi-line format.", "2-0": "`raw`", "2-1": "An object of all the fields we have collected. The fields in this will depend on the country and address inputted, although we try to keep to American-ized lingo as much as possible." }, "cols": 2, "rows": 3 } [/block]