Magento2

Monday, 16 June 25 04:42

How to install phpcs for magento 2

Step-by-Step Installation of phpcs for Magento 2

Install PHP_CodeSniffer via Composer, If it's not already installed. Create A directory and open the terminal

Copy

                                    
                                        composer require --dev squizlabs/php_codesniffer

Continue...

Monday, 16 June 25 04:28

Magento 2 Module Generate PHP Compatibility Report

Generate PHP compatibility report for your custom module or theme. PHPCompatibility with PHP_CodeSniffer.

Inside your phpcs installation sir your need to install PHPCompatibility module by given cmd. you can check how to install phpcs module.

Copy

                                    
                                        composer require --dev dealerdirect/phpcodesniffer-composer-installer
composer require --dev phpcompatibility/php-compatibility

Continue...

Monday, 02 June 25 01:26

Add Mobile Verification In cash on delivery payment method

In this blog, I enplane the product of adding mobile verification for COD payment method. You can do same for any other payment method. I'm doing this process in theme customization.

Step 1. You need to create a directory Magento_OfflinePayments in your theme. I hope you already have themes .

Step 2. Create template file cashondelivery.html in theme dir Magento_OfflinePayments/web/template/payment.

Copy

                                    
                                        <!--
/**
 * Copyright © Magento, Inc. All rights reserved.
 * See COPYING.txt for license details.
 */
-->

<!-- ko if: isApplyedPointsOrCredit() -->

<div class="payment-method" data-bind="css: {'_active': (getCode() == isChecked())}">
    <div class="payment-method-title field choice"  visible="showPayment">
        <input type="radio"
               name="payment[method]"
               class="radio"
               data-bind="attr: {'id': getCode()}, value: getCode(), checked: isChecked, click: selectPaymentMethod, visible: isRadioButtonVisible()"/>
        <label data-bind="attr: {'for': getCode()}" class="label"><span data-bind="text: getTitle()"></span></label>
    </div>

    <div class="payment-method-content">
        <!-- ko foreach: getRegion('messages') -->
        <!-- ko template: getTemplate() --><!-- /ko -->
        <!--/ko-->
        <div class="payment-method-billing-address">
            <!-- ko foreach: $parent.getRegion(getBillingAddressFormName()) -->
            <!-- ko template: getTemplate() --><!-- /ko -->
            <!--/ko-->
        </div>
        <!-- <p data-bind="html: getInstructions()"></p> -->
        <div class="checkout-agreements-block">
            <!-- ko foreach: $parent.getRegion('before-place-order') -->
                <!-- ko template: getTemplate() --><!-- /ko -->
            <!--/ko-->
        </div>

        <div class="mobile-verify-form-div" data-bind="visible: mobileFormOpen">
            <div class="mobile-verify-form-area">
                <label for="mobile-verify">Verify Your Mobile</label>
                <span>
                    <input placeholder="Mobile"
                        class="mobile number" 
                        id="mobile"
                        name="mobile" 
                        type="text"
                        disabled="disabled"
                        data-bind="value: mobileNumber()"
                        >
                    </span>
 
                    <span>
                        <input placeholder="Fill OTP"
                            class="otp number" 
                            id="otp_input"
                            name="otp_input" 
                            type="text"
                            maxlength="otpMaxLenth()"
                            data-bind="visible: isOTPverifyDisable()"
                            >
                    </span>
                <span class="button-confirm">
                    <button type="submit" visible="isOtpSended" data-bind="
                    click: sendOTP, attr: {title: $t('Send OTP')}">
                        <span data-bind="i18n: 'Send OTP'"></span>
                    </button>
                    <button type="submit" visible="isOTPverifyDisable" data-bind="
                    click: verifyOTP, attr: {title: $t('Verify')}">
                        <span data-bind="i18n: 'Verify'"></span>
                    </button>

                </span>
                <span id="error-message" class="error-message" data-bind="visible: hasError"></span>
            </div>
        </div>

        <div class="actions-toolbar">
            <div class="primary" visible="isVerified">
                <button class="action primary checkout"
                        type="submit"
                        data-bind="
                        click: placeOrder,
                        attr: {title: $t('Place Order')},
                        enable: (getCode() == isChecked()),
                        css: {disabled: !isPlaceOrderActionAllowed()}
                        "
                        disabled>
                    <span data-bind="i18n: 'Place Order'"></span>
                </button>
            </div>
            <div class="primary" visible="reviewButton">
                <button class="action primary checkout"
                    type="submit"
                    data-bind="
                    click: isMobileFormOpen,
                    attr: {title: $t('Review Order')}
                    ">
                    <span data-bind="i18n: 'Review Order'"></span>
                </button>
            </div>
        </div>

    </div>
</div>
<!-- /ko -->

Continue...

Wednesday, 14 May 25 01:45

How to add custom js file from phtml with php variable

Do you want to pass your PHTML variable in your custom JS file?

Step 1. Remove your JQuery code from phtml and create a js file in web/js/, You can create that file in the theme or module.

Copy

                                    
                                        define(['jquery'], function($) {
    'use strict';

 return function (config) {
    // You can access your phtml variable in js  like this
    var myvalue = config.yourphtmlVariable;
    console.log(myvalue); //123
}         

});

Continue...

Wednesday, 14 May 25 11:57

How to add custom js file from phtml

Do you want to move your phtml script jquery code in js file, then you can proceed with blow steps. Benefits-: If you added your custom JQuery code in js file instead of in phtml. It will reduce your page size.

Step 1. Remove your JQuery code from phtml and create a js file in web/js/, You can create that file in the theme or module.

Copy

                                    
                                        define(['jquery'], function($) {
    'use strict';

     // Put here your  js code which you want to move from phtml

});

Continue...