0
Показ Товаров Плиткой И Полоской
Автор nsuhov1, 20 февр. 2016 23:12
Сообщений в теме: 12
#1
Отправлено 20 Февраль 2016 - 23:12
Как сделать в теме "Карамель" показ товаров (для удобства покупателя) плиткой с возможностью переключать на полоску?
#2
Отправлено 21 Февраль 2016 - 03:53
Укажите пожалуйста номер аккаунта в профиле форума.
В шаблоне Товары найдите:
замените на:
далее найдите:
замените на:
В main.css найдите:
замените на:
Далее найдите:
после него пропишите:
В шаблоне Товары найдите:
{% IF goods_show_order_fields %} <div class="choose choosecatalog"> <li> <span>Сортировать по: </span> <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> </li> {% ENDIF %}
замените на:
<div class="choose choosecatalog"> <li> <!-- Переключатель режима просмотра --> {% IF GOODS_VIEW_TYPE=1 %} <strong title="Список товаров сейчас отображается в виде таблицы, по 2 товара на строку">Таблица</strong> <a href="?goods_view_type=2" title="Отображать список товаров в виде списка">Список</a> {% ELSE %} <a href="?goods_view_type=1" title="Отображать список товаров в виде таблицы с 2мя товарами на одну строку">Таблица</a> <strong title="Список товаров сейчас отображается в виде списка, где один товар занимает одну строку">Список</strong> {% ENDIF %} <!-- /Переключатель режима просмотра --> </li> <li> <span>Сортировать по: </span> <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> </li> {% IF goods_show_order_fields %} <li> <span>Сортировать по: </span> <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> </li> {% ENDIF %}
далее найдите:
<!-- Если есть товары --> {% IFNOT goods_empty %} <div class="product-list"> {% FOR goods %} <div class="prod_hold"> <div class="itemW"> <div class="image goods-cat-image-medium-square textc table-image"> {% IF goods.IS_NEW %} <span class="new_prod">New</span> {% ELSEIF goods.IS_TOP %} <span class="new_prod">Hit</span> {% ENDIF %} {%IF user_agent_ie8 %} <a href="{goods.URL | url_amp}" title="{goods.NAME}"> <div class="product-image"><img class="goods-cat-image-medium" src="{% IF goods.IMAGE_EMPTY %}{ASSETS_IMAGES_PATH}no-photo-medium.png?design=caramel{% ELSE %}{goods.IMAGE_MEDIUM}{% ENDIF %}"> </div> </a> {% ELSE %} <a href="{goods.URL | url_amp}" title="{goods.NAME}" > <img class="goods-cat-image-medium" alt="{goods.NAME}" src="{% IF goods.IMAGE_EMPTY %}{ASSETS_IMAGES_PATH}no-photo-small.png?design=caramel{% ELSE %}{goods.IMAGE_MEDIUM}{% ENDIF %}" /> </a> {% ENDIF %} </div> <div class="addcartbutton"> <form action="{CART_ADD_GOODS_MODIFICATION_URL | url_amp}" method="post" class="goodsListItemCatalogueAddToCartButton product-form-{goods.MIN_PRICE_NOW_ID}"> <input type="hidden" name="hash" value="{HASH}" /> <input type="hidden" name="form[goods_from]" value="{goods.GOODS_FROM}" /> <input type="hidden" name="form[goods_mod_id]" value="{goods.MIN_PRICE_NOW_ID}" /> {%IF goods.MIN_REST_VALUE > 0%} <a class="addToCart" onclick="quickorder('.product-form-{goods.MIN_PRICE_NOW_ID}');return false;" title="Быстро оформить заказ"><span class="icon-cart3"></span></a> {%ELSEIF goods.MIN_REST_VALUE = 0%} <a class="addToCart noavalible" title="Нет в наличии"><span class="icon-cart3"></span></a> {%ENDIF%} </form> </div> <div class="leftinfo"> <div class="nameWrp"><div class="name"><a class="prodName" title="{goods.NAME}" href="{goods.URL_MIN_PRICE_NOW | url_amp}" style="*height:;">{goods.NAME}</a></div></div> <div class="price"> <div class="price-new"> {goods.MIN_PRICE_NOW | money_format} </div> </div><!--END price--> </div> </div><!--END itemW--> </div><!--END prod_hold --> {% ENDFOR %} </div> {% ENDIF %} <!-- /Если есть товары -->
замените на:
<!-- Если есть товары --> {% IFNOT goods_empty %} <div class="product-list"> {% IF GOODS_VIEW_TYPE=2 %} <!-- Список товаров. Список --> {% FOR goods %} <div class="listing"> <div class="imagem"><a href="{goods.URL}" title="Перейти на страницу «{goods.NAME}»"><img class="goods-image-small" {% 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" style="width:350px;"> <h3><a href="{goods.URL}" title="Перейти на страницу «{goods.NAME}»">{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_NOW_WITHOUT_DISCOUNT>goods.MIN_PRICE_NOW %} Цена без учёта скидки: <a href="{goods.URL_MIN_PRICE_NOW_WITHOUT_DISCOUNT}" class="lineThrough">{goods.MIN_PRICE_NOW_WITHOUT_DISCOUNT | money_format}</a><br /> <span class="listingDiscountInfo">До {goods.MAX_DISCOUNT_EXPIRED_AT | date} скидка составляет: {goods.MAX_DISCOUNT}%</span> {% ELSEIF 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> <form action="{CART_ADD_GOODS_MODIFICATION_URL | url_amp}" method="post" id="goodsListFormId{goods.MIN_PRICE_NOW_ID}" class="goodsListForm"> <p> <input type="hidden" name="hash" value="{HASH}" /> <input type="hidden" name="form[goods_from]" value="{goods.GOODS_FROM}" /> <input type="hidden" name="form[goods_mod_id]" value="{goods.MIN_PRICE_NOW_ID}" /> <a class="readmore" onclick="$('#goodsListFormId{goods.MIN_PRICE_NOW_ID}').submit(); return false;" 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="Положить «{goods.NAME}» в корзину">Купить</a> </p> </form> <p> <a class="readmore" title="{goods.NAME}" href="{goods.URL}">Подробнее</a> </p> </div> <div class="clr"></div> </div> {% ENDFOR %} <!-- /Список товаров. Список --> {% ELSE %} {% FOR goods %} <div class="prod_hold"> <div class="itemW"> <div class="image goods-cat-image-medium-square textc table-image"> {% IF goods.IS_NEW %} <span class="new_prod">New</span> {% ELSEIF goods.IS_TOP %} <span class="new_prod">Hit</span> {% ENDIF %} {%IF user_agent_ie8 %} <a href="{goods.URL | url_amp}" title="{goods.NAME}"> <div class="product-image"><img class="goods-cat-image-medium" src="{% IF goods.IMAGE_EMPTY %}{ASSETS_IMAGES_PATH}no-photo-medium.png?design=caramel{% ELSE %}{goods.IMAGE_MEDIUM}{% ENDIF %}"> </div> </a> {% ELSE %} <a href="{goods.URL | url_amp}" title="{goods.NAME}" > <img class="goods-cat-image-medium" alt="{goods.NAME}" src="{% IF goods.IMAGE_EMPTY %}{ASSETS_IMAGES_PATH}no-photo-small.png?design=caramel{% ELSE %}{goods.IMAGE_MEDIUM}{% ENDIF %}" /> </a> {% ENDIF %} </div> <div class="addcartbutton"> <form action="{CART_ADD_GOODS_MODIFICATION_URL | url_amp}" method="post" class="goodsListItemCatalogueAddToCartButton product-form-{goods.MIN_PRICE_NOW_ID}"> <input type="hidden" name="hash" value="{HASH}" /> <input type="hidden" name="form[goods_from]" value="{goods.GOODS_FROM}" /> <input type="hidden" name="form[goods_mod_id]" value="{goods.MIN_PRICE_NOW_ID}" /> {%IF goods.MIN_REST_VALUE > 0%} <a class="addToCart" onclick="quickorder('.product-form-{goods.MIN_PRICE_NOW_ID}');return false;" title="Быстро оформить заказ"><span class="icon-cart3"></span></a> {%ELSEIF goods.MIN_REST_VALUE = 0%} <a class="addToCart noavalible" title="Нет в наличии"><span class="icon-cart3"></span></a> {%ENDIF%} </form> </div> <div class="leftinfo"> <div class="nameWrp"><div class="name"><a class="prodName" title="{goods.NAME}" href="{goods.URL_MIN_PRICE_NOW | url_amp}" style="*height:;">{goods.NAME}</a></div></div> <div class="price"> <div class="price-new"> {goods.MIN_PRICE_NOW | money_format} </div> </div><!--END price--> </div> </div><!--END itemW--> </div><!--END prod_hold --> {% ENDFOR %} {% ENDIF %} </div> {% ENDIF %} <!-- /Если есть товары -->
В main.css найдите:
.choosecatalog li { float: left; margin: 0 0 0 10px; }
замените на:
.choosecatalog li { float: left; margin: 0 0 0 10px; } .choosecatalog li:first-child { line-height: 55px; } .choosecatalog li:first-child strong, .choosecatalog li:first-child a { padding: 10px; border: 1px solid #ccc; }
Далее найдите:
.product-list2, .product-filter, .product-list { width: 100%; float: left; }
после него пропишите:
.product-list .listing > div { display: inline-block; } .product-list .listing > div.imagem { vertical-align: top; }
#3
Отправлено 01 Март 2016 - 21:17
Vaccina (21 Февраль 2016 - 03:53) писал:
Укажите пожалуйста номер аккаунта в профиле форума.
В шаблоне Товары найдите:
замените на:
далее найдите:
замените на:
В main.css найдите:
замените на:
Далее найдите:
после него пропишите:
В шаблоне Товары найдите:
{% IF goods_show_order_fields %} <div class="choose choosecatalog"> <li> <span>Сортировать по: </span> <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> </li> {% ENDIF %}
замените на:
<div class="choose choosecatalog"> <li> <!-- Переключатель режима просмотра --> {% IF GOODS_VIEW_TYPE=1 %} <strong title="Список товаров сейчас отображается в виде таблицы, по 2 товара на строку">Таблица</strong> <a href="?goods_view_type=2" title="Отображать список товаров в виде списка">Список</a> {% ELSE %} <a href="?goods_view_type=1" title="Отображать список товаров в виде таблицы с 2мя товарами на одну строку">Таблица</a> <strong title="Список товаров сейчас отображается в виде списка, где один товар занимает одну строку">Список</strong> {% ENDIF %} <!-- /Переключатель режима просмотра --> </li> <li> <span>Сортировать по: </span> <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> </li> {% IF goods_show_order_fields %} <li> <span>Сортировать по: </span> <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> </li> {% ENDIF %}
далее найдите:
<!-- Если есть товары --> {% IFNOT goods_empty %} <div class="product-list"> {% FOR goods %} <div class="prod_hold"> <div class="itemW"> <div class="image goods-cat-image-medium-square textc table-image"> {% IF goods.IS_NEW %} <span class="new_prod">New</span> {% ELSEIF goods.IS_TOP %} <span class="new_prod">Hit</span> {% ENDIF %} {%IF user_agent_ie8 %} <a href="{goods.URL | url_amp}" title="{goods.NAME}"> <div class="product-image"><img class="goods-cat-image-medium" src="{% IF goods.IMAGE_EMPTY %}{ASSETS_IMAGES_PATH}no-photo-medium.png?design=caramel{% ELSE %}{goods.IMAGE_MEDIUM}{% ENDIF %}"> </div> </a> {% ELSE %} <a href="{goods.URL | url_amp}" title="{goods.NAME}" > <img class="goods-cat-image-medium" alt="{goods.NAME}" src="{% IF goods.IMAGE_EMPTY %}{ASSETS_IMAGES_PATH}no-photo-small.png?design=caramel{% ELSE %}{goods.IMAGE_MEDIUM}{% ENDIF %}" /> </a> {% ENDIF %} </div> <div class="addcartbutton"> <form action="{CART_ADD_GOODS_MODIFICATION_URL | url_amp}" method="post" class="goodsListItemCatalogueAddToCartButton product-form-{goods.MIN_PRICE_NOW_ID}"> <input type="hidden" name="hash" value="{HASH}" /> <input type="hidden" name="form[goods_from]" value="{goods.GOODS_FROM}" /> <input type="hidden" name="form[goods_mod_id]" value="{goods.MIN_PRICE_NOW_ID}" /> {%IF goods.MIN_REST_VALUE > 0%} <a class="addToCart" onclick="quickorder('.product-form-{goods.MIN_PRICE_NOW_ID}');return false;" title="Быстро оформить заказ"><span class="icon-cart3"></span></a> {%ELSEIF goods.MIN_REST_VALUE = 0%} <a class="addToCart noavalible" title="Нет в наличии"><span class="icon-cart3"></span></a> {%ENDIF%} </form> </div> <div class="leftinfo"> <div class="nameWrp"><div class="name"><a class="prodName" title="{goods.NAME}" href="{goods.URL_MIN_PRICE_NOW | url_amp}" style="*height:;">{goods.NAME}</a></div></div> <div class="price"> <div class="price-new"> {goods.MIN_PRICE_NOW | money_format} </div> </div><!--END price--> </div> </div><!--END itemW--> </div><!--END prod_hold --> {% ENDFOR %} </div> {% ENDIF %} <!-- /Если есть товары -->
замените на:
<!-- Если есть товары --> {% IFNOT goods_empty %} <div class="product-list"> {% IF GOODS_VIEW_TYPE=2 %} <!-- Список товаров. Список --> {% FOR goods %} <div class="listing"> <div class="imagem"><a href="{goods.URL}" title="Перейти на страницу «{goods.NAME}»"><img class="goods-image-small" {% 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" style="width:350px;"> <h3><a href="{goods.URL}" title="Перейти на страницу «{goods.NAME}»">{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_NOW_WITHOUT_DISCOUNT>goods.MIN_PRICE_NOW %} Цена без учёта скидки: <a href="{goods.URL_MIN_PRICE_NOW_WITHOUT_DISCOUNT}" class="lineThrough">{goods.MIN_PRICE_NOW_WITHOUT_DISCOUNT | money_format}</a><br /> <span class="listingDiscountInfo">До {goods.MAX_DISCOUNT_EXPIRED_AT | date} скидка составляет: {goods.MAX_DISCOUNT}%</span> {% ELSEIF 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> <form action="{CART_ADD_GOODS_MODIFICATION_URL | url_amp}" method="post" id="goodsListFormId{goods.MIN_PRICE_NOW_ID}" class="goodsListForm"> <p> <input type="hidden" name="hash" value="{HASH}" /> <input type="hidden" name="form[goods_from]" value="{goods.GOODS_FROM}" /> <input type="hidden" name="form[goods_mod_id]" value="{goods.MIN_PRICE_NOW_ID}" /> <a class="readmore" onclick="$('#goodsListFormId{goods.MIN_PRICE_NOW_ID}').submit(); return false;" 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="Положить «{goods.NAME}» в корзину">Купить</a> </p> </form> <p> <a class="readmore" title="{goods.NAME}" href="{goods.URL}">Подробнее</a> </p> </div> <div class="clr"></div> </div> {% ENDFOR %} <!-- /Список товаров. Список --> {% ELSE %} {% FOR goods %} <div class="prod_hold"> <div class="itemW"> <div class="image goods-cat-image-medium-square textc table-image"> {% IF goods.IS_NEW %} <span class="new_prod">New</span> {% ELSEIF goods.IS_TOP %} <span class="new_prod">Hit</span> {% ENDIF %} {%IF user_agent_ie8 %} <a href="{goods.URL | url_amp}" title="{goods.NAME}"> <div class="product-image"><img class="goods-cat-image-medium" src="{% IF goods.IMAGE_EMPTY %}{ASSETS_IMAGES_PATH}no-photo-medium.png?design=caramel{% ELSE %}{goods.IMAGE_MEDIUM}{% ENDIF %}"> </div> </a> {% ELSE %} <a href="{goods.URL | url_amp}" title="{goods.NAME}" > <img class="goods-cat-image-medium" alt="{goods.NAME}" src="{% IF goods.IMAGE_EMPTY %}{ASSETS_IMAGES_PATH}no-photo-small.png?design=caramel{% ELSE %}{goods.IMAGE_MEDIUM}{% ENDIF %}" /> </a> {% ENDIF %} </div> <div class="addcartbutton"> <form action="{CART_ADD_GOODS_MODIFICATION_URL | url_amp}" method="post" class="goodsListItemCatalogueAddToCartButton product-form-{goods.MIN_PRICE_NOW_ID}"> <input type="hidden" name="hash" value="{HASH}" /> <input type="hidden" name="form[goods_from]" value="{goods.GOODS_FROM}" /> <input type="hidden" name="form[goods_mod_id]" value="{goods.MIN_PRICE_NOW_ID}" /> {%IF goods.MIN_REST_VALUE > 0%} <a class="addToCart" onclick="quickorder('.product-form-{goods.MIN_PRICE_NOW_ID}');return false;" title="Быстро оформить заказ"><span class="icon-cart3"></span></a> {%ELSEIF goods.MIN_REST_VALUE = 0%} <a class="addToCart noavalible" title="Нет в наличии"><span class="icon-cart3"></span></a> {%ENDIF%} </form> </div> <div class="leftinfo"> <div class="nameWrp"><div class="name"><a class="prodName" title="{goods.NAME}" href="{goods.URL_MIN_PRICE_NOW | url_amp}" style="*height:;">{goods.NAME}</a></div></div> <div class="price"> <div class="price-new"> {goods.MIN_PRICE_NOW | money_format} </div> </div><!--END price--> </div> </div><!--END itemW--> </div><!--END prod_hold --> {% ENDFOR %} {% ENDIF %} </div> {% ENDIF %} <!-- /Если есть товары -->
В main.css найдите:
.choosecatalog li { float: left; margin: 0 0 0 10px; }
замените на:
.choosecatalog li { float: left; margin: 0 0 0 10px; } .choosecatalog li:first-child { line-height: 55px; } .choosecatalog li:first-child strong, .choosecatalog li:first-child a { padding: 10px; border: 1px solid #ccc; }
Далее найдите:
.product-list2, .product-filter, .product-list { width: 100%; float: left; }
после него пропишите:
.product-list .listing > div { display: inline-block; } .product-list .listing > div.imagem { vertical-align: top; }
Добрый день! Не получается найти последний код в main.css, , что прописали выше:
.product-list2, .product-filter, .product-list {
width: 100%;
float: left;
}
Мой аккурант SL-370836
#4
Отправлено 02 Март 2016 - 04:54
Файл main.css 393 строка:
.product-list2,.product-filter,.product-list{width:100%;float:left;}
#5
Отправлено 12 Март 2016 - 17:04
Аккаунт SL-370836. Что-то не очень получилось.
Задвоенная сортировка.. Помогите сделать получше.
Задвоенная сортировка.. Помогите сделать получше.
#8
Отправлено 12 Март 2016 - 20:16
nsuhov1 (12 Март 2016 - 19:38) писал:
Почему-то 2 раза сортировка товара по цене
В шаблоне Товары удалите код:
<li> <span>Сортировать по: </span> <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> </li>
#11
Отправлено 28 Март 2016 - 18:12
Подскажите пожалуйста, как сделать чтобы в мобильной версии товары показывались не списком, а плиткой?
Количество пользователей, читающих эту тему: 0
0 пользователей, 0 гостей, 0 анонимных