`Рабочий стол > АспроАспро: ЛайтШоп > Для разработчиков
`
**два полных, отдельных файла **
для десктопной и мобильной версий.**
-
Полный CSS для ДЕСКТОПНОЙ версии (
custom.css) **Этот код нужно разместить в файле, который загружается для десктопных разрешений.
` /* ========================================================================== КОД ДЛЯ ДЕСКТОПНОЙ ВЕРСИИ (v4 - Финальная версия) ========================================================================== / /
- 1.1. Список товаров (главная, страница каталога, блоки)
-
- Основываясь на ‘список товаров.html’, целимся в
.catalog-block__info .price. / .catalog-block__info .price, .js-popup-price .price, / Цена в быстром просмотре / .tab-content .price { / Цена в табах на главной странице / display: none !important; } / - 1.2. Детальная карточка товара
-
- Основываясь на ‘Детальное описание карточки.html’, целимся в блок
.catalog-detail__buy-block, где находится цена и кнопка покупки. / .catalog-detail__buy-block .price { display: none !important; } / Дополнительно скрываем цену в блоке с информацией о заказе (если он есть) / .order-info-block .price { display: none !important; } /- 1.3. Корзина
-
- Основываясь на ‘Корзина.html’. / / Цена за 1 шт. под счетчиком количества / .basket-items-list-item-price-for-one { display: none !important; } / Основной блок с итоговой ценой за позицию (справа) / .basket-items-list-item-price-action-wrap .basket-item-price.flex-1 { display: none !important; } / Блок “Итого” в правой колонке / .basket-total-block [data-entity=“basket-total-price”], .basket-total-block .basket-checkout-total-title { / Скрываем и сам заголовок “Итого” / display: none !important; } / Блок “Экономия” (скидка) в правой колонке / .basket-total-block .basket-coupon-total-price-difference { display: none !important; } / Информационные строки под итоговой суммой (Товары на сумму и т.д.) / .basket-total-block .basket-checkout-info { display: none !important; } /
- 1.4. Страница оформления заказа
-
- Эти правила остаются стандартными, так как нацелены на компонент sale.order.ajax. / / Цены в списке товаров / .soa-cart-list .soa-cart-list-item-price, .bx-soa-item-td.bx-soa-item-price .soa-cart-item-price, .bx-soa-item-td.bx-soa-item-total .soa-cart-item-total-price { display: none !important; } / Блок “Ваш заказ” (итого, доставка и т.д.) / .soa-cart-total .soa-cart-total-line-value, .bx-soa-cart-total-line .bx-soa-cart-total-line-value, .bx-soa-cart-total-line .bx-soa-cart-total-line-text { display: none !important; } / Скрытие целых строк, чтобы не оставалось пустого места */ .soa-cart-total .soa-cart-total-line, .bx-soa-cart-total .bx-soa-cart-total-line { display: none !important; } `
**
-
Полный CSS для МОБИЛЬНОЙ версии (
custom_mobile.css) **Этот код нужно разместить в файле, который загружается ** только для мобильных устройств ** .
` /* ========================================================================== КОД ДЛЯ МОБИЛЬНОЙ ВЕРСИИ (v4 - Финальная версия) ========================================================================== / /
- 2.1. Список товаров (главная, страница каталога, блоки)
-
- Используем те же селекторы, что и для десктопа, так как структура
- карточки товара в
.catalog-blockобычно сохраняется. / .catalog-block__info .price, .js-popup-price .price, / Цена в быстром просмотре / .tab-content .price { display: none !important; } / - 2.2. Детальная карточка товара
-
- Аналогично списку, структура детальной карточки на мобильных
- часто повторяет десктопную, адаптируясь через flexbox/grid. / .catalog-detail__buy-block .price { display: none !important; } / Дополнительно скрываем цену в блоке с информацией о заказе (если он есть) / .order-info-block .price { display: none !important; } /
- 2.3. Мобильная “липкая” плашка (внизу экрана)
-
/ .bottom-panel-mobile .price, .fixed_block.buy_buttons_mobile .price { display: none !important; } /
- 2.4. Корзина
-
- Используем те же селекторы, что и в десктопной версии, так как
- компонент корзины имеет единую структуру. / / Цена за 1 шт. / .basket-items-list-item-price-for-one { display: none !important; } / Итоговая цена за позицию / .basket-items-list-item-price-action-wrap .basket-item-price.flex-1 { display: none !important; } / Блок “Итого” / .basket-total-block [data-entity=“basket-total-price”], .basket-total-block .basket-checkout-total-title { display: none !important; } / Блок “Экономия” (скидка) / .basket-total-block .basket-coupon-total-price-difference { display: none !important; } / Информационные строки под итоговой суммой (Товары на сумму и т.д.) / .basket-total-block .basket-checkout-info { display: none !important; } /
- 2.5. Страница оформления заказа
-
- Также дублируем правила для стандартного компонента. / / Цены в списке товаров / .soa-cart-list .soa-cart-list-item-price, .bx-soa-item-td.bx-soa-item-price .soa-cart-item-price, .bx-soa-item-td.bx-soa-item-total .soa-cart-item-total-price { display: none !important; } / Блок “Ваш заказ” (итого, доставка и т.д.) */ .soa-cart-total .soa-cart-total-line, .bx-soa-cart-total .bx-soa-cart-total-line { display: none !important; } `
**
Ключевые изменения и почему это надежно: **
- **
Для списка товаров и главной **
: Теперь мы используем селектор `
.catalog-block__info .price `
, который прямо следует из предоставленного HTML и является частью основного контейнера информации о товаре.
- **
Для детальной карточки **
: Правило `
.catalog-detail__buy-block .price `
точно нацелено на блок с ценой в правой колонке, где находится кнопка “В корзину”. Это самый надежный способ скрыть цену, не затронув функциональные элементы.
- **
Для корзины **
: Правила уточнены до мелочей, включая скрытие не только самой итоговой суммы, но и связанных с ней блоков (“Экономия”, “Товары на сумму”, заголовок “Итого”), чтобы не оставалось пустых или нелогичных надписей.
- **
Универсальность **
: Многие селекторы, особенно для каталога и корзины, оказались универсальными для обеих версий (десктоп/мобайл), так как Аспро использует адаптивный подход, меняя стили для одних и тех же блоков, а не генерируя полностью разный HTML. Дублирование этих правил в обоих файлах гарантирует их применение вне зависимости от логики подключения стилей.**
Дополнение для ДЕСКТОПНОЙ версии **
` /*
ДОПОЛНЕНИЕ для ДЕСКТОПНОЙ версии (v5)
/ /
- Доп. правило: Скрытие цены в блоке “Вы смотрели”
-
- Основано на HTML-коде блока
.catalog-viewed. / .catalog-viewed .price { display: none !important; } / - Доп. правило: Гарантированное скрытие самого значения цены
-
- На случай, если в некоторых блоках родительский
.priceне скрывается, - а виден дочерний элемент
.price__new. Это правило подстрахует. */ .price__new { display: none !important; } `
**
Дополнение для МОБИЛЬНОЙ версии **
` /*
ДОПОЛНЕНИЕ для МОБИЛЬНОЙ версии (v5)
/ /
- Доп. правило: Скрытие цены в блоке “Вы смотрели” (мобильная версия)
-
- Структура этого блока на мобильных, скорее всего, идентична. / .catalog-viewed .price { display: none !important; } /
- Доп. правило: Гарантированное скрытие самого значения цены
-
- Этот класс
.price__newтакже универсален. */ .price__new { display: none !important; } `