aStore: что купить на Amazon.com

Если вас интересуют только мои личные рекомендации косметики, кулинарных мелочей, гаджетов, товаров для бега и плавания — просто идите сюда и складывайте всё в вашу корзину на Amazon.com.

Эту же ссылку я добавила в оглавление блога («Мой Amazon») и в виджет в правой колонке GeekChick.ru. Виджет не будет виден, если у вас включен AdBlock, и может иногда отображаться неполностью. Простите меня и поверьте, что я сделала всё, что могла :)

Дальше я буду рассказывать про настройки шаблонов и таблицы стилей aStore и его встроенные инструменты. На пальцах и через призму собственного опыта. Если вы web-дизайнер и лучше знаете, пожалуйста, расчешите бороду и воздержитесь от комментариев, если они не содержат в себе ссылки на хорошие шаблоны для aStore.


Для тех, кому посчастливилось не общаться со мной последние три недели: aStore — это маленький проект Amazon.com, позволяющий заработать на рекомендациях разных товаров, сгенерировав личную витрину.

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

Крупные сайты, авторы и «евангелисты», от Тима Ферриса до лекторов на Coursera.com, не стесняются ставить аффилиатные ссылки, зарабатывая от 6% на каждой совершённой покупке. В некоторых постах в этом блоге такие ссылки тоже стоят, и это позволило мне купить пару гаджетов для обзоров, оплатить хостинг, пару тем для Wordpress и десяток приложений.

Для одного из курсов в моём университете мне нужно было найти проект, в работе над которым я бы смогла улучшить своё понимание HTML5, CSS и желательно PHP или JavaScript — и я решила начать с aStore, потому что давно обещала. CSS'а я получила по горло.

Основная проблема этого магазина — в том, что Amazon.com не очень поддерживает и развивает инструменты для его настройки, и, если вы хотите сделать свою личную витрину посимпатичнее (на свой вкус), танцевать вам придётся вот отсюда:

С одной стороны, ничего криминального; с другой — мне хотелось отредактировать поля для ввода текста, изменить количество товаров в строке и «поиграть со шрифтами». Оказалось, что для редактирования владельцам aStore доступно только переписывание (overriding) CSS.

Эти каскадные таблицы стилей, если на пальцах, работают с конкретными блоками и частями страницы. И если вы хотите изменить цвет текста одной из ссылок в колонке справа, вам нужно найти блок «Одна из ссылок в колонке справа» и его прицельно раскрасить.

В общем, такого блока здесь нет. Как и нет целого набора других блоков — и я не нашла способ, скажем, увеличить длину текста описания на витрине. 129 знаков — максимум, и если вы хотите это отредактировать, то сидите и верстайте свой собственный магазин руками от начала и до конца. С раскрашиванием подзаголовков и вёрсткой в ряд четырёх, а не трёх картинок. На выходе работы с aStore вы получаете короткую ссылку вида http://astore.amazon.com/geekchru-20, и единственный исходник, с которым вы можете работать — это вот эта самая таблица CSS. Никакой HTML или шаблоны вам на руки не выгружают. Поиграть со шрифтами и уголками можно, но строго в заданных рамках. Чтобы оторвать некрасивую надпись с рекламой самого «Амазона», мне пришлось закрасить её в цвет фона.

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

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

Я ничего по душе не нашла — и в общем это было бы нечестно, мне нужно было писать всё руками, самой читая о том, как работают hover'ы и позиционирование блоков — и пришла к котяткам:

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

  1. Сделайте всё белым, а тексты — чёрными. Или проведите полчаса, изучая шаблоны — там есть такие. Но мало.
  2. Не пытайтесь найти готовые адекватные сложные темы для aStore и тем более плагины для WordPress в интернете. Нормальных нет (по причинам, которые я детально описала выше), зато есть платные.
  3. Чтобы встроить свой aStore в Wordpress, нужно создать php-шаблон страницы на основе уже существующих шаблонов вашей личной темы. Из-за моего истеричного фона c котятками (художник так видит), я, подвигав немного, оторвала и sidebar, и header своего блога.

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

Чтобы созданный вами шаблон воспринимался как Template и появился в выпадающем списке в настройке вида страницы, нужно будет прописать комментарий в код. Вы поймёте, когда.

  1. Проще всего, конечно, будет просто давать ссылку на свою витрину на домене Amazon.com, не заморачиваясь iframe-тегами и php-шаблонами. В этом случае создание такого каталога личных рекомендаций должно занять максимум пару дней — сначала вы собираете ASIN-номера товаров на Amazon.com, а потом загружаете их в категории и пишете свои короткие описания. Я в итоге сдалась и не стала ограничивать их 129 знаками, смирившись с обрывом текстов. Перфекционисты найдут свой способ.