Новое поле появилось в списке полей данной таблицы.

2. Переходим к редактированию файла administrator/com_virtuemart/html/product.product_form.php. Этот файл содержит форму добавления/редактирования товара. Сюда нам необходимо добавить новое поле ввода для ввода значения “product_sku2″.
Находим строчку, где расположено поле для ввода артикула (product_sku). Вот такой участок кода:

Копируем код и вставляем ниже. Заменяем текстовую переменную на “Еще один артикул”, а имя текстового поля на product_sku2. Должно получиться примерно так:

Сохраняем изменения. Открываем в админке VirueMart форму добавления товара. Любуемся на результат.

3. Открываем файл administrator/com_virtuemart/clases/ps_product.php
Здесь нас интересуют две функции. Первая - добавление нового товара.
Ищем участок кода, содержащий “function add“. Недалеко от начала функции, после следующего участка кода:

добавляем

Теперь пишем значение в базу. Чуть ниже места, где мы добавили предыдущую строчку начинается большой блок вставки данных в таблицу. Добавляем product_sku2 сразу после product_sku:

Далее, переходим к функции, отвечающей за изменение данных о товарах: function update.
Также добавлем

и ниже, где происходит обращение к БД:

4. Теперь попросим VirtueMart включить данные из нашего новорожденного поля в выборку при обращении к странице просмотра товаров в категории или при просмотре карточки товара. Для этого открываем файл administrator/com_virtuemart/html/shop_browse_queries.php.
Находим в перечсилении полей для выборки (то, что записано в $fieldnames = “”, в самом начале файла) `product_sku` и после запятой добавляем `product_sku2`.

5. Сейчас самое время создать “заглушку” для шаблона категории. Для этого открываем файл administrator/com_virtuemart/html/shop_browse.php и ищем блок, начинающийся такими комментариями:

Находим:

Этой строчкой формируется “заглушка” для отображения артикула товара, который мы используем в шаблоне в виде: {product_sku}.
Добавляем заглушку для нашего нового поля:

6. Открываем шаблон категории (по умолчанию browse_1.php) и добавляем {product_sku2} в нужное место.

7. Для добавления “заглушки” в шаблон полного описания товара:
- открываем файл administrator/com_virtuemart/html/shop.product_details.php, почти в самом конце файла после:

добавляем:

и используем {product_sku2} в своем шаблоне карточки товара.

Мотор! Снято! Всем спасибо ))

1. Fancy box

Скрипт представляет собой плагин к jQuery.
Возможности:

• Подгоняет размеры изображений под разрешение монитора;
• Пририсовывает тень к всплывающему окошку;
• Поддерживает возможность группирования объектов и их просмотр в виде галереи в одном окне;
• Выведет для вас не только изображения, но и inline-элементы, а также HTML-контен в iframe;
• Конечно же, все это благолепие можно конфигурировать, а также экспериментировать с CSS.

Теперь о размерах, а точнее, весе скрипта (вопрос немаловажный):

• непосредственно jquery.fancybox-1.0.0.js – 12 Кб
• сам jQery (jquery-1.2.3.pack.js) – 29,1 Кб
• дополнительный скриптик jquery.pngFix.pack.js – 2,52 Кб
• CSS – около 4 Кб
• изображения – 17 Кб

Подключение и использование скрипта не представляет никакой сложности:
1. Сначала подключаем скрипты и CSS:

2. Берем подопытную картинку:

примечание: можете использовать атрибут title для отображения подписи к изображению, а также rel – для группировки обектов.
Заключаем картинку в какое-нибудь оформление (p, div, span – без разницы) с определенным ID. Например, так:

3. Инициализируем плагин:

Готово. В данном случае по щелчку на изображение появится всплывающее окошко с оригиналом изображения. Все параметры окна будут по умолчанию Но вы можете использовать дополнительные опции при вызове плагина, например:

Параметр ‘hideOnContentClick’: true - делает возможным закрытие всплывающего окна не только по нажатию на специальную кнопку, но и по щелчку на свободной области.
Со всеми возможными настройками можете ознакомиться на официальном сайте плагина, где также можно скачать архив и полюбоваться на примеры работы скрипта .

