Oranger.com.ua — новый интернет-магазин электронной техники.

Главные вкладки

Аватар пользователя sergeygerasimov sergeygerasimov 24 апреля 2009 в 2:20

Уважаемые друзья, после длительной разработки, я имею честь представить вам новый интернет-магазин электронной техники Oranger.com.ua.
Он создан для того, чтобы украинский пользователь полюбил шоппинг в сети так же, как и совершать покупки в оффлайне.
И мне приятно заявить о том, что программная часть выполнена на основе Drupal. Из нестандартных модулей были использованы только ядро eCommerce и ССK для создания различных типов товаров. также были собственноручно написаны модули сранения товаров, дисконтной системы и кеширования.
Давайте рассмотрим сайт поближе.

Вот она, главная страница:

Главная страница сайта Oranger.com.ua

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

Страница каталога на сайте Oranger.com.ua

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

Страница товара на сайте Oranger.com.ua

Пожалуйста, если у вас есть замечания или пожелания, не поленитесь их отобразить в комментариях. Сообщите о всех факапах и недочетах. Буду вам очень признателен.

Комментарии

Аватар пользователя gumk gumk 24 апреля 2009 в 2:48

Не плохо, только кнопки сравнить то я по нажимал, а как вывести результаты на сравнение не нашел
И еще вопрос, как сделаны характеристики товара, ССK?

Аватар пользователя Ильич Рамирес Санчес Ильич Рамирес Санчес 24 апреля 2009 в 2:55

красиво. не рябит.
ничего лишнего. тот самый дизайн который не видно. радует.

Вопрос: чем "сжимали" html от пробелов и переводов строки? Smile
или решили так шаблоны поуминать? Smile

Маленький недочет.
Выползающая форма входа. Не убирается после выползания. Как бы я передумал и захотел по меню пощелкать

А в общем все здорово Smile

Аватар пользователя kyky kyky 24 апреля 2009 в 3:14

Отлично! И особо понравилась анимация jQuery.
Собственно, публика ждет разоблачения: какие модули, и конечно, каким образом реализованы поля -- cck или таксономия?

Аватар пользователя sergeygerasimov sergeygerasimov 24 апреля 2009 в 12:39

Большое спасибо за отзывы. Было очень приятно читать. А теперь персонально:

to gumk @ 11:48

Сейчас просмотр выбранных для сравнения товаров доступен со станиц каталога. Согласен, не совсем гуд. Поправится в первом же большом апдейте. Поля товаров были сделаны при помощи CCK.

to Ilya1st @ 11:55

Жмется код довольно тривиально. Рецепт прост: переопределяем в template.php функцию _phptemplate_render(), которая в первозданном виде доступна в файле phptemplate.engine. Затем при помощи str_replace() удаляем все что не нравится.
В конечном итоге все это будет иметь примерно такой вид:

<?php

function _phptemplate_render($file$variables) {
  
extract($variablesEXTR_SKIP);
  
ob_start();
  include 
"./$file";
  
$raw_contents ob_get_contents();
  
$contents str_replace(array("\r\n""\r""\n""\t"'  ''    ''    '), ""$raw_contents);
  
ob_end_clean();
  return 
$contents;
}

?>

По результатам краш-тестов время, затраченное на выполнение этой операции для довольно объемной страницы составляет от 3 до 6 мс, что не критично даже для маньяков оптимизации, но объем документа, отдаваемого пользователю, сокращается значительно (в среднем 8-10 Кб).

А вот форму входа действительно нужно закрывать Smile Спасибо за замечание.

to kyky @ 12:14

Все разоблачение, собственно, было в описании Smile Из нестандартных (а стандартных оставили только необходимые для ядра) использовались CCK и ядро eCommerce. Все остальное — собственные разработки и наработки.

to jeehadina @ 16:45

Это официальный знак украинской гривни. Подробнее только здесь. Довольно интересный с происхожденческой и графической стороны. Поэтому и решили использовать. Очевидно, первые.

Скрины стандартные Маковские. Если интересуют подробности: Command + Shift + 4 + Space и у вас на десктопе такая вот красота со всеми симпатишными тенями.

to penexe @ 17:03

Большое спасибо за найденный баг. Поправил.

to restyler @ 20:07

Cудя по гуглостатистике на все наши сайты посетители с разрешением монитора ниже 1024 пикселя по ширине заходили давно. Поэтому так сложилось Smile

Аватар пользователя direqtor direqtor 24 апреля 2009 в 13:12

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

