• Темы

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

    • Автор: 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. Для начинающих

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

      80 164
      сообщения
    2. Проблемы верстки

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

      108 740
      сообщений
    3. Обсуждение работ

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

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

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

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

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

      41 185
      сообщений
  2. Полезное

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

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

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

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

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

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

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

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

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

      2 209
      сообщений
    4. CMS

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

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

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

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

      8 764
      сообщения

Карта разработчиков

Карта участников

Отметь себя на карте для поиска или предложения работы



  • Ближайшие события

    • 0
      26 Август 2017 06:00
      До
      26 Август 2017 15:30

    • 0
      02 Сентябрь 2017 07:00
      До
      02 Сентябрь 2017 15:00

  • Сообщения форума

    • Благодарю за отзыв.
      1) Кнопка поиска и поле ввода. Я так понимаю вы говорите о высоте? Потому что ширина ну никак одинаковой у них быть не должна. Теперь с высотой. Высота у этих двух блоков одинаковая. Однако, если достаточно приблизить, можно увидеть, что высота кнопки вот буквально чуть-чуть больше. Уменьшив хотя бы на один пиксель, мы получим картинку еще хуже. Ну а вообще, не считаю это проблемой, потому что заметить эту разницу можно только очень хорошо вглядевшись. Если у вас есть решение, подсобите)
      2) Социконки. Опять же, так ведь и должно выглядеть). Понятное дело, я могу убрать последнюю и все будет как надо. Но я пытался сделать верстку как можно гибче, то есть, если вдруг мне взбредет в голову добавить туда еще какое-то кол-во иконок, все не полетит в тартарары. Есть блок социконок, и если количество элементов этого блока заходит за ширину его самого, то они переносятся на другую строку. Вроде все правильно. Не совсем понял, что вам именно здесь не нравится)
      3) Нижнее левое меню. Исправлено, решил до определенного размера сделать их просто в виде колонок.
      4) Внешний вид. Вообще во мне, как мне кажется, очень мало от дизайнера:D Но я сделал несколько изменений, посмотрите. Но я не знаю, как тут все кардинально  можно поменять, чтобы стало все прекрасно)
      5) Секция Expertise. Расстояния между блоками были увеличены.
      6) Разделитель в секции expertise. Вообще это из разряда "не баг, а фича":D. Я посчитал, что делать разделитель под каждым блоком излишне и решил каждую тройку делить этой прямой.

    • Человека встречают по одежде, а операционную систему – по рабочему столу. И не только встречают, но и основательно оценивают. Сегодня рассмотрим основные характеристики самых популярных окружений рабочего стола для Linux, их сильные и слабые стороны. MATE Легковесное окружение рабочего стола, которое порадует своей шустростью и производительностью обладателей даже не самых мощных машин. Изначально создавалось как альтернатива Gnome 3, разочаровавшее часть своих пользователей обновленным интерфейсом. Является средой рабочего стола по умолчанию в дистрибутиве LinuxMint.Основные приложения:
      Caja – файловый менеджер; Pluma – текстовый редактор; Atril – просмотр файлов формата PDF, DJVU, DVI, XPS; MATE Terminal – эмулятор терминала; EyeofMate – просмотр изображений.

      Сайт: http://mate-desktop.org/ UNITY Интуитивно понятное окружение рабочего стола с приятным интерфейсом. По умолчанию устанавливается в дистрибутиве LinuxUbuntu, для других дистрибутивов почти 
      недоступно. Из минусов – недостаточно гибкая настраиваемость.
      Сайт: http://unity.ubuntu.com/ KDE Отлично подойдет новичкам Linux как «пробник» всего функционала ОС, а освоившись, можно перейти и на более заточенное под себя окружение. KDE используется по умолчанию в OpenSUSE и Mageia, а также включено в стандартный дистрибутив LinuxMint, Fedora, ManjaroLinux.
      Dolphin – файловый менеджер; Amarok – проигрыватель аудиофайлов; Ark – архиватор; digiKam – работа с фото; Kontact – электронный секретарь; Gwenview – просмотр изображений; K3b – запись CD, DVD и BluRay дисков; Konsole – эмулятор терминала.

      Сайт: https://www.kde.org/ GNOME Одно из самых популярных окружений рабочего стола Linux, которое, однако, с выходом версии Gnome 3 потеряло часть своих пользователей. Из минусов – потребляет много памяти из-за тяжелого графического интерфейса.
      Nautilus – файловый менеджер; GNOME Terminal – эмулятор терминала; gedit – текстовый редактор; Web – веб — браузер; Evolution – управление электронной почтой; Totem – воспроизведение аудио и видео; Brasero – запись CD и DVD.

      Сайт: https://www.gnome.org/ PANTHEON Среда Pantheon разрабатывалась командой дизайнеров с целью сделать Linux красивой. Поэтому всем эстетам добро пожаловать.
      Среда по умолчанию для дистрибутива elementaryOS. Сайт: https://elementary.io/ CINNAMON Подойдет для любителей настраивать каждую мелочь под себя – настроить здесь можно все, ну, или почти все. Кстати, внешне окружение очень похоже на Windows. Плюс это или минус – решать вам. Является средой рабочего стола по умолчанию в дистрибутиве LinuxMint. Сайт: https://cinnamon-spices.linuxmint.com/Какое окружение лучше всех? Пожалуй, пусть каждый определится сам. Лично мы пока что только выбираем победителя, которого будем рекомендовать к использованию в нашем облаке. На этом пока все. Надеемся, материал был вам полезен, а если у вас появились другие облачные вопросы, обращайтесь к нам за грамотной консультацией 24/7.
       
    • Вчера доделал свой движок интернет магазина, который состоит из одной единственной странички. Товары и разделы добавляются через встроенные формы. Скачать архив с магазином можно тут http://heeg.ru/heeg6.0.0.zip Очень нужно, чтобы его кто-то потестил и поискал ошибки.
    • Подскажите, как можно растянуть блоки 2, 3, 4 по высоте блока 1? space-between и align-items не срабатывает. Пример тут:   
  • Текущие цели пожертвований

  • Лучшие авторы