<div class="map-container t-text">
<div id="map"></div>
<div class="map-tabs-wrapper"></div>
</div>
<script src="https://api-maps.yandex.ru/2.1/?lang=ru_RU" type="text/javascript"></script>
<style>
.uc-map-point{
display:none;
}
.map-container {
display: flex;
}
div#map, .map-tabs-wrapper {
height: 570px;
}
div#map {
width: 70%;
padding: 0;
margin: 0;
box-shadow: 0 0 0 1px #2196F3;
}
.map-tabs-wrapper {
width: 30%;
}
.mab-btn-location {
font-size: 14px;
}
.mab-btn-title {
font-size: 18px;
font-weight: 600;
margin-top: 6px;
margin-bottom: 10px;
}
.mab-btn-adress,
.mab-btn-site,
.mab-btn-mail,
.mab-btn-phone{
font-size: 14px;
margin-bottom:6px;
padding-left: 6px;
margin-left: 2px;
}
.map-container {
box-shadow: 0 0 0 1px #e2e2e2;
}
.mab-btn a {
color: #006abf !important;
text-decoration: underline !important;
}
.mab-btn a:hover {
text-decoration: none !important;
}
.mab-btn {
border: 1px solid #e3e3e3;
}
.mab-btn-adress:before,
.mab-btn-site:before,
.mab-btn-mail:before,
.mab-btn-phone:before{
content: "";
width: 14px;
height: 14px;
display: inline-block;
background-size: contain;
background-repeat: no-repeat;
position: relative;
top: 3px;
left: -8px;
}
.mab-btn-adress:before {
background-image: url(https://static.tildacdn.com/tild3433-3962-4339-b035-303532666662/pin_gps_location_fin.svg);
}
.mab-btn-site:before {
background-image: url(https://static.tildacdn.com/tild6664-3930-4663-a162-383066343834/Group_1.svg);
}
.mab-btn-mail:before {
background-image: url(https://static.tildacdn.com/tild3332-3331-4234-b865-393964626363/Group_3.svg);
}
.mab-btn-phone:before {
background-image: url(https://static.tildacdn.com/tild6664-6264-4535-b036-356533383638/1.svg);
}
.map-tabs-wrapper>div {
padding: 15px;
}
.map-tabs-wrapper {
overflow-y: auto;
}
.tn-atom.tn-atom__html {
width: inherit;
height: inherit;
}
ymaps strong { color: #2196f3}
a[href^="#place"] {pointer-events:none}
div[class*="mapgoto_"] {cursor:pointer}
@media screen and (min-width:860px){
div[class*="mapgoto_"] .tn-atom {
text-align: left;
padding-left: 10px;
}
}
[class$='-image-with-content'] { border-radius: 100px}
.activepoint{
background-color: #dfe9ff !important;
}
@media screen and (max-width:960px){
.map-container {
flex-direction: column;
}
div#map {
width: 100%;
}
.map-tabs-wrapper {
width: 100%;
}
div#map, .map-tabs-wrapper {
height: 370px;
}
}
</style>
<script>
$(document).ready(function(){
let coordinatesArr = [];
//Заполняем данные из карточки
$('.t958__card-inner').each(function(index){
let lineArr = [];
let title = $(this).find('.t958__author-name li:first').html();
let location = $(this).find('.t958__author-name li:last').html();
let coord = $(this).find('.t958__author-descr li:first').html(); coord=coord.replace(/\s+/g, '');
let crdArr = coord.split(',');
let hint = $(this).find('.t958__author-descr li:last').html();
let adress = $(this).find('.t958__review-text li:eq(0)').html();
let site = $(this).find('.t958__review-text li:eq(1)').html();
let mail = $(this).find('.t958__review-text li:eq(2)').html();
let phone = $(this).find('.t958__review-text li:eq(3)').html();
let img = $(this).find('.t958__avatar').attr('data-original');
lineArr.push( parseFloat(crdArr[0]) , parseFloat(crdArr[1]) ,hint,hint,img);
coordinatesArr.push(lineArr);
let mButton = `<div class="mab-btn mapgoto_${index+1}" data-coord="${coord}">
<div class="mab-btn-location">${location}</div>
<div class="mab-btn-title">${title}</div>
<div class="mab-btn-adress mp-contact">${adress}</div>
<div class="mab-btn-site mp-contact">${site}</div>
<div class="mab-btn-mail mp-contact">${mail}</div>
<div class="mab-btn-phone mp-contact">${phone}</div>
</div>`;
$('.map-tabs-wrapper').append(mButton);
});
//Создание аттрибутов для кнопок
$('div[class*="mapgoto_"]').each(function( index ) {
let className = $(this).attr('class');
for (let i = 0; i < coordinatesArr.length; i++) {
let contain = className.includes('mapgoto_'+(i+1));
if (contain) {
$(this).attr('mapgoto_',i);
};
};
});
$('.mp-contact').each(function() {
if( $(this).text()=='-' ) $(this).hide();
});
setTimeout(function(){
//Создание карты
ymaps.ready(function () {
let myMap = new ymaps.Map('map', {
center: [ coordinatesArr[0][0] , coordinatesArr[0][1] ], //Координаты центра при запуске карты
zoom: 3, //Увеличение карты при запуске
controls: ['zoomControl']
}, {searchControlProvider: 'yandex#search' }),
MyIconContentLayout = ymaps.templateLayoutFactory.createClass(
'<div style="color: #FFFFFF; font-weight: bold;">$[properties.iconContent]</div>'
);
for (i = 0; i < coordinatesArr.length; i++) {
myMap.geoObjects
.add(new ymaps.Placemark([ coordinatesArr[i][0] , coordinatesArr[i][1] ], {
hintContent: coordinatesArr[i][2],
balloonContent: '',
}, {
iconLayout: 'default#imageWithContent',
iconImageHref: coordinatesArr[i][4],
iconImageSize: [30, 30], // Размеры метки.
iconImageOffset: [-15, -15], // Смещение левого верхнего угла иконки относительно
iconContentOffset: [15, 15], // Смещение слоя с содержимым относительно слоя с картинкой
iconContentLayout: MyIconContentLayout
}))
};
//Клик по метке
myMap.geoObjects.events.add(['click'], function (e) {
let target = e.get('target');
let crd = target['geometry']['_coordinates'];
myMap.setZoom( 15 );
myMap.panTo( [ crd[0] , crd[1] ], {duration: 0});
crd = crd[0]+','+crd[1];crd = crd.trim();
$('div[class*="mapgoto_"]').removeClass('activepoint');
$('.mab-btn[data-coord="'+crd+'"]').addClass('activepoint');
setTimeout(function(){
let mP = $(".map-tabs-wrapper").offset().top;
let aP = $(".activepoint").offset().top;
let btw = aP - mP;
if(btw>0) btw = '+='+btw;
if(btw<0) btw = '-='+Math.abs(btw);
$('.map-tabs-wrapper').animate({
scrollTop: btw
}, 500);
}, 100);
});
//Клик по кнопке
$('div[class*="mapgoto_"]').click(function(){
$('div[class*="mapgoto_"]').removeClass('activepoint');
$(this).addClass('activepoint');
let pointNum = +$(this).attr('mapgoto_');
myMap.setZoom( 15 );
myMap.panTo([coordinatesArr[pointNum][0] , coordinatesArr[pointNum][1]], {duration: 1500});
});
});
}, 1500);
});
</script>
<script src="https://forma.tinkoff.ru/static/onlineScript.js"></script>
<div class="t-input-group t-input-group_sb tkf-group" style="display:none">
<div class="t-input-title t-descr t-descr_md" data-redactor-toolbar="no">Выбрать срок рассрочки</div>
<div class="t-input-subtitle t-descr t-descr_xxs t-opacity_70"></div>
<div class="t-input-block">
<div class="t-select__wrapper">
<select name="tkf-select" class="t-select tkf-select">
<option value="installment_0_0_4_6,43">На 4 месяца</option>
</select>
</div>
<div class="tkf-button">Отправить заявку на рассрочку</div>
</div>
</div>
<style>
div[class^="modal-root"] {z-index: 101000}
.tkfdis{opacity:0.4;pointer-events: none;}
select.tkf-select {
color: #000000;
border: 1px solid #000000;
}
.tkf-button {
background-color: #ffdd2d;
border-radius: 4px;
padding: 20px 0px 20px;
transition: all 0.25s linear;
top: 18px;
width: 100%;
text-align: center;
color: #484848;
font-weight: 700;
font-size: 16px;
margin-top: 20px;
cursor: pointer;
font-family: 'Roboto',Arial,sans-serif;
}
.tkf-button:hover {
background-color: #fcc521;
}
</style>
<script>
$(document).ready(function(){
$('input[value="banktransfer"]').closest('label').addClass('tkf-credit');
$('.tkf-group').insertAfter('.t706 .t-form');
function getRandomInt(min, max) {
return Math.floor(Math.random() * (max - min)) + min;
};
let creditActive=false;
let sumtotal = 0;
let prodListArr=[];
let orderName=0;
function getProdList(){
orderName = "Ord-ImPro-"+getRandomInt(100000, 980900);
$('input[name="tkfOrderNumber"]').val(orderName);
sumtotal = window.tcart.amount;
sumprod = window.tcart.prodamount;
discoint = sumtotal/sumprod;
prodListArr=[];
for (let i = 0; i < window.tcart.products.length ; i++) {
let prodListObj={};
prodListObj['name'] = window.tcart.products[i]['name'];
prodListObj['price'] = ( (+window.tcart.products[i]['price'])*discoint).toFixed(2) ;
prodListObj['quantity'] = window.tcart.products[i]['quantity'];
prodListArr.push(prodListObj);
};
prTotal = 0;
for (let i = 0; i < prodListArr.length ; i++) {
prTotal+= (+prodListArr[i].price)*(+prodListArr[i].quantity);
};
prTotal = +prTotal.toFixed(2);
};
function getCredit(){
tinkoff.create(
{
sum: prTotal ,
items: prodListArr ,
Flow: 'sms',
promoCode: $('select.tkf-select').val() ,
orderNumber: orderName,
shopId: '602afabb-dcf0-4929-a77f-f5f31cf56e0f',
showcaseId: 'd98ab8cd-08a4-4bae-8b11-c8eb4d946d5a',
values: {
contact: {
mobilePhone: $('input[name="cartPhone"]').val(),
email: $('input[name="cartMail"]').val()
}
}
},
{view: 'modal'} // newTab - вая вкладка , modal - popup на странице
);
};
function checkStartPosition(){
if ( $('input[type=radio][name=paymentsystem]:checked').attr('data-payment-variant-system') == 'banktransfer') {
creditActive=true;
$('.tkf-group').show();
$('.t706 .t-form__submit').hide();
}else{creditActive=false;$('.tkf-group').hide();$('.t706 .t-form__submit').show()};
};
$(".t706__cartwin-prodamount").bind( 'DOMSubtreeModified',function() {
checkStartPosition();
if(window.tcart.amount<7000){
$('.tkf-credit input[type="radio"]').attr('disabled', true);
$('.t-radio__wrapper-payment label:first input').prop('checked', true);
$('.t-radio__wrapper-payment label:first input').change();
$('.tkf-credit').addClass('tkfdis');
$('.tkf-group').hide();
}else{
getProdList();
$('.tkf-credit input[type="radio"]').attr('disabled', false);
$('.tkf-credit').removeClass('tkfdis');
};
});
$('input[type=radio][name=paymentsystem]').change(function() { checkStartPosition()});
$('.t706').on("keydown", ".t-form", function(event) {return event.key != "Enter";});
//Момент удаления товара
function uNdisSubm(){
setTimeout(function(){
if( $('.t706__product-deleted').length){disSubm();
}else{
$('.t706 .t-submit , .tkf-button').removeClass('tkfdis'); getProdList();
};
}, 4000);
};
function disSubm(){
if( $('.t706__product-deleted').length){
$('.t706 .t-submit , .tkf-button').addClass('tkfdis'); uNdisSubm();
};
};
$(document).on('click',' .t706__product-del ',function(e){
setTimeout(function(){ disSubm()}, 500);
});
$('.tkf-button').click(function(e) {
setTimeout(function(){$('.t706 .t-submit').click()}, 400);
setTimeout(function(){
if ( !$('.t706 .t-input-group').hasClass('js-error-control-box') ){
getCredit();
$('select.tkf-select').prop('disabled', true).parent().addClass('tkfdis');
$('.tkf-group').hide();
}
}, 700);
});
});
</script>