Частицы (Particles)
Работа с частицами во фреймворке GANTRY 5.

Рейтинг:  0 / 5

Звезда не активнаЗвезда не активнаЗвезда не активнаЗвезда не активнаЗвезда не активна
 

В сегодняшнем материале мы попробуем исправить под свои нужды частицу (particle) Product List (Список продуктов) входящую в шаблон Versla от студии RocketTheme, использующий фреймворк GANTRY5. Для начала обратимся к самому шаблону. Данный шаблон предназначен для интернет-магазина (скачать бесплатно или обновить шаблон Versla Вы можете на нашем сайте перейдя по этой ссылке), главная страница которого представляет из себя отличную витрину:

Витрина шаблона Versla

Зачем вносить изменения в частицу?

Всё бы хорошо, еcли бы не одно «НО»! А именно – частица крепко связана с забугорным сервисом Snipcart, услуги которого абсолютно не нужны отечественным интернет-магазинам. Для маленького магазинчика на нашем Портале TELVANNI идеальным вариантом была бы ссылка на товар и категорию, которые мы выставляем на этой витрине. Но по каким-то неведомым нам причинам разработчик не предусмотрел подобной возможности, а жёстко привязал нас к упомянутому Snipcart. Попробуем самостоятельно это сделать сами.

Состав частицы.

Частицы (particle) – это своеобразные модули, как в CMS JOOMLA, призванные отображать содержимое в различных позициях Вашего сайта, управляемые из панели администратора и работающие под управлением фреймворка GANTRY5. Сами частицы обычно состоят из трёх файлов:

  • Из файла написанного на языке шаблонов TWIG, в нашем случае это будет файл productlist.html.twig
  • Из файла написанного на языке сериализации данных YAML, близкого языкам разметки (типа HTML), в нашем случае это будет файл productlist.yaml
  • Файла в фомате .scss, написанного в синтаксисе SCSS метаязыка Sass, на основе CSS. У нас это будет файл _productlist.scss
  • Дополнительных файлов, в частности на языке JavaScript.

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

Знакомство с файлами частиц.

Итак, для себя мы уже выяснили, что в общем и целом нам понадобятся три обязательных файла, а может и ещё какие-то. Для начала нам следует посмотреть эти файлы с помощью «продвинутого» тестового редактора (мы рекомендуем бесплатный редактор всех инет4иков – PSPad, который Вы можете скачать и установить прямо с нашего Портала). Для этого переходим в папку шаблонов своего сайта:
Ваш_сайт/templates/rt_versla/

Папка с шаблоном Versla

Открыв указанную папку нашему взору предстаёт некое количество файлов и папок самого шаблона, но на данный момент нам пока нужна только одна – это папка particles, внутри которой расположены файлы имеющихся в шаблоне частиц, с расширениями которых мы познакомились выше. Ищем нужные нам по названию, расположенные в алфавитном порядке файлы и находим productlist.yaml и следом за ним productlist.html.twig. Но прежде чем приступить к их изучению, давайте вернёмся в административную панель нашего сайта, перейдём в меню компонентов, выберем в нём пункт «Gantry 5 Themes». А в раскрывшемся меню выберем и нажмём пункт «Available Theme» (доступные темы), на случай, если у Вас установлено несколько шаблонов на фреймворке GANTRY5.

Обзор частицы Product List в админпанели.

В открывшейся странице выбираем наш шаблон Versla (у меня их, например, два – имеется ещё и шаблон Topaz) и нажимаем кнопку «Configure». Вверху. в меню слева. находим тему «Home», выбираем её (дабы нужная нам частица установлена только на главной странице шаблона) и переходим на вкладку «Layout».

Тема Home шаблона Versla в админпанели

Находим в блоке «Header» нужную нам частицу «Product List» и нажав справа на значок шестерёнки переходим в настройки частицы. Перед нами открываются настройки частицы и как раз вкладка «Particle», то есть, основные настройки частицы, которые нам и нужны.


Нажмите на изображение, чтобы увеличить.

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

Заходим в первую категорию Clothes (одежда) и далее в первый товар этой категории - Casual Gray Shoes (Повседневная серая обувь). Получаем следующую информацию:


Нажмите на изображение, чтобы увеличить.

