Одной из самых востребованных функций в каждой теме Shopify является масштабирование изображения.Это позволяет клиенту просматривать ваши продукты в детальном виде.Доступно множество приложений для увеличения, но я не хочу говорить о них в этой статье.Сегодня я собираюсь показать вам, как добавить функцию масштабирования вручную.
Как добавить функцию масштабирования для темы Shopify 1. Скачать zoom lib В этой статье я буду использовать старую, но хорошую библиотеку jQuery Zoom.Джек Мур.Этот плагин в настоящее время используется для масштабирования изображений продуктов в бесплатной теме Shopify по умолчанию, Debut.Этот плагин для масштабирования практически не имеет стилей (так что вы можете настроить его самостоятельно) и очень прост в реализации.
Этот плагин совместим с: jQuery 1.7+ в Chrome, Firefox, Safari, Opera, Internet Explorer 7+.
Если у вас в данный момент есть настройка узла для тематики, вы можете установить этот плагин через npm, запустив:
?1 npm install jquery-zoom Или вы можете скачать плагин jQuery Zoom.
Добавление jQuery к вашей теме Сначала вам нужно проверить, установлен ли jQuery в вашей теме или нет.Для этого плагина jQuery Zoom требуется минимум jQuery 1.7 +.
Попытка поиска в вашей теме этих файлов темы.liquid, vendors.js, theme.js или script.js, чтобы увидеть, загружается ли он.
** Примечание: Помните: никогда не включайте jQuery lib дважды в вашу тему, это может вызвать конфликт и проблему с Javascript в вашейtheme.
После проверки вы обнаружите, что библиотека jQuery не включена в вашу тему.Просто добавьте эту строку в заголовок вашей темы HTML (часто перед закрывающим тегом и перед другими js libs)
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.4/jquery.min.js" defer="defer"></script>
Добавьте файл плагина zoom.min.js к своей теме. После загрузки плагина jQuery Zoom извлеките и найдите файл с именем jquery.zoom.min.js и загрузите его в папку ресурсов Theme.Затем в вашем файле theme.liquid после загрузки библиотеки jQuery включите эту строку
В качестве альтернативы, вы также можете добавить минимизированный код в конечный vendors.js,файл theme.js или script.js - найденный вами плагин jQuery загружается на предыдущем шаге
Редактирование шаблона продукта для инициализации функции масштабирования. Во-первых, вам нужно найти шаблон вашего продукта, используемый в вашей теме, он часто называется product.liquid или product-template.liquid.Или попробуйте поискать любой файл, относящийся к изображениям, в вашем product.liquid.
Добавьте информацию о классе image-zoom и data-zoom.
** Обратите внимание, что featured_image для вашегопродукт может называться как-то иначе, в зависимости от используемой темы.
Код после редактирования может выглядеть примерно так:
<img class="shopifyexplorer-zoom" src="{{ featured_image | img_url: '480x480' }}" alt="{{ image.alt | escape }} data-zoom="{{ featured_image | img_url: '1024x1024', scale: 2 }} >
Динамическая инициализация плагина масштабирования. Поскольку существует множество различных тем с широким разнообразием CSS, которые могут быть применены к элементам, приведенный ниже код запускается добавленным классом image-zoom на главном изображении продукта.Он добавит оболочку с jQuery, к которой подключаемый модуль масштабирования добавит дополнительный HTML-код, создав эффект масштабирования.Это позволит избежать любых проблем, вызванных макетами CSS или другими стилями, которые могут повлиять на созданный вручную контейнер.
window.addEventListener ('DOMContentLoaded', function () {(function ($) {$ (document) .ready (function)() {$ ('. shopifyexplorer-zoom') .wrap ('') .css ('display', 'block') .parent () .zoom ({url: $ (this) .find ('img')).attr ('data-zoom')});});};}) (jQuery);});
Плагин jQuery Zoom обладает множеством других свойств, которые вы можете передать методу .zoom ().Они могут быть найдены в документации к плагину и включают в себя, продолжительность, цель, касание и многое другое.
Вытакже можно добавить стили к вашим увеличенным изображениям, чтобы указать, что изображение будет увеличиваться при наведении мыши, или если вы используете одно из других значений, таких как захват, щелчок или переключение, вы можете изменить курсор по умолчанию для изображения.масштабирование с помощью CSS.
Вывод: Надеюсь, что мои подробности помогут вам в запуске вашего магазина.Из этого туториала вы узнаете, как вообще добавить функцию масштабирования jQuery, в другой статье я покажу вам, как добавить ее подробно и в конкретной теме.Спасибо всем за чтение моего урока.