Как растянуть контент на 100%?

[jnxjn]

При использовании левой колонки, основной контент по ширине занимает 75%, как в контенте который находится напротив категорий указать ширину 75% а остальному контенту указать 100%?

[AlexBr]

@jnxjn вам ломать шаблон придётся. Там левый блок до низу

[HyperLabTeam]

При использовании левой колонки, основной контент по ширине занимает 75%, как в контенте который находится напротив категорий указать ширину 75% а остальному контенту указать 100%?

Убрать дубль категорий с лева

[jnxjn]

Убрать дубль категорий с лева

Дубль категорий нужен

 

@jnxjn вам ломать шаблон придётся. Там левый блок до низу

если я закрою левый блок, закрою контент. После них открою новый div (content2) дам ему col-sm-12  по идее ширина должна стать 100% и в него уже внесу нужные мне блоки. Я в верном направлении думаю?

[AlexBr]

 

 

если я закрою левый блок, закрою контент. После них открою новый div (content2) дам ему col-sm-12  по идее ширина должна стать 100% и в него уже внесу нужные мне блоки. Я в верном направлении думаю?

Надо ковырять. Сейчас нет времени на это. Правый клик > показать код и играйтесь с блоками.

[HyperLabTeam]

Дубль категорий нужен

Зачем если оно у вас есть вверху?

Воткните в левый блок фильтр

[jnxjn]

Зачем если оно у вас есть вверху?

Воткните в левый блок фильтр

Какой фильтр?

Категории нужны в дальнейшем, сайт в ранней разработке

[jnxjn]

Поставил пару закрывающихся дивов и всё у меня стало хорошо. Чуть позже напишу подробней, благодарю за моральную поддержку!

Змінено 20 вересня 2016 користувачем jnxjn

[AlexBr]

 

 

Какой фильтр?

@AWARO, Скорее всего имел ввиду под блоком категорий воткнуть блок фильтров товаров, что бы визуально спрятать пустоту

[jnxjn]

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

Змінено 21 вересня 2016 користувачем jnxjn

[n3bo]

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

смотря как вы это сделали. В любом случае думаю да, есть

[mazein]

Можно же сделать скриптик, который будет делать display:none; для #column-left при прокрутке страницы на определённую высоту, на подобии стены вконтакте. При этом контент будет растягиваться на всю ширину, и вёрстку ломать не надо.

[mazein]

Вот, сделал скриптик
 

<script type="text/javascript"><!--
$(function() {
	var fixblock_height = $('#column-left').height();
	var fixblock_pos = $('#column-left').position().top; ;
	$(window).scroll(function(){

	   if ($(window).scrollTop() > fixblock_pos + fixblock_height){
			$('#column-left').css({'display': 'none'});
			$('.col-sm-9').css({'width': '100%'});
			$('.product-grid.col-lg-4').css({'width': '25%'});
			$('#content .product-grid.col-lg-4:nth-child(3n+1)').css({'clear': 'none'});
	   }else{
			$('#column-left').css({'display': 'block'});
			$('.col-sm-9').css({'width': '75%'});
			$('.product-grid.col-lg-4').css({'width': '33.33333%'});
			$('#content .product-grid.col-lg-4:nth-child(3n+1)').css({'clear': 'left'});
	   }
	})
});
//--></script>

 
 
Высчитывается высота левой колонки, и при прокрутке ниже её, ей присваивается стиль display:none;
И волки сыты меню останется, и овцы целы пустых полей не будет.
 
