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

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

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 со всеми правками можно по ссылке.

61 комментарий

    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

    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

        IsaeffSerge

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

          admin

          admin

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

            IsaeffSerge

            IsaeffSerge

            Вот

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

            admin

            admin

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

    antonivanov

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

      admin

      admin

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

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

    IsaeffSerge

    IsaeffSerge

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

      admin

      admin

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

        IsaeffSerge

        IsaeffSerge

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

          admin

          admin

          Отлично.

    Вольф

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

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

    Ваш код

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

      yuri

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

        admin

        admin

        C помощью css. В статье есть код, настраивающий размеры картинки.

        Если по каким-то причинам он не сработал, то пришлите ссылку на сайт.

          yuri

          Спасибо. Но я не знаю куда прописывать этот код.Подскажите Пожалуйста.

            admin

            admin

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

            yuri

            Вот http://style-gadgets.ru/

            admin

            admin

            В конец файла /templates/t3_bs3_blank/css/custom.css добавьте

            yuri

            Спасибо! Помогло.Вы как всегда выручаете.

            admin

            admin

            Рад, что проблема решилась.

    Василий

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

    Василий

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

    [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]

      admin

      admin

      По ссылке http://image.torrent.kg/images/eSh3509.png нет изображения.

    vasika778

    [URL=https://hostingkartinok.com/show-image.php?id=19119aa9d56d644e6284f7f349ca0ab1][IMG]https://s8.hostingkartinok.com/uploads/images/2017/02/19119aa9d56d644e6284f7f349ca0ab1.png[/IMG][/URL]

      admin

      admin

      Сделать можно, но в рамках комментариев трудно описать весь процесс. Обратитесь на фриланс или напишите мне на admin@virtuemart.su, за доп.плату постараюсь помочь.

    BIG

    Здравствуйте.
    Выглядит намного привлекательнее.
    Надо вставить в это окно свою ссылку на материал.
    Если возможно подскажите как, пожалуйста.
    Спасибо.

      admin

      admin

      Здравствуйте!
      Попробуйте после

      вставить

    big

    Здравствуйте.
    Ссылку видно, но к сожалению перехода по ней нет. Выдаёт ошибку
    "The requested URL /news.html was not found on this server."
    Переход в корзину и возврат к покупкам, работает нормально.
    Спасибо.

      big

      После переименования файла .htaccess, переход есть, но страница с ошибкой уже другого характера. "404 Материал не найден"

        admin

        admin

        Вместо

        вставьте ссылку на свой материал.
        В этом ведь заключалась задача - добавить ссылку на произвольный материал?

    big

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

      admin

      admin

      Добавьте стиль

    big

    Код был вставлен в не тот файл vm-ltr-site.css
    Спасибо.
    Магазин с каждой Вашей статьёй становится немного красивее и удобнее.
    Побольше статей и уроков. Пожалуйста.

    Иван

    Подскажите как вывести общее количество и сумму товара в всплывающем окне

      admin

      admin

      Код для вывода количества

      По цене, к сожалению, не подскажу, если найдете решение, пожалуйста, поделитесь.

    Vadym

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

    Продолжить покупки Показать корзину
    1 x Зубная паста Zubb для чувствительных зубов , 90 г. добавлен в Вашу корзину.

    Продовжити покупки Показати кошик
    $ s x$ s доданий у Ваш кошик.

    bssz

    подправьте код для новой версии 3.0.18. картинка не отображается во сплывающем окне.

    bssz

    хотя ссылку берет на картинку верную. но ее не отображает. странно. в чем косяк тогда?

    bssz

    нашел в чем косяк:
    http://localhost/images/stories/virtuemart/product/slavyanskaya.jpg
    а должно быть:
    http://localhost/ctr/images/stories/virtuemart/product/slavyanskaya.jpg
    почему так берет ссылку без "домена"?

    bssz

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

    надо

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

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

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