138 lines
4.2 KiB
PHP
138 lines
4.2 KiB
PHP
<div id="destacados">
|
|
<div class="ui container">
|
|
<div class="ui header titulo">
|
|
PRODUCTOS DESTACADOS
|
|
</div>
|
|
<div class="ui four columns stackable grid" id="productos">
|
|
@for ($i = 0; $i < min(4, count($destacados)); $i ++)
|
|
<div class="column">
|
|
<div class="ui card ficha">
|
|
<div class="content">
|
|
<div class="header titulo">
|
|
producto
|
|
</div>
|
|
<div class="meta">
|
|
<div class="right floated">
|
|
Segmento
|
|
</div>
|
|
Comuna
|
|
</div>
|
|
</div>
|
|
<div class="image">
|
|
<div class="ui placeholder">
|
|
<div class="square image"></div>
|
|
</div>
|
|
</div>
|
|
<div class="content">
|
|
Detalles
|
|
</div>
|
|
</div>
|
|
</div>
|
|
@endfor
|
|
</div>
|
|
@if (count($destacados) > 4)
|
|
<div class="ui grid" id="paging">
|
|
</div>
|
|
@endif
|
|
</div>
|
|
</div>
|
|
|
|
@push('scripts')
|
|
<script type="text/javascript">
|
|
var destacados = {
|
|
curr_page: 1,
|
|
max_page: {{ceil(count($destacados) / 4)}},
|
|
id: '#destacados',
|
|
buildCard: (div, id) => {
|
|
$.ajax({
|
|
url: '{{$urls->base}}/producto/' + id + '/ficha',
|
|
success: function(data) {
|
|
div.append(data)
|
|
}
|
|
})
|
|
},
|
|
fillCards: (data) => {
|
|
var productos = $(destacados.id).find('#productos')
|
|
productos.html('')
|
|
$.each(data, function(i, el) {
|
|
var div = $('<div></div>').attr('class', 'column')
|
|
productos.append(
|
|
div
|
|
)
|
|
destacados.buildCard(div, el)
|
|
})
|
|
},
|
|
movePage: (page) => {
|
|
if (page == 'prev') {
|
|
page = Math.max(1, parseInt(destacados.curr_page) - 1)
|
|
}
|
|
if (page == 'next') {
|
|
page = Math.min(destacados.max_page, parseInt(destacados.curr_page) + 1)
|
|
}
|
|
destacados.findPage(page)
|
|
},
|
|
buildPaging: () => {
|
|
var paging = $(destacados.id).find('#paging')
|
|
paging.html('')
|
|
paging.append(
|
|
$('<div></div>').attr('class', 'column')
|
|
)
|
|
var ini = destacados.curr_page - 1
|
|
if (destacados.curr_page == 1) {
|
|
ini = 1
|
|
}
|
|
if (destacados.curr_page == destacados.max_page) {
|
|
ini = destacados.curr_page - 2
|
|
}
|
|
if (destacados.curr_page > 1) {
|
|
paging.append(
|
|
$('<div></div>').attr('class', 'column').append(
|
|
$('<span></span>').attr('class', 'pagina').attr('data-page', 'prev').append(
|
|
$('<i></i>').attr('class', 'angle left icon')
|
|
)
|
|
)
|
|
)
|
|
}
|
|
var max = Math.min(destacados.max_page, ini + 2)
|
|
for (var i = ini; i <= max; i ++) {
|
|
var span = $('<span></span>').attr('class', 'pagina').attr('data-page', i).html(i)
|
|
if (i == destacados.curr_page) {
|
|
span.addClass('active')
|
|
}
|
|
paging.append(
|
|
$('<div></div>').attr('class', 'column').append(span)
|
|
)
|
|
}
|
|
if (destacados.curr_page < destacados.max_page) {
|
|
paging.append(
|
|
$('<div></div>').attr('class', 'column').append(
|
|
$('<span></span>').attr('class', 'pagina').attr('data-page', 'next').append(
|
|
$('<i></i>').attr('class', 'angle right icon')
|
|
)
|
|
)
|
|
)
|
|
}
|
|
$(destacados.id).find('.pagina:not(.active)').css('cursor', 'pointer').click(function() {
|
|
var page = $(this).attr('data-page')
|
|
destacados.movePage(page)
|
|
})
|
|
},
|
|
findPage: (page) => {
|
|
$.getJSON('{{$urls->base}}/productos/destacados/' + page, function(data) {
|
|
$('#destacados').find('.pagina.active').removeClass('.active')
|
|
destacados.curr_page = data.information.page
|
|
destacados.buildPaging()
|
|
destacados.fillCards(data.destacados)
|
|
})
|
|
},
|
|
setup: () => {
|
|
destacados.buildPaging()
|
|
destacados.findPage(destacados.curr_page)
|
|
}
|
|
}
|
|
$(document).ready(function() {
|
|
destacados.setup()
|
|
})
|
|
</script>
|
|
@endpush
|