Чем только я не занимаюсь, находясь в роли фрилансера. Вот нашлась работа по созданию и настройке Интернет магазина. Сделать нужно было быстро, поэтому вникать в изучение новой админки и движка не хотелось, а с VaM Shop был более-менее знаком. Именно поэтому остановился на нем. Вообще магазин VaM Shop основан на двух других osCommerce и xt:Commerce, является в некотором роде их модификацией. Плюсом для меня была полностью русифицированная версия системы и наличие небольшого архива с шаблонами (который я предварительного скачал в другом месте). Как потом оказалось, все не так просто.

Итак, найти движок VaM Shop вы можете на официальном сайте. Там также есть подробное описание системы, ее функций, примеры уже готовых магазинов и т.п. CMS имеется в двух вариация – платной и бесплатной. В первом случае вам придется заплатить $80, за что вы получите доступ к службе поддержки и обновлениям модулей на 1 год. По словам разработчиков, в демо версии кроме этих вещей также отключена функция отправки e-mail. У меня не было времени вникать во все эти тонкости, поэтому я нашел скрипт магазина VaM Shop на одном из специализированных форумов. Хотя, теоретически, наверное, можно было обойтись и версией с официального сайта.

Установка, в принципе, не сложная, занимает считанные минуты – в админке имеется доступный пошаговый мастер настройки. Дальше предстояла самая проблемная часть – подключение шаблона. Ведь на то, что отображается в Вамшопе по умолчанию, просто страшно смотреть:) Здесь есть несколько тонкостей, главная особенность которых заключается в разной структуре шаблонов для всех трех систем VaM Shop, osCommerce и xt:Commerce. Рассмотрим все варианты по порядку.

1. Использование стандартных шаблонов VaM Shop

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

Зато установка занимает несколько секунд – вам просто нужно заменить файл стилей stylesheet.css и добавить новые картинки. Конечно, с таким подходом многое поменять не удастся.

2. Модификация шаблона из xt:Commerce для VaM Shop

Поскольку у обеих админок есть много общего, то и шаблоны у них кое в чем пересекаются. На сайте vamshop.ru в разделе статей вы можете почитать заметку о том, как шаблон от xt:Commerce переделать для  системы VaM Shop.  Судя по всему,  задача не сложная, но может занять определенное время из-за того, что придется править много файлов. Статья написана подробно и четко, вопросов возникнуть не должно.

Зато  шаблонов для xt:Commerce куда побольше, и вид у них более презентабельный. Несколько бесплатных вариантов вы можете найти здесь.

3. Использование шаблона osCommerce для VaM Shop

Больше всего в Интернете можно найти шаблонов для osCommerce – как платных, так и бесплатных. Но и отличия с Вамшопом у них огромные, описание основных из них можно почитать здесь. В VaM Shop используются Smarty шаблоны, где код разделен на 3 слоя – php html css, которые друг от друга отделены (подробнее – тут). А макет osCommerce состоит из набора php файлов. Поэтому просто перезалить имеющийся архив с файлами на FTP, увы, не получилось. Рассказываю алгоритм действий.

