Thursday, February 22, 2018

How to customize the Canada Post Autocomplete in its Option Setting?

if you initialize the Canada Post Autocomplete in the docment ready event or anything script loading event. we can handle it with the following code.


 var fields = [
             {
                 element: customerType + "street-address", field: "Line1"
             },
             {
                 element: "street-address2", field: "Line2", mode: pca.fieldMode.POPULATE
             },
             {
                 element: "city", field: "City", mode: pca.fieldMode.POPULATE
             },
             {
                 element: "province", field: "ProvinceCode", mode: pca.fieldMode.POPULATE
             },
             {
                 element: "postalCode", field: "PostalCode"
             },
             { element: "country", field: "CountryIso3", mode: pca.fieldMode.COUNTRY }
        ],
           options = {
               key: myKey,
               countries: {defaultCode: "CAN", value: "CAN", prepopulate: false, populate:false},
               bar: { visible: false, showCountry: false, showLogo: true, logoLink: false, logoClass: "aclogo"}

                  
            },

          control = new pca.Address(fields, options);

there is an Options paramenters on new Canada Post Address Autocomplete initialization, which will allow us to customize the look and features on the address autocomplete control. the picture shows all the settings that allow us modified in the control

here is the rule for setting up your own values

Key:Value

if there is a group in one attribute. then we have to the curly bracket to organize them together.

Key:{key1:value1, key2:value2......................}






No comments:

Post a Comment