Unlimited WordPress themes, graphics, videos & courses! Unlimited asset downloads! From $16.50/m
Advertisement
  1. Web Design
  2. Shopify
Webdesign

Что нового в 2017 году  для разработчиков тем Shopify

by
Length:LongLanguages:

Russian (Pусский) translation by Marat Amerov (you can also view the original English article)

Некоторые из вас могут быть осведомлены из моих предыдущих статей, что  Shopify - это платформа для электронной коммерции на основе тем, которая позволяет вам создавать интернет-магазины. За последние несколько лет она неуклонно растет и сегодня является платформой для 400 000 предприятий в примерно 175 странах.

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

  1. Обновления для управления теми
  2. Секции
  3. Блоки
  4. ThemeKit и Slate
  5. Система проектирования Polaris

Многие из следующих примеров используют Liquid. Liquid - это язык шаблонов, позволяющий разработчикам тем использовать заполнители и логические конструкции в своих шаблонах, которые будут заменены текущими данными из хранилища при запросе и визуализации страницы. Он использует простой синтаксис, который позволяет выводить (например, название продукта) и логику (например, цикл for). Я не буду вдаваться в подробности, но вы можете посмотреть мой 25-минутный скринкаст, в котором более подробно рассказывается о том, как работает Liquid.

Так как вы здесь, вы также можете быть заинтересованы в следующих вдохновляющих постах на тему:

1. Управление изображениями новых тем

Начнем с рассмотрения основных изменений связанных с темами, которые произошли недавно: Liquid фильтр img_url. До недавнего времени изображения отображались на основе набора предопределенных именованных размеров. Например:

Здесь мы запрашиваем изображение для продукта размером grande. Это подразумевает, что исходное изображение имело одну сторону, равную или превышающую 600 пикселей, визуализировать изображение с длинной более из двух осей 600px.

Эти именованные размеры теперь устарели, и пока они все еще работают, они были заменены новым набором параметров, size, crop, scale, и format. Теперь это позволяет делать целый ряд манипуляций с изображениями, которые ранее были недоступны разработчикам тем Shopify.

Я буду использовать Liquid фильтр img_url в этих примерах, но методы будут также работать со следующими объектами, связанными с изображением:

  • product_img_url
  • collection_img_url
  • article_img_url
  • asset_img_url

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

Используя вышеприведенный синтаксис, теперь вы можете контролировать размеры изображений: здесь мы указали ширину и высоту (в текущем порядке).Вы также можете указать только ширину:

Вы также можете указать только ширину:

Или только высоту:

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

Возвращаясь к нашему оригинальному примеру, вы можете подумать, что это приведет к рендерингу вашего изображения на 450x450. Это, однако, не всегда так.

Этот запрос приведет к идеальному квадрату, только если выполняются оба следующих условия:

  • Исходное изображение было 450 пикселей или больше на обеих осях
  • Обе стороны имеют одинаковую длину

Если оба условия верны, тогда будет отображено квадратное изображение размером 450x450. Если нет, то Shopify изменит его размер с помощью той же логики, как если бы вы указали только высоту или ширину. Самая длинная сторона выигрывает в этой ситуации и соответственно происходит масштабирование.

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

  • top
  • center
  • bottom
  • left
  • right

Эта функциональность была доступна с конца 2016 года, но в начале 2017 года было выпущено обновление, которое добавило еще большую гибкость. Темы, доступные в магазине Shopify Theme Store, включая премиальную тему Empire, представленную ниже, используют эти методы. Установка бесплатной темы - отличный способ узнать больше о том, как реализовать эти идеи.

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

В этом примере мы используем функцию Liquid assign для создания переменной image, которая совпадает с отображаемым в данный момент продуктом (который установлен в администраторе Shopify). Затем мы можем использовать Liquid logic для создания наших srcset, используя в этом случае свойство width:

Хорошей новостью является то, что разработчикам тем не нужно беспокоиться о повторной загрузке всех своих изображений, поскольку Shopify индексировал каждое изображение на платформе.

Два других параметра, которые стоит обсудить, - это scale и format. Параметр scale позволяет указать плотность пикселей изображения. Вы можете увеличить либо в 2, либо 3 раза в зависимости от ваших потребностей:

Параметр format позволяет указать, какой формат файла использовать для изображения. В настоящее время вы можете указать либо jpg, либо pjpg (прогрессивный JPEG):

Вы также можете воспользоваться этой техникой для изображений, находящихся в папке assets вашей темы. Для этого используете фильтр asset_img_url. Вот пример, который также использует фильтр img_tag, который приведет к отображению полностью сформированного элемента img в шаблоне:

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

2. Секции

