• записи
    2
  • комментариев
    9
  • просмотра
    1 652

Авторы блога:

Об этом блоге

Записи в этом блоге

klierik

Привет, друзья.

Заметка может быть интересна front-end разработчикам, которые начинают изучение Magento 2 CMS (одной из самых популярных систем управления интернет-магазинами). Предполагается что разработка ведётся в рамках кастомной темы под M2.

Если говорить о самой задаче то, конечно же, спрятать уведомление после указанного времени особого труда не составит. Вопрос скорее в другом — как это реализовать в рамках Magento2, где властвует requirejs и несколько иная, по сравнению с Magento1, иерархия директорий?

Для выполнения поставленной задачи давай воспользуемся html-файлом, который размещается по пути:

magento/vendor/magento/module-theme/view/frontend/templates/messages.phtml

с содержимым:

Скрытый текст

<?php
/**
 * Copyright © 2016 Magento. All rights reserved.
 * See COPYING.txt for license details.
 */
?>
<div data-bind="scope: 'messages'">
    <div data-bind="foreach: { data: cookieMessages, as: 'message' }" class="messages">
        <div data-bind="attr: {
            class: 'message-' + message.type + ' ' + message.type + ' message',
            'data-ui-id': 'message-' + message.type
        }">
            <div data-bind="html: message.text"></div>
        </div>
    </div>
    <div data-bind="foreach: { data: messages().messages, as: 'message' }" class="messages">
        <div data-bind="attr: {
            class: 'message-' + message.type + ' ' + message.type + ' message',
            'data-ui-id': 'message-' + message.type
        }">
            <div data-bind="html: message.text"></div>
        </div>
    </div>
</div>
<script type="text/x-magento-init">
    {
        "*": {
            "Magento_Ui/js/core/app": {
                "components": {
                        "messages": {
                            "component": "Magento_Theme/js/view/messages"
                        }
                    }
                }
            }
    }
</script>

 

Давай скопируем его в кастомную тему по адресу:

magento/app/design/frontend/HTMLForum/default/Magento_Theme/templates/messages.phtml

где "HTMLForum/default" — это "Vendor/theme"

В рамках задачи нам требуется спрятать системное уведомление через заданное кол-во времени. Для этого можно воспользоваться колбеком knockoutjs.com — afterRender().

Мне кажется правильнее было бы выполнить Messages.extend({}) в новом компоненте, но мои попытке не увенчались успехом на момент написания статьи. Я внесу обновления в текущую заметку когда буду знать более корректный путь для реализации поставленной задачи.

В M2 существуют 2 варианта вывода уведомлений:

  • В результате перезагрузки страницы (на пример, добавление продукта на странице продукта)
  • В результате ajax-запроса (на пример, добавление продукта на странице каталога)

В вышеуказанном шаблоне содержатся оба варианта. Пример ф-ии которая будет вызвана после рендеринга уведомления:

afterRender: function(e){
    setTimeout(function () {
        jQuery(e).fadeOut()
    }, 5000);
}

где "5000" — это время ожидания в мс.

Её мы используем для обоих вариантов следующим образом:

<?php
/**
 * Copyright © 2016 Magento. All rights reserved.
 * See COPYING.txt for license details.
 */
?>
<div data-bind="scope: 'messages'">
    <div data-bind="foreach: { data: cookieMessages, as: 'message' }" class="messages">
        <div data-bind="attr: {
            class: 'message-' + message.type + ' ' + message.type + ' message',
            'data-ui-id': 'message-' + message.type
        },
        afterRender: function(e){
            setTimeout(function () {
                jQuery(e).fadeOut()
            }, 5000);
        }">
            <div data-bind="html: message.text"></div>
        </div>
    </div>
    <div data-bind="foreach: { data: messages().messages, as: 'message' }" class="messages">
        <div data-bind="attr: {
            class: 'message-' + message.type + ' ' + message.type + ' message',
            'data-ui-id': 'message-' + message.type
        },
        afterRender: function(e){
            setTimeout(function () {
                jQuery(e).fadeOut()
            }, 5000);
        }
        ">
            <div data-bind="html: message.text"></div>
        </div>
    </div>
