Magento 2 : How to add a knockout component
We can add a knockout component to add some javascript behaviour in our pages. This is how to do it step by step.
1 . In the existing template, in which you want to include the knockout component, you first need to declare the component using the declarative notation and using the <script type="text/x-magento-init" /> tag.
This allows you to specify the component, basically the js file and the associated template.
<script type="text/x-magento-init">
{
"#demo-component-container": {
"Magento_Ui/js/core/app": {
"components": {
"demo-ko-component": {
"component" : "MyNamespace_MyModule/js/ko-component",
"config" : {
"template": "MyNamespace_MyModule/ko-template"
}
}
}
}
}
}
</script>2. In the same template, you then need to declare the container that will receive the component.
<div id="demo-component-container" data-bind="scope: 'demo-ko-component'">
<!-- ko template: getTemplate() --><!-- /ko -->
</div>3. You need to create the js component.
It has to be place in app/code/MyNamespace/MyModule/view/frontend/web/js/ko-component.js.
For the purpose of the example, we are simply setting a property inputValue that we will use in the template.
/**
* @license http://opensource.org/licenses/osl-3.0.php Open Software License (OSL 3.0)
* @author Didier Berlioz <berliozd@gmail.com>
* @copyright Copyright (c) 2016 Addeos (http://www.addeos.com)
*/
define(['jquery', 'uiComponent', 'ko'], function ($, Component, ko) {
'use strict';
return Component.extend({
initialize: function () {
this._super();
this.inputValue = ko.observable('my input value');
}
});
}
);
4. You need to create the component template.
It will be placed here app/code/Namespace/Module/view/frontend/web/template/ko-template.html .
As said earlier, in the template we will just bind an input tag with the property inputValue set in the js component.
<p>Here is my knockout template.</p> <input type="text" data-bind="value: inputValue">
And that's all.
Magento 2 : How to create a store, a store group and a website programmatically
Whenever it comes during your projects, you can need to create a new store, a new store group and a new website. You can do it programmatically.
A store refers a store group to which "it is part" and a store group refers a website to "which it is part". But a website also refers a default store group and and store group refers a default store.
You then need to decide what entity to create first, refer to other entities and then change the references after having created the final entities. The solution I have decided to use is to create the website, then the store group and finally the store.
The following code have to be place in an installer file (InstallData.php or UpgradeData.php placed in the Setup folder of a module. The class have to implements either \Magento\Framework\Setup\UpgradeDataInterface or \Magento\Framework\Setup\InstallDataInterface.
<?php
namespace Addeos\Core\Setup;
use Magento\Framework\Event\ManagerInterface;
use Magento\Framework\Setup\ModuleContextInterface;
use Magento\Framework\Setup\ModuleDataSetupInterface;
use Magento\Framework\Setup\UpgradeDataInterface;
use Magento\Store\Model\ResourceModel\Group as GroupResourceModel;
use Magento\Store\Model\ResourceModel\Store as StoreResourceModel;
use Magento\Store\Model\ResourceModel\Website as WebsiteResourceModel;
use Magento\Store\Model\GroupFactory;
use Magento\Store\Model\StoreFactory;
use Magento\Store\Model\WebsiteFactory;
class UpgradeData implements UpgradeDataInterface
{
/**
* UpgradeData constructor.
* @param Installer $installer
* @param ManagerInterface $eventManager
* @param WebsiteResourceModel $websiteModel
* @param GroupResourceModel $groupModel
* @param StoreResourceModel $storeModel
* @param WebsiteFactory $websiteFactory
* @param GroupFactory $groupFactory
* @param StoreFactory $storeFactory
*/
public function __construct(
Installer $installer,
ManagerInterface $eventManager,
WebsiteResourceModel $websiteModel,
GroupResourceModel $groupModel,
StoreResourceModel $storeModel,
WebsiteFactory $websiteFactory,
GroupFactory $groupFactory,
StoreFactory $storeFactory,
) {
$this->installer = $installer;
$this->eventManager = $eventManager;
$this->websiteResourceModel = $websiteModel;
$this->groupResourceModel = $groupModel;
$this->storeResourceModel = $storeModel;
$this->websiteFactory = $websiteFactory;
$this->groupFactory = $groupFactory;
$this->storeFactory = $storeFactory;
}
public function upgrade(ModuleDataSetupInterface $setup, ModuleContextInterface $context)
{
if (version_compare($context->getVersion(), '1.0.4', '<')) {
$this->createEntities();
}
}
private function createEntities()
{
/** @var Magento\Store\Model\Website $website */
$website = $this->websiteFactory->create();
$website->setCode('website_code');
$website->setName('website name');
// Set an existing store group id
$website->setDefaultGroupId(2);
$this->websiteResourceModel->save($website);
/** @var \Magento\Store\Model\Group $group */
$group = $this->groupFactory->create();
$group->setWebsiteId($website->getWebsiteId());
$group->setName('store group name');
// Set the category id for the root category of the store group
$group->setRootCategoryId(2);
// Set an existing store id
$group->setDefaultStoreId(3);
$this->groupResourceModel->save($group);
/** @var \Magento\Store\Model\Store $store */
$store = $this->storeFactory->create();
$store->setCode('store_code');
$store->setName('store name');
$store->setWebsite($website);
$store->setGroupId($group->getId());
$store->setData('is_active', '1');
$this->storeResourceModel->save($store);
$this->eventManager->dispatch('store_add', ['store' => $store]);
// change the default group id for the website
$website->setDefaultGroupId($group->getId());
$this->websiteResourceModel->save($website);
// change the default store id for the store group
$group->setDefaultStoreId($store->getId());
$this->groupResourceModel->save($group);
}
}
Magento 2 : How to add and update a database table column
It's often necessary to update database tables when working on module. We can need to add columns or update some of them.
The following codes have to be in the installer files of the module you are working in. They can be either InstallSchema.php or UpgradeSchema.php. These files have to be placed in the Setup folder of the module.
In the following code example, we are adding a column to an existing table. We assume we are working on a newly created module that hasn't been installed yet. Therefore we are working on the InstallSchema.php file. The implemented function is "install".
<?php
namespace Addeos\MyModule\Setup;
use Magento\Framework\DB\Ddl\Table;
use Magento\Framework\Setup\ModuleContextInterface;
use Magento\Framework\Setup\SchemaSetupInterface;
use Magento\Framework\Setup\InstallSchemaInterface;
class InstallSchema implements InstallSchemaInterface
{
public function install(SchemaSetupInterface $setup,
ModuleContextInterface $context)
{
$installer->getConnection()
->addColumn($installer->getTable('my_table_name'),
'my_column_name',
[
'type' => Table::TYPE_SMALLINT,
'nullable' => false,
'comment' => 'Write here a comment that will
be visible in when looking at the table info in mysql'
]);
}
}Here we are updating a column in the same table. We are then upgrading the module which has already been installed. Therefore, we are in the UpdgradeSchema.php file. We assume this new version will be 1.0.1. The implemented function is "upgrade" this time.
<?php
namespace Addeos\MyModule\Setup;
use Magento\Framework\DB\Ddl\Table;
use Magento\Framework\Setup\ModuleContextInterface;
use Magento\Framework\Setup\SchemaSetupInterface;
use Magento\Framework\Setup\UpgradeSchemaInterface;
class UpgradeData implements UpgradeDataInterface
{
public function upgrade(SchemaSetupInterface $setup,
ModuleContextInterface $context)
{
if (version_compare($context->getVersion(), '1.0.1', '<')) {
$setup->getConnection()
->changeColumn(
$installer->getTable('my_table_name'),
'my_column_name',
'my_column_name', [
'type' => Table::TYPE_SMALLINT,
'nullable' => true,
'comment' => 'You still have to write again the comment
otherwise it be lost.'
]
);
}
}
}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.
