In Magento 2, Most of the case we need to retrive product using sku or product id. We use ProductRepositoryInterface to retrive product.

Load product by sku and id using ProductRepositoryinterface

Just only write code for load product using id and sku. In your case you need to add that constructor argument to your class and add that functions to retrive product by using sku and product id.

<?php

/* Your namespace and class declaration */

protected $productRepository;

/* add Magento\Catalog\Api\ProductRepositoryInterface to you constructor */
public function __construct(
    \Magento\Catalog\Api\ProductRepositoryInterface $productRepository
) {
    $this->productRepository = $productRepository;
}

/* function for get product by id*/
public function getProductById($productId)
{
    return $this->productRepository->getById($productId);
}

/* function for get product by sku */
public function getProductBySku($sku)
{
    return $this->productRepository->get($sku);
}

Load product by sku and id using ObjectManager

As per the Magento standard we not need to use ObjectManager anyware in our custom module. We can use object manager for some short of time in phtml file when we developing anything. Once it’s done we need to move that logic in Block or ViewModel.

Also we cna use ObjectManager in our custom script.

<?php
$id = 5;
$sku = 'PRD001';
$objectManager = \Magento\Framework\App\ObjectManager::getInstance();
$productRepository = $objectManager->get(\Magento\Catalog\Api\ProductRepositoryInterface::class);
$product = $productRepository->get($sku); // get product by sku
$product2 = $productRepository->getById($id); // get product by product Id

Load product using Factory class

I am not recommend to use this factory class to load any data in Magento 2. Factory class always create the new object while creating the instance of the class. When we need every time new object at that time we can use the factory class.

    use Magento\Catalog\Model\ProductFactory;

    /** @var ProductFactory*/
    protected $productFactory;
    
    /**
     * @param ProductFactory$productFactory 
     */
    public function __construct(
        ProductFactory $productFactory 
    ) {
        $this->productFactory = $productFactory 
    }

    public function getProductById($productId)
    {
        return $this->productFactory->create()->load($productId);
    }

    public function getProductBySku($sku)
    {
        return $this->productFactory->create()->loadByAttribute('sku', $sku);
    }

Load product by sku and id using ObjectManager

As per the Magento standard we not need to use ObjectManager anyware in our custom module. We can use object manager for some short of time in phtml file when we developing anything. Once it’s done we need to move that logic in Block or ViewModel.

Also we cna use ObjectManager in our custom script.

<?php
$id = 5;
$sku = 'PRD001';
$objectManager = \Magento\Framework\App\ObjectManager::getInstance();
$productFactory = $objectManager->create(\Magento\Catalog\Model\ProductFactory::class);
$product = $productFactory->create()->loadByAttribute('sku', $sku); // get product by sku
$product2 = $productRepository->load($id); // get product by product Id

In Magento 2 we can create product attribute using two way.

1. From Admin controll panel
2. Using programmatically

1. Create product attribute using admin panel.

Magento 2 admin controll panel provide feature to add, update and remove product attribute from admin controll panel.

For creating product attribute we need follow the bellow simple step.

Login to Admin controll panel.

Login to admin panel using your username and password.

Goto product attribute.

After login click on Store > Attribute > Product. It’s redirect to product attribute grid.

Adding new Attribute.

Click on “Add New Attribute” button, It’s redirect to new attribute form.

Fill the attribute details as per your needs and click on “Save Attribute” button.

Assign attribute to attribute set.

Click on Store > Attribute > Attribute set, it’s redirect to attribute set grid.

Click on “Default”, It’s redirect to attribute set. In that page you can drag your attribute and move to any product section like general, content…etc which section you want that attribute on edit product form.

After that just click on save button. That attribute is assign to that attribute set with that specific section.

After saving attribute set you can get that attribute in edit product page in admin. Also you can save your custom data to that atttribute.

2. Creating product attribute using programattically.

In Magento 2 we can create product attribute easily by adding some line of code in our custom module.

Before Magento 2.3.x we use InstallData to perform any data level operation in Magento. Using InstallData we can add new data to table or we can modify or remove table data.

Magento 2.3 introduce the data patch and schema patch and the InstallData, UpgradeData, InstallSchema and UpgradeSchema was deprecated in Magento version 2.3.

We create product attribte using both ways.

Create product attribute using InstallData

We need to use UpgradeData when our module is already installed. For me I just creating fresh module so using InstallData we create product attribute.

<?php
//file path: MAGENTO_ROOT/app/code/RS/ProductAttribute/Setup/InstallData.php

namespace RS\ProductAttribute\Setup;

use Magento\Eav\Setup\EavSetup;
use Magento\Eav\Setup\EavSetupFactory;
use Magento\Framework\Setup\InstallDataInterface;
use Magento\Framework\Setup\ModuleContextInterface;
use Magento\Framework\Setup\ModuleDataSetupInterface;
use Magento\Catalog\Model\ResourceModel\Eav\Attribute;

class InstallData implements InstallDataInterface
{
    /**
     * EAV setup factory
     *
     * @var EavSetupFactory
     */
    private $_eavSetupFactory;

