Author: Bibin Johnson

This post is about how to add a image in the password text area to show and hide password , this can be done with the help of a javascript and a code inside the text field Here i’m attaching a code of password with a eye icon click to view and hide Now script… Continue reading Magento password view and hide function using js

For adding custom classes to the fieldset in the shipping adding and billing address page we may use the layout processor plugin to execute this. For installing layoutprocessor plugin we need to create a php file in the following location: app/code/JJ/Catalog/Plugin/Checkout/Block/LayoutProcessor.php Here is a example to change the label of the street address to Address… Continue reading Magento Adding custom class name and validations using layout processor

Adding image in the field to increase the style of the input field. It can be done by overriding current page xml and phtml to custom theme module. For example adding a mail icon in the email field Module Overriding >>> app/design/frontend/Module_name/Theme/Magento_Customer/templates/form/login.phtml Code: CSS: Like this we can add images to input fields.

Create plugin after Attribute merge Plugin to add custom classes to shipping address page In your module create MODULE/NAME/etc/di.xml Then in \MODULE\NAME\Model\Plugin create a php file AttributeMergerPlugin.php Example: <?php namespace JJ\Catalog\Plugin\Checkout\Block; class AttributeMergerPlugina { public function afterMerge(\Magento\Checkout\Block\Checkout\AttributeMerger $subject, $result) { if (array_key_exists(‘checkout-step-shipping’, $result)) { $result[‘checkout-step-shipping’][‘additionalClasses’] = ‘checkout-shipping-address’; } if (array_key_exists(‘telephone’, $result)) { $result[‘telephone’][‘additionalClasses’] = ‘mobile-number-validation’; ]; return… Continue reading Adding custom classes to Magento shipping page address fields

Magento doesn’t have any validation for a ten digit mobile number validation.For getting this there are some many ways.This method is taking about overriding the inbuilt validation rules. For this we have to Create a custom module for the theme , for reference: https://devdocs.magento.com/guides/v2.3/frontend-dev-guide/themes/theme-create.html after that inside the create path Magento Ui >Magento_Ui/web/js/lib/validation/rules.js Here we… Continue reading Magento Adding custom validations-(Phone Number)

For changing layout of a list form to column wise we need to change the display to flex and flex-warp to wrap state. For example: this form was created using the following css: (to the main div) .contactus .amcform-page-wrap {display: flex;flex-wrap: wrap; } for the sub divisions: .contactus .rendered-form .fieldset .fields .field.form-group {margin-bottom: -13px;flex: 0… Continue reading Magento 2 arranging form fields column wise and full width

If in any case we need to call a background image before a div this css code will be used to execute it. Example: calling background image before shipping address in the checkout page for showing the progress step. Single dot before the shipping address. It can be achieved by the following css commands: /*main… Continue reading Magento 2 adding background image before a div using css