Author: m@g3m@nk3y$

If you need to set a CSS class on change checkout stepwise then follow the below instructions.

You need to override progress-bar.js from

vendor/magento/module-checkout/view/frontend/web/js/view

to your current theme and replace the below js function.

/**
 * @param {Object} item
 * @return {*|Boolean}
 */
isProcessed: function (item) {
 var itemCode = item.code;
 if (itemCode == "shipping") {
 jQuery('body').addClass('payment-step');
 jQuery('body').removeClass('shipping-step');
 } else {
 jQuery('body').addClass('shipping-step');
 jQuery('body').removeClass('payment-step');
 }
 return stepNavigator.isProcessed(item.code);
}

In Magento 2 we can customize the order grid with adding column and filter as well.

n today’s tutorial, we’ll add telephone no as a column in order grid. The next step is to create a new module.

Here are the namespace and module name :

Magemonkeys_CustomOrdersGrid

Create registration.php file

<?php
MagentoFrameworkComponentComponentRegistrar::register(
    MagentoFrameworkComponentComponentRegistrar::MODULE,
    'Magemonkeys_CustomOrdersGrid',
    __DIR__
);

Create etc/module.xml file

<?xml version="1.0"?>
<config xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:framework:Module/etc/module.xsd">
    <module name="Magemonkeys_CustomOrdersGrid" setup_version="1.0.0">
        <sequence>
            <module name="Magento_Sales"/>
            <module name="Magento_Ui"/>
        </sequence>
    </module>
</config>

Create etc/adminhtml/di.xml file

<?xml version="1.0"?>
<config xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
        xsi:noNamespaceSchemaLocation="urn:magento:framework:ObjectManager/etc/config.xsd">    
    <type name="MagentoFrameworkViewElementUiComponentDataProviderCollectionFactory">
        <plugin name="magemonkeys_custom_orders_grid"
                type="MagemonkeysCustomOrdersGridPluginOrdersGrid"
                sortOrder="20"
                disabled="false"/>
    </type>
</config>

Create Plugin/OrdersGrid.php file

<?php
namespace MagemonkeysCustomOrdersGridPlugin;

use MagentoSalesModelResourceModelOrderGridCollection as OrderGridCollection;

class OrdersGrid
{
    
    private $logger;
    
    public function __construct(
        PsrLogLoggerInterface $customLogger,
        array $data = []
    ) {
        $this->logger = $customLogger;
    }

    public function afterGetReport($subject, $collection, $requestName)
    {
        if ($requestName !== 'sales_order_grid_data_source') {
            return $collection;
        }

        if ($collection->getMainTable() === $collection->getResource()->getTable('sales_order_grid')) {
            try {
                $orderAddressTable  = $collection->getResource()->getTable('sales_order_address');
                
                $collection->getSelect()->joinLeft(
                    ['oat' => $orderAddressTable],
                    'oat.parent_id = main_table.entity_id AND oat.address_type = 'shipping'',
                    ['telephone']
                );
            } catch (Zend_Db_Select_Exception $selectException) {
                $this->logger->log(100, $selectException);
            }
        }

        return $collection;
    }
}

Create view/adminhtml/ui_component/sales_order_grid.xml file

<?xml version="1.0" encoding="UTF-8"?>

<listing xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:module:Magento_Ui:etc/ui_configuration.xsd">
    <columns name="sales_order_columns">
        
        <column name="telephone">
            <argument name="data" xsi:type="array">
                <item name="config" xsi:type="array">
                    <item name="component" xsi:type="string">Magento_Ui/js/grid/columns/column</item>
                    <item name="label" xsi:type="string" translate="true">Telephone</item>
                    <item name="sortOrder" xsi:type="number">60</item>
                    <item name="align" xsi:type="string">left</item>
                    <item name="dataType" xsi:type="string">text</item>
                    <item name="visible" xsi:type="boolean">true</item>
                    <item name="filter" xsi:type="string">text</item>
                </item>
            </argument>
        </column>
        
    </columns>
</listing>

after that we can enable the module by running a few commands:

php bin/magento module:enable Magemonkeys_CustomOrdersGrid
php bin/magento setup:upgrade
php bin/magento cache:clean

Now, you will able to see the telephone column in order grid.

 

Override custom option file in your theme
app/design/frontend/namespace/themename/Magento_Catalog/templates/product/view/options/type/select.phtml

