Тюнинг osCommerce v.2.3, или прокачка интернет-магазина для дизайнерских и seo-целей

Любой движок можно накачать согласно собственным стандартам.

Материалы статьи подготовлены на основе практики применения на двух сайтах. В статье описаны ряд фрагментов «тюнинг-решений» для популярного движка интернет-магазина osCommerce (v/2.3), основная часть которых разрабатывалась по принципу экстремального программирования — в условиях лимитированных сроков и сразу «начисто». В связи с этим, указанные программные решения не претендуют на единственно возможные и правильные для исполнения описанных задач.

Статья может быть полезна разработчикам (описывается схема действий — где искать, что править и по какому принципу), однако не подойдет для новичков (практически исключены детальные «рецепты» — нужно владеть php и иметь некоторые знания по JS).

Статья может оказаться полезной для владельцев сайтов в качестве обзора требований и возможностей по накачке своего интернет-магазина для получения дополнительного конкурентного преимущества.

В публикации представлены темы:

Тюнинг УРЛов
Кейворды
Маркировка текста — прикрутка визуального редактора
Нанесение лого на картинки (подгрузка картинок в визуальный редактор)
Автоуменьшение (авторесайз) картинок товаров и насение лого
Создание описаний категорий
Вывод кратких и полных описаний товаров
Создание тегов (меток) товаров

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

Признаться, меня порадовала новая версия osCommerce. В отличие от популярной v 2.2, для которой, кстати, доступны большинство расширений (раньше я их юзала), — базовая комплектация получилась более осмысленной.

Как полагается, начало — с осмотра готовых решений (модулей/плагинов). Так уж повелось, что я довольно щепетильно отношусь к SEO-компоненте сайтов, поэтому для меня имело значение оптимизация системы под поисковики.

Тюнинг УРЛов

Для этой цели я взяла модуль Ultimate_SEO_URLSv22d_11 —> Скачать здесь

В инсталле (install.html из архива) подробно объясняется, что куда прикручивать, какие файлы изменять и какие sql-запросы отправлять.

Кейворды

Кейворды (meta keywords) отсутствовали. Сейчас поисковикам они не так въелись, как раньше, но, в любом случае, их лучше иметь, чем не иметь. Не ошибусь, если скажу, что большинство людей не любят дополнительных мелочей, осложняющих и без того рутинный процесс, поэтому я решила сделать образование кейвордов сразу автоматическим — скажем, использовать заголовок. Но чтобы в кейвордах не было лишних слов, я использовала константу — список ведущих ключевиков. В osCommerce, для этого мы будем работать в двух областях.

includes/modules/headers_tags/

— директория, в которой подключен инклюдинг для вывода в шапке страниц ( ht_category_title.php — напр., для категорий; ht_products_title.php — для товаров). Это была первая область.

Вторая область: файл шаблона — класс osc_template.php, находящийся в папке классов

includes/classes/

Основная аналогия, по которой нужно редактировать — строки, связанные с формированием title (если вы немного умеете читать чужой код, вы сразу поймете что дописывать и по какому шаблону). Я не буду подробно останавливаться на этом фрагменте. Дополнительную ф-цию, которую можно использовать для сопоставления слов из отдельного заголовка с перечнем главных ключевиков — ф-ция strpos(). Она определит нужные слова, и их уже можно устанавливать для внесения в шапку. По типичной схеме можно организовать Description.

Позже, на офф сайте появился специальный плагин для генерации мета-тегов Easy Meta Tags for 2.3X. Сама не пробовала, но для желающих иметь кейворды, может пригодиться.

Маркировка текста — прикручиваем визуальный редактор

Качаем Ckeditor for OsCommerce 2.3, в «README» получаем инструкции. На странице товара теперь мы можем видеть визуальный редактор.

визуальный редактор для oscommerce

Мне нравятся эти ребята (разработчики CKeditor). Была приятно удивлена, что нашла именно этот продукт в качестве WYSIWYG-редактора для osCommerce 2.3. Кроме того, что он предоставляет приятный интерфейс и удобные средства форматирования текста (ul, ol, strong, h1-h6 и т.д.), по опыту, я знала, что у него есть расширение для картинок.

Загрузка изображений для вставки в визуальный редактор

