Введите часть искомого слова, названия или фразы...
↑ ↓
  1. Новые темы озаглавленные с маленькой буквы - удаляются без предупреждения!
  2. Вопрос без рабочей ссылки на проблему считается риторическим. Без ссылки и скриншота - провокацией!

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

Тема в разделе "Плагины для WooCommerce", создана пользователем Валерий, 27 окт 2013.

  1. Валерий

    Валерий

    Сообщения:
    271
    Симпатии:
    152
    Баллы:
    43
    Плагин 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
     
    • Нравится Нравится x 2
  2. adsl3008

    adsl3008

    Сообщения:
    20
    Симпатии:
    3
    Баллы:
    3
    Ты не мог бы подсказать как добавить картинку корзины? и кнопку перейти. У тебя очень красиво получилось на этом изображении

    [​IMG]
     
    Последнее редактирование модератором: 2 ноя 2013
  3. Валерий

    Валерий

    Сообщения:
    271
    Симпатии:
    152
    Баллы:
    43
    Картинка - это обыкновенный бэкграунд для области ярлычка закладки, путь к которому прописал в стиле css для видимой области закладки (изначально там нет никакого бекграунда). Кнопку "перейти" просто прописал, добавив в исходный код строку вывода кнопки в исходнике плагина, ниже строки вывода количество товара в корзине. И подредактировал стили, чтобы кнопка выводилась как надо: паддинги, марджины и др.
     
    • Симпатия Симпатия x 1
  4. adsl3008

    adsl3008

    Сообщения:
    20
    Симпатии:
    3
    Баллы:
    3
    Хотелось бы узнать куда именно ты вставил бэкграунд в css стиле, я уже целый час бьюсь над этим не как не разберусь:(
     
  5. Валерий

    Валерий

    Сообщения:
    271
    Симпатии:
    152
    Баллы:
    43
    У меня прописано так:

    otvet-1.png
     
    • Нравится Нравится x 2
  6. adsl3008

    adsl3008

    Сообщения:
    20
    Симпатии:
    3
    Баллы:
    3
    Попытки добавить в мой плагин WooCommerce Cart Tab картинку как у тебя потерпели фиаско :( ты можешь более подробно описать как добавить в свою корзину картинку ?:):):)
    думаю многим пригодится в том числе и мне! :D :rolleyes::):)
     
    Последнее редактирование модератором: 3 ноя 2013
  7. Валерий

    Валерий

    Сообщения:
    271
    Симпатии:
    152
    Баллы:
    43
    Я уж и не знаю, как подробнее описать процесс добавления картинки! :) Я для добавления картинки сделал только 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:
     
    • Нравится Нравится x 1
  8. Jon

    Jon

    Сообщения:
    1
    Симпатии:
    0
    Баллы:
    1
    Не подскажите как удалить надпись цены и количества товара, я так понимаю в cart-tab.php нужно что-то удалить)
     
  9. Александр Валентинович

    Александр Валентинович

    Сообщения:
    14
    Симпатии:
    2
    Баллы:
    3
    Странно, но закладки "Каталог" я не нашел у себя в Woocommerce. И пустая корзина не пропадает. Помогите!
     
  10. Александр Валентинович

    Александр Валентинович

    Сообщения:
    14
    Симпатии:
    2
    Баллы:
    3
    Разобрался. Управление плавающей корзиной теперь в Woocommerce - Настройки - Товары.
     
  11. redjek

    redjek Местный

    Сообщения:
    155
    Симпатии:
    36
    Баллы:
    28
    Добрый день, холе бы узнать, как можно сделать так чтобы корзина раскрывалась не при наведении курсора мышки, а по щелчку. В настройках самой корзины если поставить"Cart Widget Display the cart widget on hover" то остается только пиктограмма с ценой, и уже по щелчку перенаправляется на полную страницу корзины.
     
  12. Юрий Николаевич

    Юрий Николаевич

    Сообщения:
    145
    Симпатии:
    3
    Баллы:
    18
    Большое спасибо за статью! Узнал за плагин ! И вставил красивую корзину!!!!! Подскажите как прописать вместо items русский текст единиц или товаров
     
  13. D&B

    D&B Администратор Команда форума Местный

    Сообщения:
    3.279
    Симпатии:
    726
    Баллы:
    113
    Тут
     
  14. Stork.71

    Stork.71 Местный

    Сообщения:
    1.046
    Симпатии:
    255
    Баллы:
    83
    лучше тут. (неплохо было бы добавить эту ссылку в шапку темы)
    а ссылки от D&B просто обязательны к прочтению.
     
  15. qwacer

    qwacer

    Сообщения:
    1
    Симпатии:
    0
    Баллы:
    1
    а у меня и там к сожалению нету :(
    версия ворд 3.8 - может в этом дело
     
  16. kvo

    kvo

    Сообщения:
    59
    Симпатии:
    6
    Баллы:
    8
    Есть возможность удалять товары прямо из виджета
    Нужно вставить в /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


     
    Последнее редактирование: 4 авг 2014
    • Нравится Нравится x 1
  17. Zaknafain

    Zaknafain Местный

    Сообщения:
    137
    Симпатии:
    16
    Баллы:
    18
    о вундерферма, клевые напитки :))
     
  18. kvo

    kvo

    Сообщения:
    59
    Симпатии:
    6
    Баллы:
    8
    Ага :)

    ps Ещё в редакторе темы style.css

    Меняем размер шрифта на вкладке
    Код:
    .cart-tab .cart-parent {
    font-size:2em;
    }
    
    Меняем ширину
    Код:
    .cart-tab {
    width:30em;
    }
    
     
  19. Ника01

    Ника01

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

    agroachtuba

    Сообщения:
    2
    Симпатии:
    0
    Баллы:
    1
    Ребят помогите!
    Установил плагин, активировал, в настройках поставил галочку. И все равно корзины нет на странице. В чем может быть проблема?

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