<?php @var $this Mage_Catalog_Block_Product_View_Options_Type_Select ?>
<?php $_option = $this->getOption() ?>

<?php if ($_option->getTitle()=="testoption1") { ?>
<div id="hingebox">
<?php } ?>
<?php if ($_option->getTitle()=="testoption2") { ?>
<script type="text/javascript">
    jQuery(document).ready(function(){
        jQuery('#hingebox select').on('change', function() {
                if (jQuery('#hingebox select option:selected' ).text()==0)
                {
                        jQuery('#hingeoptions').hide();
                }
                else jQuery('#hingeoptions').show();
        });
    });
</script>
<div id="hingeoptions" style="display:none;">
<?php } ?>
<dt>
    <?php if ($_option->getTitle()=="Please select option") { ?>
    <h3 class="edging-title"><span class="cfg-step">STEP 2</span>Please select testoption <a href="/blog/products/" title="What is option?" target="_blank">What is option?</a></h3>
    <?php } else { ?>
    <label<?php if ($_option->getIsRequire()) echo ' class="required"' ?>><?php if ($_option->getIsRequire()) echo '<em>*</em>' ?><?php echo  $this->escapeHtml($_option->getTitle()) ?></label>
    <?php } ?>
</dt>
<dd<?php if ($_option->decoratedIsLast){?> class="last"<?php }?>>
    <div class="input-box">
        <?php
        $valuesHtml=$this->getValuesHtml();
        $valuesHtml=str_replace("<ul","<div class='edging-list'",$valuesHtml);
        $valuesHtml=str_replace("</ul>","</div>",$valuesHtml);
        $valuesHtml=str_replace("<li","<div class='edging-list-item'",$valuesHtml);
        $valuesHtml=str_replace("</li>","</div>",$valuesHtml);
        echo $valuesHtml;
        ?>
        <?php if ($_option->getIsRequire()): ?>
            <?php if ($_option->getType() == Mage_Catalog_Model_Product_Option::OPTION_TYPE_RADIO || $_option->getType() == Mage_Catalog_Model_Product_Option::OPTION_TYPE_CHECKBOX): ?>
                <span id="options-<?php echo $_option->getId() ?>-container"></span>
            <?php endif; ?>
        <?php endif;?>
    </div>
</dd>

 

Step 1) Create di.xml

<?xml version="1.0"?>
 <config xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="../../../../../lib/internal/Magento/Framework/ObjectManager/etc/config.xsd">

	<type name="MagentoCheckoutModelDefaultConfigProvider">
	    <plugin name="AddAttPlug" type="[vendor][module]ModelPluginDefaultConfigProvider" />
	</type>
</config>

Step 2) create plugin file DefaultConfigProvider.php

class DefaultConfigProvider 
{

  /**
    *@var checkoutSession
    */
    protected $checkoutSession;

    /**
    *Constructor
    * @param CheckoutSession $checkoutSession
    */
    public function __construct(CheckoutSession $checkoutSession)
    {
        $this->checkoutSession = $checkoutSession;
    }
    public function afterGetConfig(MagentoCheckoutModelDefaultConfigProvider $subject, $config)
    {
    	$objectManager = MagentoFrameworkAppObjectManager::getInstance(); 
        foreach ($config['quoteItemData'] as &$item) {
            $priceHelper = $objectManager->create('MagentoFrameworkPricingHelperData');
            $quoteItem = $this->checkoutSession->getQuote()->getItemById($item['item_id']);
            $price =  $quoteItem->getProduct()->getPrice();
            $formattedPrice = $priceHelper->currency($price, true, false);
            $item['originalprice'] = $formattedPrice;
        }
       return $config;
    }
}

Step 3) Override the /vendor/magento/module-checkout/view/frontend/web/js/view/summary/item/details.js to your module

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