Раньше не доводилось прикручивать загрузку картинок, но здесь решилась. Продукт — CKfinder. По привычке, я перекачала файлы на сервер, но тест он прошел не сразу — не сразу сообразила, что в файле конфига нужно редактировать строку (правда, обширно помеченную комментариями) для безопасности системы.

function CheckAuthentication(){
// WARNING : DO NOT simply return
"true". By doing so, you are allowing
// "anyone" to upload and
list the files in your server. You must implement
// some kind of session validation
here. Even something very simple as...
// return
isset($_SESSION['IsAuthorized']) && $_SESSION['IsAuthorized'];
// ... where
$_SESSION['IsAuthorized'] is set to "true" as soon as the
// user logs in your system. To be
able to use session variables don't
// forget to add session_start() at
the top of this file.
return false;}

В этой функции нужно возвращать «true», а не «false». Вы можете определить настройки авторизованности доступа и вернуть «True», а только в противном случае (а не во всех) — «False».

После процедуры проверки на «истинность», тест прошел успешно. Однако для интеграции понадобится покопаться в файлах админки.

Файл 1. «Шапочный файл» (includes/template_top.php) для подключения js-скриптов в HEADER. Ищем в файле первые подключаемые js-скрипты и вставляем в их общую кучу:

Файл 2. Нам также понадобится файл, отвечающий за преобразование textarea формы нашего описания товара. Легко предположить что такие функции мы найдем в той же директории (includes), только в дополнительной поддиректории (functions). В гиде по установке CKeditor мы можем встретить его упоминание – catalog/admin/includes/functions/html_output.php.

Пишем код в ф-цию создания textarea формы

function tep_draw_textarea_field:

после завершаещего тега «$field .= ‘’ ; »,

инициализируя командную js-функцию «CKEDITOR.replace» по индикатору названия textarea (tep_output_string($name)). Этот реплейс будет следующего вида:

Теперь приурочиваем этот скрипт к общему “$field .= ”, чтобы он выводился вместе с textarea.

визуальный редактор + загрузка картинок для oscommerce

Нанесение лого на картинки

Нанесение лого (или, т.н. водяного знака) на картинки интересны не только с точки зрения имиджа или защиты от копирования, но и — для уникальности изображения (особенно, если исходник копирован с другого сайта). Только уникальный контент (начиная текстами и продолжая картинками) будет иметь вес в поисковиках. Благо, что для изображений, подгруженных с визуального редактора, у нас под рукой оказывается готовый плагин. Его мы допишем внизу того самого злосчастного конфига, — плагин, который я, возможно, не обнаружила бы, если бы не перекопала все папки из-за проблемки с ф-цией по безопасности.

По умолчанию, в конфиге используются следующие плагины:

include_once «plugins/imageresize/plugin.php»;include_once «plugins/fileeditor/plugin.php»;

Дописываем ПОСЛЕ строку:

include_once  "plugins/watermark/plugin.php";

Не забываем перейти в саму папку watermark и заменить существующий файл “logo.gif” на собственный лого.

Автоуменьшение (авторесайз) картинок товаров и нанесение логотипа

Ресайз изображений каждый раз вручную — неблагодарное дело, если мы можем уменьшать их с помощью GD библиотек. На этот случай я использую несколько личных заготовок и просто подключаю функции в тот файл(ы), который отвечает за вывод изображений. Для osCommerce, это — product_listing.php (includes/modules/product_listing.php) и html_output.php (includes/functions/html_output.php).

Вы можете скачать ф-цию (или класс) ресайза (уменьшения) изображений из интернета, благо, что таких скриптов довольно много, и Yandex или Google с радостью их выдаст. Затем подключаем, вместе с классом watermark (плагин от CKfinder), — ф-цией include() — в includes/functions/html_output.php.

После этого, создаем функцию, аналогичную tep_image в файле “catalog/includes/functions/html_output.php”, и уже из нее вызываем ф-ции обработки изображений. Не забываем, что везде, где при выводе товара (а конкретно, catalog/includes/modules/ product_listing.php) использовалась ф-ция tep_image, ее нужно заменить по имени созданной нами ф-ции. Это важно.

