?> 2018 - Addeos

Yearly Archive 13 July 2018

Magento 2 : How to add a logging function when debugging

When debugging, it might be necessary to add some logs.
Here is a simple way to add a logging function in your code.
Warning :
This is not supposed to stay in your code and is only for debugging purpose.
There are better and more integrated ways of doing it

<?php
/**
* @param $str
*/ 
private function log($str) { 
    $str = 'CLASS : ' . str_pad(__CLASS__, 50, ' ')
            . ' - LINE : ' . str_pad(debug_backtrace()[0]['line'], 4, ' ')
            . ' - FUNCTION : ' . str_pad(debug_backtrace()[1]['function'] , 15, ' ')
            . ' - STR : ' . $str;
    $objectManager = \Magento\Framework\App\ObjectManager::getInstance(); 
    /** @var \Magento\Framework\Filesystem\DirectoryList $directory */ 
    $directory = $objectManager->get('\Magento\Framework\Filesystem\DirectoryList');
    $rootPath = $directory->getPath(\Magento\Framework\App\Filesystem\DirectoryList::VAR_DIR); 
    $logger = new \Zend\Log\Logger();
    $writer = new \Zend\Log\Writer\Stream($rootPath . '/log/zendlog.log'); 
    $logger->addWriter($writer);
    $logger->debug($str); 
}

Linux : Searching files on linux

When debugging and application, it is very common to need to search for files on the system.
You might need to search for a file named in a certain way or you might need to search for file that contain a specific word or specifics characters.

Here is how to search a file by its name :

find . -name *js-translation.json*

Here, we are searching for a file having "js-translation.json" in the name, recursively in the current folder.

And here is how to search a file with a character phrase or pattern :

grep -Hrn -A 2 -B 2 'translation' .

Here we are searching files having "translation" in the content, also recursively in the current folder

Magento 2 : How to add a jquery widget

When you need to add javascript in your magento 2, one solution is to implement a jQuery widget.
It's pretty simple and straight forward.
This is how to do it step by step.

1. In the phtml template, your need to specify the component that will be available for the dom element :

<script type="text/x-magento-init">
{
  “#dom-id": {
    “componentName": {}
  }
}
</script>

Here componentName will be available for #dom-id

2. Then add the require js config
In <namespace>/<module>/view/frontend/requirejs-config.js add :

var config = {
map: {
    '*': {
      componentName: 'Namespace_Module/js/component'
    }
  }
};

Here you specify that the component componentName will map <namespace>/<module>/js/component.
In other words it will map : /app/code/<namespace>/<module>/view/frontend/web/js/component.js

3. Then create the jQuery widget itself :

In /<namespace>/<module>/view/frontend/web/js/component.js
Add the following code :

define(['jquery','moment'], function ($, moment) {
      'use strict';

      $.widget('<namespace>.<module>', {
         _create: function () {
            Console.log(‘boo’);
          }
     });
     return $.<namespace>.<module>;
});

And that's it.