Javascript Widget Event Listener
Kurvi Kansagra
Last Update hace 3 meses
We have a list of events that you can access when relevant actions/trigger are taken in the widget. You can write those events code in your theme liquid files.
List of events
1. cncwidgetloaded (Fire the event when the widget loaded)
<script>
document.addEventListener("cncwidgetloaded", function(e) {
console.log('event name listner cncwidgetloaded');
});
</script>
2. selected_cnc_method (Fire the event when selecting the method)
<script>
document.addEventListener("selected_cnc_method", function(e) {
console.log('selected_cnc_method listner '+e.detail.method);
if(e.detail.method == "clickandcollect") {
// Do something when pickup method is selected
} else if(e.detail.method == "localdelivery") {
// Do something when delivery method is selected
} else if(e.detail.method == "shipping"){
// Do something when shipping method is selected
}
});
</script>
3. cnc_loaded_locations_list (Fire the event when loading the pickup locations)
<script>
document.addEventListener("cnc_loaded_locations_list", function(e) {
console.log('cnc_loaded_locations_list listner');
console.log(e.detail);
});
</script>
4. cnc_selected_pickup_location (Fire the event when selecting the pickup location)
<script>
document.addEventListener("cnc_loaded_locations_list", function(e) {
console.log('cnc_loaded_locations_list listner');
console.log(e.detail);
});
</script>
5. cnc_complete_selection (Fire the event when selecting the pickup location)
<script>
document.addEventListener("cnc_complete_selection", function(e) {
console.log('cnc_complete_selection listner');
console.log(e.detail);
});
</script>
6. cnc_date_selected Ex. (Fire the event when selecting the date)
<script>
document.addEventListener("cnc_date_selected", function(e) {
console.log('cnc_date_selected listner', e.detail);
});
</script>
You can use the following events for use
- cncwidgetloaded (When widget load)
- selected_cnc_method (When selecting the method)
- cncsubmittocheckout (Before sending to checkout page)
- cnc_get_locations (Before locations request)
- cnc_loaded_locations_list (Locations response)
- cnc_select_location (When selecting location for pickup)
- cnc_selected_pickup_location (When selecting the pickup location)
- cnc_complete_selection (After Pickup/Delivery/Shipping date and time selected)
- cnc_update_cart_attr (After updating cart/order attributes)
- cnc_before_generate_checkout_url (Before generating checkout URL and set into cart form action)
- cnc_date_selected (When select date from datepicker)
- cnc_time_selected (When select time from timepicker)