Аватар пользователя Ильич Рамирес Санчес Ильич Рамирес Санчес 24 апреля 2009 в 13:03

"sergeygerasimov" wrote:
to Ilya1st @ 11:55

Жмется код довольно тривиально. Рецепт прост: переопределяем в template.php функцию _phptemplate_render(), которая в первозданном виде доступна в файле phptemplate.engine. Затем при помощи str_replace() удаляем все что не нравится.
В конечном итоге все это будет иметь примерно такой вид:

то есть если не используются <pre> - идея просто охренительная. Я на паре сайтов где <pre> не пользуют - внедрю
Wacko

Аватар пользователя Ветер Ветер 24 апреля 2009 в 15:15

Регистрация в корзине не работает. Опера 9

Подобрать цвет сообщения после добавления товара в корзину. почти сливается с фоном.

Честно говоря не понял работу фильтров для выбора справа.

Огорчило сообщение о невозможности работы с 6 Интернет-эксплоэром Sad

Аватар пользователя sergeygerasimov sergeygerasimov 24 апреля 2009 в 16:27

to Ветер @ 00:15

Большое спасибо за найденный баг. Исправлено. теперь можно регестрироваться и из корзины.

А по поводу Internet Explorer 6 — надоело, честно надоело переписывать 25-30% верстки и яваскрипта под этого монстра. Поэтому всех гордых пользователей ИЕ6 и более ранних версий встречает вот такая веселая картинка:

Аватар пользователя Folcon Folcon 24 апреля 2009 в 17:22

а на чем форма входа сделана, это модуль или вы вручную кусок кода в jQuery впихнули?
спасибо, хороший сайт.

Аватар пользователя neochief neochief 10 ноября 2015 в 11:46

Да, Сергей, работа несомненно отличная.

Некоторые изъяны:

  1. На главной странице, в зеленом блоке, ссылки с ценниками ограниченно кликабельны. Я не знаю с чем это связано, кроме как с косяками каких-то скриптов. Зачем там вообще скрипты, если это можно сделать стилями? Воспроизводится в Опере и ФФ.
  2. Белое подсвечивание текста тех же ценников совсем не в тему при том фоне. Лучше бы подсвечивать зону ценника.
  3. Ценник весь полностью сделать кликабельным, а не только текст.
  4. В ФФ на странцие контактов активные пункты левого меню вылазят за уровень снизу.
  5. В разделе контактов в текстах не хватает точек кое-где.
  6. В контактах не хватает электронной почты (это ж веб).
  7. Раздел мобилок сьехал, см. http://oranger.com.ua/store/mobile (видимо от недостатка контента)
  8. В фильтре на странице категории товара, у разрешений я бы выставил white-space:nowrap
  9. http://drupal.ru/files/b1_1.png
  10. В витрине, по клику по бокам от главного дива контента, я бы скрывал ее.
  11. В фотках товара, по клику на картинку, неплохо бы отображать следующую (т.к. превью нету).
  12. Соглашусь на счет гривен, хоть и рад, что хоть кто-нибудь знает официальный символ нашей валюты, но "грн." было бы проще к восприятию.
  13. После добавления товара к сравнению (в правом блоке на странице товара), неплохо бы сделать надпись "добавили" ссылкой, скролящей страницу вниз к экрану добавления. Не все понятно, что куда и что добавилось.
  14. После нажатия на кнопку сравнить в листинге товара, нужно тоже как-то сообщеать, что сравнилка снизу находится, вероятно тем же приемом, что и в пункте 6.
  15. Вход не открывается по среднему клику (там нет ссылки, добавьте ссылку на страницу логина и все будет ОК).
  16. Регистрация: кнопка "Зарегестрироваться" => "ЗарегИстрироваться".
  17. Регистрация: номер скайпа не нужно закрывать звездочками.
  18. Поиск не дружит с киррилицей.
  19. В главной форме поиска невозможно отредактирвоать запрос, ибо при клике строка поиска очищается.
  20. В строке поиска не хватает кнопки. Я знаю что это фишка, но она весьма сомнительна.
  21. "40 товаров нашлoсь" => "Нашлось 40 товаров" (звучит лучше)
  22. Если в поиске нажимать кнопку "сравнить", то ничего в сущности не происходит, нужно оповещение "что-куда-зачем", см пункт 6.
  23. При вырубленных скриптах сайтмо невозможно пользоваться по назначению.
  24. Вы совершенно зря не используете pathauto для ссылок конечных страниц. Возможно с кастомными правилами генерации, но они уж точно будут не лишними с точки зрения SEO.
  25. В тайтле страницы стоит убрать название сайта, оставив лишь заголовок страницы. SEO.
  26. С эксплорером вы явно погорячились. Это все ж коммерческий сайт, а не личный. Достаточно было бы просто красной надписи и неработающих мега-фич, но полностью блокировать — это очень зря.
