When using the ExpressCapture (EC) in a website that uses Google Tag Manager (GTM) and Demandware there are extra steps required to make sure all the fields are mapped correctly.
The issue is that the drop-down fields used by Demandware uses javascript to display/store the state value in their address forms making it impossible for the standard EC setup to work correctly.
When mapping your fields for ExpressCapture the state field should be “dwfrm_singleshipping_shippingAddress_addressFields_states_state” and it should be matched to ‘County’.
Below is the tag code required. The same code can be used for the billing section by just changing the field names used.
<script type="text/javascript" src="https://expresscapture.datatoolscloud.net.au/js/expresscapture-2.30.min.js?key=BH97-HA71-UB13-YP52"></script>
<link rel="stylesheet" type="text/css" href="https://expresscapture.datatoolscloud.net.au/css/expresscapture-2.30.min.css?key=BH97-HA71-UB13-YP52">
<script>
$(document).ready(function ()
{
pca.expressCapture.listen('load', function(control)
{
control.listen("populate", function (address)
{
if(control.bound("dwfrm_singleshipping_shippingAddress_addressFields_states_state"))
{
var changeEvent = document.createEvent("HTMLEvents");
changeEvent.initEvent("change", true, true);
document.getElementById("dwfrm_singleshipping_shippingAddress_addressFields_states_state").dispatchEvent(changeEvent);
};
});
});
});
</script>