WooCommerce在成功消息上添加数据属性以查看购物车按钮

时间:2022-10-25 10:57:11

I've managed to change the html markup of the View Cart button on success message so I could add id="open_cart" to it, but I also want to add a data- attribute such as data-cart="open" to the html output, however only the id is returned.

我已成功更改成功消息上的View Cart按钮的html标记,因此我可以添加id =“open_cart”,但我还想添加数据属性,例如data-cart =“open”到html输出,但只返回id。

Any ideas on how to add a data- attribute to it?

有关如何向其添加数据属性的任何想法?

function my_add_to_cart_message() {
    if ( get_option( 'woocommerce_cart_redirect_after_add' ) == 'yes' ) :

    $message = sprintf( '%s<a id="open_cart" data-target="open-cart"  href="%s" class="button">%s</a>', __( 'Successfully added to cart.' , 'woocommerce' ), esc_url( get_permalink( woocommerce_get_page_id( 'cart' ) ) ), __( 'View Cart', 'woocommerce' ) );

    return $message;

}
add_filter( 'wc_add_to_cart_message', 'my_add_to_cart_message' );

This is what the function above returns:

这就是上面的函数返回的内容:

<a id="open_cart" href="http://example.com/cart/" class="button wc-forward">Ver carrinho</a>

The data-cart="open" is ignored. Simply annoying.

data-cart =“open”被忽略。简直烦人。

1 个解决方案

#1


1  

Here's a quick explanation as to why this is happening.

以下是为什么会发生这种情况的快速解释。

Take a look at the Woocommerce success.php template which is responsible for displaying the success messages.

看一下Woocommerce success.php模板,该模板负责显示成功消息。

<?php foreach ( $messages as $message ) : ?>
    <div class="woocommerce-message"><?php echo wp_kses_post( $message ); ?></div>
<?php endforeach; ?>

The wp_kses_post() function sanitizes the output of the $message variable by checking for allowed tags and attributes.

wp_kses_post()函数通过检查允许的标记和属性来清理$ message变量的输出。

Here's your solution:

这是你的解决方案:

Add this snippet to your functions.php

将此代码段添加到functions.php中

function my_filter_allowed_html($allowed, $context){
    if (is_array($context)) {
        return $allowed;
    }

    if ($context === 'post') { 
        $allowed['a']['data-cart'] = true;
    }

    return $allowed;
}
add_filter('wp_kses_allowed_html', 'my_filter_allowed_html', 10, 2);

You need to hook into the wp_kses_allowed_html filter and add your data attribute so that the wp_kses_post() function doesn't filter it out.

您需要挂钩到wp_kses_allowed_html过滤器并添加您的数据属性,以便wp_kses_post()函数不会过滤掉它。

#1


1  

Here's a quick explanation as to why this is happening.

以下是为什么会发生这种情况的快速解释。

Take a look at the Woocommerce success.php template which is responsible for displaying the success messages.

看一下Woocommerce success.php模板,该模板负责显示成功消息。

<?php foreach ( $messages as $message ) : ?>
    <div class="woocommerce-message"><?php echo wp_kses_post( $message ); ?></div>
<?php endforeach; ?>

The wp_kses_post() function sanitizes the output of the $message variable by checking for allowed tags and attributes.

wp_kses_post()函数通过检查允许的标记和属性来清理$ message变量的输出。

Here's your solution:

这是你的解决方案:

Add this snippet to your functions.php

将此代码段添加到functions.php中

function my_filter_allowed_html($allowed, $context){
    if (is_array($context)) {
        return $allowed;
    }

    if ($context === 'post') { 
        $allowed['a']['data-cart'] = true;
    }

    return $allowed;
}
add_filter('wp_kses_allowed_html', 'my_filter_allowed_html', 10, 2);

You need to hook into the wp_kses_allowed_html filter and add your data attribute so that the wp_kses_post() function doesn't filter it out.

您需要挂钩到wp_kses_allowed_html过滤器并添加您的数据属性,以便wp_kses_post()函数不会过滤掉它。