weird theme.js behavior with cart actions

Technical Q&A
1

so, today my client’s site Ciudad de las Flores suddenly had a problem when customers tried to add an item to the cart. The error said something like “there was an error updating the cart, try again later”.

Since my client can’t afford sales loss, I troubleshooted the problem to solve the

theme.js

so, inspecting the theme.js file, I’ve found that these request are handled via JQuery’s $.post(params). the params containes the target url , data and dataType

// _addItemToCart method
var params = {
   url: '/cart/add.js',
   data: $(data).serialize(),
   dataType: 'json'
};

$.post(params)
    .done(
       function(item) {
          this._hideErrorMessage();
          this._setupCartPopup(item);
        }.bind(this)
      )
    .fail(
       function(response) {
         this.$previouslyFocusedElement.focus();
         var errorMessage = response.responseJSON
           ? response.responseJSON.description
              : theme.strings.cartError;
            this._showErrorMessage(errorMessage);
            this._handleButtonLoadingState(false);
          }.bind(this)
        );

in this case, line 4204 [$.post(params)] was showing the error

looking at the Cart’s Documentation, it is said that $.post (JQuery.post) recieves 2 arguments, the url and the data; here a single argument is given (params), causing the “[object Object]” thingy at the request

solution (?)

editing the line containing $.post like the following, would solve the incorrect request

$.post(params.url, params.data)

BUT this also triggers JQuery’s .fail() callback for some reason, albeit it’s response had a 200 status

so, a patch to the .fail() callback was implemented, basically mirroring a successful response. Since the original .done() callback recieves an item (the response of the post). it has to be parsed from the responseText attribute

.fail(
  function(response) {
    if (response.status === 200) {
      this._hideErrorMessage();
      this._setupCartPopup(JSON.parse(response.responseText));
      return;
    }        
    this.$previouslyFocusedElement.focus();
    var errorMessage = response.responseJSON
      ? response.responseJSON.description
      : theme.strings.cartError;
    this._showErrorMessage(errorMessage);
    this._handleButtonLoadingState(false);
    }.bind(this)
);

This was implemented for all the carts actions and the problem was solved

there is more…

these Cart attributes, $cartPopupWrapper and $errorMessageWrapper (maybe other wrappers?) which called .prepareTransition() to manage some classes, raised an error (function is undefined).

// _showCartPopup method
this.$cartPopupWrapper
  .prepareTransition()
  .removeClass(this.classes.cartPopupWrapperHidden);

just deleting them fixed this problem

// _showCartPopup method
this.$cartPopupWrapper
  .removeClass(this.classes.cartPopupWrapperHidden);

wrapping things up…

so, the question(s) here is: What happened? Did I missed something? Are other parts of the site going to break all of a sudden?

Thanks in advance, Angel

note: since i had to act fast, I forgot about taking screenshots