Каталог в интернет-магазине, переключаем внешний вид товаров одной кнопкой

июнь 13 , 2017

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

Но давайте вспомним серьезные интернет-магазины. Многие из них предлагают на выбор несколько вариантов отображения товаров. Чаще всего встречается один вид с большими фото, второй кратким списком и третий - что-то среднее. Это очень удобно, так как предпочтения людей по виду каталога разные. А если такое могут сделать серьезные магазины, то чем мы хуже?

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

Читать дальше

SPA для поисковиков. Рендер на стороне сервера, robots.txt и страница 404

июнь 12 , 2017

SPA для поисковиков В первых двух уроках про SPA мы создали одностраничный сайт и соорудили для него sitemap.xml. Пройдя по любой ссылке в сайтмапе, посетитель сайта увидит правильно отрендеренный контент, заголовок страницы и прочее. Беда в том, что этот контент не видят поисковики. Они не умеют выполнять javascript и видят только то, что отдает сервер. Поэтому все страницы сайта для них будут совершенно одинаковые, что не только полезно, а еще и очень вредно :-)

Наша задача состоит в том, чтобы научить поисковые роботы видеть то же, что и мы с вами. Другими словами, заставить сервер отрисовывать ровно ту же html-разметку, что образуется после отработки javascript-кода в браузере.

Обращаю внимание: это никоим образом не означает отход от концепции одностраничных сайтов. Для наших посетителей при навигации по сайту страницы будут грузиться как и раньше: через ajax-загрузку контента и с History API. Изменится лишь первоначальная загрузка страницы, когда мы сразу отдадим в браузер нужный контент. Как это сделать, а также про небольшие хитрости с robots.txt и страницей 404 Not Found, читайте ниже в статье.

Метки:
Читать дальше

Как я проводил опросы в блоге: статистика и мысли на этот счет

июнь 11 , 2017

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

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

Читать дальше

Постраничная навигация по товарам в интернет-магазине

июнь 10 , 2017

Когда в интернет-магазине набирается хотя бы 3 десятка товаров, встает вопрос: как удобнее выводить списки товаров посетителям? Пока преобладают 2 способа: постраничное разбиение и динамическая подгрузка по мере прокрутки страницы. Впрочем, реализация обоих вариантов ничем особенно не отличается, кроме небольших изменений в javascript-коде.

Мы же сегодня рассмотрим стандартное и простое разбиение на страницы. Казалось бы, весь функционал сведется к добавлению в sql-запросы конструкции limit. Но не все так бесхитростно. А что будет хитрого и будет ли вообще - разбираемся ниже. Что будет точно, так это готовая реализация с примерами кода и демонстрацией работы.

Читать дальше

Одностраничный сайт. Создаем сайтмап своими руками

июнь 2 , 2017

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

Казалось бы, что его создавать? Создали sitemap.xml и скопипастили туда содержимое чужого сайтмапа, заменив пути на свои. Но это не наш метод, мы же программисты, нам неинтересно врукопашную набивать содержимое файла. Все должно строиться и обновляться самостоятельно.

Другой вариант. Почему бы не воспользоваться готовыми решениями, особенно если мы делаем одностраничник на базе какой-то CMS? Да, но тогда как мы узнаем, как самим создать xml-файл, да еще и разными способами? Как создать общие конфиги для клиента и сервера, а под маской xml-файла выполнять php-код? Как вычитать даты на php и что такое sitemap changefreq?

Если Вас заинтересовали вышеозначенные темы, то читайте статью дальше. Будет много интересного, а может, даже и полезного :-)

Метки:
Читать дальше

Создаем одностраничный сайт SPA. Разбираемся с History API

май 21 , 2017

Одностраничные сайты или Single Page Applications (SPA) - это круто. Главный их профит в том, что SPA быстрее и отзывчивее на действия пользователей. Достигается это за счет переноса логики работы на клиентскую сторону и активного взаимодействия с сервером посредством ajax.

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

Зачем это надо и как это сделать, приложив немного усилий? Об этом ниже. Поехали.

Метки:
Читать дальше

Simpple - простые решения для Вашего сайта. Проект запущен!

март 29 , 2017

Последние 3 месяца все было очень странно. Я запустил блог. В новом году появилось всего 2 толковых статьи. Материал для новых постов есть, но просто не доходят руки. Затеял переезд сайта на https, но что-то пошло не так и яндекс опустил меня в выдаче ниже плинтуса. А еще в Питере до сих пор не началась весна.

Но на самом деле все это не имеет значения, потому что главная цель последних месяцев достигнута. Сервис simpple.ru запущен и открыт для всех желающих. Сейчас проект раскрывает одну тему - встраиваемые виджеты-опросы.

Вы уже могли видеть такие опросы на страницах моего блога, а может, и оставляли свои голоса в них. Теперь каждый может бесплатно, быстро и в неограниченных количествах создавать такие же опросы и встраивать их на свои сайты. Заходите на лэндинг, а скорее даже, readme - simpple.ru, читайте краткое описание проекта и переходите в панель управления. Или же сразу по прямой ссылке cp.simpple.ru

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

Читать дальше

Простой RESTful-сервис на нативном PHP

февраль 5 , 2017

Я не знаю ни одного php-фреймворка. Это печально и стыдно, но законом пока не запрещено. А при этом поиграться с REST API хочется. Проблема в том, что php по умолчанию поддерживает только $_GET и $_POST. А для RESTful-сервиса надобно уметь работать еще и с PUT, DELETE и PATCH. И не очень очевидно, как культурно обработать множество запросов вида GET http://site.ru/users, DELETE http://site.ru/goods/5 и прочего непотребства. Как завернуть все подобные запросы в единую точку, универсально разобрать их на части и запустить нужный код для обработки данных?

Почти любой php-фреймворк умеет делать это из коробки. Например, Laravel, где роутинг реализован понятно и просто. Но что если нам не нужно прямо сейчас заниматься изучением новой большой темы, а хочется просто быстро завести проект с поддержкой REST API? Об этом и пойдет речь в статье.

Метки:
Читать дальше

jQuery Promise. Как заставить промисы работать на себя

январь 26 , 2017

Промисы, обещания, ад из колбэков, объект Deferred, then-ы, when-ы и резолвы...
Эти слова доносятся из каждого телеграфного столба. Есть ощущение, что я последний оболтус на этой планете, который не пользуется промисами. Погрустив на сей счет, я затеял разобраться с этой темой. Но как и в случае с git rebase выяснилось, что в интернетах много информации о промисах, но мало где есть объяснение на пальцах. А раз в интернетах чего-то нет, надо создать это самому.

Меня мало интересует общая теория и тонкости этой замечательной штуки. Любую незнакомую вещь я воспринимаю с точки зрения возможной пользы от нее. Поэтому подробные объяснения механизма работы промисов лучше поискать в других блогах. Мы же с вами рассмотрим пример практической работы с jquery promise. И в итоге выясним, стоит ли разбираться с этим подробнее или же можно дальше законно писать тонны кода в $.ajax.success.

Метки:
Читать дальше

Отдельный поддомен для демо интернет-магазина - shop.webdevkin.ru

январь 8 , 2017

Первый пост в новом году будет невероятно информативным! Я таки выделил отдельный поддомен, на котором будет крутиться наш демонстрационный интернет-магазин.

shop.webdevkin.ru - теперь все движения по магазину будут отображаться здесь. Больше не будет такого, чтобы отдельные части можно посмотреть, только развернув исходники. Это значит, что самое интересное в магазине - фильтры с сортировками и сравнение товаров - можно посмотреть сразу.

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

Читать дальше