Обновление woocommerce пропал lightbox — галерея — решаем проблему

Новое обновление WooCommerce 3.0 принесло много сюрпризов владельцам магазинов на woocommerce, и особенно тем, которые используют кастомные темы (впрочем, не только).

Это обновление wooc является глобальным — крупным ! и имя этой новой обнове присвоили экстравагантное — «Бионические бабочки» «Bionic Butterfly».

В статье рассмотрим такой (как его называют — баг) хотя это вовсе и не баг ! когда владельцы shops обнаруживают, что в админпанели «настройки» «товары» «отображение товаров» пропал чекбокс подключения галереи lightbox и более того, те админы, которые используют лайтбокс, с горечью обнаруживают на страницах магазина полную «поломку» внешнего вида прежней галереи: и коли так, то — нынче решим эту проблему «поломки»… подключим в своей теме необходимые (новые) модули zoom, lightbox и slider и добавим требуемые им стили css.

Приступим: акуна матата…

 

 

 

 

 

Стоит ли обновлять woocommerce N-?

 

 

 

 

 

 

 

Если говорить откровенно, то, конечно же, и без всяких размышлений, всегда непременно нужно обновляться!

 

 

Однако, перед всяким крупным обновлением woocommerce, следует как следует подумать, и особенно тем владельцам, которые мало смыслят в механике плагина!

 

 

В среде пользователей wooc так прямо и говорят, что — пока обновляться не советуют.

 

 

 

 

 

 

То, что галерея wooc перестала правильно работать — я обнаружил сразу:

 

 

…основная фотка товара была как и прежде на своём месте, однако все фотографии галереи сдвинулись под основную и потеряли вид миниатюр. Словом, никаких модальных окон и пр. атрибутики всяких лайтбоксов…

 

 

 

Но — по порядку!..

 

 

Например, одно из изменений функционала в ядре wooc такое:

 

 

 

к оглавлению

Создавай, читай, обновляй и удаляй… объекты и хранение данных — CRUD

 

 

 

Такие классы CRUD в версии 3.0 wooc несут в себе фундаментальные изменения в работе с объектами данных в ядре — это товары, заказы, купоны, клиенты и пр.

 

 

Всё это открывает новую дорожку в развитие плагина и его функциональных возможностей (попросту всякие эстетические и функциональные удобства для пользователя) …

 

 

Об этих изменениях я много рассказывать не буду, цель статьи несколько иная… Однако тем, которые заинтересованы в близком знакомстве с обновой, могут замечательным образом прочитать подробную инструкцию разработчиков — ссылку дам чуть ниже.

 

 

А пока поближе разберёмся и посмотрим как работает

 

 

 

 

 

 

 

 

 

к оглавлению

новая товарная галерея woocommerce

 

 

 

 

Обновив плагин до версии 3.0 и далее, увидим такие возможности:

 

 

1. Посетители получит доступ и к лупе, и к зумированию (lightbox) — мне понравилась примочка)
2. Более новый подход к отображению галереи — интуитивнее для пользователя: к примеру, клик на миниатюру обновит главное изображение товара, — lightbox открыт в этом случае не будет (лайтбокс откроется при клике на иконку «лупа» или если изображение загружено по соответствующим размерам… картинки отдельного товара)).
3. Также изменены «ручные» действия посетителя в целом: листаем… чтобы просматривать иллюстрации товаров галереи; щипком увеличиваем фото (проведите по экрану вверх-вниз) чтобы приблизить или уменьшить картинку… похожие действия совершаются в некоторых фото-редакторах.
4. Открытие картинки в режиме lightbox на мобильных устройствах, отныне отобразит фото в его реальном (зауженном) размере, который как правило крупнее того, который показан на странице галереи.

 

 

 

Вот мы и подошли к главной цели статьи:

 

 

Для того, чтобы избежать неполадок лайтбоксов в кастомных темах (не дефолтных WordPress-темах) — необходимо включить новый функционал галереи, используя для этого — add_theme_support().

 

 

 

 

 

 

 

к оглавлению

как включить обновлённые функции галереи woocommerce

 

 

 

 

 

 

 

 

Для того, чтобы подключить функционал (ну, чтобы в вашей теме обеспечить поддержку) новой галереи woocommerce, нужно прописать в файл функций functions.php вашей активной темы на постоянное место жительства такие строки кода, изменив «вашатема» на имя своего шаблона:

 

 

 

 

 

/** подключаем после обновления woocommerce 3.0 ЛАЙТБОКС-lightbox - галерею **/
function вашатема_setup() {
add_theme_support( 'wc-product-gallery-zoom' );
add_theme_support( 'wc-product-gallery-lightbox' );
add_theme_support( 'wc-product-gallery-slider' );
}
add_action( 'after_setup_theme', 'вашатема_setup' );
/** подключаем после обновления woocommerce 3.0 ЛАЙТБОКС-lightbox - галерею **/

 

 

 

 

 

Однако…

 

 

 

 

Далее…

 

Если пройтись по ядру плагина, то — обнаружим несколько добавочек в папке assets…

 

 

wp-content/plugins/woocommerce/assets/css/photoswipe/default-skin/default-skin.css

 

и…

 

wp-content/plugins/woocommerce/assets/css/photoswipe/photoswipe.css

 

 

 

Вот всю эту прелесть и нужно подключить посредством вышепоказанного кода!

 

 

Но ведь появятся лишние мета ссылки в шапке сайта, воскликнет внимательный читатель!?

Кое-что появится! — ответит писатель))

 

 

 

 

 

 

 

 

Т.е. если взглянуть на исходный код … скажем, витрины — никаких лишних «мета» не будет. На мой взгляд, неплохой подход разработчиков…

 

 

 

 

к оглавлению

обновим стили css wooc в своей теме

 

 

 

 

Тем админам, которые переносили стили css плагина в свой шаблонПолезно почитать, ибо работа со стилями CSS важнейшее обстоятельство, с которым приходится иметь дело администратору. Организация стилей — должна быть в шаблоне, но не в плагине: целесообразнее во всех отношениях. Подборка статей о WOOC
, теперь нужно добавить обновлённые CSS из нового:

 

 

путь такой: /wp-content/plugins/woocommerce/assets/css/woocommerce.css

 

 

 

 

 

Все необходимые нам нынче css стили я подготовил, и вам только останется добавить их в свой файл css активного шаблона, например, так:

 

 

.woocommerce div.product div.images .woocommerce-product-gallery__trigger{
position:absolute;
top:1.4em;
left:.2em;
font-size:2em;
z-index:9;
width:36px;
height:36px;
background:#fafffa;
text-indent:0.5%;
border-radius:100%;
box-sizing:content-box;
text-decoration:none;
}

 

 

и ещё…

 

 

.woocommerce div.product div.images .flex-control-thumbs li{
width:25%;
float:left;
margin:2px 0 0;
list-style:none;
opacity:.8;
}

 

 

и…

 

 

.woocommerce div.product div.images .flex-control-thumbs li{
opacity:9;}

 

 

ну и…

 

 

.woocommerce div.product div.images .flex-control-thumbs{
overflow:hidden;
zoom:1;
margin:0;
padding:0;
}

 

 

Теперь миниатюры галереи будут отображаться как нужно, т. е. по-новому красиво и правильно…

 

 

 

 

как эпилог:

 

Тем администраторам, которые по неосторожности обновились и претерпели разлад в работе галереи — но пока не готовы править файлы своей темы для восстановления работоспособности магазина и его галереи, — возможно поступить мудро (как говорил Винни-пух) — откатить обновлённый wooc на прежнюю его версию…

 

Откат можно выполнить воспользовавшись плагином WP Rollback — скачайте из репозитория и установите… в настройках всё ясно и просто: описывать не буду… однако замечу: с его помощью возможно откатить любое обновление на любую же прежнюю версию плагинов вообще!

 

Однако, коли возникнут трудности, спрашивайте в комментариях…

 

 

 

 

 

На этом занавес представления опускается…
…на рампы пыль печальная ложится…

...город веб мастеров Михалика.ru © - запросто с WordPress - ATs media squad

 

 

 

 

 

 

В WordPress 5.5 добавлена XML-карта сайта — wp-sitemap.xml — подробнее в видео.