tl;dr (заткнись и дай мне код)
Вы можете найти окончательную версию кода ниже.
Когда я что-то набрасываю или даже создаю цельную пользовательскую тему Shopify, меня часто просят включить ленту Instagram.
Хотя установка какого-либо приложения является ответом для многих разработчиков, она не лишена недостатков;
- Это вредит скорости загрузки сайта
- Обычно это несовместимо с остальной частью темы.
- Расширенная настройка обычно невозможна
- Вы не можете настроить напрямую из редактора темы
В этом кратком руководстве я поделюсь тем, как я обычно это делаю, избегая вышеуказанных недостатков.
Шаг 1
Создайте учетную запись на behold.so и свяжите ее с учетной записью Instagram вашего бизнеса.
Шаг 2
Найдите любой раздел, отдаленно напоминающий ленту Instagram, и попробуйте создать фиктивную ленту вручную.
Готовый многоколоночный раздел Shopify 2.0 Dawn
Используя тему Shopify 2.0 по умолчанию (Dawn), я могу вручную создать фиктивную ленту Instagram.
Готовый многоколоночный раздел темы Shopify 2.0 Dawn с изображениями-заполнителями
Шаг 3а
Найдите раздел Liquid code в онлайн-редакторе кода. В моем случае это в
sections/multicolumn.liquid
Сделайте копию файла и назовите его как-то описательно, например
sections/insta-feed.liquid
Обязательно закройте исходный файл, так как он нам больше не понадобится.
Шаг 3б
Нам нужно изменить 2 вещи в новом разделе «insta-feed», чтобы мы могли позже добавить его через редактор.
Ближе к концу файла вы найдете часть, похожую на эту
{% schema %}
{
...
"name": "t:sections.multicolumn.name",
...
}
Измените название раздела следующим образом
{% schema %}
{
...
"name": "Instagram Feed",
...
}
Мы почти закончили, нам просто нужно внести такое же точное изменение в другом месте, поэтому прокрутите весь путь до закрывающего тега схемы, который может выглядеть примерно так:
...
"presets":
{
"name": "t:sections.multicolumn.presets.name",
"blocks": [
{
"type": "column"
},
{
"type": "column"
},
{
"type": "column"
}
]
}
]
}
{% endschema %}
И снова… изменить название раздела на «Лента Instagram».
...
"presets":
{
"name": "Instagram Feed",
"blocks": [
{
"type": "column"
},
{
"type": "column"
},
{
"type": "column"
}
]
}
]
}
{% endschema %}
Шаг 4 (сложный)
Найдите фильтр Liquid или HTML-тег изображения, отвечающий за рендеринг каждого изображения.
Совет: обычно это несколько строк после циклов основных блоков.
{% for block in section.blocks %}
...
{{ block.settings.image | image_url ... }}
...
{% endfor %}
Шаг 5
Добавьте к изображению дополнительный класс CSS, например «insta-photo», либо непосредственно в
<img ...>
или косвенно через параметры фильтра image_url Liquid.
{{ block.settings.image | image_url: ...,
class: 'insta-photo' }}
Шаг 6
Вернитесь к behold.so, найдите URL-адрес своего фида и держите его под рукой для следующего шага.
Шаг 7
Скопируйте этот короткий фрагмент, заменив YOUR_URL_HERE URL-адресом фида, оставив окружающие кавычки без изменений.
<script>
function loadInstaFeed() {
fetch('YOUR_URL_HERE').then(data => data.json()).then(photos => {
document.querySelectorAll('.insta-photo').forEach((p, ix) =>
p.insertAdjacentHTML('afterend', `<img src="${photos[ix].mediaUrl}" class="${p.className}" id="${p.id}">`) || p.remove()) })}
loadInstaFeed()
</script>
И вставьте его чуть выше открывающего тега схемы (должно быть ближе к концу вашего файла).
👇
{% schema %}
...
🎉 Вуаля! Ты сделал это!
Теперь вы захотите немного улучшить его.
1. Сделать его более удобным для редактирования
Попробуйте изменить порядок ленты, заметили, как исчезают изображения? Давайте исправим это, сказав Shopify перезагружать наши изображения, когда мы что-то меняем в редакторе.
Добавьте следующее чуть выше ‹/script›
{% if request.design_mode %}
window.addEventListener('shopify:section:load', loadInstaFeed)
{% endif %}
Ваш код должен выглядеть примерно так, и теперь ваш фид будет обновляться вместе с
<script>
function loadInstaFeed() {
fetch('YOUR_URL_HERE').then(data => data.json()).then(photos => {
document.querySelectorAll('.insta-photo').forEach((p, ix) =>
p.insertAdjacentHTML('afterend', `<img src="${photos[ix].mediaUrl}" class="${p.className}" id="${p.id}">`) || p.remove()) })}
loadInstaFeed()
{% if request.design_mode %}
window.addEventListener('shopify:section:load', loadInstaFeed)
{% endif %}
</script>
2. Делаем изображения кликабельными
Теперь давайте сделаем так, чтобы изображения ссылались на соответствующие посты в Instagram.
В строке 5, сразу после `‹img
p.insertAdjacentHTML('afterend', `<img 👈 src="...
Добавьте следующее
onclick="window.open('${photos[ix].permalink}', '_blank')"
Что должно сделать строку 5 похожей на это
p.insertAdjacentHTML('afterend', `<img onclick="window.open('${photos[ix].permalink}', '_blank')" src="${photos[ix].mediaUrl}" class="${p.className}" id="${p.id}">`) || p.remove())
3. Делаем изображения более кликабельными
Щелчок теперь должен работать, как и ожидалось, но это не совсем правильно, не так ли?
Добавьте следующее сразу после ‹/script›
<style>
.insta-photo {
cursor: pointer;
transition: .2s ease;
}
.insta-photo:hover {
opacity: 0.8;
transition: .2s ease;
}
</style>
🥳 Ура! Были сделаны.
Теперь у нас есть полностью работающая настраиваемая лента Instagram, которая легко интегрируется с остальными вашими разделами.
Предполагая, что вы выполнили шаги 3a и 3b, теперь вы найдете раздел под названием «Лента Instagram», который можно добавить на свою страницу.
Лента Instagram, созданная с использованием Javascript и Liquid (без приложений)
Функции
- Новый раздел Instagram обрабатывается так же, как и любой другой раздел в теме, и поэтому его можно настраивать.
- Никаких дополнительных ресурсов (JS или CSS) не загружалось.
- Раздел плавно интегрируется с редактором тем Shopify, что позволяет естественно перемещаться и манипулировать
- Код легко расширяется, включая другие функции, такие как заголовок поста, дата, лайки и т. д.
- Раздел можно использовать повторно и, скорее всего, он будет работать с любой темой, особенно с официальными темами Shopify, созданными поверх темы Dawn 2.0.
Некоторые предостережения, о которых следует знать
Поскольку это «быстрая и грязная» лента Instagram, она также не лишена недостатков.
- Используя behold.so, ваша лента ограничена 6 сообщениями! Следуй за мной для предстоящего последующего руководства, которое использует API Instagram, чтобы обойти это ограничение.
- Хотя мой код пытается быть как можно более совместимым, не предполагая ничего о том, как структурирован ваш исходный раздел, он все же может в конечном итоге отклоняться от некоторых тем и может потребовать некоторых дополнительных настроек!
Полный фрагмент кода
Не забудьте присвоить своим изображениям такой класс, как «insta-photo».
<script>
function loadInstaFeed() {
fetch('YOUR_URL_HERE').then(data => data.json()).then(photos => {
document.querySelectorAll('.insta-photo').forEach((p, ix) =>
p.insertAdjacentHTML('afterend', `<img src="${photos[ix].mediaUrl}" class="${p.className}" id="${p.id}">`) || p.remove()) })}
loadInstaFeed()
{% if request.design_mode %}
window.addEventListener('shopify:section:load', loadInstaFeed)
{% endif %}
</script>
<style>
.insta-photo {
cursor: pointer;
transition: .2s ease;
}
.insta-photo:hover {
opacity: 0.8;
transition: .2s ease;
}
</style>
Автор
Я разработчик Full-stack Shopify из Палестины, Газа.
