как сделать список товаров по три штуки в ряд???
#1
Отправлено 05 Январь 2011 - 18:59
#2
Отправлено 05 Январь 2011 - 19:03
#3
Отправлено 05 Январь 2011 - 23:51
http://forum.storela...indpost__p__145
С той лишь разницей что вмето кода
{goods.index | is_divided("3","</tr><tr>","")}вставляйте
{goods.index | is_divided("2","</tr><tr>","")}
#4
Отправлено 06 Январь 2011 - 11:46
и еще один маленький вопросик. есть скрипт "летящих бабочек" - куда его нужно вставить/( что бы они летали на главной странице) - ???
#5
Отправлено 06 Январь 2011 - 12:07
#6
Отправлено 26 Январь 2011 - 13:35
1)подскажите как сделать отображение товара в виде списка, где два товар занимает одну строку (пример: http://candykid.ru/)(то что вы писали выше сделала- но это совсем не то что нужно).
2)где можно изменить значения Сортировать по:???например не по цене: дорогие -дешевые, а по размеру62-68
3)как закрасить фоном бока страницы?
#7
Отправлено 26 Январь 2011 - 17:53
lubovr (26 Январь 2011 - 13:35) писал:
1)подскажите как сделать отображение товара в виде списка, где два товар занимает одну строку (пример: http://candykid.ru/)(то что вы писали выше сделала- но это совсем не то что нужно).
<ul> <li></li> <li></li> <li></li> <li></li> </ul>
lubovr (26 Январь 2011 - 13:35) писал:
http://neocube.store...catalog/Неокубы
lubovr (26 Январь 2011 - 13:35) писал:
3)как закрасить фоном бока страницы?
<body>цвет, через редактор тем ("Сайт" -> "Редактор тем") получится примерно так:
<body style="background:#000000;">
Для подбора цвета можно использовать этот сервис:
http://www.colorpicker.com/
#8
Отправлено 27 Январь 2011 - 11:48
support (26 Январь 2011 - 17:53) писал:
<ul> <li></li> <li></li> <li></li> <li></li> </ul>
Добрый день!Ксожалению у меня ничего не получилась.Помогите пожалуйста!!!!!! нужно что бы товары были в 2 столбика и при этом отображалось наименование, цена и кнопка подробнее.
Видимо проще всего прописать у тега
<body>цвет, через редактор тем ("Сайт" -> "Редактор тем") получится примерно так:
<body style="background:#000000;">
Для подбора цвета можно использовать этот сервис:
http://www.colorpicker.com/
#9
Отправлено 27 Январь 2011 - 14:42
.content_page { background-color: #ffffff; }
#10
Отправлено 27 Январь 2011 - 15:18
Здравствуйте! На указанном сайте товары идут ячейками, заполняя экран. У меня например здесь 2 столбика идёт. Ячейки соответственно сделаны по аналогии с нашими стандартными. Для отображения в таком виде используется свойства float и списков вида
Добрый день!Ксожалению у меня ничего не получилась.Помогите пожалуйста!!!!!! нужно что бы товары были в 2 столбика и при этом отображалось наименование, цена и кнопка подробнее
#11
Отправлено 27 Январь 2011 - 17:33
http://forum.storela...ndpost__p__1154
В случае отображения 2х товаров вместо 3х, достаточно будет изменить стили вместо предложенных в примере:
/* Список товаров в виде таблицы. Ячейки с товаром */ .goodsListItem {text-align:center;vertical-align:top;width:195px;overflow:hidden;padding:0px;} /* Размер в 200 пикселей сделан, чтобы и 2 и 5 товаров нормально смотрелись и была возможность увеличить разрешение до 1220 пикселей*/ .goodsListItemBlock {height:300px;width:210px;margin:5px;overflow:hidden;} .goodsListItemBlock a {} .goodsListItemImage {height:185px;width:100%;margin-top:1em;border-collapse: collapse;border-spacing: 0;} .goodsListItemImage td {text-align:center;vertical-align:middle;} .goodsListItemName {line-height:1.2em;padding:0px 2px 0px 2px;margin:0px;max-height:3.6em;overflow:hidden;} .goodsListItemName a {font-size:15px;line-height:1.2em;padding:0px;margin:0px;}
Следующие:
/* Список товаров в виде таблицы. Ячейки с товаром */ .goodsListItem {text-align:center;vertical-align:top;width:195px;overflow:hidden;padding:0px;} /* Размер в 200 пикселей сделан, чтобы и 2 и 5 товаров нормально смотрелись и была возможность увеличить разрешение до 1220 пикселей*/ .goodsListItemBlock {height:330px;width:330px;margin:5px;overflow:hidden;} .goodsListItemBlock a {} .goodsListItemImage {height:185px;width:100%;margin-top:1em;border-collapse: collapse;border-spacing: 0;} .goodsListItemImage td {text-align:center;vertical-align:middle;} .goodsListItemName {line-height:1.2em;padding:0px 2px 0px 2px;margin:0px;max-height:3.6em;overflow:hidden;} .goodsListItemName a {font-size:15px;line-height:1.2em;padding:0px;margin:0px;}
И вместо строчки:
{goods.index | is_divided("3","</tr><tr>","")}вставить
{goods.index | is_divided("2","</tr><tr>","")}
Для отображения описания в режиме таблицы, достаточно добавить его, например так:
Было:
Стало:
<div> {goods.DESCRIPTION_SHORT} </div>
Результирующий код шаблона "Товары", в котором:
1) В каталоге товаров отображается список корневый категорий
2) Есть переключатель с режима таблицы на режим отображения списком
3) В таблице отображается по 2 товара, есть короткое описание, расширены ячейки:
<div class="page-headline"> <h1>{CATEGORY_NAME}</h1> </div> <div class="pad-box"> <!-- Строка пути --> <div id="site-path"> <p> <a href="http://{NET_DOMAIN}/">Главная</a> <!-- Если отображаем полный каталог товаров, без указания категории --> {% IF IS_FULL_CATALOG %} » <span class="current">Каталог товаров</span> <!-- Если отображаем товары в категории --> {% ELSE %} » <a href="{CATALOG_URL}" >Каталог товаров</a> {% FOR upper_navigation %} {% IF upper_navigation.CURRENT %} » <span class="current">{upper_navigation.NAME}</span>{% ELSEIF upper_navigation.CURRENT_PARENT %} » <a href="{upper_navigation.URL}" >{upper_navigation.NAME}</a>{% ENDIF %} {% ENDFOR %} {% ENDIF %} </p> </div> <!-- end Строка пути --> {% IF IS_FULL_CATALOG %} <!-- Блок навигации по категориям, вложенным в текущую категорию --> <ul class="content_catalog_nested_categories"> {% FOR nested_categories_list %} <li> <div class="imagem"><a href="{nested_categories_list.URL}" title="Перейти к категории «{nested_categories_list.NAME}»"><img {% IF nested_categories_list.IMAGE_EMPTY %}src="{ASSETS_IMAGES_PATH}no-photo-small.png" width="130"{% ELSE %}src="{nested_categories_list.IMAGE_MEDIUM}"{% ENDIF %} alt="{nested_categories_list.NAME}" /></a></div> <a href="{nested_categories_list.URL}" title="Перейти к категории «{nested_categories_list.NAME}»">{nested_categories_list.NAME}</a> </li> {% ENDFOR %} </ul> <br clear="all"/> {% ELSE %} <!-- Короткое SEO описание категории --> {% IF CATEGORY_SEO_DESCRIPTION_SHORT %} <div style="padding-bottom:1em;">{CATEGORY_SEO_DESCRIPTION_SHORT}</div> {% ENDIF %} <!-- Фильтры показываются только если есть товары в категории --> {% IFNOT goods_empty %} <!-- Блок выбора параметра по которому производится сортировка списка товаров и возможность изменения лимитов выдачи --> <form action=""> <table class="goodsListingTopNavigation"> <tr> <td> <!-- Список фильтров, которые сейчас действуют на результаты поиска --> {% FOR goods_filters %} <input type="hidden" name="{goods_filters.NAME}" value="{goods_filters.VALUE}" /> {% ENDFOR %} <!-- Поле выбора сортировки --> {% IF goods_show_order_fields %} Сортировать по: <select name="goods_search_field_id" onchange="this.form.submit();"> {% FOR goods_order_fields %} <option value="{goods_order_fields.ID}" {% IF goods_order_fields.SELECTED %}selected="selected"{% ENDIF %}>{goods_order_fields.NAME}</option> {% ENDFOR %} </select> {% ENDIF %} </td> <td class="alignCenter viewSelector"> <!-- Переключатель режима просмотра --> {% IF GOODS_VIEW_TYPE=2 %} <strong title="Список товаров сейчас отображается в виде таблицы, по 2 товара на строку">Таблица</strong> <a href="?goods_view_type=1" title="Отображать список товаров в виде списка">Список</a> {% ELSE %} <a href="?goods_view_type=2" title="Отображать список товаров в виде таблицы с 2мя товарами на одну строку">Таблица</a> <strong title="Список товаров сейчас отображается в виде списка, где один товар занимает одну строку">Список</strong> {% ENDIF %} <!-- /Переключатель режима просмотра --> </td> <td class="alignRight"> <!-- Поле выбора лимитов --> {% IF goods_show_per_page %} Показывать по: <select name="per_page" onchange="this.form.submit();"> {% FOR goods_per_page_list %} <option value="{goods_per_page_list.LIMIT}" {% IF goods_per_page_list.SELECTED %}selected="selected"{% ENDIF %}>{goods_per_page_list.LIMIT}</option> {% ENDFOR %} </select> {% ENDIF %} </td> </tr> </table> </form> <!-- END Блок выбора параметра по которому производится сортировка списка товаров --> {% ENDIF %} <!-- END Фильтры показываются только если есть товары в категории --> <!-- Goods list --> {% IF goods_empty %} <!-- Если не применено ни одного фильтра, значит в категории нет товаров --> {% IF goods_filters_empty %} <!-- Если в категории нет товаров, но есть категории, то отобразим их --> {%IFNOT nested_categories_list_empty %} <!-- Блок навигации по категориям, вложенным в текущую категорию --> <ul class="content_catalog_nested_categories"> {% FOR nested_categories_list %} <li> <div class="imagem"><a href="{nested_categories_list.URL}" title="Перейти к категории «{nested_categories_list.NAME}»"><img {% IF nested_categories_list.IMAGE_EMPTY %}src="{ASSETS_IMAGES_PATH}no-photo-small.png" width="130"{% ELSE %}src="{nested_categories_list.IMAGE_MEDIUM}"{% ENDIF %} alt="{nested_categories_list.NAME}" /></a></div> <a href="{nested_categories_list.URL}" title="Перейти к категории «{nested_categories_list.NAME}»">{nested_categories_list.NAME}</a> </li> {% ENDFOR %} </ul> <br clear="all"/> <!-- Если в категории нет ни товаров, ни категорий то сообщим пользователю что ничего нет --> {% ELSE %} <h3>Нет товаров в категории</h3> {% ENDIF %} <!-- Если производили фильтрацию товаров в категории --> {% ELSE %} <h3>Нет товаров для выбранных условий</h3> {% ENDIF %} {% ELSE %} {% IF GOODS_VIEW_TYPE=1 %} <!-- Список товаров. Список --> {% FOR goods %} <div class="listing"> <div class="imagem"><a href="{goods.URL}"><img {% IF goods.IMAGE_EMPTY %}src="{ASSETS_IMAGES_PATH}no-photo-medium.png" width="220"{% ELSE %}src="{goods.IMAGE_SMALL}"{% ENDIF %} alt="{goods.NAME}" /></a></div> <div class="contm"> <h3><a href="{goods.URL}">{goods.NAME}</a></h3> <p> {goods.DESCRIPTION_SHORT} </p> <p> Цена сейчас: <a href="{goods.URL_MIN_PRICE_NOW}">{goods.MIN_PRICE_NOW | money_format}</a><br /> {% IF goods.MIN_PRICE_OLD>goods.MIN_PRICE_NOW %} Старая цена: <a href="{goods.URL_MIN_PRICE_OLD}" class="lineThrough">{goods.MIN_PRICE_OLD | money_format}</a> {% ENDIF %} </p> <p> <a class="readmore" title="{goods.NAME}" href="{goods.URL}">Подробнее</a> </p> </div> <div class="clr"></div> </div> {% ENDFOR goods %} <!-- /Список товаров. Список --> {% ELSE %} <!-- Список товаров. Таблица --> <table> {% FOR goods %} <td class="goodsListItem"> <div class="goodsListItemBlock withBorder cornerAll"> <table class="goodsListItemImage"> <tr> <td> <a href="{goods.URL}"><img src="{% IF goods.IMAGE_EMPTY %}{ASSETS_IMAGES_PATH}no-photo-other.png{% ELSE %}{goods.IMAGE_OTHER}{% ENDIF %}" alt="{goods.NAME}" /></a> </td> </tr> </table> <h3 class="goodsListItemName"><a href="{goods.URL}">{goods.NAME}</a></h3> <div> {goods.DESCRIPTION_SHORT} </div> <div class="goodsListItemPriceNew"> <a href="{goods.URL_MIN_PRICE_NOW}">{goods.MIN_PRICE_NOW | money_format}</a> </div> <div class="goodsListItemPriceOld"> {% IF goods.MIN_PRICE_OLD>goods.MIN_PRICE_NOW %} <a href="{goods.URL_MIN_PRICE_OLD}" class="lineThrough">{goods.MIN_PRICE_OLD | money_format}</a> {% ENDIF %} </div> </div> </td> {goods.index | is_divided("2","</tr><tr>","")} {% ENDFOR goods %} </table> <!-- /Список товаров. Таблица --> {% ENDIF %} {% ENDIF %} <!-- end Goods list --> <!-- Pages --> {% IF show_pages %} <div class="pagination"> <span class="pp-title">Страницы:</span> {% FOR goods_pages %} {% IF goods_pages.CURRENT %} <span class="pp-page pp-current">{goods_pages.PAGE}</span> {% ELSE %} <a class="pp-page" href="{GOODS_PAGINATE_URL}&page={goods_pages.PAGE}">{goods_pages.PAGE}</a> {% ENDIF %} {% ENDFOR %} </div> {% ENDIF %} <!-- end Pages --> <!-- Описание категории --> {% IF CATEGORY_DESCRIPTION %} <div> {CATEGORY_DESCRIPTION} </div> {% ENDIF %} <!-- Полное SEO описание категории --> {% IF CATEGORY_SEO_DESCRIPTION_LARGE %} <div> {CATEGORY_SEO_DESCRIPTION_LARGE} </div> {% ENDIF %} {% ENDIF %} </div>
Стили в файле main.csstemplate, в самом конце:
/* Список товаров в виде таблицы. Ячейки с товаром */ .goodsListItem {text-align:center;vertical-align:top;width:195px;overflow:hidden;padding:0px;} /* Размер в 200 пикселей сделан, чтобы и 2 и 5 товаров нормально смотрелись и была возможность увеличить разрешение до 1220 пикселей*/ .goodsListItemBlock {height:300px;width:330px;margin:5px;overflow:hidden;} .goodsListItemBlock a {} .goodsListItemImage {height:185px;width:100%;margin-top:1em;border-collapse: collapse;border-spacing: 0;} .goodsListItemImage td {text-align:center;vertical-align:middle;} .goodsListItemName {line-height:1.2em;padding:0px 2px 0px 2px;margin:0px;max-height:3.6em;overflow:hidden;} .goodsListItemName a {font-size:15px;line-height:1.2em;padding:0px;margin:0px;}
Для отображения списка товаров в другом виде, где имеются отличительный свойства:
1) Товары отображаются в виде таблицы, нет переключателя на список товаров
2) В таблице отображается по 2 товара, есть короткое описание, расширены ячейки:
3) В каталоге товаров отображается список корневый категорий
используем следующий код шаблона:
<div class="page-headline"> <h1>{CATEGORY_NAME}</h1> </div> <div class="pad-box"> <!-- Строка пути --> <div id="site-path"> <p> <a href="http://{NET_DOMAIN}/">Главная</a> <!-- Если отображаем полный каталог товаров, без указания категории --> {% IF IS_FULL_CATALOG %} » <span class="current">Каталог товаров</span> <!-- Если отображаем товары в категории --> {% ELSE %} » <a href="{CATALOG_URL}" >Каталог товаров</a> {% FOR upper_navigation %} {% IF upper_navigation.CURRENT %} » <span class="current">{upper_navigation.NAME}</span>{% ELSEIF upper_navigation.CURRENT_PARENT %} » <a href="{upper_navigation.URL}" >{upper_navigation.NAME}</a>{% ENDIF %} {% ENDFOR %} {% ENDIF %} </p> </div> <!-- end Строка пути --> {% IF IS_FULL_CATALOG %} <!-- Блок навигации по категориям, вложенным в текущую категорию --> <ul class="content_catalog_nested_categories"> {% FOR nested_categories_list %} <li> <div class="imagem"><a href="{nested_categories_list.URL}" title="Перейти к категории «{nested_categories_list.NAME}»"><img {% IF nested_categories_list.IMAGE_EMPTY %}src="{ASSETS_IMAGES_PATH}no-photo-small.png" width="130"{% ELSE %}src="{nested_categories_list.IMAGE_MEDIUM}"{% ENDIF %} alt="{nested_categories_list.NAME}" /></a></div> <a href="{nested_categories_list.URL}" title="Перейти к категории «{nested_categories_list.NAME}»">{nested_categories_list.NAME}</a> </li> {% ENDFOR %} </ul> <br clear="all"/> {% ELSE %} <!-- Короткое SEO описание категории --> {% IF CATEGORY_SEO_DESCRIPTION_SHORT %} <div style="padding-bottom:1em;">{CATEGORY_SEO_DESCRIPTION_SHORT}</div> {% ENDIF %} <!-- Фильтры показываются только если есть товары в категории --> {% IFNOT goods_empty %} <!-- Блок выбора параметра по которому производится сортировка списка товаров и возможность изменения лимитов выдачи --> <form action=""> <table class="goodsListingTopNavigation"> <tr> <td> <!-- Список фильтров, которые сейчас действуют на результаты поиска --> {% FOR goods_filters %} <input type="hidden" name="{goods_filters.NAME}" value="{goods_filters.VALUE}" /> {% ENDFOR %} <!-- Поле выбора сортировки --> {% IF goods_show_order_fields %} Сортировать по: <select name="goods_search_field_id" onchange="this.form.submit();"> {% FOR goods_order_fields %} <option value="{goods_order_fields.ID}" {% IF goods_order_fields.SELECTED %}selected="selected"{% ENDIF %}>{goods_order_fields.NAME}</option> {% ENDFOR %} </select> {% ENDIF %} </td> <td class="alignRight"> <!-- Поле выбора лимитов --> {% IF goods_show_per_page %} Показывать по: <select name="per_page" onchange="this.form.submit();"> {% FOR goods_per_page_list %} <option value="{goods_per_page_list.LIMIT}" {% IF goods_per_page_list.SELECTED %}selected="selected"{% ENDIF %}>{goods_per_page_list.LIMIT}</option> {% ENDFOR %} </select> {% ENDIF %} </td> </tr> </table> </form> <!-- END Блок выбора параметра по которому производится сортировка списка товаров --> {% ENDIF %} <!-- END Фильтры показываются только если есть товары в категории --> <!-- Goods list --> {% IF goods_empty %} <!-- Если не применено ни одного фильтра, значит в категории нет товаров --> {% IF goods_filters_empty %} <!-- Если в категории нет товаров, но есть категории, то отобразим их --> {%IFNOT nested_categories_list_empty %} <!-- Блок навигации по категориям, вложенным в текущую категорию --> <ul class="content_catalog_nested_categories"> {% FOR nested_categories_list %} <li> <div class="imagem"><a href="{nested_categories_list.URL}" title="Перейти к категории «{nested_categories_list.NAME}»"><img {% IF nested_categories_list.IMAGE_EMPTY %}src="{ASSETS_IMAGES_PATH}no-photo-small.png" width="130"{% ELSE %}src="{nested_categories_list.IMAGE_MEDIUM}"{% ENDIF %} alt="{nested_categories_list.NAME}" /></a></div> <a href="{nested_categories_list.URL}" title="Перейти к категории «{nested_categories_list.NAME}»">{nested_categories_list.NAME}</a> </li> {% ENDFOR %} </ul> <br clear="all"/> <!-- Если в категории нет ни товаров, ни категорий то сообщим пользователю что ничего нет --> {% ELSE %} <h3>Нет товаров в категории</h3> {% ENDIF %} <!-- Если производили фильтрацию товаров в категории --> {% ELSE %} <h3>Нет товаров для выбранных условий</h3> {% ENDIF %} {% ELSE %} <!-- Список товаров. Таблица --> <table> {% FOR goods %} <td class="goodsListItem"> <div class="goodsListItemBlock withBorder cornerAll"> <table class="goodsListItemImage"> <tr> <td> <a href="{goods.URL}"><img src="{% IF goods.IMAGE_EMPTY %}{ASSETS_IMAGES_PATH}no-photo-other.png{% ELSE %}{goods.IMAGE_OTHER}{% ENDIF %}" alt="{goods.NAME}" /></a> </td> </tr> </table> <h3 class="goodsListItemName"><a href="{goods.URL}">{goods.NAME}</a></h3> <div> {goods.DESCRIPTION_SHORT} </div> <div class="goodsListItemPriceNew"> <a href="{goods.URL_MIN_PRICE_NOW}">{goods.MIN_PRICE_NOW | money_format}</a> </div> <div class="goodsListItemPriceOld"> {% IF goods.MIN_PRICE_OLD>goods.MIN_PRICE_NOW %} <a href="{goods.URL_MIN_PRICE_OLD}" class="lineThrough">{goods.MIN_PRICE_OLD | money_format}</a> {% ENDIF %} </div> </div> </td> {goods.index | is_divided("2","</tr><tr>","")} {% ENDFOR goods %} </table> <!-- /Список товаров. Таблица --> {% ENDIF %} <!-- end Goods list --> <!-- Pages --> {% IF show_pages %} <div class="pagination"> <span class="pp-title">Страницы:</span> {% FOR goods_pages %} {% IF goods_pages.CURRENT %} <span class="pp-page pp-current">{goods_pages.PAGE}</span> {% ELSE %} <a class="pp-page" href="{GOODS_PAGINATE_URL}&page={goods_pages.PAGE}">{goods_pages.PAGE}</a> {% ENDIF %} {% ENDFOR %} </div> {% ENDIF %} <!-- end Pages --> <!-- Описание категории --> {% IF CATEGORY_DESCRIPTION %} <div> {CATEGORY_DESCRIPTION} </div> {% ENDIF %} <!-- Полное SEO описание категории --> {% IF CATEGORY_SEO_DESCRIPTION_LARGE %} <div> {CATEGORY_SEO_DESCRIPTION_LARGE} </div> {% ENDIF %} {% ENDIF %} </div>
и следующий набор стилей:
/* Список товаров в виде таблицы. Ячейки с товаром */ .goodsListItem {text-align:center;vertical-align:top;width:195px;overflow:hidden;padding:0px;} /* Размер в 200 пикселей сделан, чтобы и 2 и 5 товаров нормально смотрелись и была возможность увеличить разрешение до 1220 пикселей*/ .goodsListItemBlock {height:300px;width:330px;margin:5px;overflow:hidden;} .goodsListItemBlock a {} .goodsListItemImage {height:185px;width:100%;margin-top:1em;border-collapse: collapse;border-spacing: 0;} .goodsListItemImage td {text-align:center;vertical-align:middle;} .goodsListItemName {line-height:1.2em;padding:0px 2px 0px 2px;margin:0px;max-height:3.6em;overflow:hidden;} .goodsListItemName a {font-size:15px;line-height:1.2em;padding:0px;margin:0px;}
Для изменения шаблона, чтобы список товаров отображался со свойствами:
1) В каталоге товаров отображаются только товары.
2) В списке товаров нет переключателя
3) В списке товаров товары идут в 2 ряда, в больших ячейках с описанием
используем следующий код:
<div class="page-headline"> <h1>{CATEGORY_NAME}</h1> </div> <div class="pad-box"> <!-- Строка пути --> <div id="site-path"> <p> <a href="http://{NET_DOMAIN}/">Главная</a> <!-- Если отображаем полный каталог товаров, без указания категории --> {% IF IS_FULL_CATALOG %} » <span class="current">Каталог товаров</span> <!-- Если отображаем товары в категории --> {% ELSE %} » <a href="{CATALOG_URL}" >Каталог товаров</a> {% FOR upper_navigation %} {% IF upper_navigation.CURRENT %} » <span class="current">{upper_navigation.NAME}</span>{% ELSEIF upper_navigation.CURRENT_PARENT %} » <a href="{upper_navigation.URL}" >{upper_navigation.NAME}</a>{% ENDIF %} {% ENDFOR %} {% ENDIF %} </p> </div> <!-- end Строка пути --> <!-- Короткое SEO описание категории --> {% IF CATEGORY_SEO_DESCRIPTION_SHORT %} <div style="padding-bottom:1em;">{CATEGORY_SEO_DESCRIPTION_SHORT}</div> {% ENDIF %} <!-- Фильтры показываются только если есть товары в категории --> {% IFNOT goods_empty %} <!-- Блок выбора параметра по которому производится сортировка списка товаров и возможность изменения лимитов выдачи --> <form action=""> <table class="goodsListingTopNavigation"> <tr> <td> <!-- Список фильтров, которые сейчас действуют на результаты поиска --> {% FOR goods_filters %} <input type="hidden" name="{goods_filters.NAME}" value="{goods_filters.VALUE}" /> {% ENDFOR %} <!-- Поле выбора сортировки --> {% IF goods_show_order_fields %} Сортировать по: <select name="goods_search_field_id" onchange="this.form.submit();"> {% FOR goods_order_fields %} <option value="{goods_order_fields.ID}" {% IF goods_order_fields.SELECTED %}selected="selected"{% ENDIF %}>{goods_order_fields.NAME}</option> {% ENDFOR %} </select> {% ENDIF %} </td> <td class="alignRight"> <!-- Поле выбора лимитов --> {% IF goods_show_per_page %} Показывать по: <select name="per_page" onchange="this.form.submit();"> {% FOR goods_per_page_list %} <option value="{goods_per_page_list.LIMIT}" {% IF goods_per_page_list.SELECTED %}selected="selected"{% ENDIF %}>{goods_per_page_list.LIMIT}</option> {% ENDFOR %} </select> {% ENDIF %} </td> </tr> </table> </form> <!-- END Блок выбора параметра по которому производится сортировка списка товаров --> {% ENDIF %} <!-- END Фильтры показываются только если есть товары в категории --> <!-- Goods list --> {% IF goods_empty %} <!-- Если не применено ни одного фильтра, значит в категории нет товаров --> {% IF goods_filters_empty %} <!-- Если в категории нет товаров, но есть категории, то отобразим их --> {%IFNOT nested_categories_list_empty %} <!-- Блок навигации по категориям, вложенным в текущую категорию --> <ul class="content_catalog_nested_categories"> {% FOR nested_categories_list %} <li> <div class="imagem"><a href="{nested_categories_list.URL}" title="Перейти к категории «{nested_categories_list.NAME}»"><img {% IF nested_categories_list.IMAGE_EMPTY %}src="{ASSETS_IMAGES_PATH}no-photo-small.png" width="130"{% ELSE %}src="{nested_categories_list.IMAGE_MEDIUM}"{% ENDIF %} alt="{nested_categories_list.NAME}" /></a></div> <a href="{nested_categories_list.URL}" title="Перейти к категории «{nested_categories_list.NAME}»">{nested_categories_list.NAME}</a> </li> {% ENDFOR %} </ul> <br clear="all"/> <!-- Если в категории нет ни товаров, ни категорий то сообщим пользователю что ничего нет --> {% ELSE %} <h3>Нет товаров в категории</h3> {% ENDIF %} <!-- Если производили фильтрацию товаров в категории --> {% ELSE %} <h3>Нет товаров для выбранных условий</h3> {% ENDIF %} {% ELSE %} <!-- Список товаров. Таблица --> <table> {% FOR goods %} <td class="goodsListItem"> <div class="goodsListItemBlock withBorder cornerAll"> <table class="goodsListItemImage"> <tr> <td> <a href="{goods.URL}"><img src="{% IF goods.IMAGE_EMPTY %}{ASSETS_IMAGES_PATH}no-photo-other.png{% ELSE %}{goods.IMAGE_OTHER}{% ENDIF %}" alt="{goods.NAME}" /></a> </td> </tr> </table> <h3 class="goodsListItemName"><a href="{goods.URL}">{goods.NAME}</a></h3> <div> {goods.DESCRIPTION_SHORT} </div> <div class="goodsListItemPriceNew"> <a href="{goods.URL_MIN_PRICE_NOW}">{goods.MIN_PRICE_NOW | money_format}</a> </div> <div class="goodsListItemPriceOld"> {% IF goods.MIN_PRICE_OLD>goods.MIN_PRICE_NOW %} <a href="{goods.URL_MIN_PRICE_OLD}" class="lineThrough">{goods.MIN_PRICE_OLD | money_format}</a> {% ENDIF %} </div> </div> </td> {goods.index | is_divided("2","</tr><tr>","")} {% ENDFOR goods %} </table> <!-- /Список товаров. Таблица --> {% ENDIF %} <!-- end Goods list --> <!-- Pages --> {% IF show_pages %} <div class="pagination"> <span class="pp-title">Страницы:</span> {% FOR goods_pages %} {% IF goods_pages.CURRENT %} <span class="pp-page pp-current">{goods_pages.PAGE}</span> {% ELSE %} <a class="pp-page" href="{GOODS_PAGINATE_URL}&page={goods_pages.PAGE}">{goods_pages.PAGE}</a> {% ENDIF %} {% ENDFOR %} </div> {% ENDIF %} <!-- end Pages --> <!-- Описание категории --> {% IF CATEGORY_DESCRIPTION %} <div> {CATEGORY_DESCRIPTION} </div> {% ENDIF %} <!-- Полное SEO описание категории --> {% IF CATEGORY_SEO_DESCRIPTION_LARGE %} <div> {CATEGORY_SEO_DESCRIPTION_LARGE} </div> {% ENDIF %} </div>
#13
Отправлено 28 Январь 2011 - 13:04
lubovr (28 Январь 2011 - 08:06) писал:
Мы пробовали уменьшить размеры изображений до 170 пикселей и описательной части до 180 т.к размер блока с товарами - 700 пикселей, если используется 2 ряда - то выходит на одну ячейку с товаром - 350 пикслей. Хорошего результата из этого эксперимента не вышло... По крайней мере я сделать подобное отображение товаров без потери качества выдачи не смогу. Можно к ячейкам товаров из вышеуказанных примеров, в предыдущем ответе, просто добавить кнопки "Подробнее" и "Купить" в принципе это делается не сложно, если надо могу написать пример такого кода, где добавлены:
<a class="readmore" href="{CART_ADD_GOODS_MODIFICATION_URL | url_amp}?hash={HASH | url_amp}&form%5Bgoods_from%5D={goods.GOODS_FROM}&form%5Bgoods_mod_id%5D={goods.MIN_PRICE_NOW_ID}" title="Добавить в корзину">В корзину</a><br /> <a class="readmore" title="{goods.NAME}" href="{goods.URL}">Подробнее</a>
#14
Отправлено 28 Январь 2011 - 13:58
support (28 Январь 2011 - 13:04) писал:
Мы пробовали уменьшить размеры изображений до 170 пикселей и описательной части до 180 т.к размер блока с товарами - 700 пикселей, если используется 2 ряда - то выходит на одну ячейку с товаром - 350 пикслей. Хорошего результата из этого эксперимента не вышло... По крайней мере я сделать подобное отображение товаров без потери качества выдачи не смогу. Можно к ячейкам товаров из вышеуказанных примеров, в предыдущем ответе, просто добавить кнопки "Подробнее" и "Купить" в принципе это делается не сложно, если надо могу написать пример такого кода, где добавлены:
<a class="readmore" href="{CART_ADD_GOODS_MODIFICATION_URL | url_amp}?hash={HASH | url_amp}&form%5Bgoods_from%5D={goods.GOODS_FROM}&form%5Bgoods_mod_id%5D={goods.MIN_PRICE_NOW_ID}" title="Добавить в корзину">В корзину</a><br /> <a class="readmore" title="{goods.NAME}" href="{goods.URL}">Подробнее</a>
#15
Отправлено 29 Январь 2011 - 15:22
Результирующий код шаблона "Товары", в котором:
1) В каталоге товаров отображается список корневый категорий
2) Есть переключатель с режима таблицы на режим отображения списком
3) В таблице отображается по 2 товара, есть короткое описание, расширены ячейки
4) В списке товаров в виде таблицы добавлены кнопки купить и подробнее
<div class="page-headline"> <h1>{CATEGORY_NAME}</h1> </div> <div class="pad-box"> <!-- Строка пути --> <div id="site-path"> <p> <a href="http://{NET_DOMAIN}/">Главная</a> <!-- Если отображаем полный каталог товаров, без указания категории --> {% IF IS_FULL_CATALOG %} » <span class="current">Каталог товаров</span> <!-- Если отображаем товары в категории --> {% ELSE %} » <a href="{CATALOG_URL}" >Каталог товаров</a> {% FOR upper_navigation %} {% IF upper_navigation.CURRENT %} » <span class="current">{upper_navigation.NAME}</span>{% ELSEIF upper_navigation.CURRENT_PARENT %} » <a href="{upper_navigation.URL}" >{upper_navigation.NAME}</a>{% ENDIF %} {% ENDFOR %} {% ENDIF %} </p> </div> <!-- end Строка пути --> {% IF IS_FULL_CATALOG %} <!-- Блок навигации по категориям, вложенным в текущую категорию --> <ul class="content_catalog_nested_categories"> {% FOR nested_categories_list %} <li> <div class="imagem"><a href="{nested_categories_list.URL}" title="Перейти к категории «{nested_categories_list.NAME}»"><img {% IF nested_categories_list.IMAGE_EMPTY %}src="{ASSETS_IMAGES_PATH}no-photo-small.png" width="130"{% ELSE %}src="{nested_categories_list.IMAGE_MEDIUM}"{% ENDIF %} alt="{nested_categories_list.NAME}" /></a></div> <a href="{nested_categories_list.URL}" title="Перейти к категории «{nested_categories_list.NAME}»">{nested_categories_list.NAME}</a> </li> {% ENDFOR %} </ul> <br clear="all"/> {% ELSE %} <!-- Короткое SEO описание категории --> {% IF CATEGORY_SEO_DESCRIPTION_SHORT %} <div style="padding-bottom:1em;">{CATEGORY_SEO_DESCRIPTION_SHORT}</div> {% ENDIF %} <!-- Фильтры показываются только если есть товары в категории --> {% IFNOT goods_empty %} <!-- Блок выбора параметра по которому производится сортировка списка товаров и возможность изменения лимитов выдачи --> <form action=""> <table class="goodsListingTopNavigation"> <tr> <td> <!-- Список фильтров, которые сейчас действуют на результаты поиска --> {% FOR goods_filters %} <input type="hidden" name="{goods_filters.NAME}" value="{goods_filters.VALUE}" /> {% ENDFOR %} <!-- Поле выбора сортировки --> {% IF goods_show_order_fields %} Сортировать по: <select name="goods_search_field_id" onchange="this.form.submit();"> {% FOR goods_order_fields %} <option value="{goods_order_fields.ID}" {% IF goods_order_fields.SELECTED %}selected="selected"{% ENDIF %}>{goods_order_fields.NAME}</option> {% ENDFOR %} </select> {% ENDIF %} </td> <td class="alignCenter viewSelector"> <!-- Переключатель режима просмотра --> {% IF GOODS_VIEW_TYPE=2 %} <strong title="Список товаров сейчас отображается в виде таблицы, по 2 товара на строку">Таблица</strong> <a href="?goods_view_type=1" title="Отображать список товаров в виде списка">Список</a> {% ELSE %} <a href="?goods_view_type=2" title="Отображать список товаров в виде таблицы с 2мя товарами на одну строку">Таблица</a> <strong title="Список товаров сейчас отображается в виде списка, где один товар занимает одну строку">Список</strong> {% ENDIF %} <!-- /Переключатель режима просмотра --> </td> <td class="alignRight"> <!-- Поле выбора лимитов --> {% IF goods_show_per_page %} Показывать по: <select name="per_page" onchange="this.form.submit();"> {% FOR goods_per_page_list %} <option value="{goods_per_page_list.LIMIT}" {% IF goods_per_page_list.SELECTED %}selected="selected"{% ENDIF %}>{goods_per_page_list.LIMIT}</option> {% ENDFOR %} </select> {% ENDIF %} </td> </tr> </table> </form> <!-- END Блок выбора параметра по которому производится сортировка списка товаров --> {% ENDIF %} <!-- END Фильтры показываются только если есть товары в категории --> <!-- Goods list --> {% IF goods_empty %} <!-- Если не применено ни одного фильтра, значит в категории нет товаров --> {% IF goods_filters_empty %} <!-- Если в категории нет товаров, но есть категории, то отобразим их --> {%IFNOT nested_categories_list_empty %} <!-- Блок навигации по категориям, вложенным в текущую категорию --> <ul class="content_catalog_nested_categories"> {% FOR nested_categories_list %} <li> <div class="imagem"><a href="{nested_categories_list.URL}" title="Перейти к категории «{nested_categories_list.NAME}»"><img {% IF nested_categories_list.IMAGE_EMPTY %}src="{ASSETS_IMAGES_PATH}no-photo-small.png" width="130"{% ELSE %}src="{nested_categories_list.IMAGE_MEDIUM}"{% ENDIF %} alt="{nested_categories_list.NAME}" /></a></div> <a href="{nested_categories_list.URL}" title="Перейти к категории «{nested_categories_list.NAME}»">{nested_categories_list.NAME}</a> </li> {% ENDFOR %} </ul> <br clear="all"/> <!-- Если в категории нет ни товаров, ни категорий то сообщим пользователю что ничего нет --> {% ELSE %} <h3>Нет товаров в категории</h3> {% ENDIF %} <!-- Если производили фильтрацию товаров в категории --> {% ELSE %} <h3>Нет товаров для выбранных условий</h3> {% ENDIF %} {% ELSE %} {% IF GOODS_VIEW_TYPE=1 %} <!-- Список товаров. Список --> {% FOR goods %} <div class="listing"> <div class="imagem"><a href="{goods.URL}"><img {% IF goods.IMAGE_EMPTY %}src="{ASSETS_IMAGES_PATH}no-photo-medium.png" width="220"{% ELSE %}src="{goods.IMAGE_SMALL}"{% ENDIF %} alt="{goods.NAME}" /></a></div> <div class="contm"> <h3><a href="{goods.URL}">{goods.NAME}</a></h3> <p> {goods.DESCRIPTION_SHORT} </p> <p> Цена сейчас: <a href="{goods.URL_MIN_PRICE_NOW}">{goods.MIN_PRICE_NOW | money_format}</a><br /> {% IF goods.MIN_PRICE_OLD>goods.MIN_PRICE_NOW %} Старая цена: <a href="{goods.URL_MIN_PRICE_OLD}" class="lineThrough">{goods.MIN_PRICE_OLD | money_format}</a> {% ENDIF %} </p> <p> <a class="readmore" title="{goods.NAME}" href="{goods.URL}">Подробнее</a> </p> </div> <div class="clr"></div> </div> {% ENDFOR goods %} <!-- /Список товаров. Список --> {% ELSE %} <!-- Список товаров. Таблица --> <table> {% FOR goods %} <td class="goodsListItem"> <div class="goodsListItemBlock withBorder cornerAll"> <table class="goodsListItemImage"> <tr> <td> <a href="{goods.URL}"><img src="{% IF goods.IMAGE_EMPTY %}{ASSETS_IMAGES_PATH}no-photo-other.png{% ELSE %}{goods.IMAGE_OTHER}{% ENDIF %}" alt="{goods.NAME}" /></a> </td> </tr> </table> <h3 class="goodsListItemName"><a href="{goods.URL}">{goods.NAME}</a></h3> <div> {goods.DESCRIPTION_SHORT} </div> <div class="goodsListItemPriceNew"> <a href="{goods.URL_MIN_PRICE_NOW}">{goods.MIN_PRICE_NOW | money_format}</a> </div> <div class="goodsListItemPriceOld"> {% IF goods.MIN_PRICE_OLD>goods.MIN_PRICE_NOW %} <a href="{goods.URL_MIN_PRICE_OLD}" class="lineThrough">{goods.MIN_PRICE_OLD | money_format}</a> {% ENDIF %} </div> <table class="goodsListItemButtonsTable"> <tr> <td> <a class="readmore" href="{CART_ADD_GOODS_MODIFICATION_URL | url_amp}?hash={HASH | url_amp}&form%5Bgoods_from%5D={goods.GOODS_FROM}&form%5Bgoods_mod_id%5D={goods.MIN_PRICE_NOW_ID}" title="Добавить в корзину">В корзину</a> </td> <td> <a class="readmore" title="{goods.NAME}" href="{goods.URL}">Подробнее</a> </td> </tr> </table> </div> </td> {goods.index | is_divided("2","</tr><tr>","")} {% ENDFOR goods %} </table> <!-- /Список товаров. Таблица --> {% ENDIF %} {% ENDIF %} <!-- end Goods list --> <!-- Pages --> {% IF show_pages %} <div class="pagination"> <span class="pp-title">Страницы:</span> {% FOR goods_pages %} {% IF goods_pages.CURRENT %} <span class="pp-page pp-current">{goods_pages.PAGE}</span> {% ELSE %} <a class="pp-page" href="{GOODS_PAGINATE_URL}&page={goods_pages.PAGE}">{goods_pages.PAGE}</a> {% ENDIF %} {% ENDFOR %} </div> {% ENDIF %} <!-- end Pages --> <!-- Описание категории --> {% IF CATEGORY_DESCRIPTION %} <div> {CATEGORY_DESCRIPTION} </div> {% ENDIF %} <!-- Полное SEO описание категории --> {% IF CATEGORY_SEO_DESCRIPTION_LARGE %} <div> {CATEGORY_SEO_DESCRIPTION_LARGE} </div> {% ENDIF %} {% ENDIF %} </div>
Стили в файле main.csstemplate, в самом конце:
/* Список товаров в виде таблицы. Ячейки с товаром */ .goodsListItem {text-align:center;vertical-align:top;width:195px;overflow:hidden;padding:0px;} /* Размер в 200 пикселей сделан, чтобы и 2 и 5 товаров нормально смотрелись и была возможность увеличить разрешение до 1220 пикселей*/ .goodsListItemBlock {position:relative;height:330px;width:330px;margin:5px;overflow:hidden;} .goodsListItemBlock a {} .goodsListItemImage {height:185px;width:100%;margin-top:1em;border-collapse: collapse;border-spacing: 0;} .goodsListItemImage td {text-align:center;vertical-align:middle;} .goodsListItemName {line-height:1.2em;padding:0px 2px 0px 2px;margin:0px;max-height:3.6em;overflow:hidden;} .goodsListItemName a {font-size:15px;line-height:1.2em;padding:0px;margin:0px;} .goodsListItemButtonsTable {position:absolute;bottom:10px;left:5px;} .goodsListItemButtonsTable td {padding:5px;}
Для отображения списка товаров в другом виде, где имеются отличительный свойства:
1) Товары отображаются в виде таблицы, нет переключателя на список товаров
2) В таблице отображается по 2 товара, есть короткое описание, расширены ячейки:
3) В каталоге товаров отображается список корневый категорий
4) В списке товаров в виде таблицы добавлены кнопки купить и подробнее
используем следующий код шаблона:
<div class="page-headline"> <h1>{CATEGORY_NAME}</h1> </div> <div class="pad-box"> <!-- Строка пути --> <div id="site-path"> <p> <a href="http://{NET_DOMAIN}/">Главная</a> <!-- Если отображаем полный каталог товаров, без указания категории --> {% IF IS_FULL_CATALOG %} » <span class="current">Каталог товаров</span> <!-- Если отображаем товары в категории --> {% ELSE %} » <a href="{CATALOG_URL}" >Каталог товаров</a> {% FOR upper_navigation %} {% IF upper_navigation.CURRENT %} » <span class="current">{upper_navigation.NAME}</span>{% ELSEIF upper_navigation.CURRENT_PARENT %} » <a href="{upper_navigation.URL}" >{upper_navigation.NAME}</a>{% ENDIF %} {% ENDFOR %} {% ENDIF %} </p> </div> <!-- end Строка пути --> {% IF IS_FULL_CATALOG %} <!-- Блок навигации по категориям, вложенным в текущую категорию --> <ul class="content_catalog_nested_categories"> {% FOR nested_categories_list %} <li> <div class="imagem"><a href="{nested_categories_list.URL}" title="Перейти к категории «{nested_categories_list.NAME}»"><img {% IF nested_categories_list.IMAGE_EMPTY %}src="{ASSETS_IMAGES_PATH}no-photo-small.png" width="130"{% ELSE %}src="{nested_categories_list.IMAGE_MEDIUM}"{% ENDIF %} alt="{nested_categories_list.NAME}" /></a></div> <a href="{nested_categories_list.URL}" title="Перейти к категории «{nested_categories_list.NAME}»">{nested_categories_list.NAME}</a> </li> {% ENDFOR %} </ul> <br clear="all"/> {% ELSE %} <!-- Короткое SEO описание категории --> {% IF CATEGORY_SEO_DESCRIPTION_SHORT %} <div style="padding-bottom:1em;">{CATEGORY_SEO_DESCRIPTION_SHORT}</div> {% ENDIF %} <!-- Фильтры показываются только если есть товары в категории --> {% IFNOT goods_empty %} <!-- Блок выбора параметра по которому производится сортировка списка товаров и возможность изменения лимитов выдачи --> <form action=""> <table class="goodsListingTopNavigation"> <tr> <td> <!-- Список фильтров, которые сейчас действуют на результаты поиска --> {% FOR goods_filters %} <input type="hidden" name="{goods_filters.NAME}" value="{goods_filters.VALUE}" /> {% ENDFOR %} <!-- Поле выбора сортировки --> {% IF goods_show_order_fields %} Сортировать по: <select name="goods_search_field_id" onchange="this.form.submit();"> {% FOR goods_order_fields %} <option value="{goods_order_fields.ID}" {% IF goods_order_fields.SELECTED %}selected="selected"{% ENDIF %}>{goods_order_fields.NAME}</option> {% ENDFOR %} </select> {% ENDIF %} </td> <td class="alignRight"> <!-- Поле выбора лимитов --> {% IF goods_show_per_page %} Показывать по: <select name="per_page" onchange="this.form.submit();"> {% FOR goods_per_page_list %} <option value="{goods_per_page_list.LIMIT}" {% IF goods_per_page_list.SELECTED %}selected="selected"{% ENDIF %}>{goods_per_page_list.LIMIT}</option> {% ENDFOR %} </select> {% ENDIF %} </td> </tr> </table> </form> <!-- END Блок выбора параметра по которому производится сортировка списка товаров --> {% ENDIF %} <!-- END Фильтры показываются только если есть товары в категории --> <!-- Goods list --> {% IF goods_empty %} <!-- Если не применено ни одного фильтра, значит в категории нет товаров --> {% IF goods_filters_empty %} <!-- Если в категории нет товаров, но есть категории, то отобразим их --> {%IFNOT nested_categories_list_empty %} <!-- Блок навигации по категориям, вложенным в текущую категорию --> <ul class="content_catalog_nested_categories"> {% FOR nested_categories_list %} <li> <div class="imagem"><a href="{nested_categories_list.URL}" title="Перейти к категории «{nested_categories_list.NAME}»"><img {% IF nested_categories_list.IMAGE_EMPTY %}src="{ASSETS_IMAGES_PATH}no-photo-small.png" width="130"{% ELSE %}src="{nested_categories_list.IMAGE_MEDIUM}"{% ENDIF %} alt="{nested_categories_list.NAME}" /></a></div> <a href="{nested_categories_list.URL}" title="Перейти к категории «{nested_categories_list.NAME}»">{nested_categories_list.NAME}</a> </li> {% ENDFOR %} </ul> <br clear="all"/> <!-- Если в категории нет ни товаров, ни категорий то сообщим пользователю что ничего нет --> {% ELSE %} <h3>Нет товаров в категории</h3> {% ENDIF %} <!-- Если производили фильтрацию товаров в категории --> {% ELSE %} <h3>Нет товаров для выбранных условий</h3> {% ENDIF %} {% ELSE %} <!-- Список товаров. Таблица --> <table> {% FOR goods %} <td class="goodsListItem"> <div class="goodsListItemBlock withBorder cornerAll"> <table class="goodsListItemImage"> <tr> <td> <a href="{goods.URL}"><img src="{% IF goods.IMAGE_EMPTY %}{ASSETS_IMAGES_PATH}no-photo-other.png{% ELSE %}{goods.IMAGE_OTHER}{% ENDIF %}" alt="{goods.NAME}" /></a> </td> </tr> </table> <h3 class="goodsListItemName"><a href="{goods.URL}">{goods.NAME}</a></h3> <div> {goods.DESCRIPTION_SHORT} </div> <div class="goodsListItemPriceNew"> <a href="{goods.URL_MIN_PRICE_NOW}">{goods.MIN_PRICE_NOW | money_format}</a> </div> <div class="goodsListItemPriceOld"> {% IF goods.MIN_PRICE_OLD>goods.MIN_PRICE_NOW %} <a href="{goods.URL_MIN_PRICE_OLD}" class="lineThrough">{goods.MIN_PRICE_OLD | money_format}</a> {% ENDIF %} </div> <table class="goodsListItemButtonsTable"> <tr> <td> <a class="readmore" href="{CART_ADD_GOODS_MODIFICATION_URL | url_amp}?hash={HASH | url_amp}&form%5Bgoods_from%5D={goods.GOODS_FROM}&form%5Bgoods_mod_id%5D={goods.MIN_PRICE_NOW_ID}" title="Добавить в корзину">В корзину</a> </td> <td> <a class="readmore" title="{goods.NAME}" href="{goods.URL}">Подробнее</a> </td> </tr> </table> </div> </td> {goods.index | is_divided("2","</tr><tr>","")} {% ENDFOR goods %} </table> <!-- /Список товаров. Таблица --> {% ENDIF %} <!-- end Goods list --> <!-- Pages --> {% IF show_pages %} <div class="pagination"> <span class="pp-title">Страницы:</span> {% FOR goods_pages %} {% IF goods_pages.CURRENT %} <span class="pp-page pp-current">{goods_pages.PAGE}</span> {% ELSE %} <a class="pp-page" href="{GOODS_PAGINATE_URL}&page={goods_pages.PAGE}">{goods_pages.PAGE}</a> {% ENDIF %} {% ENDFOR %} </div> {% ENDIF %} <!-- end Pages --> <!-- Описание категории --> {% IF CATEGORY_DESCRIPTION %} <div> {CATEGORY_DESCRIPTION} </div> {% ENDIF %} <!-- Полное SEO описание категории --> {% IF CATEGORY_SEO_DESCRIPTION_LARGE %} <div> {CATEGORY_SEO_DESCRIPTION_LARGE} </div> {% ENDIF %} {% ENDIF %} </div>
и следующий набор стилей:
/* Список товаров в виде таблицы. Ячейки с товаром */ .goodsListItem {text-align:center;vertical-align:top;width:195px;overflow:hidden;padding:0px;} /* Размер в 200 пикселей сделан, чтобы и 2 и 5 товаров нормально смотрелись и была возможность увеличить разрешение до 1220 пикселей*/ .goodsListItemBlock {position:relative;height:330px;width:330px;margin:5px;overflow:hidden;} .goodsListItemBlock a {} .goodsListItemImage {height:185px;width:100%;margin-top:1em;border-collapse: collapse;border-spacing: 0;} .goodsListItemImage td {text-align:center;vertical-align:middle;} .goodsListItemName {line-height:1.2em;padding:0px 2px 0px 2px;margin:0px;max-height:3.6em;overflow:hidden;} .goodsListItemName a {font-size:15px;line-height:1.2em;padding:0px;margin:0px;} .goodsListItemButtonsTable {position:absolute;bottom:10px;left:5px;} .goodsListItemButtonsTable td {padding:5px;}
Для изменения шаблона, чтобы список товаров отображался со свойствами:
1) В каталоге товаров отображаются только товары.
2) В списке товаров нет переключателя
3) В списке товаров товары идут в 2 ряда, в больших ячейках с описанием
4) В списке товаров в виде таблицы добавлены кнопки купить и подробнее
используем следующий код:
<div class="page-headline"> <h1>{CATEGORY_NAME}</h1> </div> <div class="pad-box"> <!-- Строка пути --> <div id="site-path"> <p> <a href="http://{NET_DOMAIN}/">Главная</a> <!-- Если отображаем полный каталог товаров, без указания категории --> {% IF IS_FULL_CATALOG %} » <span class="current">Каталог товаров</span> <!-- Если отображаем товары в категории --> {% ELSE %} » <a href="{CATALOG_URL}" >Каталог товаров</a> {% FOR upper_navigation %} {% IF upper_navigation.CURRENT %} » <span class="current">{upper_navigation.NAME}</span>{% ELSEIF upper_navigation.CURRENT_PARENT %} » <a href="{upper_navigation.URL}" >{upper_navigation.NAME}</a>{% ENDIF %} {% ENDFOR %} {% ENDIF %} </p> </div> <!-- end Строка пути --> <!-- Короткое SEO описание категории --> {% IF CATEGORY_SEO_DESCRIPTION_SHORT %} <div style="padding-bottom:1em;">{CATEGORY_SEO_DESCRIPTION_SHORT}</div> {% ENDIF %} <!-- Фильтры показываются только если есть товары в категории --> {% IFNOT goods_empty %} <!-- Блок выбора параметра по которому производится сортировка списка товаров и возможность изменения лимитов выдачи --> <form action=""> <table class="goodsListingTopNavigation"> <tr> <td> <!-- Список фильтров, которые сейчас действуют на результаты поиска --> {% FOR goods_filters %} <input type="hidden" name="{goods_filters.NAME}" value="{goods_filters.VALUE}" /> {% ENDFOR %} <!-- Поле выбора сортировки --> {% IF goods_show_order_fields %} Сортировать по: <select name="goods_search_field_id" onchange="this.form.submit();"> {% FOR goods_order_fields %} <option value="{goods_order_fields.ID}" {% IF goods_order_fields.SELECTED %}selected="selected"{% ENDIF %}>{goods_order_fields.NAME}</option> {% ENDFOR %} </select> {% ENDIF %} </td> <td class="alignRight"> <!-- Поле выбора лимитов --> {% IF goods_show_per_page %} Показывать по: <select name="per_page" onchange="this.form.submit();"> {% FOR goods_per_page_list %} <option value="{goods_per_page_list.LIMIT}" {% IF goods_per_page_list.SELECTED %}selected="selected"{% ENDIF %}>{goods_per_page_list.LIMIT}</option> {% ENDFOR %} </select> {% ENDIF %} </td> </tr> </table> </form> <!-- END Блок выбора параметра по которому производится сортировка списка товаров --> {% ENDIF %} <!-- END Фильтры показываются только если есть товары в категории --> <!-- Goods list --> {% IF goods_empty %} <!-- Если не применено ни одного фильтра, значит в категории нет товаров --> {% IF goods_filters_empty %} <!-- Если в категории нет товаров, но есть категории, то отобразим их --> {%IFNOT nested_categories_list_empty %} <!-- Блок навигации по категориям, вложенным в текущую категорию --> <ul class="content_catalog_nested_categories"> {% FOR nested_categories_list %} <li> <div class="imagem"><a href="{nested_categories_list.URL}" title="Перейти к категории «{nested_categories_list.NAME}»"><img {% IF nested_categories_list.IMAGE_EMPTY %}src="{ASSETS_IMAGES_PATH}no-photo-small.png" width="130"{% ELSE %}src="{nested_categories_list.IMAGE_MEDIUM}"{% ENDIF %} alt="{nested_categories_list.NAME}" /></a></div> <a href="{nested_categories_list.URL}" title="Перейти к категории «{nested_categories_list.NAME}»">{nested_categories_list.NAME}</a> </li> {% ENDFOR %} </ul> <br clear="all"/> <!-- Если в категории нет ни товаров, ни категорий то сообщим пользователю что ничего нет --> {% ELSE %} <h3>Нет товаров в категории</h3> {% ENDIF %} <!-- Если производили фильтрацию товаров в категории --> {% ELSE %} <h3>Нет товаров для выбранных условий</h3> {% ENDIF %} {% ELSE %} <!-- Список товаров. Таблица --> <table> {% FOR goods %} <td class="goodsListItem"> <div class="goodsListItemBlock withBorder cornerAll"> <table class="goodsListItemImage"> <tr> <td> <a href="{goods.URL}"><img src="{% IF goods.IMAGE_EMPTY %}{ASSETS_IMAGES_PATH}no-photo-other.png{% ELSE %}{goods.IMAGE_OTHER}{% ENDIF %}" alt="{goods.NAME}" /></a> </td> </tr> </table> <h3 class="goodsListItemName"><a href="{goods.URL}">{goods.NAME}</a></h3> <div> {goods.DESCRIPTION_SHORT} </div> <div class="goodsListItemPriceNew"> <a href="{goods.URL_MIN_PRICE_NOW}">{goods.MIN_PRICE_NOW | money_format}</a> </div> <div class="goodsListItemPriceOld"> {% IF goods.MIN_PRICE_OLD>goods.MIN_PRICE_NOW %} <a href="{goods.URL_MIN_PRICE_OLD}" class="lineThrough">{goods.MIN_PRICE_OLD | money_format}</a> {% ENDIF %} </div> <table class="goodsListItemButtonsTable"> <tr> <td> <a class="readmore" href="{CART_ADD_GOODS_MODIFICATION_URL | url_amp}?hash={HASH | url_amp}&form%5Bgoods_from%5D={goods.GOODS_FROM}&form%5Bgoods_mod_id%5D={goods.MIN_PRICE_NOW_ID}" title="Добавить в корзину">В корзину</a> </td> <td> <a class="readmore" title="{goods.NAME}" href="{goods.URL}">Подробнее</a> </td> </tr> </table> </div> </td> {goods.index | is_divided("2","</tr><tr>","")} {% ENDFOR goods %} </table> <!-- /Список товаров. Таблица --> {% ENDIF %} <!-- end Goods list --> <!-- Pages --> {% IF show_pages %} <div class="pagination"> <span class="pp-title">Страницы:</span> {% FOR goods_pages %} {% IF goods_pages.CURRENT %} <span class="pp-page pp-current">{goods_pages.PAGE}</span> {% ELSE %} <a class="pp-page" href="{GOODS_PAGINATE_URL}&page={goods_pages.PAGE}">{goods_pages.PAGE}</a> {% ENDIF %} {% ENDFOR %} </div> {% ENDIF %} <!-- end Pages --> <!-- Описание категории --> {% IF CATEGORY_DESCRIPTION %} <div> {CATEGORY_DESCRIPTION} </div> {% ENDIF %} <!-- Полное SEO описание категории --> {% IF CATEGORY_SEO_DESCRIPTION_LARGE %} <div> {CATEGORY_SEO_DESCRIPTION_LARGE} </div> {% ENDIF %} </div>
и следующий набор стилей:
/* Список товаров в виде таблицы. Ячейки с товаром */ .goodsListItem {text-align:center;vertical-align:top;width:195px;overflow:hidden;padding:0px;} /* Размер в 200 пикселей сделан, чтобы и 2 и 5 товаров нормально смотрелись и была возможность увеличить разрешение до 1220 пикселей*/ .goodsListItemBlock {position:relative;height:330px;width:330px;margin:5px;overflow:hidden;} .goodsListItemBlock a {} .goodsListItemImage {height:185px;width:100%;margin-top:1em;border-collapse: collapse;border-spacing: 0;} .goodsListItemImage td {text-align:center;vertical-align:middle;} .goodsListItemName {line-height:1.2em;padding:0px 2px 0px 2px;margin:0px;max-height:3.6em;overflow:hidden;} .goodsListItemName a {font-size:15px;line-height:1.2em;padding:0px;margin:0px;} .goodsListItemButtonsTable {position:absolute;bottom:10px;left:5px;} .goodsListItemButtonsTable td {padding:5px;}
#16
Отправлено 30 Январь 2011 - 14:13
1)Как изменить размер шрифта в стоимост товара?
2)Каксместить кнопку подробнее в ценрт?http://evrodetki.sto...ods_view_type=2
#17
Отправлено 30 Январь 2011 - 21:02
lubovr (30 Январь 2011 - 14:13) писал:
.goodsListItemPriceNew a {font-size:1.5em;}
lubovr (30 Январь 2011 - 14:13) писал:
margin: auto;
В коде main.csstemplate это выглядеть будет так:
.goodsListItemButtonsTable {margin: auto;}
#19
Отправлено 04 Апрель 2011 - 22:15
#20
Отправлено 05 Апрель 2011 - 09:05
LeNiN (04 Апрель 2011 - 22:15) писал:
- index_page_new_goods
- index_page_favorites_goods
- index_page_goods
Соответственно:
- Новинки
- Хиты продаж
- Товары на главной
Для использования кода из каталога, например, если нужно чтобы новинки шли по несколько в ряд, как и в каталоге товаров, то достаточно будет просто заменить переменную "goods" на "index_page_new_goods" в которой хранятся новинки. В случае с хитами продаж аналогично "goods" на "index_page_favorites_goods"
Количество пользователей, читающих эту тему: 0
0 пользователей, 0 гостей, 0 анонимных