javascript - 悬停时更改添加到购物车文本

例如，如果客户尚未选择（必需）选项，是否可以将Woocommerce中的Add to cart按钮更改为“选择大小”。然后，一旦选择了选项，将其更改回“添加到购物车”？

manolo blahnik的网站具有此功能，我发现它对客户来说是一个很好的UX。在他们的网站上，第一阶段是“添加到购物车”。
如果有人将鼠标悬停在按钮上，但尚未选择选项，则显示“请选择尺码”。
但是，如果有人选择了某个选项，则该选项将保留为“添加到购物车”。

在移动设备上，由于没有像PC那样的悬停，因此在选择该选项之前，它始终显示“请选择尺寸”，然后变为“添加到购物车”。

我想知道woocommerce是否可以做到这一点。

最佳答案

您可以在mouseover按钮上使用mouseout和Add to cart事件处理程序。以下代码段演示了该功能。

在按钮的mouseover上，检查required表单字段的值，并使用表单字段的text属性修改按钮title和data-warn。

在mouseout上，使用按钮上text属性的内容重置title和data-title按钮。

// handle to button
var addToCartBtn = document.getElementById('add-to-cart-button');
// 'mouseover' event handler
addToCartBtn.addEventListener('mouseover', function(event) {
  // get all form elements
  var inputs = this.form.elements;
  for (var i = 0; i < inputs.length; i++) {
    // find the first empty required field
    if (inputs[i].required && inputs[i].value == '') {
      // set the button's mouse over text
      event.target.title = inputs[i].dataset.warn;
      // set the button's text
      event.target.innerHTML = inputs[i].dataset.warn;
      break;
    }
  }
});
// 'mouseout' event handler
addToCartBtn.addEventListener('mouseout', function(event) {
  event.target.innerHTML = event.target.dataset.title;
  event.target.title = event.target.dataset.title;
});

 .form-field {
   margin: 20px;
 }

 #add-to-cart-button {
   font-size: 18px;
   width: 200px;
   height: 50px;
 }

<form action="#" name="add-to-cart-form">
  <div class="form-field">
    <label>
      <span>Select Size:</span>
      <select name="item-size" data-warn="Please choose a size" required>
        <option value="">Choose a size</option>
        <option value="s">Small</option>
        <option value="m">Medium</option>
        <option value="l">Large</option>
      </select>
    </label>
    </div>
    <div class="form-field">
    <label>
      <span>Select Colour:</span>
      <select name="item-colour" data-warn="Please choose a colour" required>
        <option value="">Choose a colour</option>
        <option value="red">Red</option>
        <option value="green">Green</option>
        <option value="blue">Blue</option>
      </select>
    </label>
    </div>
    <div class="form-field">
      <button type="submit" name="add-to-cart-button" id="add-to-cart-button" title="Add to Basket" data-title="Add to Cart">Add to Basket</button>
    </div>
  </form>