Small button status fix for Drupal module Basic Cart

Unfortunately, not all modules for Drupal have long-term support and sometimes, when it is a small but effective module that you use quite often, it starts to work incorrectly. It is good when there is time and desire to tinker with the code and fix it, but when you need a simple and effective solution, you can make a small edit - just so that it works.

Today we will fix the problem of module Basic Cart for Drupal 9, where when adding a product to the cart, the text of the add button should change. And although there is even a field in the settings for such a case, in our specific case the button text did not change. So to solve the problem, we will edit the standard module script - basic_cart.js:

(function ($, Drupal, drupalSettings) {
  $(function () {
    $(".basic_cart-get-quantity").each(function () {
      var buttonId = $(this).attr('id');
      if (localStorage.getItem(buttonId) === "in_cart") {
        $(this).text("In Cart");
        $(this).addClass("disabled");
        $(this).attr("href", "#");
        $(this).prop("disabled", true);
      }
    });

    $(".addtocart-quantity-wrapper-container").each(function () {
      var this_id = $(this).attr('id');
      var id_split = this_id.split("_");
      var dynamic_id = "quantitydynamictext_" + id_split[1];
      var quantity_label = drupalSettings.basic_cart.label_value ? drupalSettings.basic_cart.label_value : 'Quantity';

      var dynamic_input = '<label for="edit-quantity" class="js-form-required form-required ' + drupalSettings.basic_cart.label_class
        + '">' + quantity_label + '</label> <input type="text" value="1" class="quantity_dynamic_text form-text required ' + drupalSettings.basic_cart.textfield_class
        + '" id="' + dynamic_id + '">';
      $(this).html(dynamic_input);
    });


    $(document).on('click', ".basic_cart-get-quantity", function (e) {
      e.preventDefault();
      e.stopPropagation();

      var this_ids = $(this).attr('id');
      var id_splited = this_ids.split("_");
      var quantity = $('#quantitydynamictext_' + id_splited[1]).val();

      var basic_cart_throbber = '<div id="basic-cart-ajax-progress-throbber_' + id_splited[1] + '" class="basic_cart-ajax-progress-throbber ajax-progress ajax-progress-throbber"><div class="basic_cart-throbber throbber">&nbsp;</div></div>';
      $('#forquantitydynamictext_' + id_splited[1]).after(basic_cart_throbber);

      if ($(this).hasClass('use-basic_cart-ajax')) {
        $.ajax({
          url: this.href + quantity,
          success: function (result) {

            $(".basic_cart-grid").each(function () {
              $(this).html(result.block);
            });

            $("#" + result.id).hide();
            $("#" + result.id).html(result.text);
            $(".basic_cart-circles").each(function () {
              $(this).html(result.count);
            });

            $("#" + result.id).fadeIn('slow').delay(1000).hide(2000);
            $('#basic-cart-ajax-progress-throbber_' + id_splited[1]).remove();

            var cart_block = $(".cart-block--summary");
            cart_block.addClass("cart_not_empty");
            var button = $("#forquantitydynamictext_" + id_splited[1]);
            button.text("In Cart");
            button.addClass("disabled");
            button.attr("href", "#");
            button.prop("disabled", true);

            localStorage.setItem(button.attr('id'), "in_cart");
          },
          error: function (xhr, ajaxOptions, thrownError) {
            $('#basic-cart-ajax-progress-throbber_' + id_splited[1]).remove();
            if (xhr.status == 403) {
              $('#ajax-addtocart-message-' + id_splited[1]).html('<p class="messages messages--error">You are not allowed to use the shopping cart</p>').show();
            } else {
              $('#ajax-addtocart-message-' + id_splited[1]).html('<p class="messages messages--error">Contact the site administration</p>').show();
            }
          }
        });
      } else {

        window.location.href = this.href + quantity;
      }
    });
  });
})(jQuery, Drupal, drupalSettings);

We will also add some styles for the new button class:

.disabled {
  pointer-events: none;
  cursor: not-allowed;
}

Now when adding a product to the cart, the button will change its state and save it after reloading the page.

It should be noted that this is only a quick solution, if you need a complete fix for the problem, it is better to contact the module developers.