переключение табличного и колоночного вывода товара

[tweenpix 0]

есть ли переключение табличного и колоночного вывода товара в категориях?

[YuraS 4]

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

а что и как править зависит от того, как сверстан конкретный шаблон.

конкретно за вывод товаров в категориях отвечают файлы

module/product_listing/product_listing_columns.html

module/product_listing/product_listing_list.html

подробнее тут - http://vamshop.ru/manual/ch15.html#id2872997

[tweenpix 0]

ога спасибо, сделал через удаление и присвоение классов через jQuery

[tweenpix 0]

зацените http://www.autoprilavok.ru/index.php/cat/c16_Maslo.html

кому надо код вот:

{literal}

<script type="text/javascript">

jQuery.noConflict();

jQuery(document).ready(function(){


var dt = jQuery.cookie("display_type");


if(dt == 'list'){

  jQuery(".pageItem dl").attr("class","table-view");

  jQuery("#toggle_list").css("background-position","top left");

}

if(dt == 'column'){

  jQuery(".pageItem dl").attr("class","itemNewProductsDefault");

  jQuery("#toggle_column").css("background-position","top right");  

}


jQuery("#toggle_list").click(function(){

  jQuery.cookie("display_type",null);

  jQuery(".pageItem dl").attr("class","table-view");

  jQuery("#toggle_list").css("background-position","top left");

  jQuery("#toggle_column").css("background-position","bottom right");

  jQuery.cookie("display_type","list", { expires: 7,path: "/"});

});

jQuery("#toggle_column").click(function(){

  jQuery.cookie("display_type",null);

  jQuery(".pageItem dl").attr("class","itemNewProductsDefault");

  jQuery("#toggle_list").css("background-position","bottom left");

  jQuery("#toggle_column").css("background-position","top right");

  jQuery.cookie("display_type","column", { expires: 7,path: "/"});

})

});


</script>

{/literal}

[/CODE]


 

CSS вот:

[CODE]

/* table view products */

#toggle_list,#toggle_column{display:block; width:20px; height:20px; background:#ccc url(/templates/clean/img/listview.png) no-repeat bottom left; margin:0 2px; float:right; cursor: pointer}

#toggle_column {background-position:bottom right}

#toggle_column:hover{background-position: top right}

#toggle_list:hover{background-position: top left}

.table-view{border:1px solid #ccc;display:block;float:none;height:65px;margin:5px 0;padding:5px;width:auto;-webkit-border-radius: 5px;-moz-border-radius: 5px;border-radius: 5px;}

.table-view .itemImage {display:none}

.table-view .itemDescriptionName{display:block;height:auto;margin:0;overflow:hidden;width:440px; text-align:left; float:left}

.table-view .bil{padding-top:0; float:left; width:240px}

.table-view .itemDescriptionPrice br {margin:0; padding:0; float:left}

/* eof table-view */

но это применимо к моему шаблону :D

не забудьте подключить библиотеку http://yandex.st/jquery/cookie/1.0/jquery.cookie.min.js

[YuraS 4]

красивое решение. аплодирую! :)

[support 447]

Прикольно.

Вот ещё тема похожая - http://vamshop.ru/forum/topic/8356-%d0%bf%d0%b5%d1%80%d0%b5%d0%ba%d0%bb%d1%8e%d1%87%d0%b5%d0%bd%d0%b8%d0%b5-css-%d1%81%d1%82%d0%b8%d0%bb%d0%b5%d0%b9-%d0%be%d1%84%d0%be%d1%80%d0%bc%d0%bb%d0%b5%d0%bd%d0%b8%d1%8f-%d0%bd%d0%b0-%d0%bb%d0%b5%d1%82%d1%83/

Но там переключение всего css файла.

[tweenpix 0]

просьба засунуть в факу

[support 447]

Добавил в faq

[karaush 0]

помогите, куда надо вставить?

[support 447]

Наверное в шаблон списка товаров /templates/vamshop/module/product_listing/

Стили в /templates/vamshop/stylesheet.css

[karaush 0]

