To continue receiving payouts, you need to secure your account by turning on two-step authentication. If two-step authentication is not turned on your payouts will be paused. Learn more

Dawn theme code edit

Solved
David1994
Tourist
6 0 3
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?

Accepted Solutions (2)

Accepted Solutions
LitExtension
Shopify Partner
4801 982 1008

This is an accepted solution.

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!

LitExtension - Shopping Cart Migration Expert
Check out our Shopify migration app to migrate your online store to Shopify

View solution in original post

Cedcommerce
Shopify Expert
520 57 87

This is an accepted solution.

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

CedCommerce || Shopify Expert
- Let us know if our reply is helpful for you. Like it.
- Was your question answered? Mark it as an accepted solution.
- For further discussion contact: Email ID- apps@cedcommerce.com
- Whatsapp:- Join Here

View solution in original post

Replies 6 (6)
LitExtension
Shopify Partner
4801 982 1008

This is an accepted solution.

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!

LitExtension - Shopping Cart Migration Expert
Check out our Shopify migration app to migrate your online store to Shopify
Cedcommerce
Shopify Expert
520 57 87

This is an accepted solution.

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

CedCommerce || Shopify Expert
- Let us know if our reply is helpful for you. Like it.
- Was your question answered? Mark it as an accepted solution.
- For further discussion contact: Email ID- apps@cedcommerce.com
- Whatsapp:- Join Here
David1994
Tourist
6 0 3

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?

LitExtension
Shopify Partner
4801 982 1008

Hi @David1994,

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

LitExtension - Shopping Cart Migration Expert
Check out our Shopify migration app to migrate your online store to Shopify
Cedcommerce
Shopify Expert
520 57 87

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

CedCommerce || Shopify Expert
- Let us know if our reply is helpful for you. Like it.
- Was your question answered? Mark it as an accepted solution.
- For further discussion contact: Email ID- apps@cedcommerce.com
- Whatsapp:- Join Here
David1994
Tourist
6 0 3

@Cedcommerce @LitExtension 

 

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