Аватар пользователя sergeygerasimov sergeygerasimov 24 апреля 2009 в 17:42

to Folcon@ 02:22

Полностью на чистом jQuery, без модулей. Зачем подключать и обрабатывать 200 строк кода, если можно написать 20?

to neochief@ 02:37

Большое спасибо за совет. Да, действительно, стоит так сделать. А у вас, по всей вероятности, Linux. А конкретный дистрибутив не подскажете? Для всех браузеров под Ubuntu и Fedora ничего подобного не возникало.

Аватар пользователя neochief neochief 24 апреля 2009 в 18:08

Зарегился, вот еще списочек:

  1. В корзине цены нужно отображать то второго знака после запятой, с валютой, c запятой как разделителем, и опционально разделителем тысячных-пробелом, т.е. "5232.3" => "5 232,30 грн." Я не знаю как eCommerce, но Ubercart это умеет из коробки.
  2. Это касается и других цен, например как "цена без скидки" здесь http://oranger.com.ua/node/2468
  3. В корзине добавил товар, ввел 2 как количество, кнопка "Обновить" так и осталась неактивной.
  4. Расположение кнопки закрытия инфо-окошка в корзине, по низу — очень спорное. Я советовал бы перенести вправо-вверх.
  5. При нажатии на опции дорставки получаю джаваскриптовый алерт "value".
  6. Купить у меня так ничего и не вышло, к сожалению, при заказе страница начинает тупить и все. Страница таки проснулась после двух минут ожидания. Такое проиходит всегда, налицо какая-то фигня в скрипте заказа.
  7. Возвращаясь к фоткам товаров на из странице, листалку лучше сделать сверху, чтобы позиция не сбивалась, если фотки разной высоты.
  8. В аккаунте, в истории покупок присутствует такое: "№названиестоимостьколичество1"
  9. При редактировании деталей акаунта возникает джаваскрипт ошибка, что поля незаполненны, хотя все на месте.
  10. Письмо на почту не пришло ни одно - ни регистрации, ни подтверждения ордера. Спамбокс пуст. Почта гугловая.

И да, в прошлом я был инженером по качеству.

Аватар пользователя sergeygerasimov sergeygerasimov 24 апреля 2009 в 19:08

to neochief @ 02:41 & 03:08

Огромное вам спасибо за такое комплексное тестирование сайта. Да, действительно, многое осталось незамеченным.

Оперативно исправили ошибки (я по номерам для удобства и краткости): 7, 16, 5, 6, 17, 30, 32, 33, 35

В ближайший большой апдейт войдут исправления: 11, 1, 3, 18, 19, 22, 24, 28, 29.

Относительно спорными мне показались замечания номер: 12 (т.к. если никто не начнет применять, то этот знак так и останется забытым), 3 и 14 (постоянная дерготня к спискам сравнения я думаю не лучшее решение + все пользователи обычно пролистывают страницу полностью и не заметить блок сравнения будет сложно). По поводу 21-го замечания надо будет устроить социологический опрос знакомых Smile

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

А вот по поводу тайтлов (номер 25) можно поподробнее? Не совсем понял связи.

А вообще большое спасибо за такой шикарный обзор факапов. Я, честно говоря, даже не надеялся на такое полное тестирование.
И еще вопрос: как попасть к вам на сайт в галлерею? Smile

UPD: Ах да, вам заказ оформлять? Smile

Аватар пользователя neochief neochief 24 апреля 2009 в 19:14

На счет 25, все просто — страница "Samsung r70" релевантней страницы "Samsung r70 | Orange" по запросу "Samsung r70".

Заказ оформлять не надо Smile

Аватар пользователя sergeygerasimov sergeygerasimov 24 апреля 2009 в 19:59

Большое спасибо. Надеюсь оно у вас найдется. В конце-концов сам могу обозреть с примерами кода, наглядными иллюстрациями и т.д.

Аватар пользователя kodo kodo 24 апреля 2009 в 20:02

Очень приятная работа, посмотреть на сон грядущий замечательно. С технической стороны уже хорошо протестировали. Похоже, мне как аналитику, в глаза сходу бросилось несоответствие цены в гривнах и фильт в долларах. Сам фильтр понятен и достаточно удобен. И еще товар с ценой ровно в 1000 долларов войдет в две категории?
А в галерею думаю обязательно попадет. Smile

