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

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

NEW

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

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

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

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

// Вывод всплывающих окон в доставку
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'); 
	});  	
});

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

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

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

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

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