define([
    'uiComponent',
    'Magento_Checkout/js/model/quote'
], function (Component) {
    'use strict';

    return Component.extend({
        defaults: {
            template: 'Magento_Checkout/summary/item/details'
        },

        /**
         * @param {Object} quoteItem
         * @return {String}
         */
        getValue: function (quoteItem) {
            return quoteItem.name;
        },
        getItemBaseprice: function (quoteItem) {
                return this.getPropertyDataFromItem(quoteItem, 'originalprice');
        },
        getPropertyDataFromItem: function (quoteItem, propertyName) {
                var property,
                    itemDetails;
                if (quoteItem.hasOwnProperty(propertyName)) {
                    property = quoteItem[propertyName];
                }
                var quoteItem = this.getItemFromQuote(quoteItem);
                if (quoteItem.hasOwnProperty(propertyName)) {
                    property = quoteItem[propertyName];
                }
                if (property) {
                    this.storage().set('item_details' + quoteItem.item_id + propertyName, property);
                    return property;
                }
                itemDetails = this.storage().get('item_details' + quoteItem.item_id + propertyName);
                return itemDetails ? itemDetails : false;
            },
            getItemFromQuote: function (item) {
                var items = quote.getItems();
                var quoteItems = items.filter(function (quoteItem) {
                    return quoteItem.item_id == item.item_id;
                });
                if (quoteItems.length == 0) {
                    return false;
                }
                return quoteItems[0];
            }
    });
});

Step 4) Override the vendor/magento/module-checkout/view/frontend/web/template/summary/item/details.html to your module add the below line.

<span class="originalprice" data-bind="text: getItemBaseprice($parent)"></span>

 

For this, we need to create a plugin to place the billing address section before the payment methods.

create below file at the located place and paste the below code it

Path: app/code/Magemonkeys/Babeforepayment/etc/frontend/di.xml

<config xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:framework:ObjectManager/etc/config.xsd">    
    <type name="MagentoCheckoutBlockCheckoutLayoutProcessor">
        <plugin name="move_billingaddress" type="MagemonkeysBabeforepaymentPluginBlockCheckoutLayoutProcessor"/>
    </type>
</config>

Create a plugin at the located place and paste the below code.

Path: app/code/Magemonkeys/Babeforepayment/Plugin/Block/Checkout/LayoutProcessor.php

<?php
namespace MagemonkeysBabeforepaymentPluginBlockCheckout;
 
use MagentoCheckoutBlockCheckoutLayoutProcessor as CheckoutLayoutProcessor;
 
class LayoutProcessor
{
    
    public function afterProcess(CheckoutLayoutProcessor $subject, array $jsLayout)
    {
        $paymentLayout = $jsLayout['components']['checkout']['children']['steps']['children']['billing-step']['children']['payment']['children'];
 
        if (isset($paymentLayout['afterMethods']['children']['billing-address-form'])) {

            $jsLayout['components']['checkout']['children']['steps']['children']['billing-step']['children']['payment']['children']['beforeMethods']['children']['billing-address-form'] = $paymentLayout['afterMethods']['children']['billing-address-form'];
 
            unset($jsLayout['components']['checkout']['children']['steps']['children']['billing-step']['children']['payment']['children']['afterMethods']['children']['billing-address-form']);

        }
 
        return $jsLayout;
    }
}

Clear the cache and check the output.

Follow below steps to copy data from quote item to order item in Magento 2 through the below plugin

1. Create an di.xml in : /app/code/Vendor/ModuleName/etc

<type name="MagentoQuoteModelQuoteItemToOrderItem">
    <plugin name="custom_field_to_order_item" type="VendorModuleNamePluginQuoteCustomFieldToOrderItem"/>
</type>

2. Create an CustomFieldToOrderItem.php in : app/code/Vendor/ModuleName/Plugin/Quote

<?php

namespace VendorModuleNamePluginQuote;

class CustomFieldToOrderItem

{
	public function aroundConvert(
        MagentoQuoteModelQuoteItemToOrderItem $subject,
        Closure $proceed,
        MagentoQuoteModelQuoteItemAbstractItem $item,
        $additional = []
    ) {
        /** @var $orderItem Item */
        $orderItem = $proceed($item, $additional);
        $orderItem->setCustomField($item->getCustomField());
        return $orderItem;
      }

}

 

 

For example, when we create a mobile number customer attribute in Magento 2,  we need to create a module to add new customer attribute in Magento2.

Create a registration.php file to the following path
app/code/Magemonkeys/CustomerAttribute/registration.php

<?php
MagentoFrameworkComponentComponentRegistrar::register(
    MagentoFrameworkComponentComponentRegistrar::MODULE,
    'Magemonkeys_CustomerAttribute',
    __DIR__
);

