Category: Magento 2

Posted on

How to resolve Uncaught ReferenceError: jQuery is not defined(anonymous function) error magento 2?

Many time during custom development in Magento 2 using require js we have faced error like,

Uncaught ReferenceError: jQuery is not defined(anonymous function).
Uncaught TypeError: $(…).customjs is not a function.

Above issue can be resolved using require js paths and shim attribute of requirejs.
Most of the time issue occurs because of jQuery is not loaded before our custom js file due to AMD(asynchronously module dependencies) nature of require js.

Many of the custom js or Third party js library depends on Jquery to load first.
In Magento 2, Magento team used require js concept for improvement of site speed.

So you need to add dependencies in requirejs-config.js file as below. let’s assume you are using slider js names myslider.min.js and they depend on jquery. Your requirejs-config.js file will be as below,

var config = {
    paths: {
            'myslider': 'Vendor_Module/js/myslider.min'
    },
    shim: {
            'myslider': {
                deps: ['jquery'] //gives your parent dependencies name here
            }
    }
};

Gives pathname under the paths object, Your myslider.min.js stay at app/code/<Vendor>/<Module>/view/frontend/web/js/myslider.min.js

Gives dependencies using shim attribute. Our slider depends on jquery.

Posted on

How to override template (.phtml) files in magento 2?

Override template files in Magento 2 is common and just a simple. You can override template file by below ways.
1. Using Theme level in the theme directory
2. Using Module level in the custom module

1. Using Theme level,
We will discuss first theme level override templates. I hope you have created theme for your site. If you don’t know how to create theme refer to link for creating the custom theme,
For theme level override you must have a custom theme in your project.
Let’s assume We need to override list.phtml file from Catalog core module.
Path for core module is vendor/magento/module-catalog/view/frontend/templates/product/list.phtml

We need to create Magento_Catalog folder in our theme root directory.
Let’s assume your theme name is Vendorname/themename. Your actual path for a theme is,
app/design/frontendVendorname/themename. You need to create Folder Magento_Catalog for override catalog module template file. Our core module template resides in module-catalog folder so you need to create Core module folder like,
Magento_Catalog (Where Magento is Vendorname and Modulename will be in UpperCamelCase letter with suffix “prefix”)

Now you can override your list.phtml at below location,,
app/design/frontendVendorname/themename/Magento_Catalog/templates/product/list.phtml
Create list.phtml file and get content from core Magento Catalog template list.phtml file.

For some core module name in Magento 2 has multiple words separated with the hyphen(-).
Like, module-configurable-product, In this case, our Module name in the theme will be, Magento_ConfigurableProduct
if you want to override templates from module-checkout-agreements your theme level folder will be Magento_CheckoutAgreements

2. Using Module Level,
You can override template file using the Module level.
You need to create layout XML file from your controller action,
app/code/<Vendor>_<Module>/view/frontend/layout/catalog_category_view.xml

(Using New method)

<?xml version="1.0"?>
<page xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" layout="2columns-left" xsi:noNamespaceSchemaLocation="urn:magento:framework:View/Layout/etc/page_configuration.xsd">
    <body>
        <referenceBlock name="category.products.list">
            <arguments>
                <argument name="template" xsi:type="string">Vendor_Module::product/list.phtml</argument>
            </arguments>
        </referenceBlock>
    </body>
</page>

(Using old deprecated method, action method=”setTemplate”)

<?xml version="1.0"?>
<page xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" layout="2columns-left" xsi:noNamespaceSchemaLocation="urn:magento:framework:View/Layout/etc/page_configuration.xsd">
    <body>
        <referenceBlock name="category.products.list">
            <action method="setTemplate">
                <argument name="template" xsi:type="string">Vendor_Module::product/list.phtml</argument>
            </action>
        </referenceBlock>
    </body>
</page>

Using New method some of the templates is still not overridden check link, Github Issue.

