如何将 Bootstrap glyphicons 添加到 Woocommerce Checkout 输入字段？

Question

到目前为止，我已将代码缩小到此过滤器（在另一个 SO 答案中找到）：

//Checkout page editor bootstrap
add_filter('woocommerce_checkout_fields', 'addBootstrapGlyphs' );
function addBootstrapGlyphs($fields) {
    foreach ($fields as &$fieldset) {
        foreach ($fieldset as &$field) {
            // if you want to add the form-group class around the label and the input
            $field['class'][] = 'input-group'; 
            // add form-control to the actual input
            $field['input_class'][] = 'form-control';
        }
    }
    return $fields;
}

这设置了我的表单和输入元素。现在要添加字形图标，我尝试从 $fields 读取，但我似乎无法很好地处理可以让我在 input 之前添加 span 元素的东西. Glyphicon 需要这个：

<span class="input-group-addon"><i class="glyphicon glyphicon-user"></i></span>

jQuery 让我这样做：

<script type='text/javascript'>
                    jQuery(document).ready(function(){
                        jQuery('#billing_last_name_field').prepend('<span class="input-group-addon"><i class="glyphicon glyphicon-user"></i></span>');
                    });
                </script>

但是必须有一种更好、更高效的方式来构建已经存在的页面。我想在 php 中执行此操作，因此结帐页面加载仍然很快。请帮忙。我来自 Java 世界。

tl;dr：如何在 https://github.com/woocommerce/woocommerce/blob/master/includes/wc-template-functions.php#L1920 的 woocommerce 结帐输入框中添加字形图标

---

第 2 部分

使用类似这样的方法在上述问题上取得进展：

// define the woocommerce_form_field_<type> callback 
function filter_woocommerce_form_field_type( $field, $key, $args, $value ) { 
    $field = str_replace('<input','<span class="input-group-addon"><i class="glyphicon glyphicon-user"></i></span><input',$field);
    return $field; 
}; 

// add the filter 
add_filter( "woocommerce_form_field_email", 'filter_woocommerce_form_field_type', 10, 4 ); 

我知道，这不是正确的字形。但是，下一个障碍是编辑 html。就像下面评论中提到的 Mithc 一样，我现在将尝试使用某种类型的 DOM 处理代码更优雅地做到这一点。

所以我的后续问题是，如何使用 php 以正确的方式添加 DOM 元素？这一次，我正在寻找类似的东西，

1. 将字符串转换为 DOM 进行处理
2. 从<p>或<input>读取一些属性
3. 确定我应该使用的字形类型
4. 添加我的跨度
5. 将 DOM 转换回字符串以供返回

有什么优雅的方法可以做到这一点，或者 str_replace() 是否足够好？

Answer 1

显然，没有过滤器/操作允许您以这种方式修改表单。您可以通过检查/templates/checkout/form-checkout.php 和/includes/wc-template-functions.php 来了解表单是如何构建的。

解决方案 #1：纯 CSS

您可以使用 CSS 伪元素向字段添加图标，但由于表单的布局，使用 ::before 和 ::after 可能会使响应速度成为一场噩梦。但这里有一个例子：

.form-row#billing_company_field {
    position: relative;
    padding-left: 2.8em;
}

.form-row#billing_company_field::before {
    content: '';
    width: 2.8em;
    height: 2.8em;
    background-color: #2d2e34;
    position: absolute;
    left: 0;
    bottom: 0;
}

.form-row#billing_company_field::after {
    content: "\e139";
    position: absolute;
    left: 0;
    color: white;
    font-family: 'Glyphicons Halflings';
    /* Excluding position styling */
}

但正如我之前提到的，响应能力可能有点像……令人头疼。但完全有可能。

解决方案 #2：模板覆盖

WooCommerce 允许您override templates via themes。您唯一需要做的就是在主题的根文件夹中创建一个template 文件夹。

例如，如果你的主题文件夹是my-store，你应该有my-store/woocommerce。要覆盖包含结帐表单的模板部分，您应该：

my-store/woocommerce/checkout/form-checkout.php

和

my-store/woocommerce/checkout/form-billing.php

然后您可以在那里修改任何标记。请记住，有时他们会更新模板，因此请密切关注它们是否有重大变化，以使它们也保持最新状态。

解决方案 #3：DOMDocument() [更新]

如果过滤器上有每个字段的标记，则可以使用 DOMDocument() 方法修改输出 HTML。这是一个例子：

// Let's say this is the HTML coming from the filter.
$field = '<p class="form-row validate-required">';
  $field .= '<input type="text">...';
$field .= '</p>';

// Create a DOM Object of $field. LIBXML_HTML_NOIMPLIED and LIBXML_HTML_NODEFDTD will help to prevent doctype, html and body tags being inserted at the end.
$field_object = new DOMDocument();
$field_object->loadHTML( $field, LIBXML_HTML_NOIMPLIED | LIBXML_HTML_NODEFDTD );

// Select the wrapper of the input (`<p>`) and the input (`<input />`) to know where to insert the glyph (between them).
$wrapper = $field_object->getElementsByTagName( 'p' )->item( 0 );
$input = $field_object->getElementsByTagName( 'input' )->item( 0 );

// Create the glyphicon HTML.
$glyph = $field_object->createDocumentFragment();
$glyph->appendXML( '<span class="input-group-addon"><i class="glyphicon glyphicon-user"></i></span>' );

// Insert the glyphicon HTML.
$wrapper->insertBefore( $glyph, $input );

上面的例子会让你明白：

<p class="form-row validate-required">
    <span class="input-group-addon"><i class="glyphicon glyphicon-user"></i></span><input type="text">...
</p>

要加载属性，您可以在 DOMElement 上使用 getAttribute( $attribute_name ) （如 $wrapper 和 $input 对象）。而且，要确定您必须使用的字形图标，您可以获取$wrapper 的类并根据它确定字形图标的类。例如，如果 $wrapper 包含类 user，则 glyphicon 的类应该是 glyphicon glyphicon-user，您可以在创建 glyphicon HTML 时轻松插入。