如果可以免费送货，如何加载特定的 CSS？

Posted 2023-02-19

【中文标题】如果可以免费送货，如何加载特定的 CSS？

【英文标题】：How to load specific CSS if free shipping is available?

【发布时间】：2022-01-13 03:30:46

【问题描述】：

有没有办法根据免费送货有条件地将以下 CSS 类应用于小计？

.free-shipping-text 
content: "Hurray Free Shipping";


.nonfree-shipping-text 
content: "Get Free Shipping over ₹ 1000"

如果小计价格低于 1000 卢比，那么 nonfree-shipping-text CSS 应该调用，当大于 1000 卢比时，free-shipping-text CSS 应该调用。

global $woocommerce;
$shipping_methods = $woocommerce->shipping->load_shipping_methods();
if($shipping_methods['free_shipping']->enabled == "yes")

.free-shipping-text CSS should call
        
else
.nonfree-shipping-text CSS should call

【参考方案1】：

您可以在 html 中传递类。然后创建 2 个样式表 CSS 文件，您可以有条件地排队。

add_action( 'wp_enqueue_scripts', function()
    global $woocommerce;
    $shipping_methods = $woocommerce->shipping->load_shipping_methods();
    if($shipping_methods['free_shipping']->enabled == "yes")
    
        wp_enqueue_style( 'stylefreeshipping', get_stylesheet_directory_uri() . '/css/free-shipping.css' );
            
    else
        wp_enqueue_style( 'styleNOfreeshipping', get_stylesheet_directory_uri() . '/css/no-free-shipping.css' );
    
 );

但是，每次他们添加产品并超过 1000 个单位时，都应该重新加载页面。这是它与 php 一起工作的唯一方法。如果您在该过程中使用 AJAX，那么您最好使用 javascript。这将为用户提供更加动态的体验。

更多关于enqueue风格。

编辑 javascript 的答案：

function myFunction() 
  var element = document.getElementById("myDIV");
  element.classList.add("mystyle");   //add
  element.classList.remove("mystyle");  //remove
 

To add a class.

To remove a class.

但是，这意味着您需要获取货币价值并向其添加事件侦听器。然后在每次事件更改时检查值是否大于 1000，以便添加所需的类并删除另一个类，反之亦然，当您从 1000 下降时。

【讨论】：

我正在使用自定义消息到迷你购物车标题。这项工作是否作为 ajax 意味着在小计金额等于或大于免费送货价值（即 ₹1000）之后，它应该使用 .free-shipping-text @billybadass 更改消息

@rowoc 编辑了答案以包含 javascript 方式。