Колор-Код, Лаборатория Кода, Маркетинг-Код

Тюнинг 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

визуальный редактор для 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-скрипты и вставляем в их общую кучу:

<script type="text/javascript" src="<?php echo tep_href_link('[относительный путь к ckeditor.js]'); ?>"></script><script type="text/javascript" src="<?php echo tep_href_link('[относительный путь к /adapters/jquery.js – без
фигурных скобок]'); ?>"></script> 

<script type="text/javascript" src="<?php echo tep_href_link('[относительный путь к /ckfinder.js – без фигурных скобок]'); ?>"></script>

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

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

function tep_draw_textarea_field:

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

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

<script type=“text/javascript”>

//<![CDATA[

CKEDITOR.replace(“имя textarea в кавычках”, {

“filebrowserBrowseUrl”:

“[относительный путь к соответствующему урлу – без фигурных скобок – также,
нужно обратить внимание, что путь будет писаться не через один слэш, а через
двойной, образующий зеркальную галочку: «\/», например: “..\/папка1\/подпапка2\/файл.1?type=тип”]”,

“filebrowserImageBrowseUrl”:

“[относительный путь к соответствующему урлу – без фигурных скобок]”,
“filebrowserFlashBrowseUrl” :
“[относительный путь к соответствующему урлу – без фигурных скобок]”,

“filebrowserUploadUrl”:

“[относительный путь к соответствующему урлу – без фигурных скобок]”,

“filebrowserImageUploadUrl”:

“[относительный путь к соответствующему урлу – без фигурных скобок]”,

“filebrowserFlashUploadUrl” :

“[относительный путь к соответствующему урлу – без фигурных скобок]” })

;

//]]>
</script>

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

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

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

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

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

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

визуальный редактор + загрузка картинок для 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. Фактически, происходит подмена картинки на ее отредактированный вариант.

наложение лого на изображение oscommerce

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

наложение лого на изображение oscommerce

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

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

Стоит обратить внимание, что ф-ции уменьшения и создания картинок будут работать при каждом запросе страницы категории. Это не нужно. Используем дополнительное условие, которое разместим ПОСЛЕ строки определения нового названия и ПЕРЕД ф-циями 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(), определив параметр разделения «<hr />» (линия), который легко использовать в редакторе. Редактируем файл «includes/modules/products_extra_category.php» и выносим редактированное содержимое вместо вставок запроса этого файла (include) в «index.php». У нас должно получиться две области двух частей одного массива, полученного через ф-цию explode(). Вставляем первый перед вызовом product_listing.php и второй — после него. На сайте это выглядит следующим образом:

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

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

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

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

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

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

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

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

Аналогичным образом я использовала вывод сокращенных описаний товаров (опять же используя explode и параметр разделения в виде линии «<hr />»). В этом случае, первый участок массива я вывожу в линейке товаров, второй — непосредственно на странице товара. Хотя на практике это не особо пригодилось, но при избыточно длинных описаниях отдельных товаров, оказалась весьма кстати.

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

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

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

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

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

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

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

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

Этот материал опубликован в Колор-Код, Лаборатория Кода, Маркетинг-Код и тегирован , , , , , , , , , , , , , . Bookmark the permalink.

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

  1. Уведомление: YML-файл для трансляции товаров на Яндекс.Маркете (скрипт для osCommerce 2.3) | Код Да Винты

  2. Вадим говорит:

    Спасибо за материал!)) Хотелось бы задать пару вопросов, если можно конечно)) Я недавно стал осваивать oscommerce: мой сайт не индексируется поисковиками, в чем может быть загвоздка (в настройках найти не могу, до этого пользовался wordpress там все понятно) и второй вопрос есть ли готовое решение для oscommerce для облака меток? Спасибо))

    • N.Volodina говорит:

      Вероятно, новый сайт. Поисковики не сразу приходят. Попробуйте «сообщить о своем сайте». Например, для Яндекса по этой ссылке: http://webmaster.yandex.ru/addurl.xml . Поставьте пару счетчиков. Что касается oscommerce. В настройках самого движка изначально поддерживается индексация.)

  3. Михаил говорит:

    А что за шаблон на сайте про самокаты?

  4. supermarkettvinternete говорит:

    понятно, что ничего не понятно. Хвала разработчикам. Захотел сделать ИМ — теперь разбираюсь с фтп, вместо нормальной работы по профилю.

    • N.Volodina говорит:

      Если работа по профилю интереснее и приносит достаточно денег, то легче заказать интернет-магазин у специалистов-разработчиков, чем осваивать новую профессию) Но если интересно сайтостроение, не отступайте. Поначалу не всё легко и даётся с первого раза, но это дело наживное.)

Добавить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *

Можно использовать следующие HTML-теги и атрибуты: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>