Tạo menu dạng tab trong collection
demo: http://mirako.vn/
Tạo 4 collection với tiền tố 'moi', 'giam-gia', 'co-qua', 'hot' ví dụ: Phụ kiện mới, Phụ kiện giảm giá, Phụ kiện có quà, Phụ kiện hot.
html collection.liquid
{% if collection.handle == 'all'%}
<script>
window.location.href = '/collections/san-pham-moi';
</script>
{% endif %}
<div id="mainframe" class="collection-page">
<div class="container">
<div class="col-md-12">
<!--========== html tab menu ==========-->
<div class="row tab-menu">
{%if collection.handle contains 'all' %}
<a href="{{collection.handle}}">Tất cả sản phẩm</a>
{%else%}
<a href="{{collection.handle}}">{{collection.title}}</a>
{%endif%}
<!--========== kiểm tra collection handle ==========-->
{% if collection.handle contains 'moi' or collection.handle contains 'hot' or collection.handle contains 'co-qua' or collection.handle contains 'giam-gia' %}
{% assign coll_handle = collection.handle | remove: '-moi' | remove: '-hot' | remove: '-co-qua' | remove: '-giam-gia' %}
{% endif %}
<ul class="nav nav-tabs tab-coll">
<li data-link="{{ '/collections/' | append: coll_handle | append: '-moi'}}">
<a href="{{ '/collections/' | append: coll_handle | append: '-moi'}}">Mới</a>
</li>
<a href="{{ '/collections/' | append: coll_handle | append: '-moi'}}">Mới</a>
</li>
<li data-link="{{ '/collections/' | append: coll_handle | append: '-hot'}}">
<a href="{{ '/collections/' | append: coll_handle | append: '-hot'}}">Hot</a>
</li>
<a href="{{ '/collections/' | append: coll_handle | append: '-hot'}}">Hot</a>
</li>
<li data-link="{{ '/collections/' | append: coll_handle | append: '-co-qua'}}">
<a href="{{ '/collections/' | append: coll_handle | append: '-co-qua'}}">Có quà</a>
</li>
<a href="{{ '/collections/' | append: coll_handle | append: '-co-qua'}}">Có quà</a>
</li>
<li data-link="{{ '/collections/' | append: coll_handle | append: '-giam-gia'}}">
<a href="{{ '/collections/' | append: coll_handle | append: '-giam-gia'}}">Giảm giá</a>
</li>
<a href="{{ '/collections/' | append: coll_handle | append: '-giam-gia'}}">Giảm giá</a>
</li>
</ul>
</div>
<!--========== end html tab menu ==========-->
</div>
</div>
<div class="container">
<div class="row">
<div {% if collection.handle contains 'giam-gia' %} id="sale-product" {% endif %}>
<div class="">
<div class="module-products">
{% for product in collection.products %}
<!--========== data-sale lấy % giảm giá ==========-->
<div class="col-md-3 col-sm-6 col-xs-12 box-products" data-sale="{{product.variants.first.compare_at_price | minus: product.variants.first.price | divided_by:product.variants.first.compare_at_price | times : 100 | round : 0}}">
{% include 'deal_product-loop' %}
</div>
{% endfor %}
{% if paginate.pages == 0 %}
<div class="col-md-12">
<p class="text-center">Chưa có dữ liệu</p>
</div>
{% endif %}
</div>
</div>
</div>
</div>
{%include 'pagination-default'%}
</div>
</div>
</div>
{% endpaginate %}
<script>
//js active class
$( document ).ready(function() {
var url_current = window.location.href; // đường dẫn
var path_current = window.location.pathname; // path của đường dẫn hiện tại
$('.tab-coll li[data-link="' + url_current + '"]').addClass('active'); // tìm giống link theme
$('.tab-coll li[data-link="' + path_current + '"]').addClass('active'); // tìm giống path theme
});
//js sort by percent
var sortBrand = function( el , a ) {
var brandEls = $(el);
var brandItems = brandEls.find(a);
brandItems.sort(function( item1, item2 ) {
var brand1 = item1.getAttribute('data-sale');
var brand2 = item2.getAttribute('data-sale');
if( brand1 < brand2 ) {
return 1;
}else if( brand1 > brand2 ) {
return -1;
}
return 0;
});
brandItems.detach().appendTo(brandEls);
}
sortBrand('#sale-product .module-products','.box-products');
</script>