5

I am using magento 2.1.7. I want to add one class in country select box on checkout page shipping address.

If anyone knows please help to add class.

13

You can create plugin after Attribute merge method. Then you can modify checkout fields and add class to wrapper of country select box.

In your module create MODULE/NAME/etc/di.xml

<?xml version="1.0"?>
<config xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="../../../../../vendor/magento/framework/ObjectManager/etc/config.xsd"> 
    <type name="\Magento\Checkout\Block\Checkout\AttributeMerger">
        <plugin name="customAttributeMerger" type="\MODULE\NAME\Model\Plugin\AttributeMergerPlugin"/>
    </type>
</config>

Then in \MODULE\NAME\Model\Plugin\AttributeMergerPlugin.php

<?php

namespace MODULE\NAME\Model\Plugin;

class AttributeMergerPlugin
{
    public function afterMerge(\Magento\Checkout\Block\Checkout\AttributeMerger $subject, $result)
    {
        if (array_key_exists('country_id', $result)) {
            $result['country_id']['additionalClasses'] = 'your_custom_class';
        }

        return $result;
    }
}

For safety clear cache and you should see this class in div wrapper of country select.

Then you can use .your_custom_class select in css/less or $('.your_custom_class').find('select'); in jQuery. Remember that JS script you have to execute when fields are generated

| improve this answer | |
  • Thanks @ Maliszewski. – Manish Goswami Oct 24 '19 at 5:33
  • can you call custom attribute? $customAttributeCode = 'test'; 'dataScope' => 'shippingAddress.custom_attributes' . '.' . $customAttributeCode, in my case 'test' – jibin george Nov 4 '19 at 15:23
  • hm, here is not adding custom attribute. It is only custom class for existing attirubte – K. Maliszewski Nov 5 '19 at 9:31
0

Thanks for the answer i am also finding a better solution for this i try to add from xml but i will not add a aditional class through xml can any one let me know that why we can not add the classes ussing checkout_index_index.xml file ?

| improve this answer | |
0

override magento/module-ui/view/frontend/web/templates/form/element/select.html into your theme in VENDOR/THEME_NAME//Magento_Ui/templates/form/element/select.html

<select class="select your_class" data-bind="
    attr: {
        name: inputName,
        id: uid,
        disabled: disabled,
        'aria-describedby': getDescriptionId(),
        'aria-required': required,
        'aria-invalid': error() ? true : 'false',
        placeholder: placeholder
    },
    hasFocus: focused,
    optgroup: options,
    value: value,
    optionsCaption: caption,
    optionsValue: 'value',
    optionsText: 'label',
    optionsAfterRender: function(option, item) {
        if (item && item.disabled) {
            ko.applyBindingsToNode(option, {attr: {disabled: true}}, item);
        }
    }"
/>

Remove var/view_preprocessed

php bin/magento setup:static-content:deploy

php bin/magento cache:clean

| improve this answer | |

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.