    /**
     * Init
     *
     * @param EavSetupFactory $eavSetupFactory EnvSetupfactory
     */
    public function __construct(EavSetupFactory $eavSetupFactory)
    {
        $this->_eavSetupFactory = $eavSetupFactory;
    }

    /**
     * Install Data script
     *
     * @param ModuleDataSetupInterface $setup   Setup Object
     * @param ModuleContextInterface   $context Context Object
     *
     * @return void
     */
    public function install(
        ModuleDataSetupInterface $setup,
        ModuleContextInterface $context
    ) {

        $eavSetup = $this->_eavSetupFactory->create(['setup' => $setup]);
        $eavSetup->addAttribute(
            \Magento\Catalog\Model\Product::ENTITY,
            'custom_attr',
            [
            'group' => 'General',
            'type' => 'varchar',
            'sort_order' => 100,
            'label' => 'Custom Attribute 01',
            'input' => 'text',
            'global' => Attribute::SCOPE_GLOBAL,
            'visible' => true,
            'required' => false,
            'user_defined' => true,
            'default' => '',
            'searchable' => false,
            'filterable' => false,
            'comparable' => false,
            'visible_on_front' => false,
            'used_in_product_listing' => true,
            'unique' => false,
            'apply_to' => 'simple,configurable,virtual,bundle,downloadable'
            ]
        );
    }
}

After that we just need to run the setup commands (setup:upgrade and setup:static-contnet:deploy -f).

Create product attribute using data patch

We can use data patch to create attribute and manipulate and table data. We need create product attribute that is manipulate EAV data. So, we use data patch to create product attribute.

This patch is execute only one time. It’s automatically execute when you run setup:upgrade command.

After successfully execute patch it’s register in patch_list table. So, after that patch is no logger execute when we run the setup:upgrade.

<?php
//file path: MAGENTO_ROOT/app/code/RS/ProductAttribute/Setup/Patch/Data/CustomAttrPatch.php

namespace RS\ProductAttribute\Setup\Patch\Data;

use Magento\Framework\Setup\ModuleDataSetupInterface;
use Magento\Framework\Setup\Patch\DataPatchInterface;
use Magento\Catalog\Model\Product;
use Magento\Catalog\Model\ResourceModel\Eav\Attribute;
use Magento\Eav\Setup\EavSetupFactory;

class CustomAttrPatch implements DataPatchInterface
{
    /**
     * @var ModuleDataSetupInterface
     */
    protected $moduleDataSetup;

    /**
     * @var EavSetupFactory
     */
    protected $eavSetupFactory;

    /**
     * @param ModuleDataSetupInterface $moduleDataSetup
     * @param EavSetupFactory $eavSetupFactory
     */
    public function __construct(
        ModuleDataSetupInterface $moduleDataSetup,
        EavSetupFactory $eavSetupFactory
    ) {
        $this->moduleDataSetup = $moduleDataSetup;
        $this->eavSetupFactory = $eavSetupFactory;
    }

    /**
     * Default patch method that cover the patch logic
     */
    public function apply()
    {
        $eavSetup = $this->eavSetupFactory->create(['setup' => $this->moduleDataSetup]);

        /**
        * Add attributes to the eav/attribute
        */
        $eavSetup->addAttribute(
            Product::ENTITY,
            'custom_attr2',
            [
                'group' => 'General',
                'type' => 'int',
                'backend' => '',
                'frontend' => '',
                'label' => 'Custom Attribute 02',
                'input' => 'text',
                'class' => '',
                'source' => '',
                'global' => Attribute::SCOPE_GLOBAL,
                'visible' => true,
                'required' => false,
                'user_defined' => true,
                'default' => '',
                'searchable' => true,
                'filterable' => true,
                'comparable' => false,
                'visible_on_front' => true,
                'used_in_product_listing' => true,
                'unique' => false,
                'apply_to' => 'simple,configurable,virtual,bundle,downloadable'
            ]
        );
    }

    /**
     * Return the dependency array
     */
    public static function getDependencies()
    {
        return [];
    }

    /**
     * Return the alias array
     */
    public function getAliases()
    {
        return [];
    }
}

That’s all for creating product attribute using admin panel and programattically.

What is knockout Js ?

Knockout is a JavaScript library that helps you to create rich, responsive display and editor user interfaces with a clean underlying data model. Using knockout js we can update UI based on the data model. It’s auto update the UI when the data getting update.

Magento use knockout js in many place. Like minicart, checkout, recently view section…etc.

Today we create our custom simple component in knockout js. Using that component we display the simple message.

Let’s use FirstModule. We add new Knockout js component and using that component we will display the simple message.

Creating Js Component

I am creating js component that component have a message property. That message property we update after 5 second.

//file path: MAGENTO_ROOT/app/code/RS/FirstModule/view/frontend/web/js/hello.js

define(['uiComponent', 'ko'], function(Component, ko) {
    return Component.extend({
        defaults: {
            template: 'RS_FirstModule/hello',
        },

        message: ko.observable("This message comming from knockout js component"),
        initialize: function () {
            let self = this;
            this._super();
            
            setTimeout(function(){
                self.message("Message is updated after 5 second");
            }, 5000)
        }
    });
});

Creating component template

This template is represent the UI. We write the frontend UI code in template file. Also we can use the component peroperties in this template.

We use message property in this template file. Using that message property we display message using Js component.

When we update data dynamically then in magento mostly use knockout js. In our example I updated message property value after 5 second.

<!-- file path: MAGENTO_ROOT/app/code/RS/FirstModule/view/frontend/web/template/hello.html -->

<p class="message" data-bind="text: message()"></p>

How to access the Js component in PHTML template

We access our custom js component in message.phtml template which we created in our FirstModule.

<?php 
// file path: MAGENTO_ROOT/app/code/RS/FirstModule/view/frontend/templates/message.phtml 

/**
 * Product list template
 *
 * @var $block \Magento\Framework\View\Element\Template
 * @var \Magento\Framework\Escaper $escaper
 */
?>
<?= $escaper->escapeHtml(__("This is my first Magento 2.x Module")); ?>
<h2><?= $escaper->escapeHtml(__("Knockout Section")); ?></h2>
<div class="knockout-section" data-bind="scope: 'message_ex'">
    <!-- ko template: getTemplate() --><!-- /ko -->
</div>

<script type="text/x-magento-init">
        {
            "*": {
                "Magento_Ui/js/core/app": {
                    "components": {
                        "message_ex": {
                            "component": "RS_FirstModule/js/hello"
                        }
                    }
                }
            }
        }
</script>

In above example we access the custom component in PHTML template file. In template file created new section for js component. All the js component data is showing on “knockout-section” div.

Output:

That’s all, For creating a custom js component in Magento 2.

What is ViewModel ?

ViewModel is a PHP class. That fulfills a single or multiple object needs without extending the original block.

It avoids unnecessary overriding of block and block constructor arguments. ViewModel has required resources only. So, we can get data faster compared to block and helper classes.

How to implement ViewModel ?

In layout we can define ViewModel in block arguments with xsi:type as object. We can pass multiple ViewModel in a single block.

Let’s use this FirstModule and add new ViewModel in layout. Adding this RS\FirstModule\ViewModel\Calculate to message block.

<?xml version="1.0"?>
<!-- file path: MAGENTO_ROOT/app/code/RS/FirstModule/view/frontend/layout/first_module_first_index.xml -->
<page xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:framework:View/Layout/etc/page_configuration.xsd">
    <body>
        <referenceBlock name="page.main.title">
            <action method="setPageTitle">
                <argument translate="true" name="title" xsi:type="string">First Module</argument>
                </action>
        </referenceBlock>
        <referenceContainer name="content">
            <block class="Magento\Framework\View\Element\Template" name="message" template="RS_FirstModule::message.phtml">
                <arguments>
                    <argument name="view_model" xsi:type="object">\RS\FirstModule\ViewModel\Calculate</argument>
                </arguments>
            </block>
        </referenceContainer>
    </body>
</page>

Create ViewModel class

As per the Magento 2 standards, We create ViewModel class under ViewModel directory in your custom module. Basically we create this ViewModel for simple calculation.

For creating ViewModel we need implement the ArgumentInterface (\Magento\Framework\View\Element\Block\ArgumentInterface).

<?php
//file path: MAGENTO_ROOT/app/code/RS/FirstModule/ViewModel/Calculate.php
namespace RS\FirstModule\ViewModel;

use Magento\Framework\View\Element\Block\ArgumentInterface;

class Calculate implements ArgumentInterface
{
    
    /**
     * Return the sum of array arguments
     * 
     * @param mixed $args
     * @return int
     */
    public function sum($args)
    {
        $tot = 0;
        foreach ($args as $argsItem) {
            $tot += $argsItem;
        }
        return $tot;
    }
}

How to access ViewModel in template file ?

After declare and create ViewModel. Now we use that ViewModel to our template file. When we add any ViewModel to any block using layout, It’s add new argument value in block. So we can use that argument value using setter getter methods.

Let’s access ViewModel.

<?php 
// file path: MAGENTO_ROOT/app/code/RS/FirstModule/view/frontend/templates/message.phtml 

/**
 * Product list template
 *
 * @var $block \Magento\Framework\View\Element\Template
 * @var \Magento\Framework\Escaper $escaper
 */
?>
<?php 
$viewModel = $block->getViewModel(); // Or you can use $block->getData('view_model')
$subjectMarks = [
    "php" => 75,
    "java" => 80,
    ".net" => 85
];
?>
<?= $escaper->escapeHtml(__("This is my first Magento 2.x Module")); ?>
<br />
<?= $escaper->escapeHtml(__("We can calculate sum using ViewModel.")) ?>
<br />
<?= $escaper->escapeHtml(__("Sum is: %1", $viewModel->sum($subjectMarks))) ?>

Using getViewModel() or getData(‘view_model’) we can get the ViewModel object. We can set any of the name instead of the view_model. it’s not necessary to set name as view_model.

Let’s check the output: