• Вопрос без рабочей ссылки на проблему считается риторическим. Без ссылки и скриншота - провокацией!
  • Темы озаглавленные с маленькой буквы или капсом удаляются без предупреждения!

Решено WooCommerce Cart Tab - плагин плавающей корзины

Image CMS

Валерий

Специалист
#1
Плагин WooCommerce Cart Tab отображает закладку корзины, которая "плавает" по странице магазина, страницам архивов и странице просмотра описания товара при скроллинге, и раскрывается, показывая содержимое виджета корзины, когда посетитель наводит курсор мыши на закладку. Подобный подход позволяет удерживать фокус внимания посетителя на покупке. Плавающая вкладка корзины глаза не мозолит, сильно не напрягает, но и расслабиться клиентам не дает. ;) Она словно шепчет: "Нажми на меня..." , недвусмысленно намекая на необходимость покупки! :D

Вот как выглядит вкладка после активации плагина:

cart-tab-2.png

Путем редактирования css стилей, Вы легко можете настроить нужный Вам вид вкладки, чтобы она максимально вписывалась в Ваш шаблон. Например я сделал так:

cart-tab-3.png

Варианты настройки находятся на странице WooCommerce -> Настройки -> вкладка Каталог. Выглядят настройки так:

cart-tab-1.png

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

При наведении курсора мыши на вкладку, корзина плавно "выплывает", показывая свое содержимое. На фото показано содержимое корзины при выборе светлого скина:

cart-tab-4.png

И темного скина:

cart-tab-5.png

Если дефолтные скины Вас по каким-то причинам не устраивают, то css Вам в помощь! :D
 

adsl3008

Новичок
#2
Ты не мог бы подсказать как добавить картинку корзины? и кнопку перейти. У тебя очень красиво получилось на этом изображении

 
Последнее редактирование модератором:

Валерий

Специалист
#3
Картинка - это обыкновенный бэкграунд для области ярлычка закладки, путь к которому прописал в стиле css для видимой области закладки (изначально там нет никакого бекграунда). Кнопку "перейти" просто прописал, добавив в исходный код строку вывода кнопки в исходнике плагина, ниже строки вывода количество товара в корзине. И подредактировал стили, чтобы кнопка выводилась как надо: паддинги, марджины и др.
 

adsl3008

Новичок
#4
Хотелось бы узнать куда именно ты вставил бэкграунд в css стиле, я уже целый час бьюсь над этим не как не разберусь:(
 

adsl3008

Новичок
#6
Попытки добавить в мой плагин WooCommerce Cart Tab картинку как у тебя потерпели фиаско :( ты можешь более подробно описать как добавить в свою корзину картинку ?:):):)
думаю многим пригодится в том числе и мне! :D :rolleyes::):)
 
Последнее редактирование модератором:

Валерий

Специалист
#7
Я уж и не знаю, как подробнее описать процесс добавления картинки! :) Я для добавления картинки сделал только 3 вещи:
  • Нарисовал картинку и положил ее в папку;
  • Добавил класс a.cart-parent в style.css моей темы;
  • Прописал путь к картинке в url этого класса, как показано на скриншоте.
И это все!

Возможные траблы с добавлением картинки мне видятся только в том, что:
  1. Не прописан путь к картинке в url, или он ведет не в ту папку, где лежит картинка.
  2. Возможно нужен какой-то другой класс. Я сперва посмотрел иерархию классов своего шаблона, и на основании этого прописал класс a.cart-parent {}. И то у меня получилось сделать это далеко не с первого раза. Если обратить внимание на запись "a.cart-parent", то становится очевидным, что стиль применяется для всех элементов "cart-parent", которые являются ссылкой "а", что как-то не совсем естественно. Было бы более правильно применить стиль к самому элементу, а не к ссылке, которая лежит внутри него. Не помню, почему так, но у меня сработал именно этот вариант, хотя изначально я пробовал добавлять бекграунд в другие стили. Т.е. из всего этого можно сделать следующий вывод, а именно: добавление картинки корзины в другие шаблоны может потребовать своих стилей, которые будут связаны со стилями шаблона. Учитывая принцип наследования стилей сверху-вниз, вполне вероятна ситуации наложения стилей друг на друга, а также необходимость добавления префиксов (не знаю, как правильно это назвать) из вышестоящих классов по принципу: ".класс_1 .класс_2 элемент {}". Вроде с плагином Cart Tab у меня таких проблем не было, но с другими плагинами были, и чтобы класс применился приходилось прописывать путь из классов, например, не просто писать "ul.class_3 {}" (для всех улов класса 3), а писать ".class_1 .class_2 ul.class_3 {}", т.е. короткая запись не работала. Причем обращаю внимание, что проблема была не в плагинах, а в конкретной связке "Мой Шаблон - Плагин". То есть на другом шаблоне таких проблем может и не возникнуть. Я часто сталкиваюсь с трудностями подбора стиля для списков ul li. Учитывая, что у меня на этих списках построены многоуровневые выпадающие меню, то когда еще и плагине оказываются многоуровневые ul li, каша получается такая, что иногда полдня-день уходит чтобы наконец-то подобрать и прописать правильный класс...:confused:
 

Jon

Новичок
#8
Не подскажите как удалить надпись цены и количества товара, я так понимаю в cart-tab.php нужно что-то удалить)
 

redjek

Опытный
Местный
#11
Добрый день, холе бы узнать, как можно сделать так чтобы корзина раскрывалась не при наведении курсора мышки, а по щелчку. В настройках самой корзины если поставить"Cart Widget Display the cart widget on hover" то остается только пиктограмма с ценой, и уже по щелчку перенаправляется на полную страницу корзины.
 
#12
Большое спасибо за статью! Узнал за плагин ! И вставил красивую корзину!!!!! Подскажите как прописать вместо items русский текст единиц или товаров
 

Stork.71

Гуру
Местный
#14
лучше тут. (неплохо было бы добавить эту ссылку в шапку темы)
а ссылки от D&B просто обязательны к прочтению.
 

qwacer

Новичок
#15
Разобрался. Управление плавающей корзиной теперь в Woocommerce - Настройки - Товары.
Разобрался. Управление плавающей корзиной теперь в Woocommerce - Настройки - Товары.
а у меня и там к сожалению нету :(
версия ворд 3.8 - может в этом дело
 

kvo

Форумчанин
#16
Есть возможность удалять товары прямо из виджета
Нужно вставить в /wp-content/plugins/woocommerce/templates/cart/mini-cart.php
этот код:

Код:
<?php echo apply_filters( 'woocommerce_cart_item_remove_link', sprintf('<a href="%s" title="%s">× Delete</a>', esc_url( $woocommerce->cart->get_remove_url( $cart_item_key ) ), __( 'Delete item', 'woocommerce' ) ), $cart_item_key ); ?><?php echo WC()->cart->get_item_data( $cart_item ); ?>
в строку перед (выше) :

Код:
<a href="<?php echo get_permalink( $product_id ); ?>"> <?php echo str_replace( array( 'http:', 'https:' ), '', $thumbnail ) . $product_name; ?></a>
Текст, который отображается на виджете и наведении переводится и редактируется прямо в коде.

Единственное, что в моей теме как -то не эстетично всё это смотрится, нужно подумать как сделать красивее :)

delete.png


 
Последнее редактирование:

Zaknafain

Опытный
Местный
#17
Есть возможность удалять товары прямо из виджета
Нужно вставить в /wp-content/plugins/woocommerce/templates/cart/mini-cart.php
этот код:

Код:
<?php echo apply_filters( 'woocommerce_cart_item_remove_link', sprintf('<a href="%s" title="%s">× Delete</a>', esc_url( $woocommerce->cart->get_remove_url( $cart_item_key ) ), __( 'Delete item', 'woocommerce' ) ), $cart_item_key ); ?><?php echo WC()->cart->get_item_data( $cart_item ); ?>
в строку перед (выше) :

Код:
<a href="<?php echo get_permalink( $product_id ); ?>"> <?php echo str_replace( array( 'http:', 'https:' ), '', $thumbnail ) . $product_name; ?></a>

Текст, который отображается на виджете и наведении переводится и редактируется прямо в коде.

Единственное, что в моей теме как -то не эстетично всё это смотрится, нужно подумать как сделать красивее :)
Посмотреть вложение 806

о вундерферма, клевые напитки :))
 
#19
Конкретно с проблемой замены items на русский аналог не помогало справиться ничего из перечисленного по ссылке (хотя с другими переводами проблем не возникло). Может, потому, что в папке плагина в принципе нет русского файла локализации. Помогло внести изменения непосредственно в файле cart-tab.php - заменить в коде слова item и items на шт. Вернее даже не на "шт.", а на "&#1096;&#1090;.". Изменения в отображении корзины заметны только после добавления в нее нового товара (или удалить все из корзины и добавить заново).
 
#20
Ребят помогите!
Установил плагин, активировал, в настройках поставил галочку. И все равно корзины нет на странице. В чем может быть проблема?

У меня установлена WooCommerce Menu Cart, хотя отключал его, все равно не помогло...
 
Сверху Снизу