Javascript Events

Javascript Events provide several ways to interact with Sledge Widgets through coding. you can use to execute your own function after Sledge function running.

Let's say you want to show a 'thank you' notification after customer adding a review you can feed your own function by using event listener like after-add-review.

Events

Available events :

`after-add-wishlist`

This event triggered after add wishlist item.

Using document.addEventListener

document.addEventListener('after-add-wishlist', ({ detail }) => {
    const { state, product } = detail;
 
    // for declare the event is 'success' or 'failed'
    console.log('state', state);
 
    // product data
    console.log('product', product);
 
    if (state === 'success') {
        // Code here
    } else {
        // Code here
    }
});

Using sledge.on, wrap with document.addEventListener("init-sledge", function);

document.addEventListener("init-sledge", () => {
  sledge.on("after-add-wishlist", ({ detail }) => {
    const { state, product } = detail;
 
    // for declare the event is 'success' or 'failed'
    console.log('state', state);
 
    // product data
    console.log('product', product);
 
    if (state === 'success') {
        // Code here
    } else {
        // Code here
    }
  });
});

`after-remove-wishlist`

This event triggered after remove wishlist item.

Using document.addEventListener

document.addEventListener('after-remove-wishlist', ({ detail }) => {
    const { state, product } = detail;
 
    // for declare the event is 'success' or 'failed'
    console.log('state', state);
 
    // product data
    console.log('product', product);
 
    if (state === 'success') {
        // Code here
    } else {
        // Code here
    }
});

Using sledge.on, wrap with document.addEventListener("init-sledge", function);

document.addEventListener("init-sledge", () => {
  sledge.on("after-remove-wishlist", ({ detail }) => {
    const { state, product } = detail;
 
    // for declare the event is 'success' or 'failed'
    console.log('state', state);
 
    // product data
    console.log('product', product);
 
    if (state === 'success') {
        // Code here
    } else {
        // Code here
    }
  });
});

`after-add-review`

This event triggered after write a review.

Using document.addEventListener

document.addEventListener('after-add-review', ({ detail }) => {
    const { state, product } = detail;
 
    // for declare the event is 'success' or 'failed'
    console.log('state', state);
 
    // product data
    console.log('product', product);
 
    if (state === 'success') {
        // Code here
    } else {
        // Code here
    }
});

Using sledge.on, wrap with document.addEventListener("init-sledge", function);

document.addEventListener("init-sledge", () => {
  sledge.on("after-add-review", ({ detail }) => {
    const { state, product } = detail;
 
    // for declare the event is 'success' or 'failed'
    console.log('state', state);
 
    // product data
    console.log('product', product);
 
    if (state === 'success') {
        // Code here
    } else {
        // Code here
    }
  });
});

`after-render-product`

This event triggered after product card rendered.

Using document.addEventListener

document.addEventListener('after-render-product', ({ detail }) => {
    const { state } = detail;
 
    // for declare the event is 'success' or 'failed'
    console.log('state', state);
 
    if (state === 'success') {
        // Code here
    } else {
        // Code here
    }
});

Using sledge.on, wrap with document.addEventListener("init-sledge", function);

document.addEventListener("init-sledge", () => {
  sledge.on("after-render-product", ({ detail }) => {
    const { state } = detail;
 
    // for declare the event is 'success' or 'failed'
    console.log('state', state);
 
    if (state === 'success') {
        // Code here
    } else {
        // Code here
    }
  });
});

`after-render-collection`

This event triggered after collection card rendered.

Using document.addEventListener

document.addEventListener('after-render-collection', ({ detail }) => {
    const { state } = detail;
 
    // for declare the event is 'success' or 'failed'
    console.log('state', state);
 
    if (state === 'success') {
        // Code here
    } else {
        // Code here
    }
});

Using sledge.on, wrap with document.addEventListener("init-sledge", function);

document.addEventListener("init-sledge", () => {
  sledge.on("after-render-collection", ({ detail }) => {
    const { state } = detail;
 
    // for declare the event is 'success' or 'failed'
    console.log('state', state);
 
    if (state === 'success') {
        // Code here
    } else {
        // Code here
    }
  });
});

`after-render-page`

This event triggered after page card rendered.

Using document.addEventListener

document.addEventListener('after-render-page', ({ detail }) => {
    const { state } = detail;
 
    // for declare the event is 'success' or 'failed'
    console.log('state', state);
 
    if (state === 'success') {
        // Code here
    } else {
        // Code here
    }
});

Using sledge.on, wrap with document.addEventListener("init-sledge", function);

document.addEventListener("init-sledge", () => {
  sledge.on("after-render-page", ({ detail }) => {
    const { state } = detail;
 
    // for declare the event is 'success' or 'failed'
    console.log('state', state);
 
    if (state === 'success') {
        // Code here
    } else {
        // Code here
    }
  });
});

`after-render-blog`

This event triggered after blog card rendered.

Using document.addEventListener

document.addEventListener('after-render-blog', ({ detail }) => {
    const { state } = detail;
 
    // for declare the event is 'success' or 'failed'
    console.log('state', state);
 
    if (state === 'success') {
        // Code here
    } else {
        // Code here
    }
});

Using sledge.on, wrap with document.addEventListener("init-sledge", function);

document.addEventListener("init-sledge", () => {
  sledge.on("after-render-blog", ({ detail }) => {
    const { state } = detail;
 
    // for declare the event is 'success' or 'failed'
    console.log('state', state);
 
    if (state === 'success') {
        // Code here
    } else {
        // Code here
    }
  });
});

`after-render-article`

This event triggered after article card rendered.

Using document.addEventListener

document.addEventListener('after-render-article', ({ detail }) => {
    const { state } = detail;
 
    // for declare the event is 'success' or 'failed'
    console.log('state', state);
 
    if (state === 'success') {
        // Code here
    } else {
        // Code here
    }
});

Using sledge.on, wrap with document.addEventListener("init-sledge", function);

document.addEventListener("init-sledge", () => {
  sledge.on("after-render-article", ({ detail }) => {
    const { state } = detail;
 
    // for declare the event is 'success' or 'failed'
    console.log('state', state);
 
    if (state === 'success') {
        // Code here
    } else {
        // Code here
    }
  });
});

Announcement Bar:Upcoming Javascript Methods