I have a web component js file, it is product form component:
if (!customElements.get('product-form')) {
customElements.define('product-form', class ProductForm extends HTMLElement {
constructor() {
super();
this.form.addEventListener('submit', this.onSubmitHandler.bind(this));
this.cart = document.querySelector('cart-notification');
}
onSubmitHandler(evt) {
evt.preventDefault();
const config = fetchConfig('javascript');
config.headers['X-Requested-With'] = 'XMLHttpRequest';
delete config.headers['Content-Type'];
const formData = new FormData(this.form);
fetch(`${routes.cart_add_url}`, config)
.then((response) => response.json())
.then((response) => {
this.cart.renderContents(response); //when item add //to cart, the
//renderContents() will be called to
//show cart notification
}
}
}
}
I have another js file, it is a eventlister for another button:
document.addEventListener('event-after-cart-added', function() {
request.open('GET', '/cart.js', true);
request.onload = function() {
var data = JSON.parse(this.response);
//Then I need to call the function renderContents() of the above ProductForm
// component, I need to pass the data into renderContents to trigger the cart
//notification
}
}
I am a javascript newbie, if anybody can help, it is greatly appreciated!
See code example below. Adjustments may be neccessary depending on your actual implementation.
customElements.define(
'product-form',
class ProductForm extends HTMLElement {
constructor() {
super();
this.form.addEventListener('submit', this.onSubmitHandler.bind(this));
this.cart = document.querySelector('cart-notification');
}
onSubmitHandler(evt) {
evt.preventDefault();
const config = fetchConfig('javascript');
config.headers['X-Requested-With'] = 'XMLHttpRequest';
delete config.headers['Content-Type'];
const formData = new FormData(this.form);
fetch(`${routes.cart_add_url}`, config)
.then((response) => response.json())
.then((response) => {
this.cart.renderContents(response);
});
}
// add a handler for the external call for renderContents
afterCartAddedHandler(data) {
// your logic here
this.card.renderContents(data);
}
}
);
}
// somewhere in your code you should istanciate ProductForm:
export const form = new ProductForm();
// in your event listener:
// (if needed import "form" from the place of instanciation with "new ProductForm")
document.addEventListener('event-after-cart-added', function () {
request.open('GET', '/cart.js', true);
request.onload = function () {
var data = JSON.parse(this.response);
// add a call to your newly added handler in ProductForm class:
form.afterCartAddedHandler(data);
};
});