We have several zip code in Stores configuration that is only allow for the delivery so how can i put the validation on the checkout page , if someone enter the postcode which is not available on the stores configuration then they can not able to go to the payment step on the checkout page.
1 Answer
You need to create a custom shipping rules on the checkout page and cart page. Sample code on magento/module-usps
Step 1:
- Adding shipping validation rule component to checkout page checkout_index_index.xml
Sample code on vendor/magento/module-usps/view/frontend/layout/checkout_index_index.xml:7
<item name="shipping-step" xsi:type="array"> <item name="children" xsi:type="array"> <item name="step-config" xsi:type="array"> <item name="children" xsi:type="array"> <item name="shipping-rates-validation" xsi:type="array"> <item name="children" xsi:type="array"> <item name="usps-rates-validation" xsi:type="array"> <item name="component" xsi:type="string">Magento_Usps/js/view/shipping-rates-validation</item> </item> </item> </item> </item> </item> </item> </item> Step 2 define component and model.
view/shipping-rates-validation.js
define([ 'uiComponent', 'Magento_Checkout/js/model/shipping-rates-validator', 'Magento_Checkout/js/model/shipping-rates-validation-rules', '../model/shipping-rates-validator', '../model/shipping-rates-validation-rules' ], function ( Component, defaultShippingRatesValidator, defaultShippingRatesValidationRules, uspsShippingRatesValidator, uspsShippingRatesValidationRules ) { 'use strict'; defaultShippingRatesValidator.registerValidator('usps', uspsShippingRatesValidator); defaultShippingRatesValidationRules.registerRules('usps', uspsShippingRatesValidationRules); return Component; }); model/shipping-rates-validator.js
define([ 'jquery', 'mageUtils', './shipping-rates-validation-rules', 'mage/translate' ], function ($, utils, validationRules, $t) { 'use strict'; var checkoutConfig = window.checkoutConfig; return { validationErrors: [], /** * @param {Object} address * @return {Boolean} */ validate: function (address) { var rules = validationRules.getRules(), self = this; if (!this.validationErrors.length) { if (address['postcode'] == checkoutConfig.notAllowedPostCode) { self.validationErrors.push("Your postcode is not allowed"); return false; } return true; } return false; } }; }); More required files (model/shipping-rates-validation-rules.js)
Step 3:
- Adding a custom checkout config provider, which adding notAllowedPostCode to checkoutConfig.
<type name="Magento\Checkout\Model\CompositeConfigProvider"> <arguments> <argument name="configProviders" xsi:type="array"> <item name="yourvendor_yourmodule_checkout_config_provider" xsi:type="object">YourVendor\YourModule\Model\YourConfigProvider</item> </argument> </arguments> </type> - YourVendor\YourModule\Model\YourConfigProvider
// @TODO Check sample code on Magento\Checkout\Model\DefaultConfigProvider 