Отображение Товаров
#1
Отправлено 16 Февраль 2016 - 19:20
#2
Отправлено 16 Февраль 2016 - 20:26
_max_ (16 Февраль 2016 - 19:20) писал:
1) В каталоге, естественно, показываются все товары, входящую в категорию. Можно изменить количество выводимых товаров на главной странице, остальные будут скрыты и открываться при клике на кнопку "Показать все". Но у Вас на главной товаров меньше 40.
2) Здравствуйте. Чтобы изменить порядок вывода товаров на странице, зайдите в радел НАСТРОЙКИ --> Основные --> там найдите пункт "Поле сортировки товаров по умолчанию". И измените на желаемое отображение. Не забудьте сохранить изменения.
#3
Отправлено 16 Февраль 2016 - 21:36
#5
Отправлено 01 Март 2016 - 14:42
_max_ (01 Март 2016 - 14:29) писал:
Здравствуйте.
Попробуйте, пожалуйста, сделать следующее:
В шаблоне main.css найдите данный код:
.products-grid .item .item-inner { position: relative; overflow: hidden; border: 1px solid #e5e5e5; background: #f8f8f8; -webkit-transition: all 700ms ease; -moz-transition: all 700ms ease; -ms-transition: all 700ms ease; -o-transition: all 700ms ease; transition: all 700ms ease; }
И замените его, например, вот этим вот кодом:
.products-grid .item .item-inner { position: relative; overflow: hidden; border: 1px solid #09AFE7; background: #f8f8f8; -webkit-transition: all 700ms ease; -moz-transition: all 700ms ease; -ms-transition: all 700ms ease; -o-transition: all 700ms ease; transition: all 700ms ease; }
Где в строке: border: 1px solid #e5e5e5; вам необходимо изменить цвет рамки на любой иной (например как здесь: примера border: 1px solid #09AFE7;).
#6
Отправлено 01 Март 2016 - 19:28
#8
Отправлено 20 Май 2016 - 17:32
#9
Отправлено 23 Май 2016 - 18:06
Egik (20 Май 2016 - 00:31) писал:
Помогите в каталоге товаров доделать исправления.
Здравствуйте, в шаблоне Товары найдите код:
<!-- Блок навигации по категориям, вложенным в текущую категорию --> {% IF goods_empty=0 %} <div class="categories row"> {% FOR nested_categories_list %} <div class="item col-sm-4 col-sms-6 col-smb-12"> <a href="{nested_categories_list.URL}" title="Перейти к категории «{nested_categories_list.NAME}»" class="image goods-cat-image-medium"> <img class="goods-cat-image-medium" src="{% IF nested_categories_list.IMAGE_EMPTY %}{ASSETS_IMAGES_PATH}no-photo-small.png?design=sport{% ELSE %}{nested_categories_list.IMAGE_MEDIUM}{% ENDIF %}"> </a> <a href="{nested_categories_list.URL}" title="Перейти к категории «{nested_categories_list.NAME}»" class="title">{nested_categories_list.NAME}</a> </div> {% ENDFOR %} </div> {% ENDIF %}
и замените на код:
<!-- Блок навигации по категориям, вложенным в текущую категорию --> {% IF goods_empty=0 %} <div class="categories row"> {% FOR nested_categories_list %} <div class="item col-sm-4 col-sms-6 col-smb-12"> <a href="{nested_categories_list.URL}" title="Перейти к категории «{nested_categories_list.NAME}»" class="title">{nested_categories_list.NAME}</a> </div> {% ENDFOR %} </div> {% ENDIF %}
#11
Отправлено 25 Май 2016 - 07:03
<!-- Блок навигации по категориям, вложенным в текущую категорию --> {% IF goods_empty=0 %} <div class="categories row"> {% FOR nested_categories_list %} <div class="item col-sm-4 col-sms-6 col-smb-12"> <a href="{nested_categories_list.URL}" title="Перейти к категории «{nested_categories_list.NAME}»" class="title">{nested_categories_list.NAME}</a> </div> {% ENDFOR %} </div> {% ENDIF %}
#12
Отправлено 26 Август 2016 - 13:12
Помогите привести каталог товаров к такому виду.
Подробней на рисунке.
1) изменить размещение названия товара и цену
2) добавить кнопку купить
3) Добавить баннер в каталог товаров
4) Убрать возможность отображать списком
Отображаться должно при разрешениях от 1024 и больше.
Аккаунт SL-376370
#13
Отправлено 31 Август 2016 - 14:07
praim2 (26 Август 2016 - 13:12) писал:
Помогите привести каталог товаров к такому виду.
Подробней на рисунке.
1) изменить размещение названия товара и цену
2) добавить кнопку купить
3) Добавить баннер в каталог товаров
4) Убрать возможность отображать списком
Отображаться должно при разрешениях от 1024 и больше.
Аккаунт SL-376370
1,2. Найдите в шаблоне Товары код
<div class="product-name"><a href="{goods.URL_MIN_PRICE_NOW | url_amp}" title="{goods.NAME}" itemprop="url">{goods.NAME}</a></div> <meta itemprop="name" content="{goods.NAME}"> <meta itemprop="description" content="{% IF goods.DESCRIPTION_SHORT %}{goods.DESCRIPTION_SHORT}{% ELSE %}Описание отсутствует{% ENDIF %}"> <div class="price-box" itemprop="offers" itemscope itemtype="http://schema.org/Offer"> <meta itemprop="priceCurrency" content="{CURRENCY_CHAR_CODE}"/> {% IF goods.MIN_PRICE_NOW_WITHOUT_DISCOUNT>goods.MIN_PRICE_NOW %} <p class="old-price"> <span class="price {CURRENCY_CHAR_CODE}">{goods.MIN_PRICE_NOW_WITHOUT_DISCOUNT | money_format}</span> </p> {% ELSEIF goods.MIN_PRICE_OLD>goods.MIN_PRICE_NOW %} <p class="old-price"> <span class="price {CURRENCY_CHAR_CODE}">{goods.MIN_PRICE_OLD | money_format}</span> </p> {% ENDIF %} <p class="special-price"> <span class="price {CURRENCY_CHAR_CODE}" itemprop="price" content="{goods.MIN_PRICE_NOW}">{goods.MIN_PRICE_NOW | money_format}</span> </p> </div> <div class="ratings"> <div class="rating-box"> {% IF goods.OPINION_RATING_VALUE %} <span itemprop="aggregateRating" itemscope itemtype="http://schema.org/AggregateRating"> <meta itemprop="worstRating" content = "1"> <meta itemprop="bestRating" content = "10"> <meta itemprop="ratingValue" content = "{goods.OPINION_RATING_VALUE}"> <meta itemprop="reviewCount" content = "{goods.OPINION_RATING_CNT_ALL}"> <div class="rating" style="width:{goods.OPINION_RATING_VALUE}0%" alt="{goods.OPINION_RATING_VALUE}" title="Рейтинг товара"></div> </span> {% ELSE %} <div class="rating" style="width:0%" alt="Рейтинг не определён" title="Рейтинг не определён"></div> {% ENDIF %} </div> </div> </div> <div class="item-img"> <div class="ico-product"> {% IF goods.IS_NEW %} <span class="ico-new">Новинка</span> {% ELSEIF goods.IS_TOP %} <span class="ico-best">Хит</span> {% ENDIF %} {% IF goods.MAX_DISCOUNT %} <span class="ico-sale">Скидка</span> {% ENDIF %} </div> <a href="{goods.URL_MIN_PRICE_NOW | url_amp}" title="{goods.NAME}" class="product-image"> <img src="{% IF goods.IMAGE_EMPTY %}{ASSETS_IMAGES_PATH}no-photo-small.png?design=sport{% ELSE %}{goods.IMAGE_MEDIUM}{% ENDIF %}" class="goods-image-small" alt="{goods.NAME}" title="{goods.NAME}" itemprop="image"> </a> </div> <div class="actions">замените на
<meta itemprop="name" content="{goods.NAME}"> <meta itemprop="description" content="{% IF goods.DESCRIPTION_SHORT %}{goods.DESCRIPTION_SHORT}{% ELSE %}Описание отсутствует{% ENDIF %}"> <div class="ratings"> <div class="rating-box"> {% IF goods.OPINION_RATING_VALUE %} <span itemprop="aggregateRating" itemscope itemtype="http://schema.org/AggregateRating"> <meta itemprop="worstRating" content = "1"> <meta itemprop="bestRating" content = "10"> <meta itemprop="ratingValue" content = "{goods.OPINION_RATING_VALUE}"> <meta itemprop="reviewCount" content = "{goods.OPINION_RATING_CNT_ALL}"> <div class="rating" style="width:{goods.OPINION_RATING_VALUE}0%" alt="{goods.OPINION_RATING_VALUE}" title="Рейтинг товара"></div> </span> {% ELSE %} <div class="rating" style="width:0%" alt="Рейтинг не определён" title="Рейтинг не определён"></div> {% ENDIF %} </div> </div> </div> <div class="item-img"> <div class="ico-product"> {% IF goods.IS_NEW %} <span class="ico-new">Новинка</span> {% ELSEIF goods.IS_TOP %} <span class="ico-best">Хит</span> {% ENDIF %} {% IF goods.MAX_DISCOUNT %} <span class="ico-sale">Скидка</span> {% ENDIF %} </div> <a href="{goods.URL_MIN_PRICE_NOW | url_amp}" title="{goods.NAME}" class="product-image"> <img src="{% IF goods.IMAGE_EMPTY %}{ASSETS_IMAGES_PATH}no-photo-small.png?design=sport{% ELSE %}{goods.IMAGE_MEDIUM}{% ENDIF %}" class="goods-image-small" alt="{goods.NAME}" title="{goods.NAME}" itemprop="image"> </a> </div> <div class="product-name"><a href="{goods.URL_MIN_PRICE_NOW | url_amp}" title="{goods.NAME}" itemprop="url">{goods.NAME}</a></div> <div class="name_price"> <div class="price-box" itemprop="offers" itemscope itemtype="http://schema.org/Offer"> <meta itemprop="priceCurrency" content="{CURRENCY_CHAR_CODE}"/> {% IF goods.MIN_PRICE_NOW_WITHOUT_DISCOUNT>goods.MIN_PRICE_NOW %} <p class="old-price"> <span class="price {CURRENCY_CHAR_CODE}">{goods.MIN_PRICE_NOW_WITHOUT_DISCOUNT | money_format}</span> </p> {% ELSEIF goods.MIN_PRICE_OLD>goods.MIN_PRICE_NOW %} <p class="old-price"> <span class="price {CURRENCY_CHAR_CODE}">{goods.MIN_PRICE_OLD | money_format}</span> </p> {% ENDIF %} <p class="special-price"> <span class="price {CURRENCY_CHAR_CODE}" itemprop="price" content="{goods.MIN_PRICE_NOW}">{goods.MIN_PRICE_NOW | money_format}</span> </p> </div> <div class="add_button_cart"> <a class="add-cart button" title="В корзину" {% IF SETTINGS_GOODS_DONT_PUT_TO_CART_MORE_THAN_AVAILABLE %}{% IF goods.MAX_REST_VALUE=0 %}style="display:none;"{% ENDIF %}{% ENDIF %}>Купить</a> </div> </div> <div class="actions" style="display:none">
далее найдите в файле main.css
.products-grid .item .item-inner:hover .product-name a {color: #fff;} .products-grid .item .item-inner:hover .product-name a:hover {color: #09afe7;} .products-grid .item .item-inner .price-box {float: left;width: 100%;}замените на
.products-grid .item .item-inner:hover .product-name a {color: #333744;} .products-grid .item .item-inner:hover .product-name a:hover {color: #09afe7;} .products-grid .item .item-inner .price-box {/*float: left;width: 100%;*/} .name_price { display: flex; align-items: center; flex-direction: inherit; justify-content: space-around; }
3. Найдите в шаблоне Товары код
<!-- Если нет товаров, выводим сообщение пользователю --> {% IF goods_empty %} {% IF goods_filters_empty %} <p class="attention">Нет товаров в выбранной категории</p> {% ELSE %} <p class="attention">Нет товаров для выбранных условий</p> {% ENDIF %} {% ENDIF %} <!-- /Если нет товаров, выводим сообщение пользователю -->после вставьте
<div><a href="ссылка на страницу для перехода"><img src="ссылка на изображение"/></a></div>
где замените текст на ссылку на страницу для перехода и на ссылку изображения баннера.
4. Найдите в шаблоне Товары код
<!-- Вид Таблица/Список --> <div class="view-mode"> {% IF GOODS_VIEW_TYPE=1 %} <span title="Таблица" class="fa fa-th-large"></span> <a href="?goods_view_type=2" title="Список" class="fa fa-th-list"></a> {% ELSE %} <a href="?goods_view_type=1" title="Таблица" class="fa fa-th-large"></a> <span title="Список" class="fa fa-th-list"></span> {% ENDIF %} </div> <!-- /END Вид Таблица/Список -->и удалите данный код
далее найдите
<div class="sort-by"> <label>Сортировать по:</label> <select name="goods_search_field_id" class="selectBox" title="Название сортировки" 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> </div>замените на
<div class="sort-by"> <div class="sort"> <div class="sort-by"> <label>Сортировать по:</label> <ul class="OrderFilterFormByURLs"> <!-- цене: Дорогие - Дешевые --> {% IF GOODS_SEARCH_FIELD_ID=1 %} <li class="selected-desc"><a href="?goods_search_field_id=2" title="Товары сейчас отсортированы по цене. Вверху дорогие внизу дешевые. Нажмите ещё раз, если хотите чтобы сортировка товаров производилась наоборот, сначала дешевые, затем дорогие">цене</a></li> <!-- цене: Дешевые - Дорогие --> {% ELSEIF GOODS_SEARCH_FIELD_ID=2 %} <li class="selected-asc"><a href="?goods_search_field_id=1" title="Товары сейчас отсортированы по цене. Вверху дешевые внизу дорогие. Нажмите ещё раз, если хотите чтобы сортировка товаров производилась наоборот, сначала дорогие, затем дешёвые">цене</a></li> <!-- Сортировка отключена --> {% ELSE %} <li><a href="?goods_search_field_id=2" title="Отсортировать товары по убыванию цены. Сверху дорогие, снизу дешевые">цене</a></li> {% ENDIF %} <!-- названию: А - я --> {% IF GOODS_SEARCH_FIELD_ID=3 %} <li class="selected-asc"><a href="?goods_search_field_id=4" title="Товары сейчас отсортированы по алфавиту. Сверху «а», снизу «Я». Нажмите ещё раз, если хотите чтобы сортировка товаров производилась наоборот, сначала «Я», затем «а»">названию</a></li> <!-- названию: я - А --> {% ELSEIF GOODS_SEARCH_FIELD_ID=4 %} <li class="selected-desc"><a href="?goods_search_field_id=3" title="Товары сейчас отсортированы по алфавиту. Сверху «Я», снизу «а». Нажмите ещё раз, если хотите чтобы сортировка товаров производилась наоборот, сначала «а», затем «Я»">названию</a></li> <!-- Сортировка отключена --> {% ELSE %} <li><a href="?goods_search_field_id=3" title="Отсортировать товары по алфавиту. Сверху «а», снизу «Я»">названию</a></li> {% ENDIF %} </ul> </div> </div> </div>в конец файла main.css добавьте
/* Тип сортировки товаров */ .OrderFilterFormByURLs {padding:0;margin:0 0 0 5px;float:left;} .OrderFilterFormByURLs li {float:left;padding:0 6px 0 0;margin:0;list-style-type:none;} .OrderFilterFormByURLs a {padding-right:12px;margin:0 2px;list-style-type:none;} .OrderFilterFormByURLs .selected-asc a {color:#ababab;background:url("{ASSETS_IMAGES_PATH}upArrow.png?design=spring") no-repeat right center;} .OrderFilterFormByURLs .selected-desc a {color:#ababab;background:url("{ASSETS_IMAGES_PATH}downArrow.png?design=spring") no-repeat right center;} .sort-by label { float: left; }
#14
Отправлено 01 Сентябрь 2016 - 13:05
#17
Отправлено 01 Сентябрь 2016 - 14:19
praim2 (01 Сентябрь 2016 - 14:03) писал:
подробней в скриншоте
1)Картинки не должны растягиваться
2) Название товара не должно перекрывать цену.
На данный момент установлено значение 520(данное значение при отображении на сайта делиться на 2, т.е. текущий максимальный размер изображений 260px, как раз в ширину блока с товаром).
2) В main.css найдите код
.products-grid .item .item-inner .product-name a {font-size: 16px;font-weight: 600;height: 3em;line-height: 22px;display: block;text-overflow: ellipsis;}и замените на
.products-grid .item .item-inner .product-name a {font-size: 16px;font-weight: 600;height: 4em;line-height: 22px;display: block;text-overflow: ellipsis;}
#18
Отправлено 05 Сентябрь 2016 - 13:30
#20
Отправлено 05 Сентябрь 2016 - 14:13
Количество пользователей, читающих эту тему: 0
0 пользователей, 0 гостей, 0 анонимных