В конце 2016 года Shopify представила «Секции». Эта новая функция позволяет разработчикам тем создавать пользовательский интерфейс администратора, который позволяет владельцам магазинов легко добавлять, изменять порядок и удалять секции контента, такие как продукты, слайд-шоу, видео или коллекции продуктов. Это распространенные случаи использования, но вы можете использовать эту функцию, чтобы позволить владельцам магазинов добавлять и редактировать любые типы контента. Все изменения в администраторе можно просмотреть в режиме реального времени, и после изменения сохранятся в магазине.

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

Шаблоны секций находятся в папке новых секций и могут быть указаны аналогично сниппетом. Если наш файл находился в sections/promotion.liquid, мы будем ссылаться на него следующим образом:

Примечание: вы не нуждаетесь в расширении .liquid, как это часто бывает со сниппетами в темах Shopify. Давайте посмотрим на пример, чтобы помочь прояснить мощь секций. Ниже приведено содержание sections/footer.liquid:

Если вы знакомы с настройками тем Shopify, некоторые из них могут показаться довольно знакомыми. Они содержат смесь HTML, Liquid placeholders и JSON, подобные тем, что найдены в settings_schema.json. Кстати, функциональность settings_schema.json по-прежнему остается: секции просто добавляют дополнительный уровень функциональности.

В верхней части шаблона находится вывод HTML, который я хотел бы сгенерировать, когда шаблон встречает секцию во время рендеринга. Внутри каждого из элементов h1 и p находятся Liquid  заполнители, использующие новый синтаксис вывода {{ section.settings. [X] }}. В наших примерах, наш шаблон секции будет искать данные, соответствующие {{ section.settings.title }} и {{ section.settings.description }}.

Это приятно и легко, но как Shopify знает, что необходимо заполнить эти заполнители? Все это относится к JSON, о котором я упоминал ранее, расположенный между тегами открытия и закрытия {% schema%}.

Чтобы наша секция появлялась в области «Настройка темы» администратора магазина, нам нужно предоставить ей идентификатор: мы делаем это, определяя значение «name» на верхнем уровне JSON.

Затем у нас есть узел настроек, у которого в этом примере есть два под-узла. Оба содержат свойства id, type, label и default. Каждый из них, в зависимости от их значения, будет определять способ отображения интерфейса администратора. Давайте посмотрим на каждого по очереди:

id

Текстовая строка, которая будет использоваться внутри. Стоит отметить, что, хотя идентификаторы должны быть уникальными в файле секции, они не обязательно должны быть уникальными во всех файлах секций. Таким образом, вполне нормально иметь id принадлежащий title в файлах нескольких секций. Настройки секций также не будут конфликтовать с настройками в settings_schema.json.

Тип

Это представляет собой элемент управления, который будет отображаться внутри администратора. Наиболее часто используемые параметры:

  • text: однострочные текстовые поля
  • Textarea: многострочные текстовые области
  • richtext: Богатый функционалом текстовый редактор
  • Image_picker: Загрузка изображений
  • radio: радио кнопки
  • select: выпадающие списки выбора
  • checkbox: Флажки

Некоторые из них требуют дополнительного JSON для работы. Например, для элемента выпадающих списков требуются параметры для его заполнения. Более подробная информация о том, как это работает, а также другие элементы управления, которые вы, возможно, захотите рассмотреть, доступны в документации Shopify.

Метки

Это отображает HTML-метки, которые будут сгенерированы администратором.

Значения по умолчанию

Этот параметр позволяет добавлять в элемент управления placeholder значение . Стоит отметить, что это значения, которые будут использоваться до тех пор, пока секция не будет обновлена владельцем магазина.

Мой пример довольно прост и создаст два элемента управления. Первый - это текстовое поле с одной строкой, которое будет отображаться в элементе h1 в шаблоне, второе - это текстовое поле с опциями - выделение жирным шрифтом, курсивом и URL.

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

Вы также заметите, что вы можете добавить пользовательские CSS и JavaScript в файлы секций, используя следующие теги Liquid:

Возможно, вы думаете, что это может добавить к вашей теме много потенциально раздутых инлайн CSS и JavaScript. Хорошей новостью является то, что Shopify объединяет все CSS и JS в один файл, который вводится через заполнитель Liquid content_for_header. Платформа обеспечивает включение только одного экземпляра, даже если эта секция используется несколько раз на странице. Более подробная информация о том, как выполняются скрипты, доступна в документации Shopify.

После того, как вы настроили свои элементы управления и имена в файле JSON, вы можете включить эту секцию в любой соответствующий шаблон. Секции могут быть добавлены в файл макета (внешний скин страницы) или в отдельный файл шаблона. Администратор Shopify будет отображать элементы управления контекстно: то есть только при просмотре соответствующего шаблона в редакторе «Настройка темы». Изменение значений приведет к обновлению в реальном времени в admin части: это отличный способ увидеть, как изменения повлияют на макет перед обновлением и нажатием вживую.