Create module.xml file to the following path  app/code/Magemonkeys/CustomerAttribute/etc/module.xml which define our module setup version to setup_module table.

<?xml version="1.0" ?>
<config xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:framework:Module/etc/module.xsd">
  <module name="Magemonkeys_CustomerAttribute" setup_version="1.0.0">
    <sequence>
      <module name="Magento_Customer"/>
    </sequence>
  </module>
</config>

Then, we need to create an extension_attributes.xml file to the following path app/code/Magemonkeys/CustomerAttribute/etc/extension_attributes.xml

which defines our mobile number customer attribute.

Pass Classname in extension_attributes.xml as MagentoCustomerApiDataCustomerInterface because its a base Customer interface to create customer attributes in Magento2.

Set attribute code as your customer attribute code and define type as a string.

<?xml version="1.0" ?>
<config xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:framework:Api/etc/extension_attributes.xsd">
    <extension_attributes for="MagentoCustomerApiDataCustomerInterface">
        <attribute code="mobile" type="string"/>
    </extension_attributes>
</config>

For Create Customer attribute we need to define InstallData.php file to the following path app/code/Magemonkeys/CustomerAttribute/Setup/InstallData.php which adds an entry to our database for custom mobile number attribute.

<?php

namespace MagemonkeysCustomerAttributeSetup;

use MagentoFrameworkSetupInstallDataInterface;
use MagentoFrameworkSetupModuleContextInterface;
use MagentoFrameworkSetupModuleDataSetupInterface;
use MagentoCustomerModelCustomer;
use MagentoCustomerSetupCustomerSetupFactory;

class InstallData implements InstallDataInterface
{

    private $customerSetupFactory;

    /**
     * Constructor
     *
     * @param MagentoCustomerSetupCustomerSetupFactory $customerSetupFactory
     */
    public function __construct(
        CustomerSetupFactory $customerSetupFactory
    ) {
        $this->customerSetupFactory = $customerSetupFactory;
    }

    /**
     * {@inheritdoc}
     */
    public function install(
        ModuleDataSetupInterface $setup,
        ModuleContextInterface $context
    ) {
        $customerSetup = $this->customerSetupFactory->create(['setup' => $setup]);

        $customerSetup->addAttribute(MagentoCustomerModelCustomer::ENTITY, 'mobile', [
            'type' => 'varchar', // type of attribute
            'label' => 'Mobile Number',
            'input' => 'text', // input type
            'source' => '',
            'required' => false, // if you want to required need to set true
            'visible' => true,
            'position' => 500, // position of attribute
            'system' => false,
            'backend' => ''
        ]);
        
        /* Specify which place you want to display customer attribute */
        $attribute = $customerSetup->getEavConfig()->getAttribute('customer', 'mobile')
        ->addData(['used_in_forms' => [
                'adminhtml_customer',
                'adminhtml_checkout',
                'customer_account_create',
                'customer_account_edit'
            ]
        ]);
        $attribute->save();
    }
}

Now Run the upgrade command to install our module using SSh from the root of your Magento instance.

php bin/magento setup:upgrade
php bin/magento setup:static-content:deploy -f
php bin/magento indexer:reindex
php bin/magento cache:flush

Now you can check your new mobile number attribute at the admin panel.

Go To, Customers -> All Customers -> Edit any Customer.

In this blog, we will show you the essential steps needed to install the latest Magento CE 2. This tutorial explains the installation of Magento software on your localhost. We have used a window environment only by using a wizard to install.

It’s an easy process, so let’s get started With Magento Community Edition 2.0 Installation.

Flow Of Content:
a. Find the installation that suits your business requirements.
b. Verify your prerequisites
c. Install Magento
Easy Installation: Install the Magento software using the
Setup wizard
Install optional sample data(Setup Wizard)
Advanced Installation with more control:
Install Magento software using the command line
Install optional sample data (Command line)

Choose How to Install the Magento Software:

1. Effortless installation via a compressed software archive
This installation does not have any command line.

2. Download Magento 2.0
Pick a package as per your business requirements.

3. System requirements

Before you start the installation, make sure that your system has the following requirements:

i. Operating Systems: Linux Distributions like Debian, Ubuntu, RedHat Enterprise Linux(RHEL), CenOS, etc.

ii. Apache 2.2 or later