</div>
<script type="text/x-magento-init">
    {
        "*": {
            "Magento_Ui/js/core/app": {
                "components": {
                        "messages": {
                            "component": "Magento_Theme/js/view/messages"
                        }
                    }
                }
            }
    }
</script>

Вот, собственно, и всё.

Почисти кеш, запусти деплой (или пересоздай симлинки + билд стилей темы через Grunt) и обнови страницу.

klierik

Привет, друзья.

Дебютная статья Блога — Как установить Magento Community Edition 2.0 на локальный компьютер используя Vagrant?

Home Page 2017-01-03 21-35-11.png

О чём статья и кому она будет интересна под спойлером.

Скрытый текст

Данная статья расчитана на разработчика, который владеет опытом "поднятия" веб-сервера и настройкой системы под CMS используя Терминал.

Magento — одна из самых популярных открытых CMS для организации электронной коммерции в сети: на базе платформы первой версии создано более 100 тыс. интернет-магазинов, сторонними разработчиками создано более 2 тысяч расширений, сообщество проекта насчитывает около 375 тыс. участников.

В данной статье мы рассмотрим вариант установки Magento 2 на кампьютер разработчика в виртуальную среду используя Vagrant. Данное решение позволяет быстро установить и настроить очередной проект для команды разработчиков, избегая возможных конфликтов между остальными текущими проектами в компании (путём создания отдельной виртуальной среды под каждый проект).

 

1. Среда установки.

1.1 Технические характеристики

В качестве "железа" использовался MacBook Pro (Retina, 15-inch, Mid 2015)

  • ОС: macOS Sierra v10.12.2
  • Процессор: 2.5 GHz Intel Core i7
  • Память: 16 GB 1600 MHz DDR3

Для виртуальной машины будет выделено 4GB памяти и 2 ядра ЦП

1.2 Предустановленное ПО

Для установки и последующего запуска Magento 2 (далее M2) использовался следущий набор предустановленного ПО:

  1. Git (2.3.8)
  2. Vagrant (1.8.7) и следующие плагины
    1. vagrant-hostmanager (1.8.5)
    2. vagrant-share (1.1.5, system) —автоматически устанавливается при установке Vagrant
    3. vagrant-bindfs (0.4.11) — опционально, повышает работу чтения\записи share-директорий между Host<->Guest системами
    4. vagrant-vmware-fusion (4.0.14) — опционально, платное. Требуется для работы с VmWare Fusion (работает шустрее чем VirtualBox)
  3. VirtualBox (5.1.8 r111374/Qt5.5.1)
  4. VmWare Fusion (8.0.1 3094680) — опционально, при использовании Fusion вместо VirtualBox. 

1.3 Виртуальная система

В качестве виртуальной системы будет использована Ubuntu 16.04 с установленными: MariaDB, Nginx 1.8.x, PHP 7.0.x

2. Подготовка проекта

2.1 Клонирование репозитория

Предположим что проект будет размещаться по пути /http/htdocs/mage2/. Для начала клонируем последнюю версию M2 используя Git с Magento2 репозитория (клонирование может занять 5-10+ минут, потребуется загрузить ~300МБ):

$ cd /http/htdocs/mage2/
$ git clone git@github.com:magento/magento2.git
Cloning into 'magento2'...
Warning: Permanently added the RSA host key for IP address '192.30.253.112' to the list of known hosts.
remote: Counting objects: 1256725, done.
remote: Compressing objects: 100% (3342/3342), done.
remote: Total 1256725 (delta 2112), reused 0 (delta 0), pack-reused 1252504
Receiving objects: 100% (1256725/1256725), 307.22 MiB | 493.00 KiB/s, done.
Resolving deltas: 100% (690976/690976), done.
Checking connectivity... done.
Checking out files: 100% (26047/26047), done.

На момент написания статьи в репозитории находилась Magento 2 версии "2.2.0-dev".

2.2 Подготовка Vagrant

По адресу https://github.com/klierik/magento2-vagrant/tree/virtualbox__ubuntu16-nginx-mariadb-php7 доступна настройка для Vagrant которая установит ОС и базовое ПО.

