[英]How to change javascript in woocommerce on add to cart?
I've been trying to develop a theme/plugin in woocommerce and I've spend hours researching how to edit the hook / JS for notices in regards to products.我一直在尝试在 woocommerce 中开发一个主题/插件,并且我花了几个小时研究如何编辑挂钩/ JS 以获取有关产品的通知。
Ultimately I would like to remove the default notice and stop it from scrolling up to the top of the page.最终,我想删除默认通知并阻止它向上滚动到页面顶部。 Instead, I would like the notice to show up with
position:absolute
near the top of the page.相反,我希望通知显示
position:absolute
靠近页面顶部。
In the image above I have added JS to my products listing page.在上图中,我已将 JS 添加到我的产品列表页面。 Here is the code I have created for it.
这是我为它创建的代码。 This works fine, but it is me making my own div rather than using woocommerces ajax built in notice.
这工作正常,但它是我制作自己的 div 而不是使用 woocommerces ajax 内置通知。 (I believe I should be using the notices as it's an important feature on woocommerce)
(我相信我应该使用通知,因为它是 woocommerce 的一个重要功能)
$('.atc').click(function(e){
var productAdded = $(this).attr('aria-label');
var productNumber = $(this).attr('data-product_id');
var fixedPlacement = 'top';
var bannerID = "cart-notice-" + productNumber;
if($(window).width() <= 768) {
fixedPlacement = 'bottom';
}
var addToCartButton = '<div onmouseover="testThis()" class="position-fixed fixed-' + fixedPlacement + ' container alert-primary p-3 add-to-cart-banner" id="' + bannerID + '"><div class="row">';
addToCartButton += '<div class="col-8"> <h3>' + productAdded + '</h3></div>';
addToCartButton += '<div class="col-4 d-flex justify-content-end"><a href="/cart" class="btn btn-danger">View Cart</a> </div>';
addToCartButton += '</div></div>';
var currentItemHeight = $(this).scrollTop();
console.log(currentItemHeight);
if($('#' + bannerID).length) {
$('#' + bannerID).remove();
}
$('body').append(addToCartButton);
//determine if mobile or desktop
if($(window).width() <= 768) {
console.log('mobile');
$('#' + bannerID).css("bottom", 0);
}
else {
//DESKTOP
var windowHeight = $(window).scrollTop();
if(windowHeight < 143) {
windowHeight = 150 - windowHeight;
} else {
windowHeight = 10;
}
$('#cart-notice-' + productNumber).css("top", windowHeight);
}
$('#' + bannerID).delay(4000).fadeOut(800);
e.preventDefault();
});
When looking into the code, I noticed the notice is loaded via do_action( 'woocommerce_before_cart' ); ?>
在查看代码时,我注意到通知是通过
do_action( 'woocommerce_before_cart' ); ?>
加载的do_action( 'woocommerce_before_cart' ); ?>
do_action( 'woocommerce_before_cart' ); ?>
on the cart page. do_action( 'woocommerce_before_cart' ); ?>
在购物车页面上。 I am thinking wc_get_notices()
hook is tied somewhere in there too.我在想
wc_get_notices()
钩子也被绑在那里的某个地方。 Additionally I have went deeper and brought in the add-to-cart.js into my theme using this in my functions.php此外,我已经更深入地将 add-to-cart.js 引入到我的主题中,在我的 functions.php 中使用它
wp_deregister_script('wc-add-to-cart');
wp_register_script('wc-add-to-cart', get_template_directory_uri(). '/js/add-to-cart.js' , array( 'jquery' ), WC_VERSION, TRUE);
wp_enqueue_script('wc-add-to-cart');
The javascript file is now editable but I didn't find the notices in it, I know which hooks make my notices appear, but still have no idea how to change them. javascript 文件现在是可编辑的,但我没有在其中找到通知,我知道哪些钩子使我的通知出现,但仍然不知道如何更改它们。 Any ideas how to customize the notices?
任何想法如何自定义通知?
Update 1更新 1
I have used the updated_cart_totals
event handler and intercepted it to be able to customize how it displays.我使用了
updated_cart_totals
事件处理程序并拦截了它,以便能够自定义它的显示方式。 However, for some reason my remove cart isn't working.但是,由于某种原因,我的移除购物车无法正常工作。 It always refreshes the page.
它总是刷新页面。 Below is the JS code to make it work on the cart page.
以下是使其在购物车页面上工作的 JS 代码。
$(document.body).on('updated_cart_totals, removed_from_cart',function(event){
display_alert('.woocommerce-notices-wrapper');
event.preventDefault();
});
function display_alert(alert_handle) {
var fixedPlacement = 'top';
if($(window).width() <= 768) {
fixedPlacement = 'bottom';
}
fixedPlacement = 'fixed-' + fixedPlacement;
//determine if mobile or desktop
if($(window).width() <= 768) {
console.log('mobile');
$(alert_handle).css("bottom", 0);
}
else {
//DESKTOP
var windowHeight = $(window).scrollTop();
if(windowHeight < 143) {
windowHeight = 150 - windowHeight;
} else {
windowHeight = 10;
}
$(alert_handle).addClass('position-fixed ' + fixedPlacement + ' container alert-primary p-3 add-to-cart-banner');
$(alert_handle).css("top", windowHeight);
}
$(alert_handle).show();
$(alert_handle).delay(4000).fadeOut(800);
}
I couldn't find a best way, as I tried really hard to instead of masking the code, to rebuild it, but I couldn't find any documentation on it.我找不到最好的方法,因为我非常努力地尝试重建它,而不是屏蔽代码,但我找不到任何关于它的文档。 So I used woocommerce built in listeners to wait for certain actions (in this case
updated_cart_totals
) after this ajax function is triggered it then passes .woocommerce-notices-wrapper
into my display_alert function which adds classes and CSS depending on the size of screen.因此,我使用 woocommerce 内置侦听器来等待某些操作(在本例中为
updated_cart_totals
),在此 ajax 函数被触发后,它将.woocommerce-notices-wrapper
传递到我的 display_alert 函数中,该函数根据屏幕大小添加类和 CSS。 The last problem I had was the scrolling up after updates, as I wanted that disabled.我遇到的最后一个问题是更新后向上滚动,因为我希望禁用它。 I used this code -
我使用了这个代码 -
$( document.body ).on( 'checkout_error', function() {
$( 'html, body' ).stop();
} );
$( document ).ajaxComplete( function() {
if ( $( 'body' ).hasClass( 'woocommerce-checkout' ) || jQuery( 'body' ).hasClass( 'woocommerce-cart' ) ) {
$( 'html, body' ).stop();
}
} );
Here is the full code I have created to solve this problem.这是我为解决此问题而创建的完整代码。 but I am open to a cleaner way...
但我对更清洁的方式持开放态度......
$(document.body).on('updated_cart_totals',function(event){
display_alert('.woocommerce-notices-wrapper');
event.preventDefault();
});
function display_alert(alert_handle) {
var fixedPlacement = 'top';
//determine if mobile or desktop
if($(window).width() <= 768) {
fixedPlacement = 'bottom';
console.log('mobile');
$(alert_handle).css("bottom", 0);
}
else {
//DESKTOP
var windowHeight = $(window).scrollTop();
if(windowHeight < 143) {
windowHeight = 150 - windowHeight;
} else {
windowHeight = 10;
}
$(alert_handle).css("top", windowHeight);
}
fixedPlacement = 'fixed-' + fixedPlacement;
$(alert_handle).removeClass('position-fixed fixed-top fixed-bottom container alert-primary p-3 add-to-cart-banner');
$(alert_handle).addClass('position-fixed ' + fixedPlacement + ' container alert-primary p-3 add-to-cart-banner');
$(alert_handle).show();
$(alert_handle).delay(4000).fadeOut(800);
}
$( document.body ).on( 'checkout_error', function() {
$( 'html, body' ).stop();
} );
$( document ).ajaxComplete( function() {
if ( $( 'body' ).hasClass( 'woocommerce-checkout' ) || jQuery( 'body' ).hasClass( 'woocommerce-cart' ) ) {
$( 'html, body' ).stop();
}
} );
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.