/ Адаптивность / Калькуляторы транспортных компаний для предварительного расчета

Калькуляторы транспортных компаний для предварительного расчета

Можно в шаблон оформления внедрить модули расчета доставки от транспортных компаний. Минусом является то, что эти расчеты только для получения примерной информации о стоимости доставки, далее в расчетах не участвуют.

Выглядит это так:

При нажатии всплывает окно с калькулятором ТК:

Выведем в оформлении панель с логотипами транспортных компаний:

// Вывод всплывающих окон в доставку
add_filter('woocommerce_after_order_notes', 'popup_windows_delivery');

function popup_windows_delivery() {
	echo '
	<h3>Рассчет стоимости доставки</h3>
	<div class="tk-logos">
	<img id="dline" src="/wp-content/uploads/2018/07/delovie-linii-200.png">
	<img id="pek" src="/wp-content/uploads/2018/07/20161606225846-200.png">
	<img id="kit" src="/wp-content/uploads/2018/07/kit-tk200.png">
	<img src="/wp-content/uploads/2018/07/bsd.png">
	</div>
	';
}

Стили панели с логотипами ТК

.tk-logos {display: flex; align-items: center; justify-content: space-between;}
.tk-logos img {max-width: 115px; max-height: 50px;}

Далее прописываем вывод всплывающих окон.

Выводим в подвале сами окна (пока скрытые):

function feedback() {
	echo '
	<div class="popup dline"><p class="popup-title">dline</p><div id="feedback">
	<iframe src="https://widgets.dellin.ru/calculator/?derival_to_door=off&arrival_to_door=on&disabled_calculation=off&insurance=0&package=1"
    width="332" height="390" scrolling="no" frameborder="0"></iframe>
	</div></div>
	
	<div class="popup pek"><p class="popup-title">pek</p><div id="feedback">
	<iframe id="pecom-kabinet-iframe" allowtransparency="true" frameborder="0" width="800" height="1800" scrolling="auto" style="border: 0;" src="https://pecom.ru/ru/calc/?iframe=Y"><p>Пожалуйста, воспользуйтесь браузером, который поддерживает IFrame.</p> </iframe>
	</div></div>
	
	<div class="popup kit"><p class="popup-title">kit</p><div id="feedback">
	<p>В ближайшее время калькулятор будет обновлен.</p>
    <p>Приносим извинения за доставленные неудобства.</p>
	</div></div>
	
	<div class="popup bsd"><p class="popup-title">bsd</p><div id="feedback">
	<iframe src="https://www.calc.tkbsd.ru/short" width="345" height="250" scrolling="no" frameborder="0"></iframe>
	</div></div>
	';
}
add_action( 'popup-windows', 'feedback', 5 );

Это все выводится в подвале пользовательским хуком popup-windows.

И теперь прописываем скрипт всплывающих окон:

$(document).ready(function() {  
	$('#dline').click(function() {
		$('.popup.dline').show();

		$('.popup').removeClass('animated fadeOutDown');  
		$('.popup').addClass('animated fadeInDown');
		$('#backfon').show(); 
		$('#backfon').removeClass('fadeOut');  
		$('#backfon').addClass('animated fadeIn'); 
	});   
	
	$('#pek').click(function() {
		$('.popup.pek').show();

		$('.popup').removeClass('animated fadeOutDown');  
		$('.popup').addClass('animated fadeInDown');
		$('#backfon').show(); 
		$('#backfon').removeClass('fadeOut');  
		$('#backfon').addClass('animated fadeIn'); 
	});
	
	$('#kit').click(function() {
		$('.popup.kit').show();

		$('.popup').removeClass('animated fadeOutDown');  
		$('.popup').addClass('animated fadeInDown');
		$('#backfon').show(); 
		$('#backfon').removeClass('fadeOut');  
		$('#backfon').addClass('animated fadeIn'); 
	});
	
	$('#bsd').click(function() {
		$('.popup.bsd').show();

		$('.popup').removeClass('animated fadeOutDown');  
		$('.popup').addClass('animated fadeInDown');
		$('#backfon').show(); 
		$('#backfon').removeClass('fadeOut');  
		$('#backfon').addClass('animated fadeIn'); 
	});  	
});

Поделится информацией с друзьями

  • Комментарии
  • Вложения

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

Пока нет комментариев. Будь первым!

Калькуляторы транспортных компаний для предварительного расчета
Акции Woocommerce
Рекомендации для васАкции WoocommerceOpttour.ru
Спасибо! Наш менеджер свяжется с Вами в течении 5 минут.