Скрипт вставить в конец файла /catalog/view/theme/*/template/product/category.tpl
Вот пример.

 

Да, надо немного починить переключение сетка/список  :-)

Змінено 21 вересня 2016 користувачем mazein

[mazein]

Допилил скрипт. Только для левой колонки.

С переключателем список/сетка не конфликтует.

 

		<script type="text/javascript"><!--
			$(function() {
			if($(window).width()>767) {
				var fixblock_height = $('#column-left').height();
				var fixblock_pos = $('#column-left').position().top; ;
					$(window).scroll(function(){
						if ($(window).scrollTop() > fixblock_pos + fixblock_height){
							$('#column-left').css({'display': 'none'});
							$('#content').attr('class', 'col-sm-12');
							$('#content .product-grid').attr('class', 'product-layout product-grid col-lg-3 col-md-3 col-sm-6 col-xs-12');
						}else{
							$('#column-left').css({'display': 'block'});
							$('#content').attr('class', 'col-sm-9'); 
							$('#content .product-grid').attr('class', 'product-layout product-grid col-lg-4 col-md-3 col-sm-6 col-xs-12');
						}
					})
			}
			});
		//--></script>

Змінено 1 жовтня 2016 користувачем mazein

[Blade]

Подскажите пжл, если не трудно

у меня шаблон Coloring

На нем меняли верстку

код из такого

<?php if ($column_left && $column_right) { ?>

    <?php $class = 'col-sm-4 col-md-6'; ?>

    <?php } elseif ($column_left || $column_right) { ?>

    <?php $class = 'col-sm-8 col-md-9'; ?>

    <?php } else { ?>

    <?php $class = 'col-sm-12'; ?>

    <?php } ?>

 

стал таким

<?php $class = 'col-sm-12'; ?>

    <?php if ($column_left && $column_right) { ?>

  <?php $class = 'col-sm-8 col-md-9 leftcol rightcol'; ?>

    <?php } elseif ($column_left) { ?>

  <?php $class = 'col-sm-8 col-md-9 leftcol'; ?>

    <?php } elseif ($column_right) { ?>

  <?php $class = 'col-sm-12 rightcol'; ?>

    <?php } ?>

 

какие цифры надо подставить в ваш код что бы у меня заработало без багов?

 

зы извините что влез в вашу тему

[mazein]

, скрипт в текущем виде разве не работает? 

[Blade]

, скрипт в текущем виде разве не работает? 

у меня нет

верстку переделали

у меня добавлена правая колонка при разрешении больше 1420

st-sklad.ru

когда ставлю скрипт эта колонка уезжает ниже категорий и становится слева (там где колонка категорий, ниже)

 

и товаров в строке у меня 4

после установки скрипта становится 3

Змінено 2 жовтня 2016 користувачем kors06

[mazein]

, возможно как-то так, могу ошибаться

		<script type="text/javascript"><!--
			$(function() {
			if($(window).width()>767) {
				var fixblock_height = $('#column-left').height();
				var fixblock_pos = $('#column-left').position().top; ;
					$(window).scroll(function(){
						if ($(window).scrollTop() > fixblock_pos + fixblock_height){
							$('#column-left').css({'display': 'none'});
							$('#column-right').css({'display': 'none'});
							$('#content').attr('class', 'col-sm-12');
							$('#content .product-grid').attr('class', 'product-layout product-grid col-lg-3 col-md-3 col-sm-6 col-xs-12');
						}else{
							$('#column-left').css({'display': 'block'});
							$('#column-right').css({'display': 'block'});
							$('#content').attr('class', 'col-sm-8 col-md-9 leftcol rightcol'); 
							$('#content .product-grid').attr('class', 'product-layout product-grid col-lg-3 col-md-4 col-sm-6 col-xs-12');
						}
					})
			}
			});
		//--></script>

[Blade]

СПАСИБО !

Все заработало

я как не пробовал, не помогало

[mazein]

Очередное обновление. Ввиду кривой работы скрипта в мозилле и ie, пришлось немного дополнить обратное переключение.

		<script type="text/javascript"><!--
			$(function() {
			if($(window).width()>767) {
				var fixblock_height = $('#column-left').height();
				var grid_height = $('.product-grid').height();
				var fixblock_pos = $('#column-left').position().top; ;
					$(window).scroll(function(){
						if ($(window).scrollTop() > fixblock_pos + fixblock_height){
							$('#column-left').css({'display': 'none'});
							$('#content').attr('class', 'col-sm-12');
							$('#content .product-grid').attr('class', 'product-layout product-grid col-lg-3 col-md-3 col-sm-6 col-xs-12');
						}else if ($(window).scrollTop() < fixblock_pos + fixblock_height - grid_height){
							$('#column-left').css({'display': 'block'});
							$('#content').attr('class', 'col-sm-9'); 
							$('#content .product-grid').attr('class', 'product-layout product-grid col-lg-4 col-md-3 col-sm-6 col-xs-12');
						}
					})
			}
			});
		//--></script>

[Blade]

 

Очередное обновление. Ввиду кривой работы скрипта в мозилле и ie, пришлось немного дополнить обратное переключение.

		<script type="text/javascript"><!--
			$(function() {
			if($(window).width()>767) {
				var fixblock_height = $('#column-left').height();
				var grid_height = $('.product-grid').height();
				var fixblock_pos = $('#column-left').position().top; ;
					$(window).scroll(function(){
						if ($(window).scrollTop() > fixblock_pos + fixblock_height){
							$('#column-left').css({'display': 'none'});
							$('#content').attr('class', 'col-sm-12');
							$('#content .product-grid').attr('class', 'product-layout product-grid col-lg-3 col-md-3 col-sm-6 col-xs-12');
						}else if ($(window).scrollTop() < fixblock_pos + fixblock_height - grid_height){
							$('#column-left').css({'display': 'block'});
							$('#content').attr('class', 'col-sm-9'); 
							$('#content .product-grid').attr('class', 'product-layout product-grid col-lg-4 col-md-3 col-sm-6 col-xs-12');
						}
					})
			}
			});
		//--></script>

автор спасибо большое за скрипт

обнаружил баг

на 1920*1080 у меня 4 товара, при спуске вниз становится 5

и все отлично

НО

проверял на 1440*900

у меня в категории в строке 4 товара, при спуске также остается 4 но растягиваются по ширине

если ниже нажать кнопку "показать еще" то их становится не 4 как надо а 3 растянутых по всей ширине

надо указать наверное количсетво товаров в строке и при каком разрешении, и что бы можно было это число ставить самостоятельно

 

посмотрите у меня если не поймете что я написал st-sklad.ru (разрешение надо до 1440)