Javascript 执行但不在 Woocommerce 结帐页面上保持价值

Question

我在 functions.php 中使用它在 Woocommerce 结帐页面上执行。

我看到显示：没有被应用，但只有几毫秒。

知道如何在元素上保持样式吗？

// add script to checkout page

add_action( 'wp_footer', 'add_javascript_function', 9999 );

function add_javascript_function() {
global $wp;
if ( is_checkout() && empty( $wp->query_vars['order-pay'] ) && ! isset( $wp->query_vars['order-received'] ) ) {
    echo '<script>
 window.addEventListener("DOMContentLoaded", () => {
let myDivs = document.getElementsByClassName("products");
for(let i = 2; i < myDivs.length; i++) {
myDivs[i].style.display="none"; }
 });
 </script>';
}
}

还想添加一个按钮来切换这个 function 隐藏的项目。但这个问题让我发疯。

提前致谢。

Answer 1

使用 JS 设置您的 HTML 元素的初始可见性将不起作用，因为在您的 function 运行后update_checkout被触发，这会刷新结帐的订单审查部分。 这就是为什么您看到您的 styles 仅被短暂应用的原因。

您应该使用 CSS 设置产品的可见性，然后在单击按钮时使用 JS 否决那些 styles，在隐藏和可见之间切换。

woocommerce_review_order_after_cart_contents挂钩为您提供了一个为此添加按钮的好地方。 您还可以在那里添加您的 CSS 和 JS，这样所有内容都包含在一个整洁的小 function 中。像这样：

add_action ('woocommerce_review_order_after_cart_contents', function() {
    ?>
    <style>
        .woocommerce-checkout-review-order-table .cart_item:nth-child(n+3) {
            display: none;
        }
    </style>
    <script>
        jQuery( function( $ ) {
            $( '#product-toggle' ).on( 'click', 'span.button', function() {
                if ( $( this ).data( 'show' ) === true ) {
                    $( '.woocommerce-checkout-review-order-table .cart_item').show();
                    $( this ).text( 'Show less products' ).data( 'show', false );
                } else {
                    $( '.woocommerce-checkout-review-order-table .cart_item').slice(2).hide();
                    $( this ).text( 'Show all products' ).data( 'show', true );
                }
            } );
        } );
    </script>
    <?php
    
    echo '<tr id="product-toggle"><td colspan="2"><span class="button" data-show="true">Show all products</span></td></tr>';
}, 10 );