Recommended Posts

В sitebill есть кластерная карта которую можно подключить через iframe

 <iframe src="{$estate_folder}/js/ajax.php?action=iframe_map&{$QUERY_STRING}" style="border: 0px;" border="0" width="100%" height="500px"></iframe>

Карта просто замечательная.

но в данной карте цена выводится целиком. Задача разделить саму цену на тысячи и добавить валюту.

Решение.

идем по адресу /apps/system/js файл activemap.js .  примерно 256 строка. находим содержимое

block.find('.ActiveMapListBlock-item-price').text(data.price);

и заменяем на 

  block.find('.ActiveMapListBlock-item-price').text(data.price.replace(/(\d)(?=(\d\d\d)+([^\d]|$))/g, '$1 '));

сразу после нее добавляем следующее

block.find('.ActiveMapListBlock-item-currency').text(data.currency_name);

теперь карта понимает валюту и делит цену на тысячи. Осталось все это вывести в шаблон

идем по адресу /apps/system/template файл iframe_map.tpl

содержимое 

<a class="ActiveMapListBlock-item-link" target="_blank" href="">
                                <div class="ActiveMapListBlock-item-image">
                                	<img src="{$estate_folder}/img/no_foto.jpg">
                                	<div class="ActiveMapListBlock-item-id"></div>
                                </div>
                                <div class="ActiveMapListBlock-item-description">
                                    <h3 class="ActiveMapListBlock-item-title"></h3>
                                    <div class="ActiveMapListBlock-item-price"></div>
                                    <div class="ActiveMapListBlock-item-address"></div>
                                    <div class="ActiveMapListBlock-item-text"></div>
                                </div>
                            </a>

меняем на это

<a class="ActiveMapListBlock-item-link" target="_blank" href="">
   <div class="ActiveMapListBlock-item-image">
       <img src="{$estate_folder}/img/no_foto.jpg">
   	   <div class="ActiveMapListBlock-item-id"></div>
   </div>
   <div class="ActiveMapListBlock-item-description">
       <h3 class="ActiveMapListBlock-item-title"></h3>
       <div class="ActiveBlockHalf">
           <div class="ActiveMapListBlock-item-price"></div>
           <div class="ActiveMapListBlock-item-currency"></div>
       </div>
       <div class="ActiveMapListBlock-item-address"></div>
       <div class="ActiveMapListBlock-item-text"></div>
    </div>
</a>

далее в конце файла добавляем стили

.ActiveMapListBlock-item-price, .ActiveMapListBlock-item-currency {
    float:left;
}
.ActiveBlockHalf {
	display:inline-block;
	font-size: 18px;
    font-weight: 700;
}
.ActiveMapListBlock-item-price {
	padding-right: 5px;
}

и все результатом будет

 

joxi_screenshot_1570179340100.png

Поделиться сообщением


Ссылка на сообщение
Поделиться на других сайтах

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Гость
Ответить в тему...

×   Вы вставили отформатированное содержимое.   Удалить форматирование

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.


  • Похожие публикации

    • Автор: metrpro
      Добрый день! Все знают, что некоторое время назад корпорация добра решила заработать на сайтах, применяющих на своих страницах карты и панорамы google. И если в России и, возможно, странах СНГ эта проблема не так критична благодаря присутствию там карт Яндекса, то для зарубежных проектов остро стоит необходимость альтернативных решений, таких как Leaflet.
      Итак... Здесь и далее - решение на примере шаблона Realia с картами google.
      1. В файл шаблона header.tpl добавляем стили leaflet:
      <link rel="stylesheet" href="https://unpkg.com/leaflet@1.5.1/dist/leaflet.css" integrity="sha512-xwE/Az9zrjBIphAcBb3F6JVqxf46+CDLwfLMHloNu6KEQCAWi6HcDUbeOfBIptF7tcCzusKFjFw2yuvEpDL9wQ==" crossorigin=""/> Если у вас там же болтаются api-скрипты карт google, можете смело их грохнуть:
      <script type="text/javascript" src="//maps.googleapis.com/maps/api/js?v=3&amp;sensor=true"></script> <script src="https://maps.googleapis.com/maps/api/js?v=3.exp&libraries=drawing"></script> 2. Переходим в файл шаблона realty_view.tpl:
      Ищем следующую строку:
      <div id="property-map" data-geo="{$data.geo.value.lat};{$data.geo.value.lng}"></div> И меняем её на:
      <script src="https://unpkg.com/leaflet@1.5.1/dist/leaflet.js" integrity="sha512-GffPMF3RvMeYyc1LWMHtK8EbPv0iNZ8/oTtHPx9/cc2ILxQ+u905qIwdpULaqDkyBKgOaB57QTMg7ztg8Jm2Og==" crossorigin=""></script> <div id="mapid" style="width:100%;height:300px;"></div> <script>var pobj_lat={$data.geo.value.lat};var pobj_lng={$data.geo.value.lng};</script> {literal} <script> var mymap = L.map('mapid').setView([pobj_lat, pobj_lng], 16); L.tileLayer('https://api.tiles.mapbox.com/v4/{id}/{z}/{x}/{y}.png?access_token=pk.eyJ1IjoibWFwYm94IiwiYSI6ImNpejY4NXVycTA2emYycXBndHRqcmZ3N3gifQ.rJcFIG214AriISLbB6B5aw', { maxZoom: 18, attribution: 'Map data &copy; <a href="https://www.openstreetmap.org/">OpenStreetMap</a> contributors, ' + '<a href="https://creativecommons.org/licenses/by-sa/2.0/">CC-BY-SA</a>, ' + 'Imagery © <a href="https://www.mapbox.com/">Mapbox</a>', id: 'mapbox.streets' }).addTo(mymap); L.marker([pobj_lat, pobj_lng]).addTo(mymap) .bindPopup("Описалка объекта"); </script> {/literal}  
      В принципе, это всё. 
    • Автор: Илья.Юриков
      Всем привет! Такое дело, когда выбираюсь фильтры, к примеру, 2 комн., то в поиске отображаются только подходящие под это квартиры, а на карте остаются абсолютно все. Как мне это исправить можно? Может, сталкивался кто с таким? На скриншоте видно, что выбрано и что отображаются даже 1 комн.

    • Автор: Realtor
      Работает ли mapviewer на карте Яндекса?
      Если да, то как подключить?
    • Автор: TopRaN
      Надеюсь админ создаст отдельный раздел для этого и создаст в ней (переименует мою тему)
      В данном разделе пользователи смогут подчеркнуть для себя интересные идеи которые смогут применить на своем сайте
      Первый урок (переворот картинки без использования Jquery)
       
      начнем
       
      1. Для начала создадим область (container)  в который поместим 2 блока с содержимым box-front и box-back
      <div class="container">    <div class="box-front">        Передняя сторона    </div>    <div class="box-back">        Задняя сторона    </div></div> 2. Когда мы прописали блоки приступим к написанию стилей и соответственно анимации.
      <style>.container{        perspective: 800px;        -webkit-perspective: 800px;        background: radial-gradient(#e0e0e0, #aaa);        width:100%;        height:300px;        border-radius:6px;        position:relative;        }.box-front,        .box-back{        transform-style: preserve-3d;        -webkit-transform-style: preserve-3d;         backface-visibility: hidden;        -webkit-backface-visibility: hidden;         width:50%;        height:80%;        position:absolute;        top:10%;        left:25%;        background:#476AF1;        transition:0.8s; text-align:center;        color:#FFF;        }.box-back{        transform:rotateY(180deg);        -webkit-transform:rotateY(180deg);        background-color:#7E0002;        }.container:hover .box-front{                /*пишем эффект при наведении мышкой*/        transform:rotateY(180deg);        -webkit-transform:rotateY(180deg);        }.container:hover .box-back{             /* эффект при убранной мышки*/        transform:rotateY(360deg);        -webkit-transform:rotateY(360deg);        }</style> Получаем переворачивающую картинку при наведении на нее мышкой
      index2.html
    • Автор: TopRaN
      Недавно пользователи спрашивали как поменять цвет на определенной категории объекта.
      для начала создадим стили в котором мы определим сам цвет заливки и шрифта
      Открываем файл стилей (я предпочитаю этот bootstrap.corrections.css ) и в конец файла вставляем следующее содержимое:
      .reder { background-color:#848080; color:white; } После открывает файл header.tpl и добавляем следующий код :
      <script type="text/javascript" > $(document).ready(function() { $("#topic_id [value='2'],#topic_id [value='11'],#topic_id [value='3']").toggleClass("reder"); }); </script> где value 2,11,3 это ID категорий типа недвижимости. Узнать ID можно в админке в разделе "структура"
      В итоге мы получаем