php - 如何在 woocommerce 的评论订单页面上添加自定义 JS 代码
问题描述
这是与该主题相关的上一个问题: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);
}
解决方案
您可以将您的脚本排入该特定页面!
首先找到你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');
推荐阅读
- awk - 使用 AWK 基于一列获取 2 个制表符分隔文件的不常见行
- android - 自定义键盘上的字母键模糊,而特殊键超级清晰
- pointers - `go print(v)` 和 `go func() { print(v) }()` 之间的区别?
- android - this.refs 返回未定义的值
- html - 如何在文档中嵌入作用域 html (css)
- ios - 在 Objective-C 中调用 swift 视图控制器文件的变量
- batch-file - 如何在没有其他文件夹的情况下批量复制文件夹内的文件?
- redis - Jedis 在 Redis 中有多个哨兵时表现异常
- tensorflow - 在视频上使用带有 LSTM 的 TensorFlow 对象检测 API
- c# - 无法使用 c# 客户端连接 docker aerospike 服务器