В текущей статье я расскажу тебе как использовать bem-tools в создании проекта. И так, как ты знаешь бэм-инструменты используются из под терминала. Так что и мы с тобой все операции будем делать именно там. На заметку: работа с бэм-инструментами в данной статье описывается в Mac OS X. Что же касается других ОС то сомневаюсь что она чем-то будет отличатся. Для того что бы вызвать хелп по bem-tools введи команду: $ bem —help Что бы узнать хелп по любой команде достаточно ввести «bem имя_команды —help». Пример $ bem build —help Теперь давай ближе к делу а руки чешутся :) Создаю папку для тестов на винчестере и перейди в неё в терминале: $ cd /путь/к/папке Как создать уровень определений? Для того что бы создать уровень определения (ну или же переопределения) следует выполнить следующее $ bem create level blocks В папке для тестирования была создана директория blocks. Для создания уровня переопределения достаточно выполнить: $ bem create level blocks-intranet Как видишь последнее значение этой команды является именем директории уровня переопределения. Как создать Блок? Теперь давай создадим Блок. В терминале выполняем команду: $ cd blocks # переходим в папку с блоками $ bem create block -t css b-button Давай разберём каждый параметр команды bem — запуск бэм-инструментов create — создать сущность block — создается сущность с типом Блок -t css — создать технологию css (попросту говоря имеется ввиду созать CSS-файл) b-button — имя блока и имя css-файла будет «b-button» Ниже на скриншоте показано чего мы с тобой добились выполнив эти пару команд: Для того что бы узнать что ещё можно создавать выполни: $ bem create —help А для того что бы сразу одной командой создать несколько блоков выполни: $ bem create block -t css b-menu b-tree b-wizard b-toolbox и вот что получится: Как создать Элемент? Предположим у нас есть Блок который содержит сложный элемент который, из-за его сложности, удобнее вынести во внешний файл. Выполняем следующую команду и потом её разберём: $ bem create elem -b b-menu -t css list bem — вызываем бэи-инструменты create — создаем сущность elem — в качестве сущности выступает элемент -b b-menu — создать элемент в Блоке «b-forms» -t css — создать файл технологии css (создать css-файл для элементы) list — имя элемента Результат показан на скриншоте ниже. Как создать...

После прочтения слайдов с РИТ 2011 очень захотелось научится собирать файловую структуру БЭМ при помощи bem-tools и понять для чего они нужны и как они мне помогут в создании больших проектов… И так начнём с самого малого. БЭМ-инструменты размещаются на гитхабе по адресу: https://github.com/bem/bem-tools Первое на что обратил внимание глаз так это на заголовок установка: Вам потребуется NodeJS 0.4.x и npm. После этого достаточно npm install bem. Что такое Node.JS и npm я понятия не имею и буду разбираться во время написания этого топика. Немного погуглив узнал что: Node.JS — это движок на основе V8 , который позволяет писать серверную часть приложения на JavaScript без использования PHP и Apache npm — это менеджер-упаковщик для Node.JS Фактически, для чего именно нужно то и другое пока смутно понятно так что копаем далее. Текущее руководство я пишу из под Mac OS X но уверен что существенных различий под остальные ОС вряд ли будут ( слышал от колег что под Windows, естественно, потребуются танцы с бубном). Установка Node.JS под Mac OS X 10.6 Официальное руководство по установке Node.JS размещено по адресу https://github.com/joyent/node/wiki/Installation Для установки Node.JS требуется установленный xCode (что бы проверить установлен ли у тебя xCode иди по адрему Mac_HDD > Developer > Applications где будет размещаться xCode.app) Теперь открой Терминал и выполняй команды по очереди: git clone --depth 1 https://github.com/joyent/node.git cd node export JOBS=2 # optional, sets number of parallel commands. mkdir ~/local ./configure --prefix=$HOME/local/node make make install export PATH=$HOME/local/node/bin:$PATH 12345678 git clone --depth 1 https://github.com/joyent/node.gitcd nodeexport JOBS=2 # optional, sets number of parallel commands.mkdir ~/local./configure --prefix=$HOME/local/nodemakemake installexport PATH=$HOME/local/node/bin:$PATH Всё довольно таки просто. Проверим удачную установкой командой в терминале: node -v 1 node -v В ответ должно вывести версию Node.JS. Если не получилось установить то ищи альтернативные способы установки по адресу: https://github.com/joyent/node/wiki/Installation Для проверки работоспособности  Node.JS так же можем использовать скрипт с офф. сайта: var http = require('http'); http.createServer(function (req, res) { res.writeHead(200, {'Content-Type': 'text/plain'}); res.end('Hello World\n'); }).listen(1337, "127.0.0.1"); console.log('Server running at http://127.0.0.1:1337/'); 123456 var http = require('http');http.createServer(function (req, res) {  res.writeHead(200, {'Content-Type': 'text/plain'});  res.end('Hello World\n');}).listen(1337, "127.0.0.1");console.log('Server running at http://127.0.0.1:1337/'); Сохрани ка данный скрипт в файл test.js и запустим с помощью команды в терминале node /путь/к/скрипту/test.js 1 node /путь/к/скрипту/test.js и если всё получилось в ответ увидишь строку Server running at http://127.0.0.1:8000/ Кстати, перейдя по...