Данная вкладка является описанием для конкретного созданного (в нашем случае предустановленного) товара. К нашим услугам шесть полей для заполнения:

  • Custom ID — произвольный ID (данного товара);
  • Brand — бренд (торговая марка Вашего товара);
  • Price — цена товара (символ валюты магазина устанавливается в основной вкладке в поле «Currency Symbol»;
  • Product Image — изображение товара (выбор заранее приготовленного и обработанного изображения);
  • Description — описание (произвольное описание Вашего товара);
  • Product Attributes — атрибуты товара (например, цвет, размер и др.), подробное описание настроки атрибутов смотрите на официальной странице шаблона.

В общем, с полями всё понятно, все детали товара и прочие нужные атрибуты, за исключением первого поля (Custom ID). Возможно, данное поле и имеет смысл при использовании сервиса Snipcart, но нам он неинтересен, а поле нам пригодится в наших замыслах.

Далее мы не будем вдаваться в конкретные подробности изменения кода, а представим почти готовый результат, вкратце пояснив внесённые изменения. Если Вам, дорогой читатель, эта тема будет интересна, а также другие подробности направления GANTRY5, частиц и атомов, то напишите нам об этом на наших страницах ИНЕТ4ИК в социальных сетях Facebook и ВКонтакте. Возможно Вы захотите присоединиться к нам и стать одним из авторов подобного материала. От Ваших отзывов зависит развитие данной темы и самого Портала ИНЕТ4ИК.

Внесение изменений в файлы частиц.

Вернёмся к нашим баранам. Итак, разобравшись немного с частицей в админпанели, вернёмся к нашим файлам. Первым у нас был файл productlist.yaml – откроем его с помощью нашего редактора. Внутри мы видим структуру и описание полей к нашей частице, правда на заморском языке.

Для тех, кто хочет более детально разобраться во внесённых в файл изменениях, а также просто установить нашу версию частицы «Product List», предложенную в архиве здесь и в конце материала. Напоминаем, что файлы должны быть заменены вручную и в строгом соответствии с описанием, предоставленным в файле ReadMe.txt нашего архива.

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

  • Название – name;
  • Описание – description;
  • Метку – label;
  • Подстановку значения поля – placeholder;
  • И значение по умолчанию – default, переводим на русский язык.

Таким образом часть нашей частицы станет “русскоговорящей”, но лишь в тех местах, где заданы параметры частицы. Для полной русификации потребуется глобальный перевод Вашего шаблона и фреймворка GANTRY5. Коротко об изменениях:

  1. В строке 45 изменено значение параметра (Currency Symbol) символа валюты, установленного по умолчанию (default), с $ (символ доллара) на (символ российского рубля).
  2. В строке 85 и до 88 строки включительно, внесены изменения в параметр .customid (помните первое поле (Custom ID) в настройке нашей частицы, которому мы обещали найти применение?), который заменён параметром .customurl (значение параметра может быть произвольным, но уникальным) для в скобках указанного поля. Благодаря гибкости YAML и функциональности TWIG теперь значением этого поля будет произвольно выбранный адрес (URL) Вашего товара в магазине (или любой другой адрес, введённый в поле), притом для каждого товара адрес будет различным.

Мы не описываем здесь файл productlist.html.twig и внесённые в него изменения, а лишь скажем, что функционал значения изменяется именно там. (Вы можете сравнить версию нашего файла с имеющейся у Вас, например, с помощью предложенного нами редактора или воспользовавшись другим, найти изменения и попробовать в них разобраться самостоятельно, дабы язык шаблонов TWIG не является частью этой статьи).

Таким образом, заменив указанные файлы на наши файлы из архива, Вы получаете ту же частицу, но с несколько изменённым функционалом, а именно – при нажатии на кнопку «купить» пользователь будет направлен на страницу, которую Вы указали в поле «Произвольный URL», некогда поле «Custom ID», направлявшее Вас на сторонний сервис. На этом основная часть “волшебства” заканчивается, но остаются отнюдь немаловажные детали.

Последние немаловажные детали.

Теперь, после всех манипуляций произведённых с файлами, устанавливаем их на свой сайт (у кого шаблон Versla - тот устанавливает файлы в соответстви с их расположением, кто ставит частицу в другой шаблон - читаем файл ReadMe.txt нашего архива. После очистки кеша закодим в админпанель и смотрим на нашу преобразившуюся частицу:


Нажмите на изображение, чтобы увеличить.

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


Нажмите на изображение, чтобы увеличить.

Единственное поле о котором мы не упомянули — это Демо-синхронизация. Это, возможно, синхронизация данных с предустановками шаблона. Опытным путём мы выяснили, что выключив данную опцию, на главной странице сайта в нашей частице активной становится первая вкладка, а не третья (Sports). На этом, для обладателей шаблона Versla от RocketTheme, изменения заканчиваются.

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

Если Вы переносите частицу в другой шаблон, то позвольте отнять у Вас ещё некоторое время. И так, мы говорили в начале нашего материала о третьем файле — _productlist.scss. Это файл стилей частицы. Так как в шаблоне Versla этот файл уже имеется, то при переносе частицы в другой шаблон, в его папке SCSS/ваш_шаблон/particles/ данный файл отсутствует. Так как за программную часть нашей частицы отвечает файл productlist.html.twig откроем его и внимательно посмотрим - подлючает ли этот файл какие-либо библиотеки или дополнительные файлы?! Идём вниз в этом файле и видим в строках со 113 по 117 следующие записи:

113 {% do gantry.document.addScript(url('gantry-theme://js/imagesloaded.pkgd.js'), 10, 'footer') %}
114 {% do gantry.document.addScript(url('gantry-theme://js/jquery.filterizr.js'), 10, 'footer') %}
115 {% do gantry.document.addScript(url('gantry-theme://js/jquery.filterizr.init.js'), 10, 'footer') %}
116 {% do gantry.document.addScript(url('gantry-theme://js/animatedModal.js'), 10, 'footer') %}
117 {% do gantry.document.addScript(url('gantry-theme://js/animatedModal.init.js'), 10, 'footer') %}

В этих записях нам сообщается о том, что для надлежащего функционирования частицы требуются пять файлов с расширением .js Эти файлы должны быть обязательно скопированы и размещены должным образом в папках Вашего шаблона. Заключительным этапом является “прописка” Вашей частицы и её стилей в файле SCSS Вашего шаблона. Находите в папке Вашего шаблона (например, Topaz) папку с именем SCSS и находите в ней файл с именем Вашего шаблона и расширением .scss — topaz.scss. Находите в этом файле уже подключённые частицы и после последней добавляете нашу:

// Product List
@import "topaz/particles/productlist"; – где имя topaz должно быть названием Вашего шаблона!

НЕ ЗАБУДЬТЕ!!! При внесении изменений в файл, он должен быть сохранён в кодировке UTF-8, именно сам файл. Предложенный нами редактор легко умеет это делать, иначе Вы рискуете увидеть вместо русских букв — жуткие кракозябры! Также отправляйте файлы по FTP в бинарном (двоичном) коде.

После этого Ваша частица почти готова сообщать Вашим посетителям о новых товарах. Чтобы частица отображалась должным образом, следует опять заглянуть в админпанель, как мы уже делали это ранне, но уже на вкладку «Style». Там справа вверху есть внушительная кнопка «Recompile CSS», которую и следует нажать, и дождаться рекомпиляции файлов. После, следует очистить кеш на той же странице и можно идти наслаждаться новой частицей на главную страницу своего сайта. Иногда предустановленные стили частицы смотрятся не очень привлекательно со стилем главной страницы. Попробуйте поэкспериментировать с настройками частицы. Для этого в основной настройке частицы перейдите на вкладку «Block», соседнюю от нашей переведённой «Particle» и в поле «Variations» выберите (по клику кнопки мыши в этом поле) один из предустановленных боксов — Box 1. Box 2, Box Red, Box Grey и т.д. Думаем, у Вас обязательно получится красиво! Желаем Вам удачи!!!

Видеоматериал на тему: Изменяем частицу (particle) Product List

В стадии производства...
Архив:
Частица (particle) Product List RUS 1.1НовинкаОБНОВЛЕНО
(0 голосов)

Загрузка архива частицы (particle) Product List RUS ver. 1.0

Автор Fassendek
Дата 13-09-2017
Язык  Russian
Система  Joomla 3
Размер файла 22.24 KB
Скачать 7


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

  Я принимаю файлы cookie с этого сайта.
Информация об использовании Порталом файлов cookie