2. iBox v2

Самостоятельный скрипт, не являющийся чьим-либо плагином, и мало того, поддерживающий создание своих собственных плагинов.
По умолчанию iBox поддерживает несколько типов объектов для вывода:

• Изображения
• Документы
• Inline - контейнеры
• YouTube - видео

Если вам нужно что-то совсем необычное – можно написать свой собственный плагин к iBox, который будет реализовывать какой-нибудь оригинальный механизм обработки и вывода данных.
Принцип подключения и инициализации iBox:

1. прописываем скрипты:
2. производим настройку глобальных параметров скрипта:
3. используем - для определения «своих» ссылок применяем не id или class элементов-контейнеров, а атрибут rel=«ibox» (или, например, ibox&target=’index.php?page=&my-js-document’ – если нужны какие-то дополнительные параметры).

В разделе «Quick Start» официального сайта приведен перечень глобальных и локальных (прописываемых непосреlственно в rel=«») опций, которые можно использовать при работе скрипта.
Теперь про особо приятные моменты:

• не смотря на богатую функциональность, скрипт весит порядка 27 Кб, что не может не радовать;
• в архиве с iBox вы найдете readme, demo-html, а также две «шкурки»;
• существует реализация скрипта в виде плагина для Wordpress.

Перейти на страницу скачивания.

3. Lightbox v2.0 и Litebox

Lightbox v2.0 – работает при помощи Prototype Framework и Scriptaculous Effects Library.
Работает только с изображениями - т.е. никаких inline-объектов, iframe и прочего. Но с поставленной задачей справляется великолепно.

Использование:
1. Подключаем скрипты:

2. Подключаем CSS

3. Добавляем атрибут rel=”lightbox” к ссылкам.

title – используется для вывода подписи к изображению. Если вам необходимо вывести галерею изображений – включите в атрибут rel название группы в квадратных скобках. Вот так:

И будет вам счастье ). Единственным минусом использования данного решения является необходимость использования достаточно тяжелых библиотек Prototype и Scriptaculous. Но если в вашем проекте уже используется Prototype – не стоит даже задумываться ).

Скачать Lightbox

Litebox - маленькая, аккуратная модификация Lightbox v2.0, работающая с использованием облегченной версии Prototype (урезана до 4 Кб) . Общий вес скриптов составляет всего 24,2 Кб. Выглядит и работает не хуже своего старшего брата. ) Советую обратить внимание. Скачать архив.

4. ThickBox 3.1

Достаточно мощный скрипт, построенный на базе библиотеки jQuery. ThickBox можно использовать для:

• показа одиночного изображения или группы картинок;
• отображения inline-объектов;
• отображения контента в iframe;
• создания модальных диалоговых окон и отображения результатов ajax-запросов внутри всплывающего окна.

Использование:

1. подключаем скрипты:

2. подключаем CSS

3. в зависимости от типа выводимых объектов руководствуемся теми или иными правилами (которые подробно описаны на официальной страничке скрипта).

Коротко о синтаксисе вывода изображений:

а. вывод одиночного изображения

b. галерея изображений:

Для группировки изображений используется атрибут rel=”gallery-plants”

Итак, нам потребуется:

1. библиотека jQuery (31 Кб)
2. thickbox.js (12 Кб) или thickbox-compressed.js (6 Кб)
3. ThickBox.css (4 Кб) и картинка-анимация loadingAnimation.gif (5,74 Кб)

И всё.) Море удовольствия весом в 45 Кб.

5.1 Плагины к Motools: ReMooz и SqueezeBox

Некоторая информация относительно SqueezeBox содержится вот в этой статье. В заметке рассмотрен пример реализации одной из возможностей плагина – осуществление ajax-запроса и вывод результата в iframe.
Вцелом, ReMooz и SqueezeBox очень похожи и являются детищами одного и того же автора (Harald Kirschner).
Разработчик позиционирует ReMooz как скрипт, идеально подходящий для создания pop-up окошек с картинками, а SqueezeBox – инструмент более широкого профиля. В выше упомянутой статье вы найдете описание возможностей SqueezeBox и требований к его использованию, а сейчас рассмотрим ReMooz.
Как вещает автор данного творения – этот плагин рекомендуется использовать при создании лайтбоксов с изображениями. Скрипт позволяет не просто выводить оригинал изображения, но и настраивать вывод: так, например, мы можем определить, какой процент от размера экрана может занимать выводимая картинка (при необходимости ReMooz уменьшит ее размеры ), добавлять ли к ней прозрачность и нужно ли рисовать тень. За подробностями о настройках плагина – на офсайт, там же – примеры и интструкция к использованию. А если в двух словах, то для работы с ReMooz нам понадобиться:
1. MooTools JavaScript Framework (обязательно 1.2 версии) со следующими включенными методами:

• Element.Dimensions
• Fx.Tween
• Fx.Morph
• Selectors
• DomReady (facultative)

2. ReMooz.js
3. ReMooz.css
4. несколько изображений, участвующих в оформлении всплывающего окошка (найдете на странице описания)
Итого: получаем примерно 55 Кб скриптов и чуть-чуть картинок.
Далее, нам нужно подцепить скрипты и CSS.
После этого заключаем изображения в какой-нибудь подходящий элемент с заданным ID или CLASS:

Теперь прописываем примерно такой обработчик:

Или так:

Плагин готов к употреблению ).

5.2 Плагины к Motools: Multibox и Lightbox.

Данные два решения также являются творением одного автора. И опять-таки, одно из них (Lightbox) – «заточено» под вывод графической информации, а второе (Multibox) – призвано обеспечить работу с широким набором данных. Оба скрипта работают на базе Motools 1.11.

Lightbox не имеет каких-либо особенностей. Подхватывает картинки по rel=”lightbox”, а группы картинок по rel=”lightbox[название_группы]”. Инициализируется заклинанием типа:
Lightbox.init({descriptions: ‘.lightboxDesc’)
Имеет дополнительные настройки, с которыми можно ознакомиться на официальной страничке.

Multibox – более функциональный скрипт, работающий не только с изображениями, но и с flash, видео, mp3, html.
Механизм использования несколько отличается от Lightbox – ссылки для обработки определяются на основании CLASS-а контейнера, в котором они содержаться, а атрибут rel – используется для задания дополнительных параметров.

МОРАЛЬ: каждое из рассмотренных решений имеет право на существование. Что именно использовать – зависит от предпочтений разработчика и от конкретной ситуации использования. Например, если в проекте уже используется какая-либо ajax-библиотека, то логично и целесообразно было бы для решения задачи со всплывающими окнами использовать плагин именно для этой библиотеки.
Надеюсь, что данная статья поможет определиться с выбором подходящего решения.

Также жду ваших комментариев и сообщений (возможно, даже заметок) об интересных скриптах всплывающих окон.

1. PHP Expert Editor

Долгое время данная софтинка являлась моим «дежурным» редактором. Очень приятная по своей функциональности программа. Основные достопримечательности:

• Инспектор кода (левая область окна, см. скрин). Позволяет осуществить переход к нужному месту документа (функция, переменная и т.п.);
• Визуальное представление циклов и условий в коде + возможность «сворачивать» отдельные блоки в строку;
• Встроенный FTP-клиент;
• Возможность создавать «закладки» в документе, которые делают возможным переход к нужной строке по нажатию горячих клавиш;
• Встроенное средство для создания и выполнения макросов;
• Удобный механизм поиска и замены (может искать как в открытых файлах, так и по директории)
• Не требователен к ресурсам компьютера, не грузит систему.
• Отображение открытых документов в «табах». Мелочь, а приятно ).

2. Rapid PHP

Программа содержит в себе большое количество средств для работы с кодом любого типа. Достоинств достаточно много, но вот небольшой перечень самых привлекательных:

• Расширенный менеджер кода, снабженный закладками (HTML, CSS, JavaScript, PHP) для доступа к дереву объектов определенного типа;
• Подсветка парных скобок (очень помогает при определении начала и конца блока);
• Библиотека сниппетов (см. рисунок 2). Существует возможность создавать собственные заготовки и назначать им горячие клавиши.
• Очень удобная система автозавершения выражения. Автокомлит-список может содержать не только базовые операторы и функции для типа редактируемого документа, но и названия уже существующих в документе переменных и функций.
• Средства проверки синтаксиса, а также валидности HTML/CSS;
• FTP-клиент;
• Возможность предварительного просмотра HTML и CSS кода (закладки в нижней части основного окна, см. скрин);
• Возможность создания закладок на участки кода;
• Не грузит систему и не подвисает при большом количестве открытых документов.

МОРАЛЬ: Более чем функциональный и удобный продукт. Идеально подходит для работы с PHP/HTML/CSS.

3. NuSphere PhpEd

Прекрасный инструмент для широкомасштабных разработок. Программа произвела очень хорошее впечатление и прочно закрепилась в моем арсенале веб-разработчика, заменив собою ZendStudio.
NuSphere PhpED - это профессиональная интегрированная среда обработки, предназначенная главным образом для того, чтобы формировать приложения с использованием баз данных и PHP, HTML, XML, CSS.
Все достоинста продукта перечислить не удастся, поэтому ключевые моменты:

• мощный PHP отладчик и анализатор PHP-кода;
• подсветка парных скобок, возможность сворачивать участки кода, закладки как само собой разумеющееся ));
• включает интегрированную базу данных и клиенты CVS,
• сервисы SOAP;
• валидатор HTML и средства форматирования кода;
• поддержка работы с Smarty;
• многофункциональный FTP-клиент;
• в наличии Telnet, SSH терминалы для удаленного администрирования,
• возможность работы с MySQL, Oracle, MSSQL SQLite, Interbase;
• очень приятен внешне )

МОРАЛЬ: Хорош для комплексных разработок или работе с кодом on-line. Для простой правки кода и работы с HTML/CSS рекомендуется использовать что-нибудь попроще ).

Требования:

• PHP
• GD

Описание:
Очень простой в использовании скрипт для ресайза изображений “на лету”.
Работает со следующими графическими форматами: JPEG, GIF, PNG. Достаточно аккуратно обращается с внешним видом картинки - ясность, контраст и т.п. остаются на высоком уровне. Резать старается “по-умному” - предварительно вычислив коэффициент “ширина/высота”. Может заполнять прозрачные области GIF, PNG-изображений заданным цветом. Заботливо складывает отресайзенные изображения в папочку кэша и при наличии кэшированной картинки -выводит именно её, что, конечно же, благоприятно влияет на скорость работы.

Установка:
Проста как пять копеек ). Скачиваем архив: http://shiftingpixel.com/downloads/image-1.3.3.zip. Извлекаем файл image.php. В директории со скриптом создаем папку “imagecache”.
Используя, например, вот такой вызов картинки, наслаждаемся полученным результатом:
<img alt=”my resized picture” src=”http://example.com/image.php?image=/images/picture.jpg&width=100&height=100? />
Название паки кэша можно поменять в самом скрипте. Путь к директории с картинками, как мы видим, задается непосредственно в URL (в “image=” прописан путь до картинки, начиная с корня сайта).

Пример использования в php-скрипте.

ИМХО: простой в использовании скрипт с минимумом возможностей, которых, впрочем, бывает вполне достаточно.

2. phpThumb()
Автор: James Heinrich
Текущая версия: 1.7.8 (updated: 28-May-2008 )
Оффсайт: http://phpthumb.sourceforge.net

Требования:

• PHP
• GD
• ImageMagick (желательно)

Описание:
Как и Smart Image Resizer, данный скрипт использует GD для создания превью “на лету”, но в отличие от предыдущего подопытного обладает огромным количеством возможностей и настроек. Фактически, это класс для работы с изображениями на все случаи жизни.
Поддерживаемые графические форматы входных файлов:

• JPEG;
• PNG;
• GIF;
• BMP;
• при наличии ImageMagick - любой формат, который поддерживается данной библиотекой

Поддерживаемые графические форматы выходных файлов:

• JPEG;
• PNG;
• GIF;
• BMP (при наличии ImageMagick или phpthumb.bmp.php в наборе скриптов);
• ICO (при наличии ImageMagick или phpthumb.ico.php в наборе скриптов)

Подробное описание возможностей скрипта, которых очень много, доступно на офсайте.
Из особых приятностей: действительно “умная” обрезка изображений, большое количество фильтров для выходных изображений (наложение водяного знака, поворот, тень + множество других).

Огромное количество примеров (демо):
http://phpthumb.sourceforge.net/demo/demo/phpThumb.demo.demo.php

Установка: все также распаковываем архив в какую-либо директорию, папка кэша уже есть в архиве, так что отдельно ее создавать не нужно Возможно, потребуется произвести дополнительную настройку скрипта (например, поправить пути и т.п.) - все зависит от конкретной ситуации использования. Для начала, переименуйте файл “phpThumb.config.php.default” в “phpThumb.config.php” и смотрите уже по результатам отработки скрипта - если в процессе выполнения будут возникать неполадки, скрипт сообщит об этом, показав на месте вывода картинки изображение с текстом ошибки.

Пример использования в php-скрипте.
Пример очень похож на предыдущий. Разница лишь в формировании URL-а изображения и наборе передаваемых параметров

ИМХО: мощный инструмент для работы с изображениями. Работает с максимальным соотношением “возможности/качество/скорость”. Большим плюсом является достаточно полная документация и хороший набор демо-данных (как на оффсайте, так и в архиве со скриптом).

Мы рассмотрели примеры “умных” (в случае phpThumb() - МегаУмных) скриптов, предоставляющих большое число возможностей при работе с изображениями.
Теперь рассмотрим пример “простого” создания превью, но с сохранением результатов ресайза в виде отдельных файлов и организацией набора функций по ресайзу в виде отдельного класса. При необходимости, конечно же, существует возможность использовать те самые “умные” скрипты в составе библиотеки. Но это тема для отдельной беседы).

3. Простой скрипт ресайза изображений.
Постановка задачи:
В таблице с описанием товаров существует поле `product_full_image`, в нем содержаться названия графических файлов.
Сами файлы лежат по адресу “/components/com_virtuemart/shop_image/product/”.
Необходимо: пробежаться по всем записям таблицы и для каждого из существующих изображений создать средний и маленький эскизы.
Нам потребуется: форма с полями ввода размеров эскизов (для простоты будем задавать только ширину требуемого эскиза), функция для первичной обработки данных и сам класс с функциями обработки изображений.

1. Рисуем форму (мне было удобно сделать это внутри отдельной функции):

После сабмита основной скрипт shop.browse.php отлавливает параметры формы и передает в нижеописанную функцию значения $small_x и $middle_x

2. Функция, в которую приходят выловленные параметры:

Файл class.img2thumb.php.

В состав функции дополнительно можно включить, например, запись в БД названий полученных эскизов. Также без труда можно использовать приведенный в пример принцип для создания эскизов одного изображения, загружаемого через форму.

И в заключении, еще один пример библиотечки для создания эскизов, а заодно и увлекательное чтиво по теории создания миниатюрных изображений. Читайте на здоровье.

• Element.Dimensions
• Fx.Tween
• Fx.Morph
• Selectors
• DomReady

2) плагин к MooTools - SqueezeBox - Expandable Lightbox (v1.1) (скачать)
3) CSS к плагину
4) небольшие картинки spinner.gif и closebox.png, участвующие в оформлении всплывающего окна.

Для особо ленивых - архив со всем вышеперечисленным добром. Но mootools рекомендую обновить (в архиве 1.2beta, сейчас уже принявшая статус стабильной).

Пара слов о самом плагине. Он умеет:

• Осуществлять AJAX-запросы и выводить результат. Красиво выводить )
• Клонировать текстовые эелементы страницы .
• Подгружать контента с других сайтов в IFrame.
• Показывать оригинальные изображения во всплывающем окне.
• И даже подгружать видео с Youtube все в том же симпатичном всплывающем окошке.

Все эти красивости вы можете потестировать на офсайте плагина. А мы займемся все-таки новостями.)

