Вид плиткой

В нужном месте сайта появится плитка из квартир. Цены и наличие будут актуализироваться сами. Ваши маркетологи будут творить, а не постоянно править цены :)

Как это сделать:

<div id="dp-grid" style="margin: 50px auto;width: 100%"></div>
<script>
dplanloader(function(DP){

    DP.insertGrid('#dp-grid',{
        blocks: ['1s','1k', '2s','2k','3s', '3k','4s','4k'],
        maxBlocks: 2
    });
})
</script>

<style>
#dp-grid {
  font-family: 'TildaSans',Arial,sans-serif;
  width: 1160px;
}

.dp-w-griditem{
width: 50%;
}

@media only screen and (max-width: 1160px) {
    #dp-grid {
        width: 100%;
    }
}

</style>

Вам нужно добавить в нужное место для вывода блока плиток следующий код.

В первой строке в style вы можете задать необходимую ширину контейнера, подходящую под ваш сайт.

В blocks = [..] вы можете расставить приоритетную комнатность квартир, а в maxBlocks - указать сколько блоков хотите на страинце.

По умолчанию 3 блока. Если у вас много номенклатуры, то можно поставить и 6.

<div id="dp-grid" style="margin: auto;"></div>
<script>
dplanloader(function(DP){

    DP.insertGrid('#dp-grid',{
        blocks: ['1s','1k', '2s','2k','3s', '3k','4s','4k'],
        maxBlocks: 3
    });
})
</script>

<style>
#dp-grid {
  font-family: 'TildaSans',Arial,sans-serif;
  width: 1160px;
}

@media only screen and (max-width: 1160px) {
    #dp-grid {
        width: 100%;
    }
}

</style>

Пример для расположения 4 блоков в одну строку. 

<div id="dp-grid" style="margin: auto;"></div>
<script>
dplanloader(function(DP){

    DP.insertGrid('#dp-grid',{
        blocks: ['1s','1k', '2s','2k','3s', '3k','4s','4k'],
        maxBlocks: 4
    });
})
</script>

<style>
#dp-grid {
  font-family: 'TildaSans',Arial,sans-serif;
  width: 1160px;
}

.dp-w-griditem {
   width: 25% !important;
}

.dp-w-griditem-info {
   padding: 20px !important;
   font-size: 18px !important;
}
.dp-w-griditem-info-flex {
   font-size: 15px !important;
}

@media only screen and (max-width: 1160px) {
    #dp-grid {
        width: 100%;
    }
.dp-w-griditem {
   width: 33% !important;
}
.dp-w-griditem-info {
   padding: 30px !important;
   font-size: 20px !important;
}
.dp-w-griditem-info-flex {
   font-size: 16px !important;
}
}

@media only screen and (max-width: 768px) {
.dp-w-griditem {
    width: 100% !important;
}
}

</style>

Пример для расположения 5 блоков в одну строку.

<div id="dp-grid" style="margin: auto;"></div>
<script>
dplanloader(function(DP){

    DP.insertGrid('#dp-grid',{
        blocks: ['1s','1k', '2s','2k','3s', '3k','4s','4k'],
        maxBlocks: 5
    });
})
</script>

<style>
#dp-grid {
  font-family: 'TildaSans',Arial,sans-serif;
  width: 1160px;
}

.dp-w-griditem {
   width: 20% !important;
}

.dp-w-griditem-info {
   padding: 20px !important;
   font-size: 16px !important;
}
.dp-w-griditem-info-flex {
   font-size: 11px !important;
}

@media only screen and (max-width: 1160px) {
    #dp-grid {
        width: 100%;
    }
.dp-w-griditem {
   width: 33% !important;
}
.dp-w-griditem-info {
   padding: 30px !important;
   font-size: 20px !important;
}
.dp-w-griditem-info-flex {
   font-size: 16px !important;
}
}

@media only screen and (max-width: 768px) {
.dp-w-griditem {
    width: 100% !important;
}
}

</style>