如何在 woocommerce 的评论订单页面上添加自定义 JS 代码

Question

这是上一个与该主题相关的问题：Stripe JS element disappering in WooCommerce Checkout

所以在我玩了一点之后，我以某种方式设法获得了这样的字段以及它的验证。

但问题是我在这个文件中插入了 JS 代码：wp-content/plugins/woocommerce/templates/checkout/review-order.php

看起来是这样的：

这是添加的 JS 代码：

<script>
    (function ($) {
    "use strict";
    $(document).ready(function () {
        // Create a Stripe client.
        var stripe = Stripe('pk_test_51IB3etJxogSn2Fj0hqBSBcCkGH76cUowa9iWK7Xm7gj3O2jdt8FfcIXrHoZGIk4ySL1MyYYp1IxN582FOsjgI1DD00Hr7nvVF1');

// Create an instance of Elements.
        var elements = stripe.elements();

// Custom styling can be passed to options when creating an Element.
// (Note that this demo uses a wider set of styles than the guide below.)
        var style = {
            base: {
                color: '#32325d',
                fontFamily: '"Helvetica Neue", Helvetica, sans-serif',
                fontSmoothing: 'antialiased',
                fontSize: '16px',
                '::placeholder': {
                    color: '#aab7c4'
                }
            },
            invalid: {
                color: '#fa755a',
                iconColor: '#fa755a'
            }
        };

// Create an instance of the card Element.
        var card = elements.create('card', {style: style});

// Add an instance of the card Element into the `card-number` <div>.
        card.mount('#card-number');
// Handle real-time validation errors from the card Element.
        card.on('change', function (event) {
            var displayError = document.getElementById('card-errors');
            if (event.error) {
                displayError.textContent = event.error.message;
            } else {
                displayError.textContent = '';
            }
        });

// Handle form submission.
// var form = document.getElementById('payment-form');
// form.addEventListener('submit', function(event) {
//   event.preventDefault();
//
//   stripe.createToken(card).then(function(result) {
//     if (result.error) {
//       // Inform the user if there was an error.
//       var errorElement = document.getElementById('card-errors');
//       errorElement.textContent = result.error.message;
//     } else {
//       // Send the token to your server.
//       stripeTokenHandler(result.token);
//     }
//   });
// });

// Submit the form with the token ID.
// function stripeTokenHandler(token) {
//   // Insert the token ID into the form so it gets submitted to the server
//   var form = document.getElementById('payment-form');
//   var hiddenInput = document.createElement('input');
//   hiddenInput.setAttribute('type', 'hidden');
//   hiddenInput.setAttribute('name', 'stripeToken');
//   hiddenInput.setAttribute('value', token.id);
//   form.appendChild(hiddenInput);
//
//   // Submit the form
//   form.submit();
// }
    });
})(this.jQuery);



</script>

所以我的问题是我怎样才能正确地对这个 JS 代码进行优先级排序/排队，以便它可以在我的插件中工作，而不仅仅是在 woocommerce 模板中复制和粘贴代码。

这就是我将脚本排队的方式：

add_action('wp_enqueue_scripts', array(self::class, 'enqueue'), 100, 1);

 // add js in wordpress frontend
    public static function enqueue()
    {
        wp_enqueue_script('woocommerce_pay_later_stripe_script', 'https://js.stripe.com/v3/', array('jquery'), false, true);
        wp_enqueue_script('woocommerce_pay_later_main_script', plugins_url('/assets/main.js', __DIR__), array('jquery'), false, true);
    }

Answer 1

您可以将脚本排入该特定页面！

首先找到你review-order page的id，然后检查你是否在那个页面上。如果是，请加载您的脚本！

以下代码将转到您的活动主题或活动子主题的functions.php。

function loading_your_custom_js(){

$order_review_page_id = ; #assign the id of your page to the variable here - You could find that id in the admin area under pages section

# check whether you're on the review-order page or not

  if(get_the_ID() == $order_review_page_id){
    wp_enqueue_script('checkout_js', 'your_custom_script.js', 'JQuery', '1.0', TRUE);
  };
};

add_action('wp_enqueue_scripts', 'loading_your_custom_js');