How can I modify Dawn theme code to keep original cart notification?

Technical Q&A
1 
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
        }

    }

 }
}

Hi, I am using the dawn theme. My third-party app will override the original Add to Cart button of the Dawn theme. However, the app won’t update the increment icon of the cart sign, the pop-up of the cart notification won’t show as well. In the code of the product-form.js file, the icon and notification are rendered after a response is passed. Anyone can give me some hints to modify my code to keep the original feature available?

2

Hi @David1994 ,

You just need to change the whole code according to the theme’s default code, it will work fine. Refer https://github.com/Shopify/dawn/blob/main/assets/product-form.js

Hope it helps!

3

Hello @David1994 ,

We would like to help you with this issue. Here are some solutions that will work in your favor.

  • Firstly, third-party apps may affect your theme functionality, because most of the apps don’t function with the ajax cart.
  • For making your theme functionality compatible with the third-party app you need to contact the app support they will resolve your issue.
  • Also, if you check the documentation of the app you can get the solution there.
  • You can also try to replace your Product-form.js code with the code below, this is the latest working code of this file and it will surely enable the theme functionality.

Here is the code for Product-form.js

if (!customElements.get(‘product-form’)) {

customElements.define(‘product-form’, class ProductFormextends HTMLElement {

constructor() {

super();

this.form = this.querySelector(‘form’);

this.form.querySelector(‘[name=id]’).disabled = false;

this.form.addEventListener(‘submit’, this.onSubmitHandler.bind(this));

this.cartNotification = document.querySelector(‘cart-notification’);

}

onSubmitHandler(evt) {

evt.preventDefault();

constsubmitButton = this.querySelector(‘[type=“submit”]’);

if (submitButton.classList.contains(‘loading’)) return;

this.handleErrorMessage();

this.cartNotification.setActiveElement(document.activeElement);

submitButton.setAttribute(‘aria-disabled’, true);

submitButton.classList.add(‘loading’);

this.querySelector(‘.loading-overlay__spinner’).classList.remove(‘hidden’);

constconfig = fetchConfig(‘javascript’);

config.headers[‘X-Requested-With’] = ‘XMLHttpRequest’;

deleteconfig.headers[‘Content-Type’];

constformData = newFormData(this.form);

formData.append(‘sections’, this.cartNotification.getSectionsToRender().map((section) => section.id));

formData.append(‘sections_url’, window.location.pathname);

config.body = formData;

fetch(${routes.cart_add_url}, config)

.then((response) => response.json())

.then((response) => {

if (response.status) {

this.handleErrorMessage(response.description);

return;

}

this.cartNotification.renderContents(response);

Shopify.shippingBar.update();

})

.catch((e) => {

console.error(e);

})

.finally(() => {

submitButton.classList.remove(‘loading’);

submitButton.removeAttribute(‘aria-disabled’);

this.querySelector(‘.loading-overlay__spinner’).classList.add(‘hidden’);

});

}

handleErrorMessage(errorMessage = false) {

this.errorMessageWrapper = this.errorMessageWrapper || this.querySelector(‘.product-form__error-message- wrapper’);

this.errorMessage = this.errorMessage || this.errorMessageWrapper.querySelector(‘.product-form__error-message’);

this.errorMessageWrapper.toggleAttribute(‘hidden’, !errorMessage);

if (errorMessage) {

this.errorMessage.textContent = errorMessage;

}

}

});

}

Hope it helps. Please connect with us if you need further assistance.

All the best,

Team CedCommerce

4

Hi, @Cedcommerce

Thank you for your reply. The situation is that I need the third-party app to actually add the item to the cart because I have to keep their ATC button since the personalization product. However, in that way, the after-add-to-cart feature won’t work including the pop-up notification and increment number bubble on the cart icon since the Dawn theme renders those two features depending on the response.sections object. The theme has to actually add the item to the cart to get response to render the after-add-to-cart feature.

So the problem so far would be how I can keep the third-party app adding items to the cart actually, at the same time, rendering the after-add-to-cart feature like my original theme?

1 Like
5

Hi @David1994 ,

Please send your site and if your site is password protected, please send me the password. I will check it.

6

Hello @David1994 ,

Alright, we got your point. In this case, we need to check what type of personalization settings you are using.

If in case it can be done through a custom code then we don’t need an app.
Else, we need to debug the theme code and check if the cart popup can work along with the personalization app.

It would be helpful for us to assist you better if you can share your product link that has personalization functionality, and also let us know the app you are using for personalization.

Regards,
Team CedCommerce

7

@Cedcommerce @LitExtension

Thank you so much for your help. I have found a way to get this issue fixed. Thank you!

2 Likes