:::: MENU ::::

Magento 2 call js css file homepage

Today we discuss about Magento 2 call js css file homepage.This tutorial include how to add js file on homepage, How to add css file on home.There are two way to add css or js file on homepage.You can add js or css file from admin or you can add file from layout. So let’s start with our example.

Admin Panel

You can add js or css file from admin panel.

content->page -> edit page in design tab Layout Update XML

Add following code.

   <head><script src="js/myfile.js"/></head>
   <css src="css/mystyle.css"/>

Layout File

Add Js

If you are adding js in your theme create cms_inde_index.xml in following path.

app/design/frontend/QaisarSatti/theme/Magento_Theme/layout/cms_inde_index.xml

myfile.js location will

app/design/frontend/QaisarSatti/theme/Magento_Theme/web/js

<?xml version="1.0"?>
<page xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:framework:View/Layout/etc/page_configuration.xsd">
    <head><link src="js/myfile.js"/></head>
</page>

If You want it to add from module xml then create cms_inde_index.xml in following path.

app/code/QaisarSatti/view/HelloWorld/frontend/layout/cms_inde_index.xml

myfile.js location will

app/code/QaisarSatti/view/HelloWorld/frontend/web/js

<?xml version="1.0"?>
<page xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:framework:View/Layout/etc/page_configuration.xsd">
    <head><link src="FME_GoogleMapsStoreLocator::js/myfile.js"/></head>
</page>

Add css

If you are adding cs in your theme create cms_inde_index.xml in following path.

app/design/frontend/QaisarSatti/theme/Magento_Theme/layout/cms_inde_index.xml

mystyle.css location will

app/design/frontend/QaisarSatti/theme/Magento_Theme/web/css

<?xml version="1.0"?>
<page xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:framework:View/Layout/etc/page_configuration.xsd">
    <head><link src="css/mystyle.css"/></head>
</page>

If you want it to add css from module xml then create cms_inde_index.xml in following path.

app/code/QaisarSatti/view/HelloWorld/frontend/layout/cms_inde_index.xml

mystyle.css location will

app/code/QaisarSatti/view/HelloWorld/frontend/web/css

<?xml version="1.0"?>
<page xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:framework:View/Layout/etc/page_configuration.xsd">
    <head><link src="FME_GoogleMapsStoreLocator::css/mystyle.css"/></head>
</page>
Author: Qaisar Satti
Category: Magento 2
Last Modified: August 7, 2018


Magento 2 default value system configuration

Today we discuss about Magento 2 default value system configuration.This tutorial include how you can add your default value for system configuration in input, dropdwon, multiselect and other field too. So let’s start with our example.

Create system.xml

First step is create system.xml in following directory.

QaisarSatti/HelloWorld/etc/adminhtml/

<?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="qaisarsatti_helloworld" translate="label" sortOrder="200">
                <label>QaisarSatti HelloWorld</label>
            </tab>
        <section id="helloworld" translate="label" type="text" sortOrder="100" showInDefault="1" showInWebsite="1" showInStore="1">
            <label>HelloWorld COnfiguration</label>
            <tab>qaisarsatti_helloworld</tab>
            <resource>qaisarsatti_helloworld::config</resource>
            <group id="general" translate="label" type="text" sortOrder="10" showInDefault="1" showInWebsite="1" showInStore="1">
                <label>General</label>
                <field id="enabled" translate="label" type="select" sortOrder="1" showInDefault="1" showInWebsite="1" showInStore="1">
                    <label>Enabeld </label>
                    <source_model>Magento\Config\Model\Config\Source\Yesno</source_model>
                </field>
                <field id="title" translate="label" type="text" sortOrder="5" showInDefault="1" showInWebsite="1" showInStore="1">
                    <label>Title</label>
                </field>                                            
            </group>
        </section>
    </system>
</config>

Create Config.xml

Create config.xml in following directory.

QaisarSatti\HelloWorld\etc\config.xml

Use section id than group id and at the end field id.

