Что такое Shopify Жидкость? Краткое изложение основ

Более 4.4 млн веб-сайты электронной коммерции создаются с использованием Shopify Платформа. Это универсальная платформа электронной коммерции, которая потрясла Интернет с момента ее запуска в 2006 году. Продавцы выбирают эту платформу для размещения своих интернет-магазинов по многим причинам, от простой настройки оплаты до встроенных маркетинговых инструментов и многого другого. 

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

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

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

Заинтересованы? Присоединяйтесь ко мне, когда я попытаюсь ответить на вопрос: что такое Shopify Жидкость? Давайте погрузимся!

Что такое Shopify Жидкость?

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

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

Создан с использованием Ruby, Shopify жидкость по сути, служит заполнителем, позволяющим вставлять данные в предопределенный формат (подробнее об этом ниже).

Так как это работает?

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

Теперь предположим, что у вас есть статический веб-сайт; базовый скелет сайта предустановлен, но вы хотите отображать динамический контент. Вот где пишут Shopify Жидкость в ваш HTML-код удобна. Это удобно в качестве заполнителя для динамического контента. 

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

1. Объекты
2. Теги
3. Фильтры

Ниже мы рассмотрим каждый тип данных по очереди:

Жидкие объекты

Объекты похожи на библиотеку функций или контента; внутри каждого объекта есть различные свойства. 

Если вы не знакомы с концепцией объектов, вот краткий обзор:

Объект — это фундаментальное понятие в программировании. Объект состоит из двух компонентов: 

1. Свойства, определяющие состояние объекта
2. Функции, определяющие поведение объекта

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

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

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

{{Blog.title}} 

Давайте разберем это:

• Здесь, 'Блог' является объектом. 
• Свойство, которое мы хотим в этом библиотека отмечен 'название». 
• Команда '' сообщает Liquid, как связаны эти два бита данных. 
• Двойные скобки — это синтаксис Liquid, который определяет {{content/output you want}}, который вы хотите от Shopify сервера. 

Жидкие Теги

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

Вот как это может выглядеть:

{% if blog.title == 'праздник' %}

** HTML-код изображения **

{% конец, если %}

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

• Теги используют немного другой синтаксис, чем объекты, которые выглядят так  {%…%}.
• Первый тег {% if blog.title == 'праздник' %} сообщает Liquid, какое условие должно быть выполнено перед запросом контента с сервера.
• Условие, которое мы запрашивали, определяется оператор «если». Если вы знакомы с кодированием, вы знаете, что операторы if работают путем сравнения двух или более фрагментов данных друг с другом. Если они совпадают, он перейдет к следующей строке нашего кода. Здесь,  если blog.title == 'праздник,' мы просим Liquid проверить, содержит ли заголовок нашего блога слово «празднование». Если это так, он перейдет к следующей строке нашего кода. Если это не так, Liquid не вернет никакого контента.
• В этом примере, если у нас есть заголовок блога, содержащий слово «празднование», Liquid извлечет и отобразит HTML-код нашего изображения.
• Как только он это сделает, он переходит к следующей строке {% конец, если%}, который завершает нашу программу.

Это всего лишь один пример того, что вы можете делать с тегами. Shopify Жидкость имеет теги для:

• Control  когда код выполняется
• повторять/итерация (повторяю) блок кода
• Дисплей определенные HTML-разметки
• Создать новые переменные.

Жидкостные фильтры

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

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

{{ blog.title | uppercase }}

• Синтаксис фильтров {{…}}.
• Здесь искомое свойство объекта: 'Название блога'.
• Фильтр, который мы применяем, верхний регистр.
• Команда '|' разделяет ввод и вывод нашего кода.

Теперь, когда пользователь смотрит на заголовок нашего блога, он отображается в верхнем регистре.

Преимущества Shopify жидкость

Предположим, вы дизайнер сайта или разработчик. В этом случае одним из наиболее существенных преимуществ Shopify Liquid заключается в том, что вам не нужны данные магазина (т. е. информация о магазине) для создания или изменения веб-сайта. Это происходит потому, что когда пользователь впервые делает Shopify store, вся информация хранится на Shopify server, что означает, что вы можете использовать Liquid, чтобы просто получить нужные вам данные. 

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

• Простота в освоении и использовании: Liquid имеет простой синтаксис и его легко понять, что делает его доступным как для разработчиков, так и для тех, кто не является разработчиком.
• Динамичный контент: Liquid позволяет создавать динамический контент
• Настраиваемый: С Liquid вы можете создавать собственные шаблоны и темы, что дает вам полный контроль над внешним видом вашего магазина электронной коммерции.
• Улучшенная производительность: Жидкие шаблоны компилируются и кэшируются, что улучшает производительность и скорость сайта по сравнению с другими шаблонизаторами.
• Большое сообщество: Shopify имеет большое сообщество пользователей, предоставляя доступ к обширным знаниям и поддержке, упрощая поиск решений распространенных проблем, связанных с Liquid.

Требования

Итак, что вам нужно, чтобы начать использовать Shopify Жидкость?

Если у вас уже есть Shopify магазин, Shopify Жидкость будет доступна для вас бесплатно. Мы обсудим, как вы можете найти Liquid ниже. Но все, что вам нужно знать на данный момент, это то, что каждый сайт, созданный на Shopify создан с помощью Liquid, поэтому вы можете начать вручную редактировать этот код, как только создадите сайт.

Однако, если у вас нет Shopify store, вам нужно будет создать его, чтобы начать играть с Liquid. 

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

Теперь, когда у вас есть базовый скелет вашего интернет-магазина, вы можете извлечь эти данные из Shopify сервер и настроить его с помощью Liquid (подробнее об этом ниже). 

Хотя вам не нужно никакого опыта программирования, чтобы начать использовать Liquid, знакомство с основными принципами кодирования облегчит ваше путешествие. Но по большей части вы можете найти обширную документацию по самопомощи и учебные пособия на Shopify портал разработчиков. Здесь вы найдете целый раздел, посвященный Жидкие основы. 

Желательно, чтобы вы потратили некоторое время на просмотр этих руководств, прежде чем начать. Хотя Liquid — мощный инструмент настройки, он также может сломать ваш сайт, если вы не знаете, что делаете!

Начало работы с Shopify жидкость

Итак, используя то, что мы уже узнали, давайте посмотрим, как мы можем отредактировать наш Shopify тема с использованием Liquid. 

Чтобы получить доступ к Liquid, выполните следующие действия:

1. Дублируйте свою тему: Чтобы избежать серьезных ошибок, разумно сделать копию темы перед началом. Таким образом, если вы сделаете какие-либо ошибки, ваш оригинал Shopify тема остается неизменной. Для этого перейдите в раздел тем в правой части вашего Shopify панель приборов. Выберите тему, которую хотите изменить, и нажмите «Действия», чтобы открыть раскрывающееся меню. Теперь выберите дубликат.
2. Переименуйте свой дубликат: Когда вы дублируете тему, вы увидите, что она появляется в вашем списке тем. Вы можете переименовать свою копию, чтобы не путать оригинал и дубликат. Просто снова нажмите кнопку действий и нажмите «Переименовать» в раскрывающемся меню. 
3. Вход в редактор кода: Теперь снова выберите действия над дубликатом и выберите «Редактировать код». Вы будете перенаправлены к полному списку кодов в вашей теме. Взгляните на папки, перечисленные справа от вас. Вы должны увидеть несколько папок, содержащих различные аспекты вашей темы, такие как макет, шаблоны, разделы и т. д. Откройте папку шаблонов. 
4. Кодирование в жидкости: Внутри папки шаблонов вы увидите список файлов с типом файла .liquid. Вы также можете создать новый шаблон файла Liquid, нажав кнопку «плюс» в папке шаблона. Он спросит вас, какой шаблон вы хотите сделать, т. е. страницу, раздел, блог и т. д., и назвать файл. Чтобы отредактировать файл, дважды щелкните файл шаблона, и он откроется в редакторе кода справа.

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

Чтобы проиллюстрировать, давайте рассмотрим простой пример:

Изменение размера изображений с помощью Shopify жидкость

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

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

Итак, как изменить размер изображения?

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

• Продукция
• Варианты продукта
• Позиции
• Коллекции
• Статьи

Как только вы решите, какие изображения вы хотите редактировать, вам нужно знать, какое свойство вы хотите использовать. Чтобы узнать, какие свойства имеют атрибут изображения, посмотрите Shopifyсписок объектов и их свойства. 

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

Вот основной код:

{{ blog.articles.image | img_url: ‘100×100' }}

Сломать:

• Блог объект, который мы ищем, и нам нужно свойство статьи, так как он содержит все статьи нашего блога. В частности, мы хотим изменить изображения в статьях нашего блога, поэтому мы ориентируемся на изображение свойство внутри статей.
• Теперь применяем фильтр img_url. Если бы мы оставили все как есть, то просто отображалось бы изображение, извлеченное из URL-адреса, предоставленного Shopify сервер. Однако мы также собираемся указать дополнительный параметр: размер изображения. '100×100' (Обратите внимание, что Shopify использует пиксели для определения диапазонов размеров).
• Наконец, мы заключаем наш код в синтаксис двойной скобки Liquid, который используется для фильтров. 

И мы закончили! Это должно возвращать выходные данные для всех изображений нашего блога, делая их размером 100 на 100 пикселей.

Советы и вынос

Надеюсь, что прочитав эту статью, у вас теперь есть ответ на вопрос: Что такое Shopify Жидкость?

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

Если вы заинтересованы в использовании Shopify Liquid, мы бы посоветовали вам следовать этим выводам, чтобы получить максимальную отдачу от него:

1. Начните с четкого понимания Liquid: Хорошее понимание Liquid позволит вам создавать более сложные пользовательские темы. С этой основой новые пользователи могут использовать весь потенциал Shopify для создания уникальных и привлекательных интернет-магазинов.
2. Тщательно протестируйте свою тему: Тестирование необходимо, чтобы убедиться, что ваша пользовательская тема работает должным образом в разных браузерах и на разных устройствах. Выявляя проблемы совместимости на ранней стадии, вы избегаете потенциального разочарования своих клиентов.
3. Используйте доступные инструменты и ресурсы: Shopify имеет множество ресурсов, доступных для помощи разработчикам тем, так что используйте их! При использовании это может сделать процесс разработки быстрее и проще.

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

Это все от меня; к вам. Дайте мне знать о вашем опыте с Shopify Ликвид в комментариях ниже!