iii. PHP 5.5x or PHP 5.6x (Magento 2 does not support PHP 5.4)

iv. Essential PHP extensions:

• PDO/MySQL
• mbstring
• mcrypt
• mhash
• simplexml
• curl
• gd2, ImageMagick 6.3.7 (or later) or both
• soap
• intl
• bc-math
• openssl

v. MySQL 5.6x

vi. Mail Transfer Agent (MTA) or SMTP server

Suggestions:

• php_xdebug2.2.0 or later (development environments only; can have an adverse effect on performance)
• PHPUnit (as a command-line tool) 4.1 or later

4. Installation Magento 2.0

Follow below-mentioned steps to install Magento 2.0 only after verifying your prerequisites:

1: Upload package to your Root

2. Create a DataBase

You can create your database by going into PHPmyadmin  create database

3. Let’s begin Magento installation

Follow 7 steps for a seamless installation of Magento

Open web browser and then navigate to the location of the Magento downloader.

Step 1: Agree and Setup

Start the setup by pressing on Agree and Setup Magento button.

Step 2: Verify System requirements

For flawless Magento installation, you will have to check your hosting settings, and if error warnings appear, then you must correct the errors by contacting your hosting provider.

Step 3: Add a Database

• Database Server Host: Enter localhost if your server is on the same host as your web server.
• Input Database Server Username
• Input Database Server Password: This is optional
• Database Name: Enter the same name of MySQL database that you created in the Create Database section.
• Table Prefix: This field is not mandatory; Magento installation will generate a random prefix.

Step 4: Web Configuration

• Your Store Address: This field requires the base URL for your store.
• Magento Admin Address: input the base URL for the store’s Admin Panel (default value is admin)

Step 5: Customize your store

In this step, you can set the time zone, currency and language of your store. These fields can be modified anytime later in the admin dashboard.

Step 6: Create Admin Account

In order to access Magento backend, you need to create an administrator account.

• New Username: Enter the owner’s admin account.
• New Email: Enter the email address.
• New Password: Set a password.
• Confirm Password: Confirm the password.

Step 7: Install & Finish

Click on Install Now to begin the installation.

Conclusion

Now, that you have learned how to install Magento on the server, it’s time for you to have your Magento store up and running in no time.

We had a client who hired us for Magento upgrade service. We migrated his store to Magento 2 & perform a Magento version upgrade. As a part of the maintenance service, we did Magento 2.3 upgrade for him & upgraded the store to 2.3.5.

If you want to upgrade the Magento version from 2.3.2 to 2.3.5, then follow the below upgrade steps using SSH.

Note: Before running the below commands, please take a full backup of your current Magento website. It will help you to undo the current scenario if you face any issues during the future Magento 2 upgrade steps.

Step 1: Set the Magento website in maintenance mode using the below command.

- php bin/magento maintenance:enable

Step 2: Take a backup of composer.json file placed in Magento root using the below command.

- cp composer.json composer.json.bak

Step 3: Remove the current installation setup folder by using the below command.

- composer remove magento/product-community-edition --no-update

Step 4: Set the version in which you want to upgrade in the below command.

- composer require magento/product-community-edition=2.3.5 --no-update

Step 5: Run the below command.

- composer require --dev allure-framework/allure-phpunit:~1.2.0 friendsofphp/php-cs-fixer:~2.14.0 lusitanian/oauth:~0.8.10 magento/magento-coding-standard:~3.0.0 magento/magento2-functional-testing-framework:2.4.5 pdepend/pdepend:2.5.2 phpmd/phpmd:@stable phpunit/phpunit:~6.5.0 sebastian/phpcpd:~3.0.0 squizlabs/php_codesniffer:~3.4.0 --sort-packages --no-update

Step 6: Also run the below command.

- composer remove --dev sjparkinson/static-review fabpot/php-cs-fixer --no-update

Step 7: Then, update the composer using the below command.

- composer update

Step 8: Run below mention Magento upgrade command.

- php bin/magento setup:upgrade

- php bin/magento cache:clean

Step 9: Remove maintenance mode using the below command.

- php bin/magento maintenance:disable

That’s it. The Magento 2 upgrade is done.

Now, you can check your site’s Magento version in the admin panel.  In case, if you’re looking for a professional Magento migration service to upgrade the Magento version then contact Mage Monkeys today.