На сервере у нас будет создаваться новая картинка с уменьшенными параметрами. Например, в рамках 500х500 px. Для новой картинки мы будем использовать новое название. Если вы имеете ограничения в дисковом пространстве на хостинге, лучше ограничиться константным префиксом (_myprefix или подобным). Если свободны кидать новое изображение при каждой смене названия товара — можно оптимизировать под поисковики, используя в качестве префикса заголовок товара. При UTF-8, нам необязательно переводить кириллицу в латиницу, однако, если вы работаете с другой кодировкой, или просто желаете использовать латиницу, вам понадобится дописать функцию транслита вместо $alt (тогда префикс будет запрашиваться, например, следующим образом: $prefix_name = strtr($alt, $alt_translate ) ; ). Иначе:

$prefix_name = $alt;
$new_name_file = eregi_replace( '\.([a-z]{3,4})$', "_" . $prefix_name . ".\\1", $src );

Вызов ф-ции уменьшения (скажем, она называется IMAGE_RESIZE) будет иметь примерно следующий вид:

IMAGE_RESIZE($src, $new_name_file,  500, 500);

Вызов ф-ции наложения логотипа:

$watermark = new Watermark();
$watermark->createWatermark($new_name_file, "logo.gif", 5, 5, 80, 60);

В нашей ф-ции, написанной по аналогу tep_image , мы будем вставлять картинку $new_name_file вместо $src. Фактически, происходит подмена картинки на ее отредактированный вариант.

Нанесение логотипа магазина на картинки-товары

Стоит обратить внимание, что ф-ции уменьшения и создания картинок будут работать при каждом запросе страницы категории. Это не нужно. Используем дополнительное условие, которое разместим ПОСЛЕ строки определения нового названия и ПЕРЕД ф-циями IMAGE_RESIZE и $watermark.

if (!file_exists($new_name_file)) {
 //если  условие выполнено, начнем преобразование изображение
 IMAGE_RESIZE($src,  $new_name_file, 500, 500);
 $watermark  = new  Watermark();
 $watermark->createWatermark($new_name_file, "logo.gif", 5, 5, 80, 60);
 //и  закроем ее после совершения ф-ций преобразованияизображений
 }

—

Описания категорий

Создаем описания к категориям для osCommerce 2.3. Скачиваем модуль Subcategory textboxes for 2.3 , распаковываем архив и устанавливаем согласно инструкциям INSTALLATION.TXT. Управление описаниями готово. Бывает нужно разделить описание на две части — выводить некоторый текст (или картинку) сверху над товарами, другую часть — ниже после товаров. Для этого я использовала ф-цию explode(), определив параметр разделения «

описание категорий oscommerce-2-3 админка

описание категорий oscommerce-2-3 — текст сверху

описание категорий oscommerce-2-3 — текст снизу товаров

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

Вывод кратких и полных описаний товаров

Аналогичным образом я использовала вывод сокращенных описаний товаров (опять же используя explode и параметр разделения в виде линии «

Создание тегов (меток) для товаров

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

Как это работает?

К каждому товару приписывается ряд тегов (меток), которые дополнительно характеризуют его. Например, «самокат для взрослых», «самокат с большими колесами» и т.д. Каждый из этих тегов, при клике, должен вести на отдельную страницу, специально оптимизированную для поисковиков и программированная на вывод всех товаров с аналогичными критериями. Равно посетителям сайта, на эту страницу заходит поисковик и считывает ее, а потом выдает в своих результатах поиска по аналогичному запросу. Теги — это очень удобно, с какой бы стороны мы не посмотрели: они полезны для покупателей, которые не хотят копаться во всей линейке товаров, а ищут исключительно «самокаты с большими колесами», они полезны для видимости сайта в поисковиках.

теги для товаров в интернет-магазине

Конечно, принципам тегирования наиболее соответствует страница внутреннего поиска, только поиск должен происходить не по запросу из формы поиска, а по затребованию определенного УРЛа. Также, нужно будет дописать в движке, в админской части, возможность привязки тегов к каждому из товаров.

Честно говоря, изначально устанавливая теги для товаров, я не ожидала особого наплыва по вспомогательным запросам, полагая, что их используют те же люди, которые ищут по основным ключевикам. Однако результат показал обратное: вспомогательные запросы могут принести ~ в 2 раза больше клиентов, чем основные запросы.