tumans (20 Декабрь 2017 - 21:25) писал:
Доброго времени суток.
Помогите изменить карточку товаров для мобильников разрешение <480 px
Для примера как и на скрине используйте товар
http://tumans.ru/goo...nograd-50-gramm
в чём нужно помочь
1. Расположить блоки в той же последовательности как и на скрине, т.е. первый блок это рейтинг, потом "популярный аромат", потом название товара, далее артикул, Наличие товара
2. Цену вывести шрифтом 20px bold чёрный положение такое же как на скрине
3. Раскрасить зеленым "в наличии" сделать жирным шрифтом 14px
4. скрыть блоки с мобилки "Быстрый заказ" и "добавить в избранное"
Просто нужно сделать как на скрине "как нужно"
Здравствуйте. Простите задлительное ожидание ответа.
В шаблоне Товар найдите код
<div class="product-name"><h1 itemprop="name">{GOODS_NAME}</h1></div>
<meta itemprop="description" content="{% IF GOODS_DESCRIPTION_SHORT %}{GOODS_DESCRIPTION_SHORT}{% ELSE %}Описание отсутствует{% ENDIF %}">
<!-- Среднее значение по результатам всех отзывов об этом товаре -->
<div class="ratings">
<div class="rating-box" title="Рейтинг товара">
{% IF GOODS_OPINION_RATING_VALUE_ROUND %}
<span itemprop="aggregateRating" itemscope itemtype="https://schema.org/AggregateRating">
<meta itemprop="worstRating" content = "1">
<meta itemprop="bestRating" content = "10">
<meta itemprop="ratingValue" content = "{GOODS_OPINION_RATING_VALUE_ROUND}">
<meta itemprop="reviewCount" content = "{GOODS_OPINION_RATING_CNT_ALL}">
<div class="rating" style="width:{GOODS_OPINION_RATING_VALUE_ROUND}0%" alt="{GOODS_OPINION_RATING_VALUE_ROUND}" title="Рейтинг товара"></div>
</span>
{% ELSE %}
<div class="rating" style="width:0%" alt="Рейтинг не определён" title="Рейтинг не определён"></div>
{% ENDIF %}
</div>
</div>
<!-- Цена товара -->
<div class="price-box" itemprop="offers" itemscope itemtype="https://schema.org/Offer">
<!-- информация для поисковика о наличии товара -->
<meta itemprop="availability" content="{% IF GOODS_MOD_REST_VALUE>0 %}in_stock{% ELSE %}out_of_stock{% ENDIF %}">
<!-- информация для поисковика о валюте товара -->
<meta itemprop="priceCurrency" content="{CURRENCY_CHAR_CODE}"/>
{% IF GOODS_MOD_PRICE_NOW_WITHOUT_DISCOUNT>GOODS_MOD_PRICE_NOW %}
<p class="old-price goodsDataMainModificationPriceOld {CURRENCY_CHAR_CODE}">
<span class="price">{GOODS_MOD_PRICE_NOW_WITHOUT_DISCOUNT | money_format}</span>
</p>
{% ELSEIF GOODS_MOD_PRICE_OLD>GOODS_MOD_PRICE_NOW %}
<p class="old-price goodsDataMainModificationPriceOld {CURRENCY_CHAR_CODE}">
<span class="price">{GOODS_MOD_PRICE_OLD | money_format}</span>
</p>
{% ENDIF %}
<p class="special-price goodsDataMainModificationPriceNow {CURRENCY_CHAR_CODE}">
<span class="price" itemprop="price" content="{GOODS_MOD_PRICE_NOW}">{GOODS_MOD_PRICE_NOW | money_format}</span>
</p>
</div>
<!-- Артикул -->
<div class="goodsDataMainModificationArtNumber f-fix" {% IFNOT GOODS_MOD_ART_NUMBER %}style="display:none"{% ENDIF %}>
Артикул: <span>{GOODS_MOD_ART_NUMBER}</span>
</div>
<!-- Доступность товара -->
<div class="goodsDataMainModificationAvailable f-fix">
<div class="available-true" {% IF GOODS_MOD_REST_VALUE=0 %}style="display:none;"{% ENDIF %}>Наличие товара: <span>В наличии</span></div>
<div class="available-false" style="{% IF GOODS_MOD_REST_VALUE>0 %}display:none;{% ENDIF %}">Наличие товара: <span>Товара нет в наличии</span></div>
</div>
<!-- Блок информации по акции действующей на товар, если таковая есть -->
{% IF GOODS_MOD_MAX_DISCOUNT_ID %}
<div class="goodsDataMainDiscountBlock f-fix" content="{GOODS_MOD_MAX_DISCOUNT_EXPIRED_AT | date("Y-m-d")}">
<span>Товар участвует в акции <strong>«{GOODS_MOD_MAX_DISCOUNT_CAMPAIGN_NAME}».</strong></span><br />
<span>До {GOODS_MOD_MAX_DISCOUNT_EXPIRED_AT | date} скидка составляет <strong>{GOODS_MOD_MAX_DISCOUNT}%</strong></span>
</div>
{% ENDIF %}
<!-- Краткое описание -->
<div class="short-description f-fix">
<p itemprop="description">{GOODS_DESCRIPTION_SHORT}</p>
</div>
и замените его на
<div class="bigMon">
<div class="product-name"><h1 itemprop="name">{GOODS_NAME}</h1></div>
<meta itemprop="description" content="{% IF GOODS_DESCRIPTION_SHORT %}{GOODS_DESCRIPTION_SHORT}{% ELSE %}Описание отсутствует{% ENDIF %}">
<!-- Среднее значение по результатам всех отзывов об этом товаре -->
<div class="ratings">
<div class="rating-box" title="Рейтинг товара">
{% IF GOODS_OPINION_RATING_VALUE_ROUND %}
<span itemprop="aggregateRating" itemscope itemtype="https://schema.org/AggregateRating">
<meta itemprop="worstRating" content = "1">
<meta itemprop="bestRating" content = "10">
<meta itemprop="ratingValue" content = "{GOODS_OPINION_RATING_VALUE_ROUND}">
<meta itemprop="reviewCount" content = "{GOODS_OPINION_RATING_CNT_ALL}">
<div class="rating" style="width:{GOODS_OPINION_RATING_VALUE_ROUND}0%" alt="{GOODS_OPINION_RATING_VALUE_ROUND}" title="Рейтинг товара"></div>
</span>
{% ELSE %}
<div class="rating" style="width:0%" alt="Рейтинг не определён" title="Рейтинг не определён"></div>
{% ENDIF %}
</div>
</div>
<!-- Цена товара -->
<div class="price-box" itemprop="offers" itemscope itemtype="https://schema.org/Offer">
<!-- информация для поисковика о наличии товара -->
<meta itemprop="availability" content="{% IF GOODS_MOD_REST_VALUE>0 %}in_stock{% ELSE %}out_of_stock{% ENDIF %}">
<!-- информация для поисковика о валюте товара -->
<meta itemprop="priceCurrency" content="{CURRENCY_CHAR_CODE}"/>
{% IF GOODS_MOD_PRICE_NOW_WITHOUT_DISCOUNT>GOODS_MOD_PRICE_NOW %}
<p class="old-price goodsDataMainModificationPriceOld {CURRENCY_CHAR_CODE}">
<span class="price">{GOODS_MOD_PRICE_NOW_WITHOUT_DISCOUNT | money_format}</span>
</p>
{% ELSEIF GOODS_MOD_PRICE_OLD>GOODS_MOD_PRICE_NOW %}
<p class="old-price goodsDataMainModificationPriceOld {CURRENCY_CHAR_CODE}">
<span class="price">{GOODS_MOD_PRICE_OLD | money_format}</span>
</p>
{% ENDIF %}
<p class="special-price goodsDataMainModificationPriceNow {CURRENCY_CHAR_CODE}">
<span class="price" itemprop="price" content="{GOODS_MOD_PRICE_NOW}">{GOODS_MOD_PRICE_NOW | money_format}</span>
</p>
</div>
<!-- Артикул -->
<div class="goodsDataMainModificationArtNumber f-fix" {% IFNOT GOODS_MOD_ART_NUMBER %}style="display:none"{% ENDIF %}>
Артикул: <span>{GOODS_MOD_ART_NUMBER}</span>
</div>
<!-- Доступность товара -->
<div class="goodsDataMainModificationAvailable f-fix">
<div class="available-true" {% IF GOODS_MOD_REST_VALUE=0 %}style="display:none;"{% ENDIF %}>Наличие товара: <span>В наличии</span></div>
<div class="available-false" style="{% IF GOODS_MOD_REST_VALUE>0 %}display:none;{% ENDIF %}">Наличие товара: <span>Товара нет в наличии</span></div>
</div>
</div>
<div class="mobMon">
<div class="ratings">
<div class="rating-box" title="Рейтинг товара">
{% IF GOODS_OPINION_RATING_VALUE_ROUND %}
<span itemprop="aggregateRating" itemscope itemtype="https://schema.org/AggregateRating">
<meta itemprop="worstRating" content = "1">
<meta itemprop="bestRating" content = "10">
<meta itemprop="ratingValue" content = "{GOODS_OPINION_RATING_VALUE_ROUND}">
<meta itemprop="reviewCount" content = "{GOODS_OPINION_RATING_CNT_ALL}">
<div class="rating" style="width:{GOODS_OPINION_RATING_VALUE_ROUND}0%" alt="{GOODS_OPINION_RATING_VALUE_ROUND}" title="Рейтинг товара"></div>
</span>
{% ELSE %}
<div class="rating" style="width:0%" alt="Рейтинг не определён" title="Рейтинг не определён"></div>
{% ENDIF %}
</div>
</div>
<!-- Краткое описание -->
<div class="short-description f-fix">
<p itemprop="description">{GOODS_DESCRIPTION_SHORT}</p>
</div>
<div class="product-name f-fix"><h1 itemprop="name">{GOODS_NAME}</h1></div>
<meta itemprop="description" content="{% IF GOODS_DESCRIPTION_SHORT %}{GOODS_DESCRIPTION_SHORT}{% ELSE %}Описание отсутствует{% ENDIF %}">
<!-- Среднее значение по результатам всех отзывов об этом товаре -->
<!-- Артикул -->
<div class="goodsDataMainModificationArtNumber f-fix" {% IFNOT GOODS_MOD_ART_NUMBER %}style="display:none"{% ENDIF %}>
Артикул: <span>{GOODS_MOD_ART_NUMBER}</span>
</div>
<!-- Доступность товара -->
<div class="goodsDataMainModificationAvailable f-fix">
<div class="available-true" {% IF GOODS_MOD_REST_VALUE=0 %}style="display:none;"{% ENDIF %}>Наличие товара: <span>В наличии</span></div>
<div class="available-false" style="{% IF GOODS_MOD_REST_VALUE>0 %}display:none;{% ENDIF %}">Наличие товара: <span>Товара нет в наличии</span></div>
</div>
<!-- Цена товара -->
<div class="price-box" itemprop="offers" itemscope itemtype="https://schema.org/Offer">
<!-- информация для поисковика о наличии товара -->
<meta itemprop="availability" content="{% IF GOODS_MOD_REST_VALUE>0 %}in_stock{% ELSE %}out_of_stock{% ENDIF %}">
<!-- информация для поисковика о валюте товара -->
<meta itemprop="priceCurrency" content="{CURRENCY_CHAR_CODE}"/>
{% IF GOODS_MOD_PRICE_NOW_WITHOUT_DISCOUNT>GOODS_MOD_PRICE_NOW %}
<p class="old-price goodsDataMainModificationPriceOld {CURRENCY_CHAR_CODE}">
<span class="price">{GOODS_MOD_PRICE_NOW_WITHOUT_DISCOUNT | money_format}</span>
</p>
{% ELSEIF GOODS_MOD_PRICE_OLD>GOODS_MOD_PRICE_NOW %}
<p class="old-price goodsDataMainModificationPriceOld {CURRENCY_CHAR_CODE}">
<span class="price">{GOODS_MOD_PRICE_OLD | money_format}</span>
</p>
{% ENDIF %}
<p class="special-price goodsDataMainModificationPriceNow {CURRENCY_CHAR_CODE}">
<span class="price" itemprop="price" content="{GOODS_MOD_PRICE_NOW}">{GOODS_MOD_PRICE_NOW | money_format}</span>
</p>
</div>
<!-- Блок информации по акции действующей на товар, если таковая есть -->
{% IF GOODS_MOD_MAX_DISCOUNT_ID %}
<div class="goodsDataMainDiscountBlock f-fix" content="{GOODS_MOD_MAX_DISCOUNT_EXPIRED_AT | date("Y-m-d")}">
<span>Товар участвует в акции <strong>«{GOODS_MOD_MAX_DISCOUNT_CAMPAIGN_NAME}».</strong></span><br />
<span>До {GOODS_MOD_MAX_DISCOUNT_EXPIRED_AT | date} скидка составляет <strong>{GOODS_MOD_MAX_DISCOUNT}%</strong></span>
</div>
{% ENDIF %}
</div>
После этого в файле main.css найдите строку
/*** Товар ***/
и сразу после нее добавьте код
.product-view .product-shop .mobMon{display:none;}
.product-view .product-shop .mobMon .ratings{float:none;}
.product-view .product-shop .mobMon .price{font-weight:bold;font-size:20px;color:#000;}
.product-view .product-shop .mobMon .goodsDataMainModificationArtNumber span, .product-view .product-shop .mobMon .goodsDataMainModificationAvailable span{color: #449e55}
Затем найдите код
@media all and (max-width: 481px) {
и сразу после него добавьте
.product-view .product-shop .bigMon{display:none;}
.product-view .product-shop .mobMon{display:block;}
.product-view .product-shop .add-to-box .add-to-cart .add-cart {display: block; clear: inherit !important;float: left;}
.product-view .product-shop .add-to-box .add-to-cart .add-cart.quick, .product-view .product-shop .add-to-links {display:none;}