|
Server : Apache/2.4.18 (Ubuntu) System : Linux canvaswebdesign 3.13.0-71-generic #114-Ubuntu SMP Tue Dec 1 02:34:22 UTC 2015 x86_64 User : oppastar ( 1041) PHP Version : 7.0.33-0ubuntu0.16.04.15 Disable Function : pcntl_alarm,pcntl_fork,pcntl_waitpid,pcntl_wait,pcntl_wifexited,pcntl_wifstopped,pcntl_wifsignaled,pcntl_wifcontinued,pcntl_wexitstatus,pcntl_wtermsig,pcntl_wstopsig,pcntl_signal,pcntl_signal_dispatch,pcntl_get_last_error,pcntl_strerror,pcntl_sigprocmask,pcntl_sigwaitinfo,pcntl_sigtimedwait,pcntl_exec,pcntl_getpriority,pcntl_setpriority, Directory : /var/www/serbaantik.com/public_html/application/views/ |
Upload File : |
<div class="shop-catalog">
<div class="container">
<h5 class="widget-title">Curtain - 3 Pinch Pleat</h5>
<div class="row">
<div class="widget-area primary-sidebar col-lg-2 col-md-12 col-sm-12">
<aside id="search-2" class="widget widget_search">
<form role="search" method="get" id="search-form" class="search-form">
<input id="input_search" type="search" class="search-field" placeholder="Search…">
<button id="btn_search" class="search-submit" type="submit" value="Search"><i class="ot-flaticon-search"></i></button>
</form>
</aside>
<aside id="search-2" class="widget widget_search" style="border: 1px solid #e6e6e6; padding: 10px; padding-bottom:20px;">
<h5 class="widget-title">Filter</h5>
<div style="display: grid; grid-template-columns: 1fr">
<?= form_open() ?>
<div class="ot-accordions pr-4">
<div class="acc-item">
<div class="acc-toggle flex-middle">
Color
<span class="down"><i class="fas fa-plus"></i></span>
<span class="up"><i class="fas fa-minus"></i></span>
</div>
<div class="acc-content">
<input type="checkbox"
class="atrributes_checkboxes"
value="" />
<label for="vehicle1">Color 1</label><br>
<input type="checkbox"
class="atrributes_checkboxes"
value="" />
<label for="vehicle1">Color 2</label><br>
<input type="checkbox"
class="atrributes_checkboxes"
value="" />
<label for="vehicle1">Color 3</label><br>
<input type="checkbox"
class="atrributes_checkboxes"
value="" />
<label for="vehicle1">Color 4</label><br>
</div>
</div>
<div class="acc-item">
<div class="acc-toggle flex-middle">
Type
<span class="down"><i class="fas fa-plus"></i></span>
<span class="up"><i class="fas fa-minus"></i></span>
</div>
<div class="acc-content">
<input type="checkbox"
class="atrributes_checkboxes"
value="" />
<label for="vehicle1">Type 1</label><br>
<input type="checkbox"
class="atrributes_checkboxes"
value="" />
<label for="vehicle1">Type 2</label><br>
<input type="checkbox"
class="atrributes_checkboxes"
value="" />
<label for="vehicle1">Type 3</label><br>
<input type="checkbox"
class="atrributes_checkboxes"
value="" />
<label for="vehicle1">Type 4</label><br>
</div>
</div>
<div class="acc-item">
<div class="acc-toggle flex-middle">
Design
<span class="down"><i class="fas fa-plus"></i></span>
<span class="up"><i class="fas fa-minus"></i></span>
</div>
<div class="acc-content">
<input type="checkbox"
class="atrributes_checkboxes"
value="" />
<label for="vehicle1">Design 1</label><br>
<input type="checkbox"
class="atrributes_checkboxes"
value="" />
<label for="vehicle1">Design 2</label><br>
<input type="checkbox"
class="atrributes_checkboxes"
value="" />
<label for="vehicle1">Design 3</label><br>
<input type="checkbox"
class="atrributes_checkboxes"
value="" />
<label for="vehicle1">Design 4</label><br>
</div>
</div>
<div class="acc-item">
<div class="acc-toggle flex-middle">
Usage
<span class="down"><i class="fas fa-plus"></i></span>
<span class="up"><i class="fas fa-minus"></i></span>
</div>
<div class="acc-content">
<input type="checkbox"
class="atrributes_checkboxes"
value="" />
<label for="vehicle1">Usage 1</label><br>
<input type="checkbox"
class="atrributes_checkboxes"
value="" />
<label for="vehicle1">Usage 2</label><br>
<input type="checkbox"
class="atrributes_checkboxes"
value="" />
<label for="vehicle1">Usage 3</label><br>
<input type="checkbox"
class="atrributes_checkboxes"
value="" />
<label for="vehicle1">Usage 4</label><br>
</div>
</div>
</div>
<a href="#" class="octf-btn octf-btn-dark">Reset</a>
<?= form_close() ?>
</div>
</aside>
</div>
<div class="col-lg-5 col-md-12 mb-lg-0 mb-5">
<div class="row justify-content-center">
<div class="col-sm-12">
<div class="post-box masonry-post post-item">
<div class="post-inner">
<div class="entry-media post-cat-abs">
<a href="#"><img src="<?= base_url('uploads/sample1.jpg') ?>" alt=""></a>
<div class="post-cat">
<div class="posted-in"><a href="#">+ Zoom</a></div>
</div>
</div>
</div>
</div>
</div>
<div class="col-sm-12">
<div class="post-box masonry-post post-item">
<div class="post-inner">
<div class="entry-media post-cat-abs">
<a href="#"><img src="<?= base_url('uploads/sample2.jpg') ?>" alt=""></a>
<div class="post-cat">
<div class="posted-in"><a href="#">+ Zoom</a></div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="add-to-cart-inner" style="text-align:right">
<a id="mbtn2" href="<?= base_url('shop_dimension') ?>" class="octf-btn octf-btn-dark">CONTINUE</a>
</div>
</div>
<div class="col-lg-5 col-md-12 mb-lg-0 mb-5">
<div class="product">
<div id="attributes"></div>
<div id="products" class="row">
<div class="col-lg-4 co-md-6 col-sm-6 col-6 first">
<div class="product-item">
<div class="product-media">
<a href="#">
<img style="height: 100%;"
src="<?= base_url('uploads/item1.jpg') ?>">
</a>
</div>
<p>#9739<br>
<span style="font-size:12px">Rp 97.500,-</span></p>
</div>
</div>
<div class="col-lg-4 co-md-6 col-sm-6 col-6 first">
<div class="product-item">
<div class="product-media">
<a href="#">
<img style="height: 100%;"
src="<?= base_url('uploads/item2.jpg') ?>">
</a>
</div>
<p>#9739<br>
<span style="font-size:12px">Rp 97.500,-</span></p>
</div>
</div>
<div class="col-lg-4 co-md-6 col-sm-6 col-6 first">
<div class="product-item">
<div class="product-media">
<a href="#">
<img style="height: 100%;"
src="<?= base_url('uploads/item3.jpg') ?>">
</a>
</div>
<p>#9739<br>
<span style="font-size:12px">Rp 97.500,-</span></p>
</div>
</div>
<div class="col-lg-4 co-md-6 col-sm-6 col-6 first">
<div class="product-item">
<div class="product-media">
<a href="#">
<img style="height: 100%;"
src="<?= base_url('uploads/item4.jpg') ?>">
</a>
</div>
<p>#9739<br>
<span style="font-size:12px">Rp 97.500,-</span></p>
</div>
</div>
<div class="col-lg-4 co-md-6 col-sm-6 col-6 first">
<div class="product-item">
<div class="product-media">
<a href="#">
<img style="height: 100%;"
src="<?= base_url('uploads/item5.jpg') ?>">
</a>
</div>
<p>#9739<br>
<span style="font-size:12px">Rp 97.500,-</span></p>
</div>
</div>
<div class="col-lg-4 co-md-6 col-sm-6 col-6 first">
<div class="product-item">
<div class="product-media">
<a href="#">
<img style="height: 100%;"
src="<?= base_url('uploads/item6.jpg') ?>">
</a>
</div>
<p>#9739<br>
<span style="font-size:12px">Rp 97.500,-</span></p>
</div>
</div>
<div class="col-lg-4 co-md-6 col-sm-6 col-6 first">
<div class="product-item">
<div class="product-media">
<a href="#">
<img style="height: 100%;"
src="<?= base_url('uploads/item7.jpg') ?>">
</a>
</div>
<p>#9739<br>
<span style="font-size:12px">Rp 97.500,-</span></p>
</div>
</div>
<div class="col-lg-4 co-md-6 col-sm-6 col-6 first">
<div class="product-item">
<div class="product-media">
<a href="#">
<img style="height: 100%;"
src="<?= base_url('uploads/item8.jpg') ?>">
</a>
</div>
<p>#9739<br>
<span style="font-size:12px">Rp 97.500,-</span></p>
</div>
</div>
<div class="col-lg-4 co-md-6 col-sm-6 col-6 first">
<div class="product-item">
<div class="product-media">
<a href="#">
<img style="height: 100%;"
src="<?= base_url('uploads/item1.jpg') ?>">
</a>
</div>
<p>#9739<br>
<span style="font-size:12px">Rp 97.500,-</span></p>
</div>
</div>
<div class="col-lg-4 co-md-6 col-sm-6 col-6 first">
<div class="product-item">
<div class="product-media">
<a href="#">
<img style="height: 100%;"
src="<?= base_url('uploads/item2.jpg') ?>">
</a>
</div>
<p>#9739<br>
<span style="font-size:12px">Rp 97.500,-</span></p>
</div>
</div>
<div class="col-lg-4 co-md-6 col-sm-6 col-6 first">
<div class="product-item">
<div class="product-media">
<a href="#">
<img style="height: 100%;"
src="<?= base_url('uploads/item3.jpg') ?>">
</a>
</div>
<p>#9739<br>
<span style="font-size:12px">Rp 97.500,-</span></p>
</div>
</div>
<div class="col-lg-4 co-md-6 col-sm-6 col-6 first">
<div class="product-item">
<div class="product-media">
<a href="#">
<img style="height: 100%;"
src="<?= base_url('uploads/item4.jpg') ?>">
</a>
</div>
<p>#9739<br>
<span style="font-size:12px">Rp 97.500,-</span></p>
</div>
</div>
<div class="col-lg-4 co-md-6 col-sm-6 col-6 first">
<div class="product-item">
<div class="product-media">
<a href="#">
<img style="height: 100%;"
src="<?= base_url('uploads/item8.jpg') ?>">
</a>
</div>
<p>#9739<br>
<span style="font-size:12px">Rp 97.500,-</span></p>
</div>
</div>
<div class="col-lg-4 co-md-6 col-sm-6 col-6 first">
<div class="product-item">
<div class="product-media">
<a href="#">
<img style="height: 100%;"
src="<?= base_url('uploads/item1.jpg') ?>">
</a>
</div>
<p>#9739<br>
<span style="font-size:12px">Rp 97.500,-</span></p>
</div>
</div>
<div class="col-lg-4 co-md-6 col-sm-6 col-6 first">
<div class="product-item">
<div class="product-media">
<a href="#">
<img style="height: 100%;"
src="<?= base_url('uploads/item2.jpg') ?>">
</a>
</div>
<p>#9739<br>
<span style="font-size:12px">Rp 97.500,-</span></p>
</div>
</div>
</div>
<div id="spinner" style="width:50px; margin-left:auto; margin-right:auto; padding-top:60px;">
<img src="<?= base_url() . 'uploads/spinner.gif' ?>" alt="spinner" />
</div>
</div>
</div>
</div>
</div>
</div>
<script>
let attributes = [];
let search_term;
let category_id = <?= $category['id_categories'] ?>;
let page = 1;
<?php if($this->session->userdata('varian_attributes')) : ?>
<?php foreach($this->session->userdata('varian_attributes') as $attribute) : ?>
attributes.push('<?= $attribute ?>');
<?php endforeach; ?>
<?php endif ?>
$( document ).ready(function() {
load_products(category_id, attributes, 0);
$(window).scroll(function() {
if($(window).scrollTop() + $(window).height() > $("#products").height()) {
$('#spinner').show();
page = page + 1;
offset = getoffset(page);
console.log('attributes', attributes);
load_products(category_id, attributes, offset, search_term);
}
});
$('#btn_search').on('click',function(e) {
e.preventDefault();
attributes = [];
$('#content').hide();
page = 1;
search_term = $('#input_search').val();
load_products(category_id, attributes, 0, search_term, 'reload');
});
$(document).on('change', '.atrributes_checkboxes', function() {
$('#content').hide();
attributes = [];
page = 1;
$(':checkbox:checked').each(function(i) {
attributes[i] = $(this).val();
});
load_products(category_id, attributes, 0, search_term, 'reload');
});
function load_products(category_id, chosen_attributes, offset, search_term = null, load_type = 'append') {
$('#spinner').show();
$.ajax({
'url' : '<?= site_url(); ?>' + 'products/ajax_getproducts',
'type' : 'POST',
'data' : {
'category_id' : category_id,
'attributes' : chosen_attributes,
'offset' : offset,
'search_term' : search_term,
'load_type' : load_type,
'<?= $this->security->get_csrf_token_name(); ?>' : '<?= $this->security->get_csrf_hash(); ?>'
},
'success' : function(data) {
if (data) {
$('#spinner').hide();
$('#attributes').html(JSON.parse(data).attributes);
if(JSON.parse(data).load_type === 'append') {
$('#products').append(JSON.parse(data).products);
} else {
$('#products').html(JSON.parse(data).products);
}
$('.topAttributeIcons').on('click', function(e) {
let removedAttribute = $(this).data('attribute');
newAttributes = chosen_attributes.filter(e => e !== removedAttribute);
attributes = newAttributes;
load_products(category_id, newAttributes, 0, search_term, 'reload');
$('input:checkbox[value="' + removedAttribute + '"]').attr('checked', false);
});
};
},
});
}
function getoffset(page, per_page_val = 21) {
if (page == 1) {
offset = 0;
} else {
offset = (page - 1) * per_page_val;
}
return offset;
}
});
</script>