Tengo un archivo js de componente web, es un componente de formulario de producto:
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 } } } }Tengo otro archivo js, es un eventlister para otro botón:
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 } }Soy un novato de javascript, si alguien puede ayudar, ¡se lo agradezco mucho!
Vea el ejemplo de código a continuación. Los ajustes pueden ser necesarios dependiendo de su implementación real.
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); }; });