Категории

Как встроить Смарт-каталог блоком iframe в сайт?

На сайте, в месте где должен быть iframe, разместить следующий блок: 

<div id="profitbase_front" style="height: 600px; width: 100%;"></div>

Высоту и ширину можно менять.

Заменить код виджета на следующий. Код необходимо разместить перед закрывающим тегом 

<script >
!function(e,t){var i=e.getElementsByTagName("script")[0];n=e.createElement("script"),n.src="//pbXXXX.profitbase.ru/assets/js/sw.js",n.<<<<$1>$1>$1>$1 data-verified="redactor">=!0,n.onload=function(){t.pb_front_widget.init("//pbXXXXX.profitbase.ru/api/v2/json/sitewidget/widget",{ pb_api_key:"XXXXXXXXXXXXXXXXXXXXXXXXXXXXX",isIframe:"true"})},i.parentNode.insertBefore(n,i)}(document,window);
</script>

Если необходимо, чтобы выводилось условие фильтрации или определённый вид отображения (в данном случае Генпланы), то требуется вставлять frame другим кодом, вот так: 

<iframe id="profitbase_front_widget" data-url="https://smart-catalog.profitbase.ru" data-version="2" src="https://smart-catalog.profitbase.ru/catalog/projects/houses?accountId=XXXX&referrer=https:XXXXXXXXXX&profitbaseDomain=profitbase.ru&filter=property.status:AVAILABLE&pbApiKey=XXXXXXXXXXXXXX&showStock=true" frameborder="0" width="100%" height="100%"></iframe>

Как видно из кода, чтобы трансформировать этот код под ваш аккаунт, необходимо изменить в коде:

  • домен сайта, на котором расположен смарт-каталог (после referrer)
  • ApiKey - ваш уникальный ключ, находится на вкладке Код виджета в настройках Смарт-каталога
  • номер аккаунта (accountId=ваш номер аккаунта)

Если требуется отображать другой вид (не Генпланы), то также необходимо в коде модифицировать вид отображения - вместо /genplans установить необходимый вид.

Для корректной работы смарт-каталога на мобильных устройствах, при условии, что смарт-каталог размещен на вашем сайте с помощью iframe, добавьте следующий стиль на сайт. 

style="overflow:hidden;overflow-x:hidden;overflow-y:hidden;height:100%;width:100%;position:absolute;top:0px;left:0px;right:0px;bottom:0px" loading="lazy"