Text box component with currency symbol as prefix
In Product Form, Magento uses the text ui component with currency symbol as a prefix for price.
Following example shows how to get the prefix in text component
In form xml
<field name="final_total_text" formElement="input" sortOrder="120" component="Vasan_Bidding/js/form/components/price">
<settings>
<elementTmpl>Vasan_Bidding/form/element/currency_text</elementTmpl>
<label translate="true">Total</label>
<dataScope>amount</dataScope>
</settings>
</field>
In js file
define([
'Magento_Ui/js/form/element/abstract',
'Magento_Catalog/js/price-utils'
], function (Element, priceUtils) {
'use strict';
return Element.extend({
defaults: {
currency_sign: '$',
imports : {
currency_sign: '${ $.provider}:data.currency_sign'
}
},
setInitialValue: function () {
this._super();
var self = this;
self.setFormatPrice(self.initialValue);
return this;
},
setFormatPrice: function (value) {
var priceFormat = {
decimalSymbol: '.',
groupLength: 3,
groupSymbol: ",",
integerRequired: false,
precision: 2,
requiredPrecision: 2
};
var price = (value) ? priceUtils.formatPrice(value, priceFormat) : 0.00;
this.initialValue = price;
this.value._latestValue = price;
return this;
}
});
});
In html
<span data-bind="text: currency_sign"></span>
<span class="admin__field-value"
data-bind="
text: value,
attr: {
name: inputName,
id: uid
}"/>
Posted by vasan to vasan's deck (2022-03-24 17:31)