Очень полезной функцией интернет магазине, при оформлении заказа, является возможность оставить комментарий к заказу.Это поле, как правило, используется для дополнительной информации. По умолчанию в CMS Magento такая функция, к сожалению, отсутствует. Но в текущей статье мы рассмотрим вариант как добавить эту возможность в интерне магазин при помощи дополнения «Customer Order Comment». Давай с тобой поработаем в поэтапном режиме да бы ничего не упустить и наш план на сегодня будет таков: Установка дополнения «Customer Order Comment» Настройка БД Magento Настройка собственной темы Настройка темы админ панель Настройка email письма Ну что ж, приступим… 1. Установка дополнения «Customer Order Comment». Открой страницу дополнения «Customer Order Comment» и получи ключ дополнения версии 2.0 (для этого требуется быть зарегистрированным). Потом открой админку своего магазина и перейди в  пункт меню: Система -> Расширения (Magento Connect) -> Управление расширениями Далее возможно потребуется авторизироваться в Magento Connect (используй теже логин/пароль что и в админке). На момент написания статьи дополнение «Customer Order Comment» было версии 0.1.5 (beta), из-за чего требовалось в настройках Magento Connect (закладка Settings) установить параметр Preferred State: Beta. После этого на закладке Extentions в поле «Paste extension key to install» вставь ключ дополнения и нажми install. Через некоторое время немного ниже появится блок: Extension dependencie. Нажимай Proceed и устанавливай дополнение (внизу странице в области чёрного цвета увидишь лог установки). После установки жми кнопку «Refresh». Теперь дополнение с названием «Biebersdorf_CustomerOrderComment» должно появится в списке установленных дополнений. Кстати, не забудь в настройка вернуть с Beta обратно в Stable на закладке Settings. 2. Настройка БД Magento Если ты используешь Magento версии 1.4.1.0 или более то следует внести некоторые изменения, согласно солюшену, в базу данных. Ну а если по-русски то следует сделать следующее: Открыть бузу данных магазине, к примеру, через phpMyAdmin Нажать на кнопку SQL в верхней части экрана и выполнить команду [code lang=»SQL»] ALTER TABLE  ПРЕФИКС_sales_flat_order ADD  biebersdorf_customerordercomment TEXT NOT NULL [/code] На этом с базой данных всё. 3. Настройка собственной темы Теперь для того что бы поля для комментария показалась в чекауте следует сделать небольшие изменения в твоей теме. На сервере по следующему адресу появилась директория: /app/code/community/Biebersdorf/CustomerOrderComment/design/ Тут размещены примеры которые следует внести в свою тему. Вот здесь делаем чётко по ниже приведённому описанию: иди в админ часть и там выставь параметр «ДА» по следующему адресу:...