Нам потребуется скачать и распаковать один из предложенных файлов в директорию с проектом.

В итоге структура директорий будет следующая:

Скрытый текст

# /http/htdocs/mage2
.
├── magento2
│   ├── CHANGELOG.md
│   ├── CONTRIBUTING.md
│   ├── COPYING.txt
│   ├── Gruntfile.js.sample
│   ├── ...
│   └── vendor
└── vagrant
    ├── Vagrantfile                         // Файл настроек виртуальной машины (домен, ip, ядра процессора и память, шаринг директорий, права)
    └── provision
        ├── nginx
        │   ├── magento-nginx.conf.sample   // Настройки Nginx для запуска Magento 2 CMS
        │   ├── magento.conf                // Настройки веб-сервера magento2.dev
        │   └── nginx.conf                  // Настройки Nginx
        ├── php-fpm
        │   └── www.conf                    // Файл настроек для php-fpm
        └── provision.sh                    // Конфигурационный файл, который запускает ряд команд полсе установки системы (установка nginx, mysql, php, etc...)

 

2.3 Установка среды Vagrant с VirtualBox

Следующим шагом будет установка Ubuntu 16 (xenial64) и требуемого для запуска М2 ПО.

Перейди в vagrant/ директорию проекта и выполни команду (при установке может потребоваться пароль администратора):

$ cd /http/htdocs/mage2/vagrant

Далее возможена установка на выбор использую ту или иную среду виртуализации:

$ vagrant up --provider=virtualbox
$ vagrant up --provider=vmware_fusion

Установка протекает приблизительно так...

Скрытый текст

$ vagrant up
Bringing machine 'magento2' up with 'virtualbox' provider...
==> magento2: Importing base box 'ubuntu/xenial64'...
==> magento2: Matching MAC address for NAT networking...
==> magento2: Checking if box 'ubuntu/xenial64' is up to date...
==> magento2: A newer version of the box 'ubuntu/xenial64' is available! You currently
==> magento2: have version '20161109.1.0'. The latest is version '20161221.0.0'. Run
==> magento2: `vagrant box update` to update.
==> magento2: Setting the name of the VM: vagrant_magento2_1483461735075_50699
==> magento2: Fixed port collision for 22 => 2222. Now on port 2200.
==> magento2: Clearing any previously set network interfaces...
==> magento2: Preparing network interfaces based on configuration...
...
==> magento2: Processing triggers for ureadahead (0.100.0-19) ...
==> magento2: ==================================================
==> magento2: INSTALL COMPOSER
==> magento2: ==================================================
==> magento2: All settings correct for using Composer
==> magento2: Downloading...
==> magento2:
==> magento2: Composer (version 1.3.0) successfully installed to: /home/ubuntu/composer.phar
==> magento2: Use it: php composer.phar
==> magento2:
==> magento2:
==> magento2: ==================================================
==> magento2: CLEANING...
==> magento2: ==================================================
==> magento2: Reading package lists...
==> magento2: Building dependency tree...
==> magento2: Reading state information...
==> magento2: 0 upgraded, 0 newly installed, 0 to remove and 70 not upgraded.
==> magento2: Reading package lists...
==> magento2: Building dependency tree...
==> magento2: Reading state information...
==> magento2: ==================================================
==> magento2: ============= INSTALLATION COMPLETE ==============
==> magento2: ==================================================

 

После установки системы при открытии страницы http://magento2.dev/ в браузере сервер, скорее всего, вернёт ошибку (это нормально):

Скрытый текст
Цитата

magento2.dev 2017-01-04 14-28-57.png

 

2.3 Установка среды Vagrant с VmWare, NFS или BindFS

Для повышения скорости работы системы можно воспользоваться альтернативными путями монтирования.
В случае если поддерживается NFS, то вместо Default в разделе "Synced folder" раскоментировать следующее:

# Synced folder
## Default
# config.vm.synced_folder "../magento2/", "/var/www/magento2", id: "ubuntu", owner: "ubuntu", group: "www-data", mount_options: ["dmode=775,fmode=664"]

