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.'
]
);
}
}
}