Блог

Добавление пользовательского скрипта в мой cart.html файл в bigcommerce для включения скрипта, который перенаправит владельца карты на google.com когда они нажимают кнопку оформить заказ (пока заходят только в Google во время тестирования скрипта)

При загрузке скрипта я вижу следующую ошибку в консоли (self.checkoutButton.on не является функцией)

Вот скрипт файл

 cart: true
<script>
  document.addEventListener("DOMContentLoaded", function () {

    var debug = true ? console.log.bind(console, '[DEBUG][Cart]') : function () {};

    debug('Script loaded');

    window.Cart = function (options) {


      var self = {}
      function init() {
        self.options = Object.assign({
          checkoutButtonSelector: document.getElementById("checkout"),
          checkoutUrl: 'https://google.com',
        }, options);

        self.checkoutButton = (self.options.checkoutButtonSelector);

        debug('Initialized with options', self.options);
        
        
     
            inject();
       
      }


      function inject() {
        debug('Inject');
        self.checkoutButton.on('click', checkout);
      }


      function checkout(event) {
        var checkoutUrl = getCheckoutURL(self.options.products);
        debug('Checkout ->', checkoutUrl);
        event.preventDefault();
        window.location.href = checkoutUrl;
      }
      
      function getCartCookie(name) {
       var match = document.cookie.match(new RegExp('(^| )'   name   '=([^;] )'));
        if (match){ 
          return match[2];
          }
      }

      function getCheckoutURL(products) {
         cookie = getCartCookie('cart');
        var urlLineItems = Object.keys(products).reduce(function (output, productId) {
          var quantity = products[productId];
          return output.concat([ productId   ':'   quantity ]);
        }, []).join(';');

        return self.options.checkoutUrl   '?products='   urlLineItems   'amp;cartId=' cookie;
      }



      init();

      return self;

    };

    var instance = new Cart();

  });

</script>








<div class="page">

    <main class="page-content" data-cart>
        {{> components/common/breadcrumbs breadcrumbs=breadcrumbs}}

        {{> components/cart/page-title}}

        <div data-cart-status>
            {{> components/cart/status-messages}}
        </div>

        {{#if cart.items.length}}
            <div class="loadingOverlay"></div>

            <div data-cart-content class="cart-content-padding-right">
                {{> components/cart/content}}
            </div>

            <div data-cart-totals class="cart-content-padding-right">
                {{> components/cart/totals}}
            </div>

            {{#if cart.show_primary_checkout_button}}
                <div class="cart-actions cart-content-padding-right">
                    <a class="button button--primary" id='checkout' title="{{lang 'cart.checkout.title'}}">{{lang 'cart.checkout.button'}}</a>
                    {{#if cart.show_multiple_address_shipping}}
                        <a class="checkoutMultiple" href="{{urls.checkout.multiple_address}}">
                            {{lang 'cart.preview.checkout_multiple'}}
                        </a>
                    {{/if}}
                </div>
            {{else}}
                <div class="cart-actions cart-content-padding-right">
                    <a class="button" href="{{urls.home}}" title="{{lang 'cart.continue_shopping'}}">{{lang 'cart.continue_shopping'}}</a>
                </div>
            {{/if}}

            {{#if cart.additional_checkout_buttons}}
                <div class="cart-additionalCheckoutButtons cart-content-padding-right">
                    {{#each cart.additional_checkout_buttons}}
                        {{{this}}}
                    {{/each}}
                </div>
            {{/if}}
        {{else}}
            <h3 tabindex="0">{{lang 'cart.checkout.empty_cart'}}</h3>
        {{/if}}

    </main>
</div>
{{/partial}}
{{> layout/base}}
 

Не могли бы вы понять, почему я получаю следующую ошибку? Заранее спасибо

Вы используете .on функцию jQuery. Вы не используете jQuery для переноса своего селектора, вы просто используете ванильный JS getElementById. Для добавления события необходимо использовать ванильную JS-функцию, такую как addEventListener .