Аватар пользователя sergeygerasimov sergeygerasimov 25 апреля 2009 в 0:04

Я планирую в ближайшее время описать процесс сжатия отдельным топиком. По наводке Ilya1st будет и рассказ о сжатии с наличием тегов <pre> или <code>.

А что значит "пожать весь PHP"?

Аватар пользователя volocuga volocuga 25 апреля 2009 в 1:07

Имеется ввиду,насколько будет быстрее обрабатываться PHP,если убрать ненужные пробелы,комментарии,переносы строк и тд

Аватар пользователя HIgor1968 HIgor1968 25 апреля 2009 в 13:54

Сайт классный. Только удивляюсь почему не на главной:)
Дизайн есть, описание есть, а на главной нет. Непорядок Smile

Аватар пользователя sergeygerasimov sergeygerasimov 25 апреля 2009 в 15:46

to volocuga @ 10:07

Скорость обработки кода php компилятором (насколько я понял вы именно это имели ввиду) не возрастет. Уменьшится объем html кода, отдаваемого браузеру.

Аватар пользователя volocuga volocuga 26 апреля 2009 в 11:41

"HIgor1968" wrote:
Только удивляюсь почему не на главной:)

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

Аватар пользователя direqtor direqtor 26 апреля 2009 в 15:24

Какой может быть конфликт, если я делаю сайт клиенту за деньги на основе опенсорсного решения, а потом весь код выкладываю в общее пользование?

Аватар пользователя direqtor direqtor 14 мая 2009 в 23:40

Ну, некоторый код я тоже зажимаю.
Причины:
1. недоделан.
2. слишком проектоспецифичен
3. клиент в договоре прописал, что низзя.

Аватар пользователя sergeygerasimov sergeygerasimov 26 апреля 2009 в 18:26

Что-то я тоже, честно говоря, не понимаю насчет конфликта. Особенно если сайт сделан на основе свободно распространяемого программного продукта и любая его часть может быть объяснена на пальцах и опубликована по запросу (если интересно).

P.S. Топик по сжиманию кода готовится и будет доступен во вторник.

Аватар пользователя HIgor1968 HIgor1968 26 апреля 2009 в 18:55

Просто админы спят:)
Я считаю, что сайт достойно может быть размещен на главной, и другим будет к чему стремится. Не часто на местной выставке появляются достойные сайты. Тем более что по описанию сайта соблюдены [#26079]все формальности[/#]. Да и в принципе сайт достойный (судя по комментариям - это общее мнение).

Аватар пользователя Ветер Ветер 26 апреля 2009 в 23:28

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

Аватар пользователя News News 14 мая 2009 в 19:11

Очень достойная работа. Дизайн на высоте.

Много мелких придирок, которые, уверен, отладятся.
Из крупных недочетов - это "Фильтры для выбора". Очень долго нажимать 10 параметров с перезагрузкой страницы по каждому и нет диапазона выбора.

Аватар пользователя chel chel 21 декабря 2010 в 20:07

Красивый сайт, быстрый, хочу научиться без модулей делать тоже!!!! эхх
1) а почему выбрали 5й, а не 6й друпал?
2) и почему eCommerce а не Ubercard?
ps жду статью про кеш.
Очень вдохновляет Ваша работа!

Аватар пользователя saramat saramat 13 марта 2012 в 11:45

"News" wrote:
Очень достойная работа. Дизайн на высоте.

Если убрать фотки-дизайн станет еще выше? Может вместо иконок Римские цифры ? А к примеру
просто чистый лист-типа квадрата Малевича! Предлагаю упорядоченное расположение
текста и наглядного материала, не называть дизайном. Ведь должен чем то(не в обиду сказано) маляр отличаться от художника. Может я неправильно понимаю смысл этого слова?

Аватар пользователя faraon faraon 24 марта 2012 в 1:15

saramat wrote:
"News" wrote:
Очень достойная работа. Дизайн на высоте.

Если убрать фотки-дизайн станет еще выше? Может вместо иконок Римские цифры ? А к примеру
просто чистый лист-типа квадрата Малевича! Предлагаю упорядоченное расположение
текста и наглядного материала, не называть дизайном. Ведь должен чем то(не в обиду сказано) маляр отличаться от художника. Может я неправильно понимаю смысл этого слова?

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

Аватар пользователя petrovnn petrovnn 6 сентября 2012 в 21:17

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