Do not use <action> tag, if the method implementation allows calling it using <argument> for block or referenceBlock.

For example, in your module, you would put a list template in  module for path, app/code/<Vendor>_<Module>/view/frontend/templates/product/list.phtml

Conclusion:

Which method should we use from the above solutions?
There is no one specific method that should be used in all scenarios.
If you are creating a theme, use the template path method(Method 1 is more suitable for frontend developer).
If you are creating a module, use the layout at the module level and define your template.

 

 

Posted on

How to create a custom theme in magento 2?

Why do you need to create a custom theme in Magento 2?
We need to create a custom theme for Magento 2 because of To customize the design of your Magento store. Natively Magento comes with preinstalled blank and luma theme.
Keeping Maintainability and Upgradability in mind, We need to create a custom theme.
If we modify directly to our changes to core module, Changes will be wiped out in future if we upgrade the Magento version. Do not modify the out of the box Magento core phtml files when we need to customize changes on phtml file.

You need to refer below steps for creating a custom theme in Magento 2.
Go to Magento root folder where you have installed your Magento,

1. Create a directory under app/design/frontend/Magento2/demotheme.
2. Create a theme declaration file theme.xml.
3. Create registration.php file to register our theme.
4. Create a composer.json file.
5. Create a web directories for CSS, JavaScript, images, and fonts of our custom theme.

Your theme structure looks like below, For Demo, We have kept Vendorname as Magento2 and themename as demotheme. You can change based on your themename.
— You should Keep Vendorname as Camelcase letter and themename in lowercase as per Magento theme standard.

app/design/frontend/
├──  ... Magento2/
│   │   ├──...demotheme/
│   │   │   ├──...   theme.xml
│   │   │   ├──...   registration.php
|   │   │   ├──...   composer.json
|   │   │   ├──...   web/
|   │   │   │   ├──   ...css/
|   │   │   │   ├──   ...images/
|   │   │   │   ├──   ...js/
|   │   │   │   ├──   ...fonts/

Create theme.xml  file to your theme directory. app/design/frontend/Magento2/demotheme.

<theme xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:framework:Config/etc/theme.xsd">
    <title>RakeshJesadiya</title>
    <parent>Magento/luma</parent>
</theme>

In above title is your theme title and parent node is for parent theme name.
You can keep your parent theme we have declared luma as a parent now.

Create registration.php file,

app/design/frontend/Magento2/demotheme/registration.php

<?php

\Magento\Framework\Component\ComponentRegistrar::register(
    \Magento\Framework\Component\ComponentRegistrar::THEME,
    'frontend/Magento2/demotheme',
    __DIR__
);

Create composer.json file,

{
    "name": "magento/theme-frontend-demotheme",
    "description": "My custom magento 2 theme",
    "require": {
        "php": "7.0.2|7.0.4|~7.0.6|~7.1.0",
        "magento/theme-frontend-blank": "100.2.*",
        "magento/framework": "101.0.*"
    },
    "type": "magento2-theme",
    "version": "100.2.2",
    "license": [
        "OSL-3.0",
        "AFL-3.0"
    ],
    "autoload": {
        "files": [
            "registration.php"
        ]
    }
}

Above file,  “name” key will be your theme name.
“description” key will be your theme description.
“require” key will be your theme dependency modules.
“type” must be magento2-theme (for any custom theme)
“version” is your theme version.

You can keep your static files in web folder.
— images folder for images of store front
— js folder for js files
— css folder for less/CSS files
— fonts folder for font files

Now run command to our theme activation in site.

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

Our theme will be activated and check it from the admin panel.
Go To Content Menu from left sidebar, Click Design -> Themes
Your new theme will be shown in the grid.

If you want to apply your custom theme to store,
Go To Content Menu from left sidebar,
Click Design -> Configuration
Click on Edit link and set Your theme from Applied Theme drop-down section.
Save theme.

Clear cache and you can check your storefront with your custom theme.