Шаблоны у VaM Shop находятся в папке templates, причем там имеется 2 версии верстки – с DIV`ами и таблицами. Поэтому первым делом, вам нужно определиться с каким из них будете работать. После этого создаете копию выбранного шаблона и записываете ее на FTP в новую директорию, например templates/my-new-template/. Теперь все изменения будете проводить только в ней. В самой админке, кстати, не забудьте выбрать новый шаблон в качестве используемого – это делается в меню «Настройки» – «Основные» – «Мой магазин», поле «Шаблоны».

Как правило, шаблоны для osCommerce содержат кроме кода еще и PSD файлы. Собственно, если у вас есть опыт верстки – можете использовать для работы исходники. Я поступил несколько иначе – установил на локальном компе osCommerce, благо там также весь процесс очень простой. Затем сменил в нем шаблон на нужный мне – тут обошлось простой перезаписью старых файлов. После чего подгонял шаблон VaM Shop под работающий магазин на osCommerce. Да, сложно – но другого варианта я лично не нашел. Разгребать php файлы шаблона osCommerce, думаю, было бы намного дольше, а так у меня был готовый магазин, где уже можно было видеть HTML код макета. Вот, кстати, некоторые из шаблонов (опубликую сегодня-завтра парочку из них на Дизайн Мании):

Просидев пару дней за шаблоном, я уже было начал жалеть, что не установил osCommerce, но не знаю, сколько бы времени тогда потратил на изучение локализации и установку разных модулей. Последнее, что хотелось бы заметить – не нужно путать VaM Shop с osCommerce by VaM – это разные вещи:) Вообще этих магазинов развелось ужасающе много, как по мне.

Кстати, вопрос к читателям – с какими движками интернет-магазинов приходилось сталкиваться и что посоветуете из бесплатных решений?

P.S. Сенсация! 500 баксов в сутки – это реальность!

Советую также взглянуть на просто огромный софт архив – ежедневное обновление, свеживе версии, только легальный софт (без вареза)!

Если кто не слышал, то сейчас проходит конкурс блогеров линкомаулия – опять Маул раздает много денег:)

Читаем также последние трансферные новости футбола – Аршавин таки в Арсенале.

Хочу сегодня рассказать об одном интересном феномене (если можно так выразится) в области веб-разработки, целевая аудитория – постсоветское пространство. Название этому объекту – LiveStreet – это бесплатный движок для создания блого-социальных сетей. Данный проект является клоном социальной сети Habrahabr.ru , клоном лишь в положительном смысле, то есть он наследует функциональность Хабра. А она очень даже внушительная, но обо всем по порядку.

Так вот, LiveStreet реализован с применением ООП на PHP5+MySQL5, при этом построен по принципу модели MVC (это позволяет легко изменять как логику поведения и внешний вид движка). Создатель LiveStreet – Мжельский Максим aka ort.

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

• Использование UTF-8
• Ведение персональных блогов
• Возможность создания коллективных блогов
• Система рейтингов блогов, топиков, комментариев, пользователей
• Система голосования за блоги, топики, комментарии, пользователей
• Возможность добавлять топики в избранное
• Автоподстановка тегов
• Коллективная внутренняя почта
• Система контроля доступа(ACL) к разным возможностям сети(создание блога, возможность голосования и т.п.)
• Возможность создать закрытый сайт
• Система инвайтов
• Топики-ссылки
• Топики-опросы
• Администрирование своих блогов
• Назначение модераторов блогов
• Настройки оповещений на емайл

Как уверяет Максим, дальше нас ожидает еще большее число новых возможностей. Видимо, так оно и будет, поскольку работы по усовершенствованию движка не прекращаются ни на минуту. Недавно, кстати, на Хабре был анонс новой версии LiveStreet 0.2. Обо всех новшествах можно также читать на самом сайте LiveStreet, например в блоге разработки.

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

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

Из информационных блоков и страниц есть «прямой эфир», где отображаются последние добавленные топики, облако тегов и рейтинг блогов. В отличии от Хабра нет компаний и работы. Хотя для обычной социальной сети (особенно начинающей) в этом нет необходимости. Также есть раздел люди с полной статистикой по зарегистрированным пользователям.

Главный преимуществом движка является его бесплатное распространение, то есть любой более-менее технически подкованный пользователь, сможет создать собственную блого-социальную сеть. Для корректной работы необходим PHP не ниже 5 версии, MySQL с поддержкой UTF-8 и InnoDB (хотя будет работать и на MyISAM, но возможны нарушения целостности данных). Также для PHP необходимо установить расширение mbstring, для корректной работы с русскими строками в UTF-8.

Подробнее о процессе установки читаем здесь. Там же можно скачать исходники LiveStreet.

На данном этапе «больная тема» для движка – дизайн. Многих пользователей он, мягко говоря, смущает, так как полностью скопирован из Хабра. Лично я ничего плохого в этом не вижу, особенно если учитывать тот факт, что проект создан лишь на энтузиазме его автора Максима. Те не менее, некоторые позитивные сдвиги в этом направлении имеются.

Был проведён конкурс на новый дизайн, в котором приняло участие более 20 работ, был выбран победитель. Сейчас идёт процесс проработки дизайна более детально и оформление всех страниц движка. Как оказалось процесс этот не быстрый, скорее даже медленный, и к версии 0.2 просто физически не получилось успеть его сменить.
В связи с этим, хочу бросить клич верстальщикам. Если у вас есть желание помочь проекту с версткой макета и умение делать это качественно – пишите.

Думаю, к следующей версии мы сможем наблюдать уже новый дизайн.

В общем, впечатления от проекта лишь положительные. Лично мне было бы интересно попробовать себя в создании какой-то социальной сети. Понятное дело до размеров Хабра не дойти, но, уверен, если правильно выбрать нишу, то средненький и, что главное, полезный проект можно создать.

Команде авторов и всех, кто трудится над улучшением проекта, хочется пожелать дальнейших творческих успехов и не останавливаться на достигнутом!
Если у вас есть возможность, давайте поможем проекту:

• Найти ошибку и сообщить об этом
• Высказать пожелания к движку
• Либо просто помочь материально – WebMoney Z243511716564 или R476052190965, Яндекс Деньги 41001269419150 – список тех, кто поддержал проект материально опубликован на странице “О проекте”

P.S. Заходим на сайт с уникальными шаблонами на основе css. Только валидные, уникальные шаблоны.
Серия статей о зароботке с системой Блогун. Как лучше покупать постовые в Блогуне?
Кстати, у меня недавно очередное интервью взяли – читаем здесь.

Спонсоры поста:

• Первая в СНГ интернет газета
• Интересует реселлинг?

Табы (или закладки) позволяют экономить место, размещая в одном блоке сразу несколько «наборов информации». Выглядит это примерно так:

При клике на закладку отобразится выбранный раздел. По-моему, вещь крайне удобная и практичная. Собственно поэтому я выбрал данный метод для вывода промежуточных результатов конкурса «в погоне за трафиком» справа в сайдбаре блога. Для каждого тура создана закладка, где будут размещены соответствующие данные. Кстати, уже сейчас можете наблюдать расположение игроков после 5-ти дней, количество переходов специально не публикую дабы не было желания накрутить показатели. Скажу лишь, что пока никто не вышел за сотню, поэтому шанс есть абсолютно у каждого!

Существует множество различных реализаций и скриптов для табов – вот, например, англоязычная подборка из 37 вариантов. Там есть абсолютно все – стандартные закладки, с автоматическим переключением и различной анимацией.

Поскольку я использую wordpress, то для начала решил поискать плагины, которые бы помогали создавать табы (tabs). Нашел несколько штук, к сожалению, большинство из них работать отказалось. Вот есть неплохое решение – postTabs, но данный плагин выводит табы в постах или страницах вашего блога, что четко указано в документации по настройке. Поэтому решил не мучаться с ним, а поискать какой-то отдельный скрипт. Тем не менее, если вам нужно разбить страницу на несколько частей – рекомендую.

Опять же пришлось достаточно долго искать подходящий вариант, тестировать и настраивать, пока не пришел к UI/Tabs jQuery по наводке Ольги – автора ресурса «Блог для вебмастеров». У нее в блоге, кстати, табы реализованы. Пользуясь моментом, хочу, во-первых, поблагодарить за подсказку, а во-вторых, пригласить поучаствовать в акции – «поздравь Ольгу с Днем Рождения и получи подарок!» – весьма интересный конкурс.

А теперь к делу:

Установка UI/Tabs jQuery

1. В блоке <head> блога нужно прописать следующие строки:

1
2
3
4
5
6
7
8
9
10

<script src="http://code.jquery.com/jquery-latest.js"></script>
<link rel="stylesheet" href="http://dev.jquery.com/view/tags/ui/latest/themes/flora/flora.all.css" type="text/css" media="screen" title="Flora (Default)">
<script type="text/javascript" src="http://dev.jquery.com/view/tags/ui/latest/ui/ui.core.js"></script>
<script type="text/javascript" src="http://dev.jquery.com/view/tags/ui/latest/ui/ui.tabs.js"></script>
 
<script>
  $(document).ready(function(){
    $("#example > ul").tabs();
  });
</script>

Внимание! Лично я перед использованием скриптов рекомендовал бы сохранить их к себе на хостинг и вызывать уже оттуда. Ссылки выше оставил, чтобы у вас была возможности скачать файлы.

2. Дальше для вывода табов в нужном месте шаблона должен использоваться код:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16

<div id="example" class="flora">
<ul>
<li><a href="#fragment-1"><span>Один</span></a></li>
<li><a href="#fragment-2"><span>Два</span></a></li>
<li><a href="#fragment-3"><span>Три</span></a></li>
</ul>
<div id="fragment-1">
Закладка номер1
</div>
<div id="fragment-2">
Закладка номер2
</div>
<div id="fragment-3">
Закладка номер3
</div>
</div>

3. Последний штрих – настройка внешнего вида табов. Файл css указанный выше, насколько я понял, отвечает за стили абсолютно всех примеров в документации jQuery, поэтому я скопировал себе только:

http://dev.jquery.com/view/tags/ui/latest/themes/flora/flora.tabs.css

Для фона закладок используется изображение tabs.png:

Вы можете его изменить как угодно под стиль своего сайта, после чего исправить путь к нему в классе:

.ui-tabs-nav a, .ui-tabs-nav a span {
    float: left; /* fixes dir=ltr problem and other quirks IE */
    padding: 0 12px;
    background: url(pix/tabs.png) no-repeat;
	color: white;
}

Дополнительные возможности и описания вы можете найти в этой документации (англ).

P.S. Напоминаю про важную конференцию веб-разработчиков.
Читаем также как презренный манимейкер статьи по каталогам прогонял и мифы о дизайне сайтов.

Спасибо спонсорам: Википедия онлайн бизнеса. Все о Pay Per Lead и полезный Блог о веб-дизайне.