Если вы посмотрите на визуализированный HTML, вы заметите, что секции обернуты в элемент div:

Идентификатор div принимает формат shopify-section- [id], где id является уникальным идентификатором для этого элемента на странице и без указания добавляет класс shopify-section. Вы также можете добавить свой собственный класс в элемент div, указав значение класса в своих настройках. Вот как он будет искать наш пример выше:

Это добавление приведет к следующему:

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

3. Блоки

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

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

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

Во-первых, вы заметите, что в верхней части шаблона есть цикл Liquid for:

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

В приведенном выше фрагменте вы увидите, что я использую простой оператор if/elsif, который проверяет текущий тип блоков. Мы можем сами установить тип в схеме, как мы вскоре увидим. В этом примере мы используем elsif, чтобы быть уверенным в том, какой тип мы проверяем. Если бы у вас было только два разных типа блоков, как в этом примере, вы могли бы просто использовать else, как вы знаете, это единственный альтернативный вариант.

В зависимости от нашего типа будет выведена другая секция HTML. Для вывода значения, связанного с блоком, мы используем следующий синтаксис:

[Id] отображает идентификатор, указанный конкретному элементу в нашей схеме, который мы рассмотрим далее.

Перейдя к схеме, вы заметите знакомые и некоторые незнакомые элементы. Начнем с рассмотрения открывающей части:

Давайте посмотрим на каждую часть по очереди:

  • "name": "Promotional Blocks": имя, которое будет отображаться для этой группы элементов управления в админике Shopify
  • "max_blocks": 5: общее количество блоков, которые могут отображаться в этой секции. Это работает в унисон с настройкой лимита каждого блока, который мы рассмотрим позже. Как только максимальное количество блоков будет достигнуто, вы больше не сможете добавлять их в админке.
  • "presets": массив настроек по умолчанию для динамической секции. В приведенном выше примере мы хотим, чтобы наш динамический элемент появился под названием “Promotional Blocks” и в категории “Custom Homepage Content”. Значение категории позволяет группировать различные секции в админке.

После того, как мы определили name, max_blocks и предустановленные значения, мы можем обратить внимание на элементы управления, которые мы хотели бы отобразить в админке. Они определены в секции блоков схемы:

Каждый блок имеет несколько предопределенных значений:

  • "type": имя, присвоенное этой группе контроля. Это может быть все, что угодно, но в идеале что-то само собой разумеющееся.
  • "name": название этой группы элементов управления, которую вы хотите отобразить в админке
  • "limit": количество раз, когда вы хотели бы, чтобы эта группа элементов управления, например блоки, появилась в этой секции. Мы рассмотрим это позже.

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

В нашем примере у нас есть два потенциальных типа блоков, которые мы можем добавить в эту секцию. Первый - это promo-box типа блока, а второй - promo-image: которые оба мы определили.

Каждый блок может также определять свой собственный набор параметров, который может состоять из одного или нескольких элементов управления. В приведенном выше примере блок типа promo-box имеет два элемента управления, которые появятся при добавлении в секцию. Первый - текстовое поле, а второе - textarea. По какой-то причине блоки не могут использовать редактор richtex , который мы использовали в нашем предыдущем примере, textarea позволит вам добавлять HTML-код по мере необходимости. Как и в случае с статическими секциями, мы должны также определять id, type, label и description.

Существует несколько типов, в том числе:

  • text: Однострочные текстовые поля
  • textarea: Многострочные текстовые области
  • Image_picker: Загрузка изображений
  • radio: Радио кнопки
  • select: Выпадающие списки выбора
  • checkbox: Флажки
  • range: Ползунки диапазона

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

Я упомянул ранее, что блок promo-box имеет предельное значение 1. Вы, надеюсь, также помните, что мы определили максимальное количество блоков в этой секции как 5. Поэтому в этом сценарии можно иметь секцию, состоящею из:

  • 1 “promo-box” и 4 “promo-images”
  • 5 “promo-images”

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

После того, как вы подготовите свой шаблон, схему и какие-либо дополнительные CSS и JavaScript, вам нужно добавить один последний фрагмент кода в шаблон index.liquid вашей темы, чтобы активировать функциональность блока. При добавлении content_for_index к index.liquid Shopify определит, что необходимо включить секцию, которая имеет одну или несколько заданных пресетов. Затем каждый пресет становится динамической секцией, которую торговец может добавить на свою домашнюю страницу.

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

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

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

