Настройка всплывающего окна Добавлено в корзину в virtuemart 3

Опубликовано: 9 Декабрь, 2016
Категория: Внешний вид, дизайн
Комментариев: 36

VirtueMart позволяет при покупке товара отображать всплывающее окно с информацией о купленном товаре и ссылками на корзину и продолжение покупок. По умолчанию выглядит это не совсем привлекательно.

 

Что ж, попробуем это исправить.

Для показа всплывающего окна в Virtuemart > Настройки > Оформление заказа активируем опцию Отображать всплывающее окно 'Добавлено в корзину'.

Шаблон вывода находится в файле /components/com_virtuemart/views/cart/tmpl/padded.php. Чтобы при обновлении все изменения сохранились сразу перенесем его в папку используемого шаблона /templates/имя_шаблона/html/com_virtuemart/cart/padded.php (если какие-то папки у вас отсутствуют, то создайте их).

Для начала обернем весь код в дополнительный блок, чтобы было удобнее контролировать минимальную ширину окна. После

вставим

и в самом конце поставим закрывающий тег

Теперь в css файл шаблона можно добавить код, задающий минимальную ширину.

Далее заменим ссылки на кнопки. Если в шаблоне используется bootstrap, то это сделать очень просто.

Для кнопки Продолжить покупки заменим

на

Для кнопки Показать корзину заменим

на

Текст самих кнопок можно изменить в языковом файле /language/ru-RU/ru-RU.com_virtuemart.ini

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

на

Выглядит уже лучше.

Теперь изменим форматирование информации о товаре.

Заменим

на

Изменить текст добавлен в Вашу корзину можно в том же языковом файле /language/ru-RU/ru-RU.com_virtuemart.ini

Не хватает изображения. Сразу после

вставим

Добавим немного стилей в css файл шаблона

Теперь стало лучше.

Кроме этого во всплывающем окне можно показать похожие товары. Для этого в Virtuemart > Настройки > Оформление заказа активируем опцию Показывать сопутствующие товары во всплывающем окне.

Для удобной стилизации заменим код вывода похожих товаров

на

В файл стилей шаблона добавим

В результате получим

Чтобы при клике на кнопку Продолжить покупки не переходить в родительскую категорию товара, а просто закрывать всплывающее окно добавим в конце

Тот же эффект можно получить (источник), заменив код вывода кнопки продолжения покупок

на

Скачать файл padded.php со всеми правками можно по ссылке.

