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

Опубликовано: 9 декабря, 2016

Обновлено: 5 февраля, 2023

Категория: Внешний вид, дизайн

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

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

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

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

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

1	defined('_JEXEC') or die('Restricted access');

вставим

1	echo '<div class="padded-wrap">';

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

</div>

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

.padded-wrap{

min-width: 400px;

}

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

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

1	'<a class="continue_link" href="' . $this->continue_link . '" >'

на

1	'<a class="btn btn-default continue_link" href="' . $this->continue_link . '" >'

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

1	'<a class="showcart floatright" href="' . $this->cart_link . '">' . vmText::_('COM_VIRTUEMART_CART_SHOW') . '</a>'

на

1	'<a class="btn btn-primary showcart floatright" href="' . $this->cart_link . '">' . vmText::_('COM_VIRTUEMART_CART_SHOW') . '</a>'

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

1 2	COM_VIRTUEMART_CART_SHOW="Показать корзину" COM_VIRTUEMART_CONTINUE_SHOPPING="Продолжить покупки"

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

1 2	echo '<a class="btn btn-default continue_link" href="' . $this->continue_link . '" >' . vmText::_('COM_VIRTUEMART_CONTINUE_SHOPPING') . '</a>'; echo '<a class="btn btn-primary showcart floatright" href="' . $this->cart_link . '">' . vmText::_('COM_VIRTUEMART_CART_SHOW') . '</a>';

на

echo '<div class="padded-button">';

echo '<a class="btn btn-default continue_link" href="' . $this->continue_link . '" >' . vmText::_('COM_VIRTUEMART_CONTINUE_SHOPPING') . '</a>';

echo '<a class="btn btn-primary showcart floatright" href="' . $this->cart_link . '">' . vmText::_('COM_VIRTUEMART_CART_SHOW') . '</a>';

echo '</div>';

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

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

Заменим

1	echo '<h4>'.vmText::sprintf('COM_VIRTUEMART_CART_PRODUCT_ADDED',$product->product_name,$product->quantity).'</h4>';

на

1	echo '<div class="padded-product-name">'.vmText::sprintf('COM_VIRTUEMART_CART_PRODUCT_ADDED',$product->product_name.'</h4>','<h4>'.$product->quantity).'</div>';

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

1	COM_VIRTUEMART_CART_PRODUCT_ADDED=" %2$s x %1$s добавлен в Вашу корзину."

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

1	if($product->quantity>0){

вставим

// Получаем объект коннектора базы данных

$db = JFactory::getDBO();

// Получаем объект запросов

$query = $db->getQuery(true);

// Запрос для получения file_url товара

$query->select('file_url')

->from($db->quoteName('#__virtuemart_medias'))

->where($db->quoteName('virtuemart_media_id') . ' = '.$product->virtuemart_media_id[0]);

// Получение file_url товара

$media_url = $db->setQuery($query)->loadResult();

echo '<div class="padded-product-image"><img src="/'.$media_url.'"></div>';

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

.padded-product-image{

width: 100px;

height: 100px;

float: left;

}

.padded-product-image img{

max-height: 100%;

max-width: 100%;

width: auto;

height: auto;

}

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

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

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

if(VmConfig::get('popup_rel',1)){

//VmConfig::$echoDebug=true;

if ($this->products and is_array($this->products) and count($this->products)>0 ) {

$product = reset($this->products);

$customFieldsModel = VmModel::getModel('customfields');

$product->customfields = $customFieldsModel->getCustomEmbeddedProductCustomFields($product->allIds,'R');

$customFieldsModel->displayProductCustomfieldFE($product,$product->customfields);

if(!empty($product->customfields)){

<?php

}

foreach($product->customfields as $rFields){

if(!empty($rFields->display)){

?><div class="product-field product-field-type-<?php echo $rFields->field_type ?>">

<div class="product-field-display"><?php echo $rFields->display ?></div>

</div>

<?php }

} ?>

</div>

<?php

}

на

if(VmConfig::get('popup_rel',1)){

//VmConfig::$echoDebug=true;

if ($this->products and is_array($this->products) and count($this->products)>0 ) {

$product = reset($this->products);

$customFieldsModel = VmModel::getModel('customfields');

$product->customfields = $customFieldsModel->getCustomEmbeddedProductCustomFields($product->allIds,'R');

$customFieldsModel->displayProductCustomfieldFE($product,$product->customfields);

if(!empty($product->customfields)){

<?php

}

foreach($product->customfields as $rFields){

if(!empty($rFields->display)){

?><div class="padded-related-product">

<?php echo $rFields->display ?>

</div>

<?php }

} ?>

</div>

<?php

}

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

.padded-related-wrap{

display: -webkit-box;

display: -ms-flexbox;

display: flex;

-ms-flex-wrap: wrap;

flex-wrap: wrap;

max-width: 650px;

border-top: 1px solid #eee;

}

.padded-related-wrap h4{

width: 100%;

}

.padded-related-product{

-ms-flex-preferred-size: 25%;

flex-basis: 25%;

text-align: center;

padding: 10px;

box-sizing: border-box;

}

.padded-related-product img{

display: block;

margin: 0 auto;

}

.padded-related-product .vm-img-desc,

.padded-related-product .product_s_desc{

display: none;

}

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

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

jQuery(document).ready(function($) {

$('.continue_link').click(function () {

$.fancybox.close();

return false;

});

</script>

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

1	echo '<a class="btn btn-default continue_link" href="' . $this->continue_link . '" >' . vmText::_('COM_VIRTUEMART_CONTINUE_SHOPPING') . '</a>';

на

1	echo '<a class="btn btn-default continue_link" onclick="parent.jQuery.fancybox.close(); return false;" href="#" >' . vmText::_('COM_VIRTUEMART_CONTINUE_SHOPPING') . '</a>';

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

vskuchmak

9 декабря, 2016 at 17:18

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

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

Похожие статьи :

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

vskuchmak

vskuchmak

Ivan

Tobi

Андрей

Андрей

1gr0k

1gr0k

IsaeffSerge

IsaeffSerge

IsaeffSerge

IsaeffSerge

IsaeffSerge

Вольф

yuri

yuri

yuri

yuri

Василий

Василий

Василий

vasika778

BIG

Иван

Vadym

bssz

bssz

bssz

bssz

Вольф

Семён

Семён

Константин

Константин

Константин

Константин

VS

Александр

igushkin

igushkin

Александр

Александр

seomnium

Joonnni

Катерина

Катерина

Alex23

belregionsoft

Дмитрий