4. Theme Kit и Slate

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

В прошлом году команда Shopify выпустила Shopify Theme Kit. Theme Kit - это инструмент для командной строки (работает в Windows, Linux и MacOS), который после установки позволит вам:

  • Загрузку тем в несколько окружений
  • Загрузка и скачивание ресурсов темы
  • Следить за локальными изменениями и автоматически загружайте их на платформу Shopify

Theme Kit позволяет разработчикам тем работать со своими знакомыми инструментами (текстовым редактором, препроцессорами и т. д.) И синхронизировать изменения в фоновом режиме с Shopify development store. Если вы еще не посмотрели на Shopify с перспективы построения тем до этого, вы можете быть не уведомлены о Shopify development store.

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

Theme Kit предлагает ряд полезных команд, которые позволяют вам взаимодействовать с темами во время работы в локальной среде разработки. После настройки вы можете использовать команду watch, которая запустит процесс для отслеживания вашего каталога для изменений и загрузки в Shopify.

Shopify не может быть по-настоящему «локальным», поскольку вам нужно подключение к Интернету для работы с магазином разработки, но интеграция Theme Kit в ваш рабочий процесс делает его «локальным». В сочетании с инструментами, такими как Prepros, вы также можете воспользоваться живой перезагрузкой своего магазина в режиме разработки, а также минимизацией файлов и конкатенацией.

В 2017 году Shopify также запустил Slate: проект с открытым исходным кодом и инструмент командной строки для разработки тем Shopify. Он предназначен для поддержки вашего рабочего процесса разработки и ускорения процесса разработки, тестирования и развертывания тем в магазинах Shopify.

В то время как ThemeKit помогает вам в одной области, Slate идет намного дальше. В дополнение к предоставлению возможностей синхронизации тем ThemeKit (ThemeKit на самом деле является частью Slate), он также позволяет развертывать в нескольких средах одновременно, создавать скелетные шаблоны для новой темы и гибко организовывать таблицы стилей и скрипты.

Шаблоны сгенерированные Slate «преднамеренно пустые» (домашняя страница на изображении ниже): стандартные теги Liquid и логика, которые могут быть использованы для каждого шаблона, были включены с незначительной разметкой, классами и другим кодом, который вам нужно будет вырезать. Он предназначен как полностью функционирующая стартовая точка: все, что вам нужно сделать, это заполнить пробелы, и начать работать.

Наконец, есть куча помощников JavaScript и Sass, которые вы можете использовать, или нет, если вам нужно включить:

JavaScript

  • Ловушка фокуса
  • Адаптивные таблицы и видео
  • Формат валюты
  • Помощники для изображений
  • Варианты продукта
  • Помощники для корзины
  • События секции

CSS

  • Точки останова и медиа-запросы
  • Grid
  • Иконки SVG
  • Адаптивные таблицы
  • Пустое состояние
  • Sass миксины

5. Polaris

В мае 2017 года Shopify обновил внешний вид всех своих приложений: как декстопные, так и на мобильных устройствах. Чтобы достичь этой амбициозной цели, UX команда в Shopify разработала новую систему проектирования Polaris. Это полнофункциональная система, предназначенная не только для использования внутри Shopify, но и для партнеров Shopify, которые создают интерфейсы для приложений, которые интегрируются через Shopify API. Его цель - предоставить любому строительному блоку возможность создавать интерфейсы, которые кажутся похожими с основной админкой Shopify.

Одной из основных особенностей Polaris является обширная библиотека компонентов. Каждый компонент содержит объяснения относительно проблемы, которую он решает, рекомендации по лучшей практике, рекомендации по использованию и приметы кода для HTML и React. Все компоненты также доступны в виде Sketch файла.

В библиотеку входят компоненты для:

  • Действия: Кнопки, действия и переключатели
  • Изображения и иконки: беджики, аватары, иконки и миниатюры
  • Индикаторы обратной связи: Баннеры
  • Структура: Выносные карты, макет страницы и пустое состояние
  • Заголовки и текст: Титры, отображение текста, заголовок и подзаголовки
  • Формы: флажки, выбор цвета и даты, макеты форм и списки выбора
  • Поведение: Складные и прокручиваемые элементы
  • Списки: описания и списки ресурсов
  • Навигация: ссылки, разбивка на страницы и вкладки
  • Наложения: всплывающие подсказки и подсказки
  • Embedded: оповещения, модальные окна и подборщики ресурсов

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

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

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

Polaris - проект с открытым исходным кодом и доступен на GitHub. Команда Shopify активно поддерживает проект, и вы можете создать задачу или сделать запрос функционала.

Заключение

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

Advertisement
Advertisement
Advertisement
Advertisement
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.