Monday, November 16, 2015

How to load custom module js file in magento 2 ?


Step 1: Add your module js file under <Vendor>/<Module_Name>/view/<area>/web/js/
e.g. <Vendor>/<Module_Name>/view/<area>/web/js/flexslider.js

Step 2: Create requirejs-config.js file under <Vendor>/<Module_Name>/view/<area>/
e.g. <Vendor>/<Module_Name>/view/<frontend>/requirejs-config.js
Add following code to  requirejs-config.js
var config = {
    map: {
        '*': {
            bannerslider: 'VendorName_ModuleName/js/flexslider'
        }
    }
};
 
Note: you may set your object name as per your choice. In my case I have set as bannerslider and do not add the .js extension to file name in VendorName_ModuleName/js/flexslider

Step 3: Call the function of your module js in .phtml file as following manner.
 
<script type="text/javascript">
    require(['jquery','bannerslider'],function($){
        $(window).load(function() {
            $('.flexslider-8').flexslider({
                animation: "fade",
                controlNav: "thumbnails",
                slideshowSpeed: 2000,
                minItems: 2,
                maxItems: 4
            });
        });

    });
</script>
Its working fine for me.
Trace : Use Net tab to see requested URL of js file loaded or not.


Note: better to use 'domReady!' plugin instead of $(window).load(), for example require(['jquery','bannerslider', 'domReady!],function($) { ...code execute only after dom load}) 

How to call a PHTML file within a CMS page Magento 2 ?

To call a phtml file in a cms page or cms static block:

{{block class="Magento\Framework\View\Element\Template" template="PackageName_ModuleName::your_template.phtml"}}
 
If you know, where the block file(php file) for your phtml file resides, then you can use it as type.
Example: Suppose you want to call new.phtml file that resides in catalog/product folder, and you know that its corresponding Block file(php file) resides in Catalog/Product folder, then you can use:

{{block class="Magento\Framework\View\Element\Template" template="PackageName_ModuleName::catalog/new.phtml"}}
 
 
 

How to add custom/new theme name to grunt CLI command to run grunt tool in Magento 2 ?

When you cloned new theme from existing parent theme in Magento 2. How you can execute less:newThemName command using grunt CLI ?
As well as how grunt watch will look any changes into newly created theme ?

Don't worry you can do it easily using following steps.

Goto \dev\tools\grunt\configs, Open themes.js and add the part as shown in the image.


Now Open less.js and add the part shown in the image.


 Now you can run grunt less:luma2 task, and it will generate the pub static files for the theme

when ever you add new theme, you will need to add its details to the to files mentioned above.

Error 404 not found at magento 2 admin login page after migrated to another system

This is a general error, usually occurs when you transfer your magento-2 installation from one location to another. The reason behind this error is that the value store_id and website_id for the admin should be 0 , but when you import the database to a new server, somehow these values are not set to 0.
So to solve this error you will need to make some changes in the database tables itself.


SET FOREIGN_KEY_CHECKS=0; 
UPDATE store SET store_id = 0 WHERE code='admin'; 
UPDATE store_group SET group_id = 0 WHERE name='Default'; 
UPDATE store_website SET website_id = 0 WHERE code='admin'; 
UPDATE customer_group SET customer_group_id = 0 WHERE customer_group_code='NOT LOGGED IN'; 
SET FOREIGN_KEY_CHECKS=1;

How to redirect non-www URLs to www?

In order to redirect all of the requests for example.com to www.example.com, you should set the appropriate rewrite rule. This can be done by adding the following lines at the beginning of the .htaccess file in your public_html folder:


RewriteEngine On
RewriteCond %{HTTP_HOST} ^example.com [NC]
RewriteRule ^(.*)$ http://www.example.com/$1 [L,R=301]

From now on, when someone accesses http://example.com he/she will be redirected to http://www.example.com.