4

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.

11

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

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

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.