you need to create a plugin in your custom module ( the one that you used to create the custom attribute ), and have the code something like the following one:
namespace Package\Name\Plugin\Checkout;
class LayoutProcessor
{
public function afterProcess(
\Magento\Checkout\Block\Checkout\LayoutProcessor $subject,
array $jsLayout
) {
// Loop all payment methods (because billing address is appended to the payments)
$configuration = $jsLayout['components']['checkout']['children']['steps']['children']['billing-step']['children']['payment']['children']['payments-list']['children'];
foreach ($configuration as $paymentGroup => $groupConfig) {
if (isset($groupConfig['component']) AND $groupConfig['component'] === 'Magento_Checkout/js/view/billing-address') {
$jsLayout['components']['checkout']['children']['steps']['children']['billing-step']['children']
['payment']['children']['payments-list']['children'][$paymentGroup]['children']['form-fields']['children']['custom_attribute_code'] = [
'component' => 'Magento_Ui/js/form/element/abstract',
'config' => [
'template' => 'ui/form/field',
'elementTmpl' => 'ui/form/element/input',
'id' => 'custom_attribute_id',
],
'dataScope' => $groupConfig['dataScopePrefix'] . '.custom_attribute_id',
'label' => __('Custom attribute label'),
'provider' => 'checkoutProvider',
'visible' => true,
'validation' => [
'required-entry' => true,
'min_text_length' => 0,
],
'sortOrder' => 300,
'id' => 'custom_attribute_id'
];
}
}
return $jsLayout;
}
}
Hope this helps
Here is the way to the solution :
1. Create the module
2. Declare your new product option : app/code/Vendor/Module/etc/product_options.xml
3. Add the new custom Option in Admin/Product :
- Vendor\Module\Block\Adminhtml\Catalog\Product\Edit\Tab\Options\Type\Newtype.php
- Vendor\Module\Block\Adminhtml\Catalog\Product\Edit\Tab\Options\Option.php
to define the template
- create the associated .phtml files
Vendor/Module/view/adminhtml/templates/catalog/product/edit/options/type/newtype.phtml
and
Vendor/Module/view/adminhtml/templates/catalog/product/edit/options/option.phtml
4. Add the new custom Option in Frontend Catalog :
- Vendor\Module\Block\Catalog\Product\View\Options\Type\Newtype.php;
- The associated template : Vendor/Module/view/frontend/templates/catalog/product/view/options/type/newtype.phtml
- The layout definition : Vendor\Module\view\frontend\layout\catalog_product_view.xml
5. the Models for all that
- Vendor\Module\Model\Catalog\Product\Option\Type\Newtype.php
- Vendor\Module\Model\Catalog\Product\Option.php
- Vendor\Module\Model\Catalog\ResourceModel\Product\Option.php
6. Extend Ui :
- Vendor\Module\Ui\DataProvider\Catalog\Product\Form\Modifier\CustomOptions.php
Hope this help !
Best Answer
Here is how I added Inventory text field for Drop-down custom option.
Create a module using following code -
app/code/MyCompany/MyModule/etc/module.xml
app/code/MyCompany/MyModule/etc/adminhtml/di.xml
app/code/MyCompany/MyModule/Ui/DataProvider/Product/Form/Modifier/CustomOptions.php
Add a column with name 'quantity' in Database table 'catalog_product_option_type_value' for storing the inventory value.
Hope this helps.