Modify Buy Button code

FrankoFranko Member Posts: 6

Hello everyone,

We need to modify the submit function attached to the Buy ("Acheter") button in our Lightspeed shop to do additional validations.

Unfortunately I believe the checkout script managing the submit function is standardized for all shops and we don't directly have access to it. It's located at https://cdn.shoplightspeed.com/assets/checkout/checkout.js?2021-06-28?10

Is there any way to REPLACE the submit function here with our own? Which would be 99% the same but with more validations up front.

We already have access to customizable JS files in the project (like global.js). However we fear anything we do in them will be overwritten by the checkout script.


(My first attempt at this problem consisted in adding another function in the onclick before $('#gui-form').submit()) but the onclick attribute gets reset automatically).


Any help greatly appreciated


3 comments

  • mattangermattanger Member Posts: 106 ✭
    edited February 15

    I don't remember exactly how eCom loads scripts on the different pages, but to override the "onclick" event you can probably just use jquery to override the function.

    $('#gui-form').onclick = null; // remove the dom onclick handler

    $('#gui-form').click(function(e) {

    console.log("submit");

    });

    If your overrides are evaluated after the Lightspeed scripts, then that should work fine. I personally haven't messed with it, but I'd probably start here. You could drop that code in, and if it prints "submit" to the console it's been overridden.

    Matt Anger

    https://spectraretail.com/

  • FrankoFranko Member Posts: 6

    Thank you Matt.

    I can modify the onclick doing this

     $('a[title="Acheter"]').attr('onclick','function(e) {console.log("submit");}');

    It works until I click somewhere else in the checkout form, for instance on a payment method radio button, the "Buy" button will revert back to

    <a href="javascript:;" role="button" onclick="$('#gui-form').submit();" class="gui-button-small gui-button-action" title="Acheter">Acheter</a>


    I'm not good enough with javascript to find which solution is better and how to do it

    1) find a way to keep that custom button code in place so I can call my own function before the actual submit

    or

    2) override the Validation function from checkout.js here

    function Validation() {
          this.validate = bind(this.validate, this);
          this.Checkout = window.Checkout;
          this.events();
        }
    
        Validation.prototype.events = function() {
          var onChangeItems, onCheckoutItemsChange;
          this.Checkout.object.find('form#gui-form').submit((function(_this) {
            return function(Event) {
              return _this.sections($(Event.currentTarget).parents('*[data-checkout]').find('.gui-section[data-validation="required"]:visible'), true);
            };
          })(this));
          onChangeItems = (function(_this) {
            return function(Event) {
              var element, section, validateBeforeUpdate;
              if (_this.Checkout.realtime) {
                element = $(Event.currentTarget);
                section = element.parents('.gui-section');
                if (section.length > 0) {
                  validateBeforeUpdate = typeof element.data('validate-before-update') !== 'undefined' ? element.data('validate-before-update') : true;
                  if (validateBeforeUpdate) {
                    if (_this.section(section.data('name'), false)) {
                      return delay((function() {
                        element.addClass('gui-loading');
                        return _this.Checkout.update(section);
                      }), 600);
                    }
                  } else {
                    return delay((function() {
                      element.addClass('gui-loading');
                      return _this.Checkout.update(section);
                    }), 600);
                  }
                }
              }
            };
          })(this);
          onCheckoutItemsChange = (function(_this) {
            return function(Event) {
              var element;
              if (Event.keyCode && (Event.keyCode === 9 || Event.keyCode === 16)) {
                return false;
              }
              element = $(Event.currentTarget);
              _this.validate(element, true);
              if (Event.type === 'change') {
                _this.broadcast(element);
              }
              return onChangeItems(Event);
            };
          })(this);
          this.Checkout.object.find('input:not(#gui-form-discount_code, #gui-form-gift_card_code), select').live('change keyup', onCheckoutItemsChange);
          this.Checkout.object.find('#gui-form-discount_code-apply').live('click', onChangeItems);
          return this.Checkout.object.find('textarea').live('change', onCheckoutItemsChange);
        };
    


  • FrankoFranko Member Posts: 6

    Thank you Matt.

    I can modify the onclick doing this

     $('a[title="Acheter"]').attr('onclick','function(e) {console.log("submit");}');

    It works until I click somewhere else in the checkout form, for instance on a payment method radio button, the "Buy" button will revert back to

    <a href="javascript:;" role="button" onclick="$('#gui-form').submit();" class="gui-button-small gui-button-action" title="Acheter">Acheter</a>


    I'm not good enough with javascript to find which solution is better and how to do it

    1) find a way to keep that custom button code in place so I can call my own function before the actual submit

    or

    2) override the Validation function from checkout.js here

    function Validation() {
          this.validate = bind(this.validate, this);
          this.Checkout = window.Checkout;
          this.events();
        }
    
        Validation.prototype.events = function() {
          var onChangeItems, onCheckoutItemsChange;
          this.Checkout.object.find('form#gui-form').submit((function(_this) {
            return function(Event) {
              return _this.sections($(Event.currentTarget).parents('*[data-checkout]').find('.gui-section[data-validation="required"]:visible'), true);
            };
          })(this));
          onChangeItems = (function(_this) {
            return function(Event) {
              var element, section, validateBeforeUpdate;
              if (_this.Checkout.realtime) {
                element = $(Event.currentTarget);
                section = element.parents('.gui-section');
                if (section.length > 0) {
                  validateBeforeUpdate = typeof element.data('validate-before-update') !== 'undefined' ? element.data('validate-before-update') : true;
                  if (validateBeforeUpdate) {
                    if (_this.section(section.data('name'), false)) {
                      return delay((function() {
                        element.addClass('gui-loading');
                        return _this.Checkout.update(section);
                      }), 600);
                    }
                  } else {
                    return delay((function() {
                      element.addClass('gui-loading');
                      return _this.Checkout.update(section);
                    }), 600);
                  }
                }
              }
            };
          })(this);
          onCheckoutItemsChange = (function(_this) {
            return function(Event) {
              var element;
              if (Event.keyCode && (Event.keyCode === 9 || Event.keyCode === 16)) {
                return false;
              }
              element = $(Event.currentTarget);
              _this.validate(element, true);
              if (Event.type === 'change') {
                _this.broadcast(element);
              }
              return onChangeItems(Event);
            };
          })(this);
          this.Checkout.object.find('input:not(#gui-form-discount_code, #gui-form-gift_card_code), select').live('change keyup', onCheckoutItemsChange);
          this.Checkout.object.find('#gui-form-discount_code-apply').live('click', onChangeItems);
          return this.Checkout.object.find('textarea').live('change', onCheckoutItemsChange);
        };
    


Sign In or Register to comment.