<?xml version="1.0"?>
     <config xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
    xsi:noNamespaceSchemaLocation="urn:magento:module:Magento_Store:etc/config.xsd">
        <default>
            <helloworld>
                <general>
                    <enabled>1</enabled>
                </general>
            </helloworld>
        </default>
    </config>
Author: Qaisar Satti
Category: Magento 2
Last Modified: August 6, 2018


Magento 2 add link customer navigation

Today we discuss about Magento 2 add link customer navigation.This tutorial include how you can add your custom link in customer account navigation, Magento 2 add link customer navigation. So let’s start with our example.

If you are adding it from theme layout then create default.xml in following path.

app/design/frontend/QaisarSatti/theme/Magento_Theme/layout/default.xml

<?xml version="1.0"?>
<!--
/**
 * Copyright © 2016 Magento. All rights reserved.
 * See COPYING.txt for license details.
 */
-->
<page xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:framework:View/Layout/etc/page_configuration.xsd">
    <body>  

    <referenceBlock name="customer_account_navigation">
                <block class="Magento\Customer\Block\Account\SortLinkInterface" name="test-link">
                    <arguments>
                        <argument name="path" xsi:type="string">test/controller/action</argument>
                        <argument name="label" xsi:type="string">Test Link</argument>
                         <argument name="sortOrder" xsi:type="number">150</argument>
                    </arguments>
                </block>
    </referenceBlock>

  </body>
</page>

Or you want it to add from module layout then create default.xml in following path.

app/code/QaisarSatti/view/HelloWorld/frontend/layout/default.xml

<?xml version="1.0"?>
<!--
/**
 * Copyright © 2016 Magento. All rights reserved.
 * See COPYING.txt for license details.
 */

-->
<page xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:framework:View/Layout/etc/page_configuration.xsd">
    <body>  

    <referenceBlock name="customer_account_navigation">
                <block class="Magento\Customer\Block\Account\SortLinkInterface" name="test-link">
                    <arguments>
                        <argument name="path" xsi:type="string">test/controller/action</argument>
                        <argument name="label" xsi:type="string">Test Link</argument>
                         <argument name="sortOrder" xsi:type="number">150</argument>
                    </arguments>
                </block>
    </referenceBlock>

  </body>
</page>
Author: Qaisar Satti
Category: Magento 2
Last Modified: August 6, 2018


Magento 2 change admin session duration

Today we discuss about Magento 2 change admin session duration.Sometime you need to increase the timing of session of your admin. Mostly developer while coding and testing need the admin session to stay there as they switch between browsers pages and editor . Increasing the life of session helps them to avoid logging in to admin again and again.

Login to admin panel and go to

Stores->Settings->Configuration->Advanced->Admin->Security->Admin Session Lifetime (seconds)

And check screenshot following.
Admin session duration

Author: Qaisar Satti
Category: Magento 2
Last Modified: July 31, 2018


Magento 2 enable disable maintenance mode

Today we discuss about Magento 2 enable disable maintenance mode.Sometime you want to put your website on maintenance mode or some action cause the maintenance mode. Now i will tell you how to enable or disable module and enable maintenance mode with given ip addresses. So let’s start with our example.

Enable maintenance mode

To enable maintenance mode use following command.

bin/magento maintenance:enable

Disable maintenance mode

To disable maintenance mode use following command.

bin/magento maintenance:disable

Enable maintenance mode with ip

To Enable maintenance mode with ip use following command. For example we want To enable maintenance mode for all clients except 192.0.2.10 and 192.0.2.11.

bin/magento maintenance:enable --ip=192.0.2.10 --ip=192.0.2.11
Author: Qaisar Satti
Category: Magento 2
Last Modified: July 31, 2018


Magento 2 set Deploy mode

Today we discuss about Magento 2 set deploy mode. There are three deploy mode available in magento 2 Default . Developer and Production mode. These three mode have different kind of behavior. So let talk about deploy mode in details. You can set deploy mode with following command.

Set deploy mode

