How to show categories like tabs and show regular pagination?


This is the result we want to achieve.

Please make sure you are in development mode.

1. Open your HTML file and search for '.js-category-list' element, cut it from its current place and move it right after the '.added-products' element, like shown in the screenshot.

2. Open the 'js/products/views/categoryListView.js' and add the following lines of code.

3. Open the 'js/products/products.js' file and search for the 'changeCategories' declaration and within the 'show' function add this line of code.

4. Search for 'loadCategory' declaration and add the following line of code. You can copy-paste it from below,

if (!isFirst) { $(doneView).css('opacity','0'); }

5. Within the 'initCategoryCarousel' function change the 'dots' option to 'true' and add the following code as shown in the screenshot.

this.addPagination(target);
$('.owl-controls', target).wrap('<div class="prod-controls-container">');

6. Right after that function declare a new function called 'addPagination' and add one more line of code like shown in the screenshot. The function can be copy-pasted from below.

addPagination: function (target) {
	var dots = $('.owl-dot', target);

	dots.each(function(index, el) {
		$(this).find('span').html(index+1);
	});
},

 

7. Add at the end of your CSS file these lines of code:

.options-container ul{
	margin-bottom: 30px;
}

.options-container ul li{
	display: inline-block;
	margin-right: 15px;
	cursor: pointer;
	transition: color .3s ease;
}

.options-container ul li.is-active{
	color:#42c3d6;
}

.category-list .select dt a{
	display: none;
}

.added-products .shopping-cart:after{
	display: none;
}

.product-presentation-content{
	position: relative;
}

.added-products{
	position: absolute;
	right: 13px;
	top: -7px;
}

.products-slider .owl-controls{
	position: relative;
	display: inline-block;
	text-align: center;
}

.products-slider .owl-controls .owl-dot{
	display: inline-block;
    font-size: 24px;
    padding: 10px;
    margin-right: 5px;
    color: #494949;
}
.products-slider.no-nav .owl-controls{
	display: none;
}

.products-slider .owl-controls .owl-dot:last-child{
	margin: 0;
}

.products-slider .owl-nav div{
	top: 10px;
}

.products-slider .owl-nav div.owl-next{
	right: -30px;
}

.products-slider .owl-nav div.owl-prev{
	left: -30px;
}

.prod-controls-container {
    position: absolute;
    bottom: -40px;
    left: 0;
    text-align: center;
    width: 100%;
}

.hidden-container{
	padding: 40px 15px 85px 15px;
}

 

 


Last update:
2015-12-09 12:11
Author:
Vlad Sargu
Revision:
1.1
Average rating:0 (0 Votes)