购物车页面上的Bigcommerce重定向

Question

在我的bigcommerce中的cart.html文件中添加自定义脚本，以包含一个脚本，当持卡人点击结账时，该脚本将重定向到google.com (仅在测试脚本时暂时转到谷歌)

加载脚本时，我在控制台中看到以下错误(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 + '&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}}

你知道为什么我会得到下面的错误吗？提前感谢

Answer 1

您正在使用JQuery函数.on。您不是在使用JQuery包装选择器，而是使用普通的JS getElementById。您需要使用普通的JS函数来添加事件，例如addEventListener。