php bin/magento deploy:mode:set

Show deploy mode

php bin/magento deploy:mode:show

Default Mode:

This is by default when new magento 2 installed. Following behavior default mode have.

  • errors logged in var/report, not displayed
  • static created dynamically – copied! changes not visible. cached

Developer Mode:

Developer mode is min speed. You can set developer mode with following command.

php bin/magento deploy:mode:set developer
  • exceptions displayed, not logged
  • exception thrown if bad event subscriber.
  • var/report detailed
  • static created dynamically – symlinked???, changes visible immediately
  • error handler – throws exception instead of logging (notice etc.)

Production Mode

Production mode have max speed, no errors, no file generation. You can set production mode with following command.

php bin/magento deploy:mode:set production
  • admin can’t enable/disable cache types
  • errors logged, not displayed
  • static not created dynamically, must be deployed
  • not need for www-data to write, pub/static can be read-only
Author: Qaisar Satti
Category: Magento 2
Last Modified: July 30, 2018


Magento 2 addAttributeToFilter

Today we discuss Magento 2 addAttributeToFilter. addAttributeToFilter is a method that can be called on EAV collections in Magento 2. That will be use in product collection, category collection, order collection customer collection and other collection too. addAttributeToFilter is adding WHERE condition in Mysql question to get collection.

addAttributeToFilter condition

There are many condition you can use with addAttributeToFilter. Example of condition equal, not equal, like , not like, in, not in, null, not null, greater than , less than , greater than equal to and less than equal to.

protected $_productCollectionFactory;

public function __construct(
        \Magento\Catalog\Model\ResourceModel\Product\CollectionFactory $productFactory
    ) {
        $this->_productCollectionFactory = $productFactory;
    }
    public function getProductCollection()
    {
      return   $this->_productCollectionFactory->create()->addAttributeToSelect('*')->addAttributeToFilter('sku’,’test’);
     
     }

Equal: eq

Now we use equal to filter production collection.

$this->_productCollectionFactory->addAttributeToFilter('status', array('eq' => 1)); // Using the operator
$this->_productCollectionFactory->addAttributeToFilter('status', 1); // Without using the operator

Not Equals – neq

Now we use not equal to filter production collection.

$this->_productCollectionFactory->addAttributeToFilter('sku', array('neq' => 'test-product'));

Like – like

Now we use Like to filter production collection.

$this->_productCollectionFactory->addAttributeToFilter('sku', array('like' => 'UX%'));

Not Like – nlike

Now we use not like to filter production collection.

$this->_productCollectionFactory->addAttributeToFilter('sku', array('nlike' => 'err-prod%'));

In – in

Now we use In to filter production collection.

$this->_productCollectionFactory->addAttributeToFilter('entity_id', array('in' => array(1,4,98)));

Not In – nin

Now we use not In to filter production collection.

$this->_productCollectionFactory->addAttributeToFilter('entity_id', array('nin' => array(1,4,98)));

NULL – null

Now we use null to filter production collection.

$this->_productCollectionFactory->addAttributeToFilter('description', array('null' => true));

Not NULL – notnull

Now we use not null to filter production collection.

$this->_productCollectionFactory->addAttributeToFilter('description', array('notnull' => true));

Greater Than – gt

Now we use greater than to filter production collection.

$this->_productCollectionFactory->addAttributeToFilter('entity_id', array('gt' => 5));

Less Than – lt

Now we use less than to filter production collection.

$this->_productCollectionFactory->addAttributeToFilter('entity_id', array('lt' => 5));

Greater Than or Equals To- gteq

Now we use greater than to filter production collection.

$this->_productCollectionFactory->addAttributeToFilter('entity_id', array('gteq' => 5));

Less Than or Equals To – lteq

Now we use less than equal to filter production collection.

$this->_productCollectionFactory->addAttributeToFilter('entity_id', array('lteq' => 5));
Author: Qaisar Satti
Category: Magento 2
Last Modified: July 30, 2018


Pages:12345678...18