隐藏/显示取决于变量的按钮答案

【问题标题】：Hide/show a button which depends on a variable隐藏/显示取决于变量的按钮
【发布时间】：2020-11-07 04:26:01
【问题描述】：

你好我有一个小问题，希望你们能帮助我，我使用wordpress，我有一个购买按钮，我只想在金额大于267美元时才激活！我该怎么做？

有人可以告诉我是否可以简单地在 javaScript 甚至 css 中做到这一点？

我附上一些图片并解释更多：

我尝试过使用 woocommerce 代码，但它只是阻止我在结帐页面下订单，这是我使用的代码：

add_action( 'woocommerce_checkout_process', 'wc_minimum_order_amount' );
add_action( 'woocommerce_before_cart' , 'wc_minimum_order_amount' );
 
function wc_minimum_order_amount() {
    // Set this variable to specify a minimum order value
    $minimum = 267;

    if ( WC()->cart->total < $minimum ) {

        if( is_cart() ) {

            wc_print_notice( 
                sprintf( 'Totalul tau este %s — comanda ta trebuie sa fie de minim %s adica minim 3 m² pentru a putea plasa comanda! ' , 
                    wc_price( WC()->cart->total ), 
                    wc_price( $minimum )
                ), 'error' 
            );

        } else {

            wc_add_notice( 
                sprintf( 'Totalul tau este %s — comanda ta trebuie sa fie de minim %s adica minim 3 m² pentru a putea plasa comanda!' , 
                    wc_price( WC()->cart->total ), 
                    wc_price( $minimum )
                ), 'error' 
            );

        }
    }
}

【问题讨论】：

标签： javascript css wordpress

【解决方案1】：

嗯，在 WooCommerce 中，显示按钮的功能可以在主题文件或 mu-plugin 文件中被覆盖。

如果您希望按钮在订单不符合要求时消失，您只需将其添加到functions.php。

if ( ! function_exists( 'woocommerce_widget_shopping_cart_proceed_to_checkout' ) ) {
    function woocommerce_widget_shopping_cart_proceed_to_checkout() {
        $total = WC()->cart->subtotal;
        $minimum_amount = 267;

        if ( $total < $minimum_amount ) {
            return;
        }

        echo '<a href="' . esc_url( wc_get_checkout_url() ) . '" class="button checkout wc-forward">' . esc_html__( 'Checkout', 'woocommerce' ) . '</a>';
    }

    add_action( 'woocommerce_widget_shopping_cart_buttons', 'woocommerce_widget_shopping_cart_proceed_to_checkout', 20 );
}

我个人更愿意创建一个类似.disabled 的 CSS 类，并在我们的条件为 true 时将其添加到按钮中。

if ( ! function_exists( 'woocommerce_widget_shopping_cart_proceed_to_checkout' ) ) {
    function woocommerce_widget_shopping_cart_proceed_to_checkout() {
        $total = WC()->cart->subtotal;
        $minimum_amount = 267;

        if ( $total <= $minimum_amount ) {
            echo '<a href="' . esc_url( wc_get_checkout_url() ) . '" class="button checkout wc-forward disabled">' . esc_html__( 'Checkout', 'woocommerce' ) . '</a>';
        } else {
            echo '<a href="' . esc_url( wc_get_checkout_url() ) . '" class="button checkout wc-forward">' . esc_html__( 'Checkout', 'woocommerce' ) . '</a>';
        }
    }

    add_action( 'woocommerce_widget_shopping_cart_buttons', 'woocommerce_widget_shopping_cart_proceed_to_checkout', 20 );
}

在这种情况下，您需要添加某种 CSS 使其看起来像一个非活动按钮：

.button.checkout.disabled {
    opacity: 0.6; // or give it some sort of gray feeling.
    cursor: not-allowed; // so the user get's the notice that something is wrong.
    pointer-events: none; // so the user cannot click the button.
}

.button.checkout.disabled:before {
    content: "Add here a notice for the user about the minimum requirement."
    // the should feel like a tooltip and you will have to make your own placements here.
    // oh, and if you need this to be translatable you will have to print this in PHP.
}

无论如何，这只是“美学”你应该保留阻止用户从结帐页面下订单的功能。

干杯！

【讨论】：