Итак, подключаем скрипты и CSS. Удобнее всего это сделать в файле шаблона. Первоначально в папке шаблона создаем папку js, куда складываем файлы .js, .css и две картинки.
Перед закрывающим </head> добавляем:

Далее, добавляем такой обработчик:

Данный скрипт, как мы видим, ищет на странице ссылки с аттрибутом rel=”boxed”, по нажатию на которые и будет происходить отработка плагина - вывод контента во всплывающем окне.
Непосредственно ссылка в коде страницы должна строиться по следующему принципу:

Теперь, когда подготовительный этап завершен, перейдем к коду модуля mod_latestnews.php. Как мы знаем, данный скрипт выбирает из БД заголовки новостей/статей и выводит их в виде ссылок на полную версию новости.

Примерно в 182 строке файла mod_latestnews.php находим следующую строчку:

Это и есть тот самый заголовок новости. Добавляем к тэгу аттрибут rel=”boxed”. Получаем:

1. <a  href="<?php echo $link; ?>" rel="boxed" class="latestnews<?php echo $moduleclass_sfx; ? >"><?php echo $row->title; ?></a>

Чуть выше находим:
$link = sefRelToAbs( ‘index.php?option=com_content&task=view&id=’. $row->id . $Itemid );
и меняем “index.php” на “index2.php”.

Готово.

]]>

1. Персональный органайзер.

Очень полезная программа, в случае, конечно, если разработчик ценит свое время и желает увеличить производительность труда. Лично мне органайзер помогает систематизировать информацию по проектам: хранить технические задания, брифы, контактные данные, а также документировать какие-либо решения, применяемые при разработке (описания структуры, фрагменты кода, хаки и т.д.). Все вышеперечисленное в значительной мере способствует наработке собственной Базы Знаний и помогает оптимизировать процесс разработки последующих проектов.

Моим настольным органайзером является WinOrganizer от компании The Golden Section Labs.

Ознакомиться с основными возможностями программы Вы можете на официальном сайте. От себя добавлю: функциональный, удобный, ничего лишнего. В доказательство прикладываю скриншот.

2. Программа для «захвата» цвета определенной области.

Незаменимая в хозяйстве вещь. Особенно острую необходимость в подобном ПО испытывают верстальщики, далее я приведу пару примеров использования этого мега-инструмента. Очень удобной утилитой является ColorImpact. Весит мало, делает много. В зависимости от пожеланий пользователя, может выхватывать цвет из области или попиксельно, заботливо конвертируя оттенок в HEX. Остается только скопировать значение из окошка и использовать его по назначению.
Примеры использования.

1. Корректировка цветовых значений элементов веб-страницы.

В процессе создания шаблона под Joomla приходится настраивать цвета огромного количества элементов: одним из способов, конечно, является захват цвета непосредственно из PhotoShop, в случае, если у нас под рукой есть «разобранный» psd-макет. Но этот способ достаточно неудобен тем, что требует значительных затрат времени. Гораздо удобнее «доводить» шаблон по jpg-версии, открытой в каком-нибудь просмотрщике, периодически захватывая цвета «пипеткой» ColorImpact-а.

2. Поиск элементов по HEX-формуле.

Например, нам стало очень интересно, в каком месте CSS-файла прописался какой-либо элемент.

Чтобы удовлетворить свое любопытство, мы можем «захватить» цвет элемента и осуществить поиск по стилям.
Внешний вид приложения:

Перечень основных проделанных работ:
1. Разработка дизайна
2. Создание шаблона
3. Разработка модуля для VirtueMart - весь ассортимент отображается на главной странице в разворачивающихся областях.
4. Реализована возможность получения скидки путем прохождения опроса ).
5. Реализация возможности присвоения товарам признаков “Новинка”, “Спецпредложение”
6. Возможность отметки “доставка” и возможность задавать срок гарантии
7. Реализация возможности вывода описания категории на странице товара
8. Реализация возможности отображения дополнительных изображений товаров превьюшками, а не ссылкой “Больше изображений”
9. Вывод новости во всплывающем окне, с AJAX-подгрузкой текста

Ну и мелочи всяческие. Посмотреть сайт.