Shopify. Как добавить ещё одну группу (ряд) баннеров

Ryan DeWitt Январь 12, 2016

Rating: 5.0/5. From 2 votes.

Please wait...

Из этого туториала Вы узнаете, как добавить ещё одну группу (ряд) баннеров в шаблонах Shopify.

Shopify. Как добавить ещё одну группу (ряд) баннеров

В нашем случае в шаблоне 6 баннеров:
Давайте добавим ещё 3 баннера (ряд баннеров). Откройте Инструмент разработчика Chrome (Chrome developer tool). Вы можете также использовать Firebugв браузере Firefox. Вы можете видеть, что используются такие классы, как custom_showcase и custom_showcase__1. Для того чтобы добавить баннера, Вам нужно внести изменения в файлы и стили шаблона. Вы можете использовать эти классы, для того чтобы найти соответствующий фрагмент кода в файлах шаблона:
Убедитесь, что Вы скачали и разархивировали файлы. Откройте программное обеспечение, такое как Notepadd++, для того чтобы найти фрагмент кода в файлах шаблона . Откройте диалоговое окно поиска, для того чтобы открыть вкладку Найти и заменить (Find and replace). Укажите название класса в поле Что искать (Find what). Выберите папку, где находятся файлы шаблона, убедитесь, и нажмите на кнопку Найти всё (Find All):
Мы нашли файлы со стилями. Внесите изменения в файлы responsive.css.liquid и style.css.liquid. Откройте файл responsive.css.liquid в редакторе Shopify. Найдите нужный фрагмент кода. Скопируйте код первых трёх баннеров:
Вставьте код ниже кода css последнего баннера. Измените классы и сохраните изменения:
```
custom_showcase__1 to custom_showcase__7

custom_showcase__2 to custom_showcase__8

custom_showcase__3 to custom_showcase__9 
```
Теперь Вам нужно внести аналогичные изменения в файле style.less.liquid. Откройте этот файл в редакторе Shopify. Найдите соответствующий фрагмент кода для трёх баннеров. Вставьте код ниже стилей для последнего блока. Измените классы, так как Вы это делали ранее:
Теперь Вам нужно найти файлы, в которых находится код и настройки для баннеров. В наше случае лучше всего его искать в файлах шаблона, используя ключевое слово custom_showcase. В нашем случае, изменения нужно внести в файлы: settings_data.json, settings_schema.json, widget-homepage-showcase.liquid. Откройте файл settings_data.json в редакторе Shopify. Найдите нужный фрагмент кода, используя ключевое слово custom_showcase. Скопируйте код для первых трёх баннеров:
Внесите изменения в классы и добавьте их ниже кода последнего баннера. Сохраните изменения:
Теперь нужно внести изменения в файл settings_schema.json. Найдите соответствующий фрагмент кода, используя ключевое слово custom_showcase. Вы увидите код для первого блока. Скопируйте код для трёх баннеров и измените названия классов. Вставьте изменённый код ниже кода последнего баннера. Измените номера блоков (Блок #1 нужно изменить на Блок #7 и т. д.) Обратитесь к видео-туториалу для более детальных инструкций:
Более того, Вам нужно внести изменения в файл widget-homepage-showcase.liquid. Откройте файл в редакторе Shopify:
Измените количество баннеров в соответствии с количеством баннеров на сайте. У нас на сайте теперь 9 баннеров:
Перейдите в раздел «Темы» и нажмите на кнопку Настроить тему (Customize theme). Откройте раздел Пользовательские блоки (Custom blocks). Вы добавили новые баннера. Теперь загрузите изображения для баннеров:
Обновите страницу. Вы успешно добавили новый ряд баннеров: