:::: MENU ::::
Monthly Archives: August 2018

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


Pages:12