• Тем временем в блогах

    • Автор: klierik в CMS (Системы управления контентом)
         0
      Привет, друзья.
      Заметка может быть интересна front-end разработчикам, которые начинают изучение Magento 2 CMS (одной из самых популярных систем управления интернет-магазинами). Предполагается что разработка ведётся в рамках кастомной темы под M2.
      Если говорить о самой задаче то, конечно же, спрятать уведомление после указанного времени особого труда не составит. Вопрос скорее в другом — как это реализовать в рамках Magento2, где властвует requirejs и несколько иная, по сравнению с Magento1, иерархия директорий?
      Для выполнения поставленной задачи давай воспользуемся html-файлом, который размещается по пути:
      magento/vendor/magento/module-theme/view/frontend/templates/messages.phtml с содержимым:
      Давай скопируем его в кастомную тему по адресу:
      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 в CMS (Системы управления контентом)
         9
      Привет, друзья.
      Дебютная статья Блога — Как установить Magento Community Edition 2.0 на локальный компьютер используя 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) использовался следущий набор предустановленного ПО:
      Git (2.3.8) Vagrant (1.8.7) и следующие плагины vagrant-hostmanager (1.8.5) vagrant-share (1.1.5, system) —автоматически устанавливается при установке Vagrant vagrant-bindfs (0.4.11) — опционально, повышает работу чтения\записи share-директорий между Host<->Guest системами vagrant-vmware-fusion (4.0.14) — опционально, платное. Требуется для работы с VmWare Fusion (работает шустрее чем VirtualBox) VirtualBox (5.1.8 r111374/Qt5.5.1) 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 которая установит ОС и базовое ПО.
      Нам потребуется скачать и распаковать один из предложенных файлов в директорию с проектом.
      VirtualBox — virtualbox__ubuntu16-nginx-mariadb-php7  VmWare — vmware__ubuntu16-nginx-mariadb-php7 В итоге структура директорий будет следующая:
      2.3 Установка среды Vagrant с VirtualBox
      Следующим шагом будет установка Ubuntu 16 (xenial64) и требуемого для запуска М2 ПО.
      Перейди в vagrant/ директорию проекта и выполни команду (при установке может потребоваться пароль администратора):
      $ cd /http/htdocs/mage2/vagrant Далее возможена установка на выбор использую ту или иную среду виртуализации:
      $ vagrant up --provider=virtualbox $ vagrant up --provider=vmware_fusion Установка протекает приблизительно так...
      После установки системы при открытии страницы http://magento2.dev/ в браузере сервер, скорее всего, вернёт ошибку (это нормально):
      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 Установка займёт какое-то время, привожу краткий её лог:
      3.2 Настройка MariaDB (MySQL) и Создание БД
      Давай, для начала, настроем непосредственно MariaDB. Для этого запустим следующую команду и выполним все предложенные шаги:
      $ sudo mysql_secure_installation Все шаги настройки под спойлером (если запуск впервые то пароль для пользователя root не установлен, так что тебе следует просто нажать Enter при запросе).
      В данной статье в качестве пара:пароль было использовано — 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/ браузер выдаст домашнюю страницу:
      Путь к админке генерировался автоматически. Так же узнать его можно выполнив команду:
      $ php bin/magento info:adminuri Admin URI: /admin_xz4mt0 Логин:пароль к AdminCP: admin:admin123
      Так же можно задавать путь во время установки, используя опцию "--backend-frontname=adminURL", согласно документации Install the Magento software from the command line. На пример:
      где "--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/ и увидим:
      Скорость загрузки не кешинованной страницы оставляет желать лучшего:
      Но, в рамках данной статьи не рассматривался тюнинг dev-environment'а для ускорения работы системы (без включенного кеширования). Об этом я расскажу в следующих статьях.
      Источники:
      http://devdocs.magento.com/guides/v2.1/install-gde/bk-install-guide.html
  • Последние обновления в темах

Категории и разделы

  1. Основной форум

    1. Для начинающих

      Типовые вопросы тех, кто только изучает веб-технологии.
      Культура поведения в разделе

      79 167
      сообщений
    2. Проблемы верстки

      Обсуждение проблем верстки. CSS, HTML, XML, XSLT, шаблонизаторы, и прочее.

      107 591
      сообщение
    3. Обсуждение работ

      Выкладываем сюда сайты для похвалы и критики.
      Правила раздела

      29 341
      сообщение
    4. Работа форума

      Предложения по работе форума.

      7 433
      сообщения
    5. Флейм

      Обсуждаем любые темы, не относящиеся к сайтостроению.

      41 013
      сообщения
  2. Полезное

    1. Библиотека полезных приемов и решений

      Полезные примеры, удачные решения, часто возникающие ошибки.

      3 886
      сообщений
    2. Ресурсы

      Сайты, книги, полезные программы.

      3 524
      сообщения
  3. Веб-программирование

    1. 29 069
      сообщений
    2. Серверные технологии

      PHP, C++, Python, JAVA и другие серверные языки программирования, веб-серверы, программное обеспечение.

      20 242
      сообщения
    3. СУБД

      Решение вопросов, связанных с различными СУБД.

      2 191
      сообщение
    4. CMS

      Решение вопросов, связанных с различными Системами Управления Контентом.

      4 731
      сообщение
  4. Работа: спрос, предложение, вакансии

    1. Коммерческие услуги

      Поиск сотрудников, предложения от работодателей, заказы на верстку и скрипты.

      8 619
      сообщений