я все вставил, но не работает ( ledyone.ru

[support 447]

Посмотрите пример кода у tweenpix на сайте, там всё работает.

Может в шаблон не вставили что.

[karaush 0]

зацените http://www.autoprila.../c16_Maslo.html

кому надо код вот:

{literal}

<script type="text/javascript">

jQuery.noConflict();

jQuery(document).ready(function(){


var dt = jQuery.cookie("display_type");


if(dt == 'list'){

  jQuery(".pageItem dl").attr("class","table-view");

  jQuery("#toggle_list").css("background-position","top left");

}

if(dt == 'column'){

  jQuery(".pageItem dl").attr("class","itemNewProductsDefault");

  jQuery("#toggle_column").css("background-position","top right");  

}


jQuery("#toggle_list").click(function(){

  jQuery.cookie("display_type",null);

  jQuery(".pageItem dl").attr("class","table-view");

  jQuery("#toggle_list").css("background-position","top left");

  jQuery("#toggle_column").css("background-position","bottom right");

  jQuery.cookie("display_type","list", { expires: 7,path: "/"});

});

jQuery("#toggle_column").click(function(){

  jQuery.cookie("display_type",null);

  jQuery(".pageItem dl").attr("class","itemNewProductsDefault");

  jQuery("#toggle_list").css("background-position","bottom left");

  jQuery("#toggle_column").css("background-position","top right");

  jQuery.cookie("display_type","column", { expires: 7,path: "/"});

})

});


</script>

{/literal}

[/CODE]


 

CSS вот:

[CODE]

/* table view products */

#toggle_list,#toggle_column{display:block; width:20px; height:20px; background:#ccc url(/templates/clean/img/listview.png) no-repeat bottom left; margin:0 2px; float:right; cursor: pointer}

#toggle_column {background-position:bottom right}

#toggle_column:hover{background-position: top right}

#toggle_list:hover{background-position: top left}

.table-view{border:1px solid #ccc;display:block;float:none;height:65px;margin:5px 0;padding:5px;width:auto;-webkit-border-radius: 5px;-moz-border-radius: 5px;border-radius: 5px;}

.table-view .itemImage {display:none}

.table-view .itemDescriptionName{display:block;height:auto;margin:0;overflow:hidden;width:440px; text-align:left; float:left}

.table-view .bil{padding-top:0; float:left; width:240px}

.table-view .itemDescriptionPrice br {margin:0; padding:0; float:left}

/* eof table-view */

но это применимо к моему шаблону :D

не забудьте подключить библиотеку http://yandex.st/jqu...y.cookie.min.js

Все сделал как написано, и добавил в шаблон для вывода

<span style="float:right">

<span id="toggle_list"></span>

<span id="toggle_column" style="background-position: 100% 0%; "></span>

</span>

но не получается,помогите пожалуйста!

[karaush 0]

Саша помоги решить!

[support 447]

Так это ж tweenpix код, я не разбирался в его коде и не пробовал его.

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

[support 447]

Ну и хотя бы ссылку давали на страницу, куда вставили этот код, что б было хотя бы на что посмотреть и что-то конкретное сказать.

[karaush 0]

http://ledyone.ru/bjustgalter--trusiki.html

[support 447]

Попробуйте для начала подключать именно те же версии jQuery, что на сайте tweenpix и в том же порядке, т.е. сначала jQuery, потом jQuery Cookie.

Иногда бывает, что код не работает в разных версиях jQuery.

[support 447]

Так же можно попробовать другие js файлы убрать, потому как бывают конфликты между js файлами.

[karaush 0]

убрал , но не работает

[support 447]

Попробовал сделать на VamShop 1.66, как в faq.

У меня всё работает.

В /templates/vamshop/module/product_listing/ шаблонах вставил:

<script src="http://yandex.st/jquery/cookie/1.0/jquery.cookie.min.js" type="text/javascript"></script>


<script src="http://yandex.st/jquery-ui/1.8.15/jquery-ui.min.js"></script>


<span style="float:right">

<span id="toggle_list"></span>

<span id="toggle_column"></span>

</span>


<script type="text/javascript">

{literal}

jQuery.noConflict();

jQuery(document).ready(function(){


	var dt = jQuery.cookie("display_type");


	if(dt == 'list'){

		jQuery(".pageItem dl").attr("class","table-view");

		jQuery("#toggle_list").css("background-position","top left");

	}

	if(dt == 'column'){

		jQuery(".pageItem dl").attr("class","itemNewProductsDefault");

		jQuery("#toggle_column").css("background-position","top right");		   

	}

	if(dt != 'column' && dt != 'list'){

		jQuery("#toggle_list").css("background-position","bottom left");

		jQuery("#toggle_column").css("background-position","top right");

	}

	jQuery("#toggle_list").click(function(){

		jQuery.cookie("display_type",null);

		jQuery(".pageItem dl").attr("class","table-view");

		jQuery("#toggle_list").css("background-position","top left");

		jQuery("#toggle_column").css("background-position","bottom right");

		jQuery.cookie("display_type","list", { expires: 7,path: "/"});

	});

	jQuery("#toggle_column").click(function(){

		jQuery.cookie("display_type",null);

		jQuery(".pageItem dl").attr("class","itemNewProductsDefault");

		jQuery("#toggle_list").css("background-position","bottom left");

		jQuery("#toggle_column").css("background-position","top right");

		jQuery.cookie("display_type","column", { expires: 7,path: "/"});

	})

});

{/literal}


</script>

[/code]


в /templates/vasmhop/stylesheet.css добавил:

[code]

/* table view products */

#toggle_list,#toggle_column{display:block; width:20px; height:20px; background:#ccc url(/images/arrow_down.gif) no-repeat bottom left; margin:0 2px; float:right; cursor: pointer}

#toggle_column {background-position:bottom right}

#toggle_column:hover{background-position: top right}

#toggle_list:hover{background-position: top left}

.table-view{border:1px solid #ccc;display:block;float:none;height:65px;margin:5px 0;padding:5px;width:auto;-webkit-border-radius: 5px;-moz-border-radius: 5px;border-radius: 5px;}

.table-view .itemImage {display:none}

.table-view .itemDescriptionName{display:block;height:auto;margin:0;overflow:hidden;width:440px; text-align:left; float:left}

.table-view .bil{padding-top:0; float:left; width:240px}

.table-view .itemDescriptionPrice br {margin:0; padding:0; float:left}

/* eof table-view */   

Так что либо не так что-то вставляете, либо какие-то js скрипты мешает в Вашем магазине.

[karaush 0]

Спасибо! заработало

[support 447]

Хорошо, что разобрались.