## Sync with NFS
config.vm.synced_folder "../magento2/", "/var/www/magento2", nfs: true, mount_options: ["nolock", "async"], bsd__nfs_options: ["alldirs","async","nolock"]

Но, как показывает практика, NFS не всегда "заводится" с полипнка. У меня этот подход перестал работать пару лет назад после обновления OS. Немного позже я наткнулся на BindFs которым, как правило, и пользуюсь. Его использовать надо вместо Default:

# Synced folder
## Default
# config.vm.synced_folder "../magento2/", "/var/www/magento2", id: "ubuntu", owner: "ubuntu", group: "www-data", mount_options: ["dmode=775,fmode=664"]

## Sync with vagrant-bindfs
config.vm.synced_folder     "../magento2/", "/vagrant-nfs", type: "nfs"
config.bindfs.bind_folder   "/vagrant-nfs", "/var/www/magento2/", owner: "www-data", group: "vagrant", perms: "u=rwx:g=rwx:o=rwx"

Сохраняем и выполняем команду с указанным провайдером

$ vagrant up --provider=vmware_fusion

3. Пост-установка и настройка Magento 2

После успешной установки Ubuntu давай авторизируемся в неё. Для этого перейди в директорию vagrant/ и выполни команду:

$ cd /http/htdocs/mage2/vagrant
$ vagrant ssh
Welcome to Ubuntu 16.04.1 LTS (GNU/Linux 4.4.0-47-generic x86_64)
...
Last login: Tue Jan  3 17:03:09 2017 from 10.0.2.2
ubuntu@magento2:~$

3.1 Установка зависимостей

Далее следует скачать и установить зависимости для корректной работы M2. Для этого следует перейти в директорию M2 и выполнить установку модулей:

$ cd /var/www/magento2 && composer install

Установка займёт какое-то время, привожу краткий её лог:

Скрытый текст

$ cd /var/www/magento2 && composer install
Do not run Composer as root/super user! See https://getcomposer.org/root for details
Loading composer repositories with package information
Installing dependencies (including require-dev) from lock file
Package operations: 84 installs, 0 updates, 0 removals
  - Installing magento/magento-composer-installer (0.1.11) Downloading: 100%
  - Installing braintree/braintree_php (3.7.0) Downloading: 100%
  - Installing colinmollenhour/cache-backend-file (1.4.0) Downloading: 100%
  - Installing colinmollenhour/cache-backend-redis (1.9) Downloading: 100%
  - Installing magento/zendframework1 (1.12.16-patch1) Downloading: 100%
  - Installing colinmollenhour/credis (1.6) Downloading: Connecting...
...
lusitanian/oauth suggests installing predis/predis (Allows using the Redis storage backend.)
lusitanian/oauth suggests installing symfony/http-foundation (Allows using the Symfony Session storage backend.)
symfony/dependency-injection suggests installing symfony/expression-language (For using expressions in service container configuration)
symfony/dependency-injection suggests installing symfony/proxy-manager-bridge (Generate service proxies to lazy load them)
phpunit/php-code-coverage suggests installing ext-xdebug (>=2.2.1)
phpunit/phpunit suggests installing phpunit/php-invoker (~1.1)
Generating autoload files
root@magento2:/var/www/magento2#

 

3.2 Настройка MariaDB (MySQL) и Создание БД

Давай, для начала, настроем непосредственно MariaDB. Для этого запустим следующую команду и выполним все предложенные шаги:

$ sudo mysql_secure_installation

Все шаги настройки под спойлером (если запуск впервые то пароль для пользователя root не установлен, так что тебе следует просто нажать Enter при запросе).

Скрытый текст

$ sudo mysql_secure_installation

NOTE: RUNNING ALL PARTS OF THIS SCRIPT IS RECOMMENDED FOR ALL MariaDB
      SERVERS IN PRODUCTION USE!  PLEASE READ EACH STEP CAREFULLY!

In order to log into MariaDB to secure it, we'll need the current
password for the root user.  If you've just installed MariaDB, and
you haven't set the root password yet, the password will be blank,
so you should just press enter here.

Enter current password for root (enter for none):
OK, successfully used password, moving on...

Setting the root password ensures that nobody can log into the MariaDB
root user without the proper authorisation.

Set root password? [Y/n] Y

New password: 
Re-enter new password:
Password updated successfully!
Reloading privilege tables..
 ... Success!


By default, a MariaDB installation has an anonymous user, allowing anyone
to log into MariaDB without having to have a user account created for
them.  This is intended only for testing, and to make the installation
go a bit smoother.  You should remove them before moving into a
production environment.

Remove anonymous users? [Y/n] n
 ... skipping.

Normally, root should only be allowed to connect from 'localhost'.  This
ensures that someone cannot guess at the root password from the network.

Disallow root login remotely? [Y/n] n
 ... skipping.

By default, MariaDB comes with a database named 'test' that anyone can
access.  This is also intended only for testing, and should be removed
before moving into a production environment.

Remove test database and access to it? [Y/n] Y
 - Dropping test database...
 ... Success!
 - Removing privileges on test database...
 ... Success!

Reloading the privilege tables will ensure that all changes made so far
will take effect immediately.

Reload privilege tables now? [Y/n] Y
 ... Success!

Cleaning up...

All done!  If you've completed all of the above steps, your MariaDB
installation should now be secure.

Thanks for using MariaDB!

 

В данной статье в качестве пара:пароль было использовано — root:password.

Теперь создай базу данных и пользователя для работы с ней. Для этого требуется выполнить следующие команды:

$ sudo mysql -u root -e "DROP DATABASE IF EXISTS magento"
$ sudo mysql -u root -e "CREATE DATABASE IF NOT EXISTS magento"
$ sudo mysql -u root -e "GRANT ALL PRIVILEGES ON magento.* TO 'magento'@'localhost' IDENTIFIED BY 'password'"
$ sudo mysql -u root -e "FLUSH PRIVILEGES"

В результате чего будут созданы:

  • База данных: magento
  • Пользователь: magento:password

3.3 Установка Magento 2

В текущей статье рассматривается вариант установки через терминал, но этот шаг можно осуществить так же при помощи Setup Wizard. Для этого следует открыть в браузере http://magento2.dev/setup/ и пройти все этапы установки (подробнее рассказывается с документации Setup Wizard installation)

Следующим же шагом мы установим непосредственно M2. Для этого давай перейдем в директорию с M2

$ cd /var/www/magento2/bin

и запустим установщик (лог выведен не полностью)

$ magento setup:install --base-url=http://magento2.dev/ \
--db-host=localhost --db-name=magento --db-user=magento --db-password=magento \
--admin-firstname=Magento --admin-lastname=User --admin-email=user@example.com \
--admin-user=admin --admin-password=admin123 --language=en_US \
--currency=USD --timezone=America/Chicago --use-rewrites=1

Starting Magento installation:
File permissions check...
[Progress: 1 / 427]
Required extensions check...
[Progress: 2 / 427]
Enabling Maintenance Mode...
[Progress: 3 / 427]
Installing deployment configuration...
...
Post installation file permissions check...
For security, remove write permissions from these directories: '/var/www/magento2/app/etc'
[Progress: 426 / 427]
Write installation date...
[Progress: 427 / 427]
[SUCCESS]: Magento installation complete.
[SUCCESS]: Magento Admin URI: /admin_xz4mt0

В конце установки выведется путь к админке (если он не был указан в команде). В результате успешной установки при открытии адреса http://magento2.dev/ браузер выдаст домашнюю страницу:

Скрытый текст

Home page 2017-01-03 20-03-24.png

Путь к админке генерировался автоматически. Так же узнать его можно выполнив команду:

$ php bin/magento info:adminuri

Admin URI: /admin_xz4mt0

Логин:пароль к AdminCP: admin:admin123

Скрытый текст

Magento Admin 2017-01-03 21-23-32.png

Dashboard : Magento Admin 2017-01-03 21-24-25.png

Так же можно задавать путь во время установки, используя опцию "--backend-frontname=adminURL", согласно документации Install the Magento software from the command line. На пример:

Скрытый текст

$ magento setup:install --base-url=http://magento2.dev/ \
--db-host=localhost --db-name=magento --db-user=magento --db-password=magento \
--admin-firstname=Magento --admin-lastname=User --admin-email=user@example.com \
--admin-user=admin --admin-password=admin123 --language=en_US \
--currency=USD --timezone=America/Chicago --use-rewrites=1 --backend-frontname=adminpanel

 

где "--backend-frontname=adminpanel" — путь к админке, http://magento2.dev/adminpanel/

Вот и всё. Установка M2 завершена удачно. Мои, тебе, поздравления. Если же хочется "пощупать" CMS с демо-данными — погнали дальше...

4. Установка Magento 2 CMS Sample data

Согласно документации существует 2 способа установки Sample Data. В рамках данной статьи мы рассмотрим установку через репозиторий.

Для начала следует перевести M2 в Developer Mode согласно документации выполнив

$ cd /var/www/magento2/bin
ubuntu@magento2:/var/www/magento2/bin$ php magento deploy:mode:show
Current application mode: default. (Note: Environment variables may override this value.)

Тем самым система сказала что текущий режим: default

Давай переключимся в developer:

$ php magento deploy:mode:set developer
Enabled developer mode.

А теперь давай вернёмся в Host (OSX). Для начала скачаем последний архив с данными со страницы по адресу: https://github.com/magento/magento2-sample-data/archive/develop.zip, на пример, в корень проекта и распакуем его:

$ cd /http/htdocs/mage2
$ unzip magento2-sample-data-develop.zip
Archive:  magento2-sample-data-develop.zip
098297efcd37c4a900f6bd1644f86d36850620a0
   creating: magento2-sample-data-develop/
  inflating: magento2-sample-data-develop/LICENSE.txt
  inflating: magento2-sample-data-develop/LICENSE_AFL.txt
  inflating: magento2-sample-data-develop/README.md
   creating: magento2-sample-data-develop/app/
   creating: magento2-sample-data-develop/app/code/
   creating: magento2-sample-data-develop/app/code/Magento/
...
  inflating: magento2-sample-data-develop/pub/media/wysiwyg/womens/womens-erin.jpg
  inflating: magento2-sample-data-develop/pub/media/wysiwyg/womens/womens-main.jpg
  inflating: magento2-sample-data-develop/pub/media/wysiwyg/womens/womens-pants.jpg
 extracting: magento2-sample-data-develop/pub/media/wysiwyg/womens/womens-t-shirts.png

В результате чего корень проекта выглядит теперь так:

$ pwd
/http/htdocs/mage2
$ tree -L 1
.
├── magento2/
├── magento2-sample-data-develop/
├── magento2-sample-data-develop.zip
└── vagrant/

Теперь скопируем демо данные в M2:

$ cp -rf magento2-sample-data-develop/* magento2/

А теперь выполним следующее в Guest (ubuntu):

$ cd /var/www/magento2
$ php bin/magento setup:upgrade
Cache cleared successfully
File system cleanup:
/var/www/magento2/var/generation/Composer
/var/www/magento2/var/generation/Magento
/var/www/magento2/var/generation/Symfony
The directory '/var/www/magento2/var/di/' doesn't exist - skipping cleanup
/var/www/magento2/pub/static/deployed_version.txt
...
Module 'Magento_CustomerSampleData':
Installing data...
...
Please re-run Magento compile command. Use the command "setup:di:compile"

И почистим кеши:

$ php bin/magento cache:clean
Cleaned cache types:
config
layout
block_html
collections
reflection
db_ddl
eav
customer_notification
full_page
config_integration
config_integration_api
translate
config_webservice

И наконец-то после успешного выполнения всех операций откроем в браузере http://magento2.dev/ и увидим:

Скрытый текст

Home Page 2017-01-03 21-07-12.png

Sale 2017-01-03 21-07-54.png

Скорость загрузки не кешинованной страницы оставляет желать лучшего:

Скрытый текст

Women 2017-01-03 21-09-39.png

Но, в рамках данной статьи не рассматривался тюнинг dev-environment'а для ускорения работы системы (без включенного кеширования). Об этом я расскажу в следующих статьях.

Источники: