Page 2 - Blog

Areas and application entry points

Each module can have a global and area-specific di.xml file. The application reads all the di.xml configuration files declared in the system and merges them all together by appending all nodes.

As a general rule, the area specific di.xml files should configure dependencies for the presentation layer, and your module's global di.xml file should configure the remaining dependencies.

The application loads the configuration in the following stages:

1. Initial (app/etc/di.xml)
2. Global (<moduleDir>/etc/di.xml)
3. Area-specific (<moduleDir>/etc/<area>/di.xml)

The areas are:

• adminhtml
• frontend
• graphql
• webapi_rest
• webapi_soap
• crontab

During bootstrapping, each application entry point loads the appropriate di.xml files for the requested area.

Constructor arguments

https://webkul.com/blog/how-to-create-your-own-theme-in-hyva-theme/

https://github.com/alpinejs/alpine/tree/v2.8.2#readme

An alpinejs is a lightweight javascript framework that contains same kind of data binding that we love in other js frameworks. Hyvä Themes uses only alpine js as its single js dependency.

Hyvä Theme uses the TailwindCSS framework that is very easy to customize, responsive, and fits on all devices. It creates a very small size of CSS stylesheets which reduces the amount of data your site visitor has to download.

Tailwind is a utility-based CSS framework that you don’t typically write the CSS classes yourself, instead, you can use the classes that are present within Tailwind.

https://m.academy/articles/magento-2-request-response-lifecycle/

https://tiagosampaio.com/2023/06/19/front-controller-the-guy-who-handles-the-request-in-magento-2/

Types of Controller Response in Magento 2 

There are five Controller Response Types in Magento

•  Page
• JSON 
• ROW 
• Redirect 
• Forward

(01) Page: This returns HTML loaded from a layout handle.

(02) JSON: this returns a response in JSON format. It can be used in API or AJAX requests.

Magento\Framework\Controller\Result\JsonFactory;

$result = $this->jsonFactory->create();

$data = ['success' => true, 'message' => 'Data fetched successfully']; return $result->setData($data);

(03) Raw: this returns whatever you want to be returned.

Magento\Framework\Controller\Result\RawFactory;

 $result = $this->rawFactory->create();

$result->setHeader('Content-Type', 'text/plain');

$result->setContents('This is a plain text output'); return $result;

(04) Forward: this internally forwards to another

First install this chrome plugin to better view knocout js of a website

https://chromewebstore.google.com/detail/knockout-context-hover/lcpnkclcbpmhekkjnkomhoecoiobbejf?hl=en

https://chromewebstore.google.com/detail/knockoutjs-context-debugg/plomponkmimcpdlpekioencoekefkjkn

Data Binding Syntax 

Data binding is accomplished by adding an HTML attribute called data-bind to any
HTML element that you want Knockout to replace with information from your
ViewModel.

 Knockout bindings using HTML comments
<!-- ko -->
<!-- /ko -->
Binding through HTML comments is extremely convenient when you want to wrap
your binding around a block of HTML code, o

<h1>Hello <span data-bind="text: name"></span></h1>

A span tag is data-bound to the name property of the ViewModel. This is done by
placing text: name inside the data-bind HTML attribute. 

implementing Knockout requires
three distinct things. The first is the view, which in this example is the HTML that
contains the h1 and span tags that

Create a file at  etc/adminhtml/system.xml for that specific module.

In the system.xml file, it is possible to define four different types of entities those are below

Create a tab:

<?xml version="1.0" ?>
<config xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:module:Magento_Config:etc/system_file.xsd">
    <system>
        <tab id="A_UNIQUE_ID" translate="label" class="a-custom-css-class-to-style-this-tab" sortOrder="10">
            <label>A meaningful label</label>
        </tab>
    </system>
</config>

Only id is required

Create a Section:

<?xml version="1.0" ?>
<config xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:module:Magento_Config:etc/system_file.xsd">
    <system>
        <tab id="A_UNIQUE_ID" translate="label" class="a-custom-css-class-to-style-this-tab" sortOrder="10">
            <label>A meaningful label</label>
        </tab>

        <section id="A_UNIQUE_SECTION_ID"

Think about the Rest API. More like GraphQL is siter of Rest and others.

Graphql helps to get, update and delete data from Magento 2 while using react or other.

We can use Postman OR install this chrome extension to work with Graphql from chrome browser.

In Magento 2.4 and later versions, the GraphQL endpoint is typically accessible via the following URL format:

Main xml Layout of checkout is

checkout_cart_index.xml

We can copy it in theme to override and add changes into it.

Now you can also check from xml which js component is attatch to html.

Under web/template/minicart/item/default.html we have table which show product image, price, quantity and total on cart page.

Following file contain the action like Remove or edit for indivisual items.

\vendor\magento\module-checkout\view\frontend\layout\checkout_cart_item_renderers.xml

Don't forget to include the sequence in the module.xml file when creating a custom module for checkout.

<sequence>
    <module name="Magento_Checkout"/>
</sequence>

Magento 2 checkout is different when compared to other components in Magento, such as the catalog. The checkout process heavily depends on Knockout.js and HTML. It involves complex interactions and real-time updates, making it essential to understand how these technologies work together.

Create New step on checkout in Magento 2

First thing first. 

 Generate CSR from below link

     https://csrgenerator.com/

Save the key and Private key securely.

A Certificate Signing Request (CSR) is a formatted message that an applicant for a Secure Sockets Layer (SSL) digital certificate sends to a certificate authority (CA). The CSR contains information that the CA uses to create the certificate, including the organization, country, and common name.

Get a free certificate 

https://www.hostingwalay.pk/ssl-certificates.php

Certificate (CRT) will copied to CRT

PRIVATE KEY WILL go Pem keys

If admin is not opening either after migration or upgration or you have change the server then you have to check few things first.

select * from core_config_data where path like '%custom%';

This Command will give you all the option from db related to admin settings. Pay attention to these 

• -admin/url/use_custom
• - admin/url/custom
• - admin/url/use_custom_path
• - admin/url/custom_path

From etc.env file you can check 

return array (
  'backend' => 
  array (
    'frontName' => 'admin',
  ),

Also check from db that ssl is enable for admin or not.

https://aureatelabs.com/blog/easiest-way-to-load-your-custom-js-component-in-magento-2/

https://r-martins.github.io/m1docs/videos/fundamentals/add-a-javascript-module/index.html

https://github.com/nans/Magestudy/tree/master?tab=readme-ov-file

https://www.thecoachsmb.com/how-to-add-custom-javascript-in-magento-2/#:~:text=Magento%202%20uses%20Require%20JS,to%20increase%20the%20page%20speed.&text=Magento%202%20uses%20requirejs%2Dconfig,the%20JS%20file%20with%20alias.

https://www.google.com/search?q=MAGENTO+2+ADD+CUSTOM+JS+METHODS&rlz=1C1CHBD_enPK1035PK1035&oq=MAGENTO+2+ADD+CUSTOM+JS+METHODS+&gs_lcrp=EgZjaHJvbWUyBggAEEUYOTIHCAEQIRigAdIBCDgwNzhqMGo3qAIAsAIA&sourceid=chrome&ie=UTF-8

There are 3 ways to add JS

1. Layout XML File
2. Via data-mage-init and using RequireJS Configuration(Must add require-js.config file)
3. Via <script type=”text/x-magento-init”>

1) Via Adding Layout

   You can add JavaScript files to specific pages or all pages using layout XML files.

Example:

Layout XML:

<?xml