36 комментариев

    vskuchmak

    нет ли у вас на айфоне в сафари проблем с появлением данного окна?

      admin

      admin

      На iphone нет возможности протестировать.
      В браузере на компьютере работает правильно?
      В Virtuemart > Настройки > Шаблоны включена опция Использовать Fancybox?

        vskuchmak

        я в принципе спрашиваю, до внесения изменений )
        галочку посмотрю

          admin

          admin

          Все изменения никак не меняют поведение окна, изменяется только внешний вид.
          Если до этого на iphone все работало, то будет работать и после изменений.

    Ivan

    Спасибо за материал! Но не отображается изображени, не находит или не подгружает..

      admin

      admin

      Статья актуальна для vm3. Уточните какая версия vm у вас?
      Пришлите ссылку на сайт.

    Tobi

    Здравствуйте, спасибо за отличную статью!
    Теперь переход в корзину становится намного привлекательней.
    Подскажите, как можно закруглить края всплывающего окна ?
    Для тех у кого картинка и описание становиться по центру, попробуйте добавить в стили:
    .padded-button {
    overflow: hidden;
    }

      admin

      admin

      Попробуйте эти стили

    Plosky

    В новом обновлении для Airshop будет реализована эта настройка?

      admin

      admin

      В AirShop это уже есть. В новой версии будет немного переделано.

        Plosky

        мм, хорошо!

    Андрей

    Добрый день. Несколько вопросов.
    Дано VirtueMart 3.0.18.3 на Джумле 3.6.4. Настроена мультиязычность на русском и украинском языках.

    Во всплывающем окне при добавлении товара в корзину имеется текст "добавлен в корзину". Но это украинская страница. В языковом файле отвечающей константы стоит украинский текст. А выводится русский.

    И второй вопрос. В том же всплывающем окне кнопка корзины ведет на системную страницу джумлы. У меня созданы пункты меню типа корзина Виртумарт с нормальным алиасом. При этом модуль с кнопкой которая ведет в корзину переходит на правильную страницу.

    Можно ли это как то исправить?

      admin

      admin

      Здравствуйте!

      Вам нужно изменить переменную в языковом файле украинского языка

      По ссылке.
      Можно прямо задать ее в коде

      заменив

      на адрес нужной страницы

        Андрей

        Я эту переменную в первую очередь проверил, и там украинский текст.

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

          admin

          admin

          С мультиязычностью проблемы только во всплывающем окне?
          До внесения правок также были проблемы с ссылкой на корзину?
          Пробовали заменять файл padded.php файлом из статьи?

    1gr0k

    Здравствуйте. У меня какая то ерунда получается, вношу изменения в файл стилей шаблона, очищаю кэш в панели управления и все стили в самом файле исчезают( Что это может быть?

      admin

      admin

      Вы правите стили в админ панели?
      Если да, то подключитесь к сайту по ftp и вносить правки непосредственно в файл.

        1gr0k

        Да в том то и дело что я правлю стили на хостинге в файле стилей моего шаблона а не в самой админ панели. В панели я тока очищаю кеш ,а потом захожу в файл стилей на хостинге и все стили которые я копировал из данной статьи исчезают( может надо в файле стили прописывать в определённом месте?

          admin

          admin

          Чтобы ответить точно, нужно смотреть на сайт. Пришлите доступ к админке и доступ к сайту по ftp на admin@virtuemart.su, постараюсь помочь.

    IsaeffSerge

    Здравствуйте! Попробовал я изменить кнопку "Продолжить покупки" в Корзине. Мне надо было изменить цвет фона. Как я понял за эту кнопку отвечает файл
    mini_cart.php
    лежащего тут
    /site/components/com_virtuemart/views/cart/tmpl/
    в нем я нашел строку с continue_link и переименовал его в continue_link_2. В шаблоне стилей создал continue_link_2 с белым фоном. Все файлы сохранил, страницу на сайте обновил и ни фига - как была кнопка зеленой, так и осталась. Вообще никаких изменений. Подскажите, что я не так делал? Простое изменение в стиле шаблона не вариант, т.к. эта кнопка дублируется во всплывающем окне "Товар добавлен в корзину". А мне надо изменить только кнопку в Корзине.
    Корзина находится здесь
    http://terrakota63.ru/cart

      admin

      admin

      Здравствуйте!

      Класс кнопки Продолжить покупки во всплывающем окне не изменился, он по-прежнему continue_link.
      Возможно, данный файл переопределен в папке с шаблоном /templates/имя_шаблона/html/com_virtuemart/cart/
      В любом случае можно добавить стиль, который изменит фон кнопки

        IsaeffSerge

        Спасибо, я попробую, но мне надо изменить цвет кнопки в Корзине, а не во всплывающем окне

          admin

          admin

          Пришлите скрин кнопки, которую нужно изменить.

            IsaeffSerge

            Вот

            А у всех, если зайти в пустую Корзину, то присутствует только графа метод доставки, а способа оплаты нет

            admin

            admin

            Судя по сайту кнопку Вы уже изменили?
            Вставлять картинки можно с помощью обычного html тега

    antonivanov

    Здравствуйте! А можно ли изменить окно заказа звонка при остутствии товара? И без регистрации. В airshop. Спасибо

      admin

      admin

      Здравствуйте!

      Это не зависит от шаблона. Уточните, что именно нужно сделать, пока не очень понятно.

    IsaeffSerge

    Так я же уже описывал свою проблему. Стиль этой кнопки привязан к стилю кнопки во всплывающем окне ТОВАР ДОБАВЛЕН В КОРЗИНУ. И мне надо, чтобы во всплывающем окне цвет кнопки "Продолжить покупки" остался зеленым, а в корзине эта кнопка была белой. Как мне это реализовать?

      admin

      admin

      Для стилизации кнопки только в корзине используйте стили

        IsaeffSerge

        Сработало! Большое человеческое спасибо!!!

          admin

          admin

          Отлично.

    Вольф

    Что то у меня при таком коде:

    во всплывающем окне показывается картинка родительского товара. А нужна картинка дочернего.

    Ваш код

    вообще не сработал.

      yuri

      Здравствуйте! У меня изображение слишком большое,как сделать его меньше?

    Василий

    Здравствуйте, подскажите пожалуйста как можно сделать вот такую корзину

    Василий

    Здравствуйте, подскажите пожалуйста как можно сделать вот такую корзину

    [img]http://image.torrent.kg/images/eSh3509.png[/img]

    Василий

    [url=http://image.torrent.kg/images/eSh3509.png][img]http://image.torrent.kg/images/tmb_eSh3509.png[/img][/url]

Добавить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *

*
Для вставки кода заключите его в теги [php] [/php]
*