Shopware 6：自定义插件中如何设置sw-number-field.id？identification解析

identification变量的来源 #

sw-number-field组件的input元素id绑定的identification是组件的props属性。默认未主动传入时，组件会自动生成标识或复用name属性值，但这些自动生成的值可能包含W3C HTML4.0规范不允许的字符（比如特殊符号、非字母开头），这就是商品详情页价格字段id违规的原因。

设置identification的具体方法 #

1. 手动使用组件时直接传入 #

如果是在你自己This is your plugin's template. When using sw-number-field, directly pass the identification attribute that complies with specifications in the component tag:

<sw-number-field
    :identification="'custom-product-price-input'"
    v-model="productPrice"
    :min="0"
    step="0.01"
></sw-number-field>

HTML4.0对id的要求：必须以字母（A-Z/a-z）开头，可包含字母、数字、下划线(_)、连字符(-)、冒号(:)或点号(.)，且在页面中唯一。

2. 覆盖现有页面的组件（以商品详情页价格字段为例） #

要修正商品详情页默认价格字段的id问题，需通过插件扩展对应组件：

• 在插件的src/Resources/app/administration/src目录下，创建模板文件component/sw-product-detail-price/sw-product-detail-price.html.twig，覆盖原价格字段的代码块：

{% block sw_product_detail_price_field %}
    <sw-number-field
        :identification="'product-detail-price-input'"
        v-model="price"
        :disabled="!isEditable"
        :min="0"
        step="0.01"
    ></sw-number-field>
{% endblock %}

• 在插件的main.js中注册组件覆盖：

import './component/sw-product-detail-price/sw-product-detail-price';

Shopware.Component.override('sw-product-detail-price', {
    template: require('./component/sw-product-detail-price/sw-product-detail-price.html.twig')
});

内容的提问来源于stack exchange，提问作者rammi22