Здравствуйте, возможно ли поменять карточки товара с шаблона шоколад, Заменить только карточки, без прокрутки как в шаблоне
так же
1-показать где поменять цвет колонок
2- сделать зеленую рамку
0
Карточки Товара
Автор Юрий32, 19 февр. 2019 18:04
Сообщений в теме: 5
#1
Отправлено 19 Февраль 2019 - 18:04
#2
Отправлено 21 Февраль 2019 - 04:25
Здравствуйте.
Зайдите в раздел Сайт - Редактор шаблонов - Товары - найдите:
замените на:
далее зайдите в main.css - найдите:
замените на:
После изменений почистите кэш и проверьте товары в категории.
Зайдите в раздел Сайт - Редактор шаблонов - Товары - найдите:
{% IF GOODS_VIEW_TYPE=1 %} <!-- Вывод товаров ТАБЛИЦЕЙ --> <div class="products-grid row"> {% FOR goods %} <div class="item"> <div class="item-inner" itemscope itemtype="https://schema.org/Product"> <div class="product rotation"> <div class="default"> {% IF goods.IS_NEW %} <span class="new"></span> {% ELSEIF goods.IS_TOP %} <span class="best"></span> {% ENDIF %} {% IF goods.MAX_DISCOUNT %} <span class="sale right"></span> {% ENDIF %} {% IF goods.MIN_PRICE_OLD > goods.MIN_PRICE_NOW %} <span class="sale right">Скидка <span class="saving"></span>%</span> {%ENDIF%} <div class="product-img"> <a href="{goods.URL_MIN_PRICE_NOW | url_amp}" class="product-image" title="{goods.NAME}"> <img src="{% IF goods.IMAGE_EMPTY %}{ASSETS_IMAGES_PATH}no-photo-small.png?design=jade{% ELSE %}{goods.IMAGE_MEDIUM}{% ENDIF %}" class="goods-image-small" alt="{goods.NAME}"> </a> </div> <div class="product-description"> <div class="vertical"> <h3 class="product-name"> <a title="{goods.NAME}" href="{goods.URL_MIN_PRICE_NOW | url_amp}">{goods.NAME}</a> </h3> <div class="price"> <div class="price-box"> <span class="product-price"> <span class="price">{goods.MIN_PRICE_NOW | money_format}</span> {% IF goods.MIN_PRICE_NOW_WITHOUT_DISCOUNT>goods.MIN_PRICE_NOW %} <span class="price-old">{goods.MIN_PRICE_NOW_WITHOUT_DISCOUNT | money_format}</span> {% ELSEIF goods.MIN_PRICE_OLD>goods.MIN_PRICE_NOW %} <span class="price-old">{goods.MIN_PRICE_OLD | money_format}</span> {% ENDIF %} </span> </div> </div> </div> </div> </div><!-- описание товара --> <div class="product-hover"> <h3 class="product-name"> <a title="{goods.NAME}" href="{goods.URL_MIN_PRICE_NOW | url_amp}">{goods.NAME}</a> </h3> <div class="price"> <div class="price-box"> <span class="product-price"> <span class="price">{goods.MIN_PRICE_NOW | money_format}</span> </span> </div> </div> <div class="product-icon"> <a href="{goods.URL_MIN_PRICE_NOW | url_amp}"> <img src="{% IF goods.IMAGE_EMPTY %}{ASSETS_IMAGES_PATH}no-photo-small.png?design=jade{% ELSE %}{goods.IMAGE_ICON}{% ENDIF %}" class="goods-image-icon" alt="{goods.NAME}"> </a> </div> <div class="short-description"> <p>{goods.DESCRIPTION_SHORT}</p> </div> <div class="actions"> <form action="{CART_ADD_GOODS_MODIFICATION_URL | url_amp}" method="post" class="goodsListForm 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}" /> <a class="add-cart quick" title="Быстро оформить заказ" 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}" {% IF SETTINGS_GOODS_DONT_PUT_TO_CART_MORE_THAN_AVAILABLE %}{% IF goods.MIN_REST_VALUE=0 %}style="display:none;"{% ENDIF %}{% ENDIF %}> <i class="fa fa-shopping-cart"></i> </a> <!--a class="add-cart" title="В корзину" 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}" {% IF SETTINGS_GOODS_DONT_PUT_TO_CART_MORE_THAN_AVAILABLE %}{% IF goods.MIN_REST_VALUE=0 %}style="display:none;"{% ENDIF %}{% ENDIF %}> <span class="icon-basket"></span> </a--> <!-- Если есть возможность добавить товар в избранное --> <!-- Если есть возможность добавить товар в избранное --> {% IF goods.IS_HAS_IN_FAVORITES_LIST %} <a class="add-wishlist added" data-action-is-add="0" data-action-add-url="{FAVORITES_ADD_URL}" data-action-delete-url="{FAVORITES_DELETE_URL}" data-action-add-title="Добавить «{goods.NAME}» в избранное" data-action-delete-title="Убрать «{goods.NAME}» из избранного" title="Убрать «{goods.NAME}» из избранного" href="{FAVORITES_DELETE_URL}?id={goods.MIN_PRICE_NOW_ID}&return_to={CURRENT_URL | urlencode}" ><i class="fa fa-heart"></i></a> {% ELSE %} <a class="add-wishlist" data-action-is-add="1" data-action-add-url="{FAVORITES_ADD_URL}" data-action-delete-url="{FAVORITES_DELETE_URL}" data-action-add-title="Добавить «{goods.NAME}» в избранное" data-action-delete-title="Убрать «{goods.NAME}» из избранного" title="Добавить «{goods.NAME}» в избранное" href="{FAVORITES_ADD_URL}?id={goods.MIN_PRICE_NOW_ID}&return_to={CURRENT_URL | urlencode}" ><i class="fa fa-heart"></i></a> {% ENDIF %} <!-- END Если есть возможность добавить товар в избранное --> <!-- END Если есть возможность добавить товар в избранное --> <!-- Если в тарифном плане подключен модуль сравнения товаров и он не выключен в настройках магазина --> {% IF TARIFF_FEATURE_GOODS_COMPARE && SETTINGS_COMPARE_DISABLE=0 %} {% IF goods.IS_HAS_IN_COMPARE_LIST %} <a class="add-compare added" data-action-is-add="0" data-action-add-url="{COMPARE_ADD_URL}" data-action-delete-url="{COMPARE_DELETE_URL}" data-action-add-title="Добавить «{goods.NAME}» в список сравнения с другими товарами" data-action-delete-title="Убрать «{goods.NAME}» из списка сравнения с другими товарами" data-prodname="{goods.NAME}" data-produrl="{goods.URL}" data-id="{goods.ID}" data-mod-id="{goods.MIN_PRICE_NOW_ID}" title="Убрать «{goods.NAME}» из списка сравнения с другими товарами" href="{COMPARE_DELETE_URL}?id={goods.MIN_PRICE_NOW_ID}&from={goods.GOODS_FROM}&return_to={CURRENT_URL | urlencode}" ><i class="fa fa-retweet"></i></a> {% ELSE %} <a class="add-compare" data-action-is-add="1" data-action-add-url="{COMPARE_ADD_URL}" data-action-delete-url="{COMPARE_DELETE_URL}" data-action-add-title="Добавить «{goods.NAME}» в список сравнения с другими товарами" data-action-delete-title="Убрать «{goods.NAME}» из списка сравнения с другими товарами" data-prodname="{goods.NAME}" data-produrl="{goods.URL}" data-id="{goods.ID}" data-mod-id="{goods.MIN_PRICE_NOW_ID}" title="Добавить «{goods.NAME}» в список сравнения с другими товарами" href="{COMPARE_ADD_URL}?id={goods.MIN_PRICE_NOW_ID}&from={goods.GOODS_FROM}&return_to={CURRENT_URL | urlencode}" ><i class="fa fa-retweet"></i></a> {% ENDIF %} {% ENDIF %} <!-- END Если в тарифном плане подключен модуль сравнения товаров и он не выключен в настройках магазина --> <!-- END Если в тарифном плане подключен модуль сравнения товаров и он не выключен в настройках магазина --> </form> </div><!-- кнопки Купить/Избранное/Сравнение --> </div><!-- товар при наведении --> </div> </div> </div> {% ENDFOR %} </div>
замените на:
{% IF GOODS_VIEW_TYPE=1 %} <!-- Вывод товаров ТАБЛИЦЕЙ --> <div class="products-grid row"> {% FOR goods %} <div class="item"> <div class="item-inner" itemscope itemtype="https://schema.org/Product"> <div class="product rotation"> <div class="default"> <h3 class="product-name"> <a title="{goods.NAME}" href="{goods.URL_MIN_PRICE_NOW | url_amp}">{goods.NAME}</a> </h3> {% IF goods.IS_NEW %} <span class="new"></span> {% ELSEIF goods.IS_TOP %} <span class="best"></span> {% ENDIF %} {% IF goods.MAX_DISCOUNT %} <span class="sale right"></span> {% ENDIF %} {% IF goods.MIN_PRICE_OLD > goods.MIN_PRICE_NOW %} <span class="sale right">Скидка <span class="saving"></span>%</span> {%ENDIF%} <div class="product-img"> <a href="{goods.URL_MIN_PRICE_NOW | url_amp}" class="product-image" title="{goods.NAME}"> <img src="{% IF goods.IMAGE_EMPTY %}{ASSETS_IMAGES_PATH}no-photo-small.png?design=jade{% ELSE %}{goods.IMAGE_MEDIUM}{% ENDIF %}" class="goods-image-small" alt="{goods.NAME}"> </a> </div> <div class="product-description"> <div class="vertical"> <div class="price"> <div class="price-box"> <span class="product-price"> <span class="price">{goods.MIN_PRICE_NOW | money_format}</span> {% IF goods.MIN_PRICE_NOW_WITHOUT_DISCOUNT>goods.MIN_PRICE_NOW %} <span class="price-old">{goods.MIN_PRICE_NOW_WITHOUT_DISCOUNT | money_format}</span> {% ELSEIF goods.MIN_PRICE_OLD>goods.MIN_PRICE_NOW %} <span class="price-old">{goods.MIN_PRICE_OLD | money_format}</span> {% ENDIF %} </span> </div> </div> </div> </div> </div><!-- описание товара --> <div class="product-hover"> <div class="actions"> <form action="{CART_ADD_GOODS_MODIFICATION_URL | url_amp}" method="post" class="goodsListForm 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}" /> <a class="add-cart quick" title="Быстро оформить заказ" 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}" {% IF SETTINGS_GOODS_DONT_PUT_TO_CART_MORE_THAN_AVAILABLE %}{% IF goods.MIN_REST_VALUE=0 %}style="display:none;"{% ENDIF %}{% ENDIF %}>Купить</a> </form> </div><!-- кнопки Купить/Избранное/Сравнение --> </div><!-- товар при наведении --> </div> </div> </div> {% ENDFOR %} </div>
далее зайдите в main.css - найдите:
/* Товары таблицей */ .products-grid {display: flex;justify-content: center;align-items: center;flex-wrap: wrap;text-align: center;} .products-grid .item {display: inline-block;position: relative;margin: 0 5px 20px;text-align: center;} .products-grid .item .item-inner {width: 262px;display: inline-block;margin-bottom: 30px;position: relative;border-bottom: 1px solid #dddddd;} .products-grid .item .product-hover {position: relative;border: 1px solid #dddddd;max-width: 250px;max-height: 257px;} .products-grid .item .product-hover .product-image {display: block;position: relative;line-height: 260px;} .products-grid .item .product-hover .product-image:before {border: 6px solid #ffffff;bottom: 0;content: "";left: 0;position: absolute;z-index: 1;right: 0;top: 0;transition: all 300ms ease 0s;} .products-grid .item:hover .product-hover .product-image:before {border: 1px solid transparent;} .products-grid .item .add-to-links {position: absolute;top: 35%;transform: translateY(-50%);-webkit-transform: translateY(-50%);-moz-transform: translateY(-50%);-o-transform: translateY(-50%);left: -17px;opacity: 0;z-index: 10;} .products-grid .item:hover .add-to-links {opacity: 1;} .products-grid .item .add-to-links a {position: relative;} .products-grid .item .add-to-links .compare, .products-grid .item .add-to-links .wishlist {transform: scale(0.7);} .products-grid .item:hover .add-to-links .compare, .products-grid .item:hover .add-to-links .wishlist {transform: scale(1);} .products-grid .item .add-to-links .compare a, .products-grid .item .add-to-links .wishlist a {margin-top: 10px;} .products-grid .item .item-info {z-index: 1;position: relative;padding: 10px 0 20px;clear: both;margin: 0px;text-align: center;} .products-grid .item .item-info .product-name a {font-size: 16px;font-weight: 400;letter-spacing: 0.3px;line-height: 20px;text-transform: capitalize;display: block;height: 20px;overflow: hidden;white-space: nowrap;text-overflow: ellipsis;} .products-grid .item .item-info .price-box {padding: 0;line-height: normal;} .products-grid .item .item-info .price-box span.price {display: inline-block;margin: 0 10px 0 0;} .products-grid .item .item-info .rating-hover {position: absolute;margin: 0 0 30px 0;bottom: -30px;z-index: 1;opacity: 0;width: 100%;} .products-grid .item:hover .item-info .rating-hover {opacity: 1;bottom: -6px;background: #ffffff;} .products-grid .item .item-info .ratings {margin: auto;text-align: center;} .products-grid .item .item-info .ratings .rating-box {margin: auto;text-align: center;} .products-grid .item .actions {bottom: -17px;color: #ffffff;left: 0;position: absolute;text-align: center;width: 100%;z-index: 1;padding: 0px 0;} .products-grid .item .actions .button {text-transform: uppercase;} .products-grid .item .product-hover {position: absolute;border: 1px solid #dddddd;max-width: 100%;max-height: 100%;} .product {-webkit-border-radius: 3px;-moz-border-radius: 3px;border-radius: 3px;display: inline-block;float: none;margin: 0 0 40px;/*min-width: 240px;*/overflow: hidden;position: relative;text-align: left;vertical-align: top;} .product .default {-webkit-border-radius: 3px;-moz-border-radius: 3px;border-radius: 3px;overflow: hidden;position: relative;} .product-img {width: 270px;height: 270px;display:table-cell;vertical-align:middle;text-align:center;background-color:#f2f2f2;} .product-icon img {display:block;margin:0 auto;} .product .product-image {display: block;line-height: 0;margin: 0;} .product-image {display: inline-block;line-height: 0;position: relative;} .product-image > img {-webkit-transition: opacity 0.2s linear;transition: opacity 0.2s linear;} .product .product-description {background: #f2f2f2;border-top: 1px solid #e1e1e1;color: #505050;display: table;font-size: 13px;height: 100px;line-height: 18px;position: relative;text-align: center;width: 100.2%;z-index: 1;} .product .product-description .vertical {display: table-cell;height: 100px;padding-left: 5px;padding-right: 5px;vertical-align: middle;} .product .product-name {color: #1e1e1e;font-size: 15px;font-weight: normal;line-height: 16px;margin: 0 0 4px;text-transform: none;max-height:50px;overflow:hidden;} .product-name a {color: #1e1e1e;text-decoration: none;-webkit-transition: opacity .2s linear;transition: opacity .2s linear;} .product-name a:hover {opacity: 0.8;filter: alpha(opacity=80);-webkit-transition: opacity .2s linear;transition: opacity .2s linear;} .product .price {font-weight: bold;font-size: 20px;} .price-old {color: #7f7f7f;display: inline-block;margin-right: 6px;position: relative;text-decoration:line-through;} .product .not-rotation-actions {background: #00c59c;bottom:0;left: 0;right: 0;padding: 9px 10px;position: absolute;text-align: center;-webkit-transition: bottom .2s linear;transition: bottom .2s linear;z-index: 1;height:72px;width:99.9%;} .product:hover .not-rotation-actions {bottom: 100px;-webkit-transition: bottom .2s linear;transition: bottom .2s linear;} .col-md-1.product .product-hover, .col-md-2.product .product-hover, .col-md-3.product .product-hover, .col-md-4.product .product-hover, .col-md-5.product .product-hover, .col-md-6.product .product-hover, .col-md-7.product .product-hover, .col-md-8.product .product-hover, .col-md-9.product .product-hover, .col-md-10.product .product-hover, .col-md-11.product .product-hover, .col-md-11.product .product-hover {left: 15px;right: 15px;} .product .product-hover {height:100%;background-color: #ffb300;-webkit-border-radius: 3px;-moz-border-radius: 3px;border-radius: 3px;-webkit-box-sizing: border-box;-moz-box-sizing: border-box;box-sizing: border-box;bottom: 0;color: #7f7f7f;display: none;font-size: 12px;line-height: 20px;left: 0;padding: 16px 20px 90px;position: absolute;right: 0;top: 0;width: auto !important;} .product:hover .product-hover {display: block;-webkit-animation: fadeIn 0.8s;animation: fadeIn 0.8s;} .product .product-hover .product-name {font-size: 13px;font-weight: normal;line-height: 18px;margin: 0 0 7px;} .product .product-hover .product-name a {color: #fff;-webkit-transition: opacity .2s linear;transition: opacity .2s linear;} .product .product-hover .product-name a:hover {opacity: 0.8;filter: alpha(opacity=80);-webkit-transition: opacity .2s linear;transition: opacity .2s linear;text-decoration: none;} .product .product-hover .price {font-size: 18px;font-weight: normal;line-height: 1;margin: 0 0 5px;color:#fff;} .product .product-hover .short-description {color: #ffffff;height: 110px;overflow-y: hidden;width: 100%;padding: 5px;} .product .product-hover .product-image {-webkit-border-radius: 2px;-moz-border-radius: 2px;border-radius: 2px;display: block;float: right;line-height: 0;margin: 4px 0 0 5px;padding: 0;position: relative;z-index: 1;} .product .product-hover .product-image img {-webkit-border-radius: 2px;-moz-border-radius: 2px;border-radius: 2px;} .product .product-hover .actions {bottom: 0px;left: 0;position: absolute;text-align: center;width: 100%;} .product .actions a {background: #fff;display: inline-block;height: 54px;margin: 0 -2px;padding-top: 19px;text-align: center;text-decoration: none;vertical-align: top;width: 54px;-webkit-transition: all .2s linear;transition: all .2s linear;} .add-cart {cursor:pointer;} .product .actions .add-cart {-webkit-border-radius: 3px 0 0 3px;-moz-border-radius: 3px 0 0 3px;border-radius: 3px 0 0 3px;} .product .actions .add-compare {-webkit-border-radius: 0 3px 3px 0;-moz-border-radius: 0 3px 3px 0;border-radius: 0 3px 3px 0;} .product .actions a:hover {background: #f2f2f2;-webkit-transition: all .2s linear;transition: all .2s linear;} .product.rotation, .employee.rotation {overflow: visible;border: 1px solid #3c7b20;background: #f2f2f2;} .rotation {background: none;-webkit-perspective: 600px;-moz-perspective: 600px;perspective: 600px;} .rotation .default, .rotation .front-end {overflow: hidden;position: relative;-webkit-transform: rotateX(0deg) rotateY(0deg);-webkit-transform-style: preserve-3d;-webkit-backface-visibility: hidden;-moz-transform: rotateX(0deg) rotateY(0deg);-moz-transform-style: preserve-3d;-moz-backface-visibility: hidden;transform: rotateY(0deg);-webkit-transition: all .6s ease-in-out;-moz-transition: all .6s ease-in-out;transition: all .6s ease-in-out;z-index: 24;} .rotation .default {-webkit-border-radius: 3px;-moz-border-radius: 3px;border-radius: 3px;} .rotation.hover .default, .rotation.hover .front-end {z-index: 35;-webkit-transform: rotateY(180deg);-moz-transform: rotateY(180deg);transform: rotateY(180deg);-webkit-transition-delay: .2s;-moz-transition-delay: .2s;transition-delay: .2s;} .rotation .product-hover, .rotation .back-end {display: block;height: inherit;-webkit-transform: rotateY(-180deg);-webkit-transform-style: preserve-3d;-webkit-backface-visibility: hidden;-moz-transform: rotateY(-180deg);-moz-transform-style: preserve-3d;-moz-backface-visibility: hidden;transform: rotateY(-180deg);-moz-transition: all .6s ease-in-out;-webkit-transition: all .6s ease-in-out;transition: all .6s ease-in-out;width: 100%;z-index: 13;} .rotation.hover .product-hover, .rotation.hover .back-end {z-index: 46;-webkit-transform: rotateX(0deg) rotateY(0deg);-moz-transform: rotateX(0deg) rotateY(0deg);transform: rotateY(0deg);-webkit-transition-delay: .2s;-moz-transition-delay: .2s;transition-delay: .2s;} .rotation .product-image:hover > img {opacity: 1;filter: alpha(opacity=100);} .item .default .sale{display:block;position: absolute;top: 10px;left: 10px;background: red; color: #fff;padding: 10px;z-index:10;}
замените на:
/* Товары таблицей */ .products-grid {display: flex;justify-content: center;align-items: center;flex-wrap: wrap;text-align: center;} .products-grid .item {display: inline-block;position: relative;margin: 0 5px 20px;text-align: center;width: 280px;} .products-grid .item .item-inner {display: inline-block;position: relative;} .products-grid .item .product-hover .product-image {display: block;position: relative;line-height: 260px;} .products-grid .item .product-hover .product-image:before {border: 6px solid #ffffff;bottom: 0;content: "";left: 0;position: absolute;z-index: 1;right: 0;top: 0;transition: all 300ms ease 0s;} .products-grid .item:hover .product-hover .product-image:before {border: 1px solid transparent;} .products-grid .item .add-to-links {position: absolute;top: 35%;transform: translateY(-50%);-webkit-transform: translateY(-50%);-moz-transform: translateY(-50%);-o-transform: translateY(-50%);left: -17px;opacity: 0;z-index: 10;} .products-grid .item:hover .add-to-links {opacity: 1;} .products-grid .item .add-to-links a {position: relative;} .products-grid .item .add-to-links .compare, .products-grid .item .add-to-links .wishlist {transform: scale(0.7);} .products-grid .item:hover .add-to-links .compare, .products-grid .item:hover .add-to-links .wishlist {transform: scale(1);} .products-grid .item .add-to-links .compare a, .products-grid .item .add-to-links .wishlist a {margin-top: 10px;} .products-grid .item .item-info {z-index: 1;position: relative;padding: 10px 0 20px;clear: both;margin: 0px;text-align: center;} .products-grid .item .item-info .product-name a {font-size: 16px;font-weight: 400;letter-spacing: 0.3px;line-height: 20px;text-transform: capitalize;display: block;height: 20px;overflow: hidden;white-space: nowrap;text-overflow: ellipsis;} .products-grid .item .item-info .price-box {padding: 0;line-height: normal;} .products-grid .item .item-info .price-box span.price {display: inline-block;margin: 0 10px 0 0;} .products-grid .item .item-info .rating-hover {position: absolute;margin: 0 0 30px 0;bottom: -30px;z-index: 1;opacity: 0;width: 100%;} .products-grid .item:hover .item-info .rating-hover {opacity: 1;bottom: -6px;background: #ffffff;} .products-grid .item .item-info .ratings {margin: auto;text-align: center;} .products-grid .item .item-info .ratings .rating-box {margin: auto;text-align: center;} .products-grid .item .actions {bottom: -17px;color: #ffffff;left: 0;position: absolute;text-align: center;width: 100%;z-index: 1;padding: 0px 0;} .products-grid .item .actions .button {text-transform: uppercase;} .products-grid .item .product-hover {position: absolute;max-height: 54px;} .product {-webkit-border-radius: 3px;-moz-border-radius: 3px;border-radius: 3px;display: inline-block;float: none;margin: 0;position: relative;text-align: left;vertical-align: top;} .product .default {-webkit-border-radius: 3px;-moz-border-radius: 3px;border-radius: 3px;overflow: hidden;position: relative;} .product-img {width: 270px;height: 270px;display:table-cell;vertical-align:middle;text-align:center;background-color:#f2f2f2;} .product-icon img {display:block;margin:0 auto;} .product .product-image {display: block;line-height: 0;margin: 0;} .product-image {display: inline-block;line-height: 0;position: relative;} .product-image > img {-webkit-transition: opacity 0.2s linear;transition: opacity 0.2s linear;} .product .product-description {background: #f2f2f2;border-top: 1px solid #e1e1e1;color: #505050;display: table;font-size: 13px;height: 54px;line-height: 18px;position: relative;text-align: center;width: 100.2%;z-index: 1;} .product .product-description .vertical {display: table-cell;height: 54px;padding-left: 5px;padding-right: 5px;vertical-align: middle;} .product .product-name {color: #ffffff;font-size: 15px;font-weight: normal;line-height: 16px;margin: 0 0 4px;text-transform: none;height:50px;overflow:hidden;background: #3e7a25;padding: 10px;} .product-name a {color: #ffffff;text-decoration: none;-webkit-transition: opacity .2s linear;transition: opacity .2s linear;} .product-name a:hover {opacity: 0.8;filter: alpha(opacity=80);-webkit-transition: opacity .2s linear;transition: opacity .2s linear;} .product .price {font-weight: bold;font-size: 20px;} .price-old {color: #7f7f7f;display: inline-block;margin-right: 6px;position: relative;text-decoration:line-through;} .product .not-rotation-actions {background: #00c59c;bottom:0;left: 0;right: 0;padding: 9px 10px;position: absolute;text-align: center;-webkit-transition: bottom .2s linear;transition: bottom .2s linear;z-index: 1;height:72px;width:99.9%;} .product:hover .not-rotation-actions {bottom: 100px;-webkit-transition: bottom .2s linear;transition: bottom .2s linear;} .col-md-1.product .product-hover, .col-md-2.product .product-hover, .col-md-3.product .product-hover, .col-md-4.product .product-hover, .col-md-5.product .product-hover, .col-md-6.product .product-hover, .col-md-7.product .product-hover, .col-md-8.product .product-hover, .col-md-9.product .product-hover, .col-md-10.product .product-hover, .col-md-11.product .product-hover, .col-md-11.product .product-hover {left: 15px;right: 15px;} .product .product-hover {-webkit-box-sizing: border-box;-moz-box-sizing: border-box;box-sizing: border-box;display: none;left: 0;padding: 0;position: absolute;right: 0;bottom: 0;width: 100%;} .product:hover .product-hover {display: block;-webkit-animation: fadeIn 0.8s;animation: fadeIn 0.8s;} .product .product-hover .actions {bottom: 0px;left: 0;position: absolute;text-align: center;width: 100%;} .product .actions a {background: #3e7a25;display: inline-block;height: 54px;margin: 0 -2px;padding-top: 19px;text-align: center;text-decoration: none;vertical-align: top;width: 100%;-webkit-transition: all .2s linear;transition: all .2s linear;color: #fff;text-transform: uppercase;font-size: 26px;} .add-cart {cursor:pointer;} .product .actions .add-cart {-webkit-border-radius: 3px 0 0 3px;-moz-border-radius: 3px 0 0 3px;border-radius: 3px 0 0 3px;} .product .actions a:hover {background: #f2f2f2;-webkit-transition: all .2s linear;transition: all .2s linear;} .product.rotation, .employee.rotation {overflow: visible;border: 1px solid #3c7b20;background: #f2f2f2;} .rotation {background: none;-webkit-perspective: 600px;-moz-perspective: 600px;perspective: 600px;} .rotation .default, .rotation .front-end {overflow: hidden;position: relative;-webkit-transform: rotateX(0deg) rotateY(0deg);-webkit-transform-style: preserve-3d;-webkit-backface-visibility: hidden;-moz-transform: rotateX(0deg) rotateY(0deg);-moz-transform-style: preserve-3d;-moz-backface-visibility: hidden;transform: rotateY(0deg);-webkit-transition: all .6s ease-in-out;-moz-transition: all .6s ease-in-out;transition: all .6s ease-in-out;z-index: 24;} .rotation .default {-webkit-border-radius: 3px;-moz-border-radius: 3px;border-radius: 3px;} .rotation .product-hover, .rotation .back-end {display: block;height: inherit;-webkit-transform: rotateY(-180deg);-webkit-transform-style: preserve-3d;-webkit-backface-visibility: hidden;-moz-transform: rotateY(-180deg);-moz-transform-style: preserve-3d;-moz-backface-visibility: hidden;transform: rotateY(-180deg);-moz-transition: all .6s ease-in-out;-webkit-transition: all .6s ease-in-out;transition: all .6s ease-in-out;} .rotation.hover .product-hover, .rotation.hover .back-end {z-index: 46;-webkit-transform: rotateX(0deg) rotateY(0deg);-moz-transform: rotateX(0deg) rotateY(0deg);transform: rotateY(0deg);-webkit-transition-delay: .2s;-moz-transition-delay: .2s;transition-delay: .2s;} .rotation .product-image:hover > img {opacity: 1;filter: alpha(opacity=100);} .item .default .sale{display:block;position: absolute;top: 10px;left: 10px;background: red; color: #fff;padding: 10px;z-index:10;}
После изменений почистите кэш и проверьте товары в категории.
#3
Отправлено 25 Февраль 2019 - 20:58
Vaccina (21 Февраль 2019 - 04:25) писал:
Здравствуйте.
Зайдите в раздел Сайт - Редактор шаблонов - Товары - найдите:
замените на:
далее зайдите в main.css - найдите:
замените на:
После изменений почистите кэш и проверьте товары в категории.
Зайдите в раздел Сайт - Редактор шаблонов - Товары - найдите:
{% IF GOODS_VIEW_TYPE=1 %} <!-- Вывод товаров ТАБЛИЦЕЙ --> <div class="products-grid row"> {% FOR goods %} <div class="item"> <div class="item-inner" itemscope itemtype="https://schema.org/Product"> <div class="product rotation"> <div class="default"> {% IF goods.IS_NEW %} <span class="new"></span> {% ELSEIF goods.IS_TOP %} <span class="best"></span> {% ENDIF %} {% IF goods.MAX_DISCOUNT %} <span class="sale right"></span> {% ENDIF %} {% IF goods.MIN_PRICE_OLD > goods.MIN_PRICE_NOW %} <span class="sale right">Скидка <span class="saving"></span>%</span> {%ENDIF%} <div class="product-img"> <a href="{goods.URL_MIN_PRICE_NOW | url_amp}" class="product-image" title="{goods.NAME}"> <img src="{% IF goods.IMAGE_EMPTY %}{ASSETS_IMAGES_PATH}no-photo-small.png?design=jade{% ELSE %}{goods.IMAGE_MEDIUM}{% ENDIF %}" class="goods-image-small" alt="{goods.NAME}"> </a> </div> <div class="product-description"> <div class="vertical"> <h3 class="product-name"> <a title="{goods.NAME}" href="{goods.URL_MIN_PRICE_NOW | url_amp}">{goods.NAME}</a> </h3> <div class="price"> <div class="price-box"> <span class="product-price"> <span class="price">{goods.MIN_PRICE_NOW | money_format}</span> {% IF goods.MIN_PRICE_NOW_WITHOUT_DISCOUNT>goods.MIN_PRICE_NOW %} <span class="price-old">{goods.MIN_PRICE_NOW_WITHOUT_DISCOUNT | money_format}</span> {% ELSEIF goods.MIN_PRICE_OLD>goods.MIN_PRICE_NOW %} <span class="price-old">{goods.MIN_PRICE_OLD | money_format}</span> {% ENDIF %} </span> </div> </div> </div> </div> </div><!-- описание товара --> <div class="product-hover"> <h3 class="product-name"> <a title="{goods.NAME}" href="{goods.URL_MIN_PRICE_NOW | url_amp}">{goods.NAME}</a> </h3> <div class="price"> <div class="price-box"> <span class="product-price"> <span class="price">{goods.MIN_PRICE_NOW | money_format}</span> </span> </div> </div> <div class="product-icon"> <a href="{goods.URL_MIN_PRICE_NOW | url_amp}"> <img src="{% IF goods.IMAGE_EMPTY %}{ASSETS_IMAGES_PATH}no-photo-small.png?design=jade{% ELSE %}{goods.IMAGE_ICON}{% ENDIF %}" class="goods-image-icon" alt="{goods.NAME}"> </a> </div> <div class="short-description"> <p>{goods.DESCRIPTION_SHORT}</p> </div> <div class="actions"> <form action="{CART_ADD_GOODS_MODIFICATION_URL | url_amp}" method="post" class="goodsListForm 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}" /> <a class="add-cart quick" title="Быстро оформить заказ" 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}" {% IF SETTINGS_GOODS_DONT_PUT_TO_CART_MORE_THAN_AVAILABLE %}{% IF goods.MIN_REST_VALUE=0 %}style="display:none;"{% ENDIF %}{% ENDIF %}> <i class="fa fa-shopping-cart"></i> </a> <!--a class="add-cart" title="В корзину" 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}" {% IF SETTINGS_GOODS_DONT_PUT_TO_CART_MORE_THAN_AVAILABLE %}{% IF goods.MIN_REST_VALUE=0 %}style="display:none;"{% ENDIF %}{% ENDIF %}> <span class="icon-basket"></span> </a--> <!-- Если есть возможность добавить товар в избранное --> <!-- Если есть возможность добавить товар в избранное --> {% IF goods.IS_HAS_IN_FAVORITES_LIST %} <a class="add-wishlist added" data-action-is-add="0" data-action-add-url="{FAVORITES_ADD_URL}" data-action-delete-url="{FAVORITES_DELETE_URL}" data-action-add-title="Добавить «{goods.NAME}» в избранное" data-action-delete-title="Убрать «{goods.NAME}» из избранного" title="Убрать «{goods.NAME}» из избранного" href="{FAVORITES_DELETE_URL}?id={goods.MIN_PRICE_NOW_ID}&return_to={CURRENT_URL | urlencode}" ><i class="fa fa-heart"></i></a> {% ELSE %} <a class="add-wishlist" data-action-is-add="1" data-action-add-url="{FAVORITES_ADD_URL}" data-action-delete-url="{FAVORITES_DELETE_URL}" data-action-add-title="Добавить «{goods.NAME}» в избранное" data-action-delete-title="Убрать «{goods.NAME}» из избранного" title="Добавить «{goods.NAME}» в избранное" href="{FAVORITES_ADD_URL}?id={goods.MIN_PRICE_NOW_ID}&return_to={CURRENT_URL | urlencode}" ><i class="fa fa-heart"></i></a> {% ENDIF %} <!-- END Если есть возможность добавить товар в избранное --> <!-- END Если есть возможность добавить товар в избранное --> <!-- Если в тарифном плане подключен модуль сравнения товаров и он не выключен в настройках магазина --> {% IF TARIFF_FEATURE_GOODS_COMPARE && SETTINGS_COMPARE_DISABLE=0 %} {% IF goods.IS_HAS_IN_COMPARE_LIST %} <a class="add-compare added" data-action-is-add="0" data-action-add-url="{COMPARE_ADD_URL}" data-action-delete-url="{COMPARE_DELETE_URL}" data-action-add-title="Добавить «{goods.NAME}» в список сравнения с другими товарами" data-action-delete-title="Убрать «{goods.NAME}» из списка сравнения с другими товарами" data-prodname="{goods.NAME}" data-produrl="{goods.URL}" data-id="{goods.ID}" data-mod-id="{goods.MIN_PRICE_NOW_ID}" title="Убрать «{goods.NAME}» из списка сравнения с другими товарами" href="{COMPARE_DELETE_URL}?id={goods.MIN_PRICE_NOW_ID}&from={goods.GOODS_FROM}&return_to={CURRENT_URL | urlencode}" ><i class="fa fa-retweet"></i></a> {% ELSE %} <a class="add-compare" data-action-is-add="1" data-action-add-url="{COMPARE_ADD_URL}" data-action-delete-url="{COMPARE_DELETE_URL}" data-action-add-title="Добавить «{goods.NAME}» в список сравнения с другими товарами" data-action-delete-title="Убрать «{goods.NAME}» из списка сравнения с другими товарами" data-prodname="{goods.NAME}" data-produrl="{goods.URL}" data-id="{goods.ID}" data-mod-id="{goods.MIN_PRICE_NOW_ID}" title="Добавить «{goods.NAME}» в список сравнения с другими товарами" href="{COMPARE_ADD_URL}?id={goods.MIN_PRICE_NOW_ID}&from={goods.GOODS_FROM}&return_to={CURRENT_URL | urlencode}" ><i class="fa fa-retweet"></i></a> {% ENDIF %} {% ENDIF %} <!-- END Если в тарифном плане подключен модуль сравнения товаров и он не выключен в настройках магазина --> <!-- END Если в тарифном плане подключен модуль сравнения товаров и он не выключен в настройках магазина --> </form> </div><!-- кнопки Купить/Избранное/Сравнение --> </div><!-- товар при наведении --> </div> </div> </div> {% ENDFOR %} </div>
замените на:
{% IF GOODS_VIEW_TYPE=1 %} <!-- Вывод товаров ТАБЛИЦЕЙ --> <div class="products-grid row"> {% FOR goods %} <div class="item"> <div class="item-inner" itemscope itemtype="https://schema.org/Product"> <div class="product rotation"> <div class="default"> <h3 class="product-name"> <a title="{goods.NAME}" href="{goods.URL_MIN_PRICE_NOW | url_amp}">{goods.NAME}</a> </h3> {% IF goods.IS_NEW %} <span class="new"></span> {% ELSEIF goods.IS_TOP %} <span class="best"></span> {% ENDIF %} {% IF goods.MAX_DISCOUNT %} <span class="sale right"></span> {% ENDIF %} {% IF goods.MIN_PRICE_OLD > goods.MIN_PRICE_NOW %} <span class="sale right">Скидка <span class="saving"></span>%</span> {%ENDIF%} <div class="product-img"> <a href="{goods.URL_MIN_PRICE_NOW | url_amp}" class="product-image" title="{goods.NAME}"> <img src="{% IF goods.IMAGE_EMPTY %}{ASSETS_IMAGES_PATH}no-photo-small.png?design=jade{% ELSE %}{goods.IMAGE_MEDIUM}{% ENDIF %}" class="goods-image-small" alt="{goods.NAME}"> </a> </div> <div class="product-description"> <div class="vertical"> <div class="price"> <div class="price-box"> <span class="product-price"> <span class="price">{goods.MIN_PRICE_NOW | money_format}</span> {% IF goods.MIN_PRICE_NOW_WITHOUT_DISCOUNT>goods.MIN_PRICE_NOW %} <span class="price-old">{goods.MIN_PRICE_NOW_WITHOUT_DISCOUNT | money_format}</span> {% ELSEIF goods.MIN_PRICE_OLD>goods.MIN_PRICE_NOW %} <span class="price-old">{goods.MIN_PRICE_OLD | money_format}</span> {% ENDIF %} </span> </div> </div> </div> </div> </div><!-- описание товара --> <div class="product-hover"> <div class="actions"> <form action="{CART_ADD_GOODS_MODIFICATION_URL | url_amp}" method="post" class="goodsListForm 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}" /> <a class="add-cart quick" title="Быстро оформить заказ" 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}" {% IF SETTINGS_GOODS_DONT_PUT_TO_CART_MORE_THAN_AVAILABLE %}{% IF goods.MIN_REST_VALUE=0 %}style="display:none;"{% ENDIF %}{% ENDIF %}>Купить</a> </form> </div><!-- кнопки Купить/Избранное/Сравнение --> </div><!-- товар при наведении --> </div> </div> </div> {% ENDFOR %} </div>
далее зайдите в main.css - найдите:
/* Товары таблицей */ .products-grid {display: flex;justify-content: center;align-items: center;flex-wrap: wrap;text-align: center;} .products-grid .item {display: inline-block;position: relative;margin: 0 5px 20px;text-align: center;} .products-grid .item .item-inner {width: 262px;display: inline-block;margin-bottom: 30px;position: relative;border-bottom: 1px solid #dddddd;} .products-grid .item .product-hover {position: relative;border: 1px solid #dddddd;max-width: 250px;max-height: 257px;} .products-grid .item .product-hover .product-image {display: block;position: relative;line-height: 260px;} .products-grid .item .product-hover .product-image:before {border: 6px solid #ffffff;bottom: 0;content: "";left: 0;position: absolute;z-index: 1;right: 0;top: 0;transition: all 300ms ease 0s;} .products-grid .item:hover .product-hover .product-image:before {border: 1px solid transparent;} .products-grid .item .add-to-links {position: absolute;top: 35%;transform: translateY(-50%);-webkit-transform: translateY(-50%);-moz-transform: translateY(-50%);-o-transform: translateY(-50%);left: -17px;opacity: 0;z-index: 10;} .products-grid .item:hover .add-to-links {opacity: 1;} .products-grid .item .add-to-links a {position: relative;} .products-grid .item .add-to-links .compare, .products-grid .item .add-to-links .wishlist {transform: scale(0.7);} .products-grid .item:hover .add-to-links .compare, .products-grid .item:hover .add-to-links .wishlist {transform: scale(1);} .products-grid .item .add-to-links .compare a, .products-grid .item .add-to-links .wishlist a {margin-top: 10px;} .products-grid .item .item-info {z-index: 1;position: relative;padding: 10px 0 20px;clear: both;margin: 0px;text-align: center;} .products-grid .item .item-info .product-name a {font-size: 16px;font-weight: 400;letter-spacing: 0.3px;line-height: 20px;text-transform: capitalize;display: block;height: 20px;overflow: hidden;white-space: nowrap;text-overflow: ellipsis;} .products-grid .item .item-info .price-box {padding: 0;line-height: normal;} .products-grid .item .item-info .price-box span.price {display: inline-block;margin: 0 10px 0 0;} .products-grid .item .item-info .rating-hover {position: absolute;margin: 0 0 30px 0;bottom: -30px;z-index: 1;opacity: 0;width: 100%;} .products-grid .item:hover .item-info .rating-hover {opacity: 1;bottom: -6px;background: #ffffff;} .products-grid .item .item-info .ratings {margin: auto;text-align: center;} .products-grid .item .item-info .ratings .rating-box {margin: auto;text-align: center;} .products-grid .item .actions {bottom: -17px;color: #ffffff;left: 0;position: absolute;text-align: center;width: 100%;z-index: 1;padding: 0px 0;} .products-grid .item .actions .button {text-transform: uppercase;} .products-grid .item .product-hover {position: absolute;border: 1px solid #dddddd;max-width: 100%;max-height: 100%;} .product {-webkit-border-radius: 3px;-moz-border-radius: 3px;border-radius: 3px;display: inline-block;float: none;margin: 0 0 40px;/*min-width: 240px;*/overflow: hidden;position: relative;text-align: left;vertical-align: top;} .product .default {-webkit-border-radius: 3px;-moz-border-radius: 3px;border-radius: 3px;overflow: hidden;position: relative;} .product-img {width: 270px;height: 270px;display:table-cell;vertical-align:middle;text-align:center;background-color:#f2f2f2;} .product-icon img {display:block;margin:0 auto;} .product .product-image {display: block;line-height: 0;margin: 0;} .product-image {display: inline-block;line-height: 0;position: relative;} .product-image > img {-webkit-transition: opacity 0.2s linear;transition: opacity 0.2s linear;} .product .product-description {background: #f2f2f2;border-top: 1px solid #e1e1e1;color: #505050;display: table;font-size: 13px;height: 100px;line-height: 18px;position: relative;text-align: center;width: 100.2%;z-index: 1;} .product .product-description .vertical {display: table-cell;height: 100px;padding-left: 5px;padding-right: 5px;vertical-align: middle;} .product .product-name {color: #1e1e1e;font-size: 15px;font-weight: normal;line-height: 16px;margin: 0 0 4px;text-transform: none;max-height:50px;overflow:hidden;} .product-name a {color: #1e1e1e;text-decoration: none;-webkit-transition: opacity .2s linear;transition: opacity .2s linear;} .product-name a:hover {opacity: 0.8;filter: alpha(opacity=80);-webkit-transition: opacity .2s linear;transition: opacity .2s linear;} .product .price {font-weight: bold;font-size: 20px;} .price-old {color: #7f7f7f;display: inline-block;margin-right: 6px;position: relative;text-decoration:line-through;} .product .not-rotation-actions {background: #00c59c;bottom:0;left: 0;right: 0;padding: 9px 10px;position: absolute;text-align: center;-webkit-transition: bottom .2s linear;transition: bottom .2s linear;z-index: 1;height:72px;width:99.9%;} .product:hover .not-rotation-actions {bottom: 100px;-webkit-transition: bottom .2s linear;transition: bottom .2s linear;} .col-md-1.product .product-hover, .col-md-2.product .product-hover, .col-md-3.product .product-hover, .col-md-4.product .product-hover, .col-md-5.product .product-hover, .col-md-6.product .product-hover, .col-md-7.product .product-hover, .col-md-8.product .product-hover, .col-md-9.product .product-hover, .col-md-10.product .product-hover, .col-md-11.product .product-hover, .col-md-11.product .product-hover {left: 15px;right: 15px;} .product .product-hover {height:100%;background-color: #ffb300;-webkit-border-radius: 3px;-moz-border-radius: 3px;border-radius: 3px;-webkit-box-sizing: border-box;-moz-box-sizing: border-box;box-sizing: border-box;bottom: 0;color: #7f7f7f;display: none;font-size: 12px;line-height: 20px;left: 0;padding: 16px 20px 90px;position: absolute;right: 0;top: 0;width: auto !important;} .product:hover .product-hover {display: block;-webkit-animation: fadeIn 0.8s;animation: fadeIn 0.8s;} .product .product-hover .product-name {font-size: 13px;font-weight: normal;line-height: 18px;margin: 0 0 7px;} .product .product-hover .product-name a {color: #fff;-webkit-transition: opacity .2s linear;transition: opacity .2s linear;} .product .product-hover .product-name a:hover {opacity: 0.8;filter: alpha(opacity=80);-webkit-transition: opacity .2s linear;transition: opacity .2s linear;text-decoration: none;} .product .product-hover .price {font-size: 18px;font-weight: normal;line-height: 1;margin: 0 0 5px;color:#fff;} .product .product-hover .short-description {color: #ffffff;height: 110px;overflow-y: hidden;width: 100%;padding: 5px;} .product .product-hover .product-image {-webkit-border-radius: 2px;-moz-border-radius: 2px;border-radius: 2px;display: block;float: right;line-height: 0;margin: 4px 0 0 5px;padding: 0;position: relative;z-index: 1;} .product .product-hover .product-image img {-webkit-border-radius: 2px;-moz-border-radius: 2px;border-radius: 2px;} .product .product-hover .actions {bottom: 0px;left: 0;position: absolute;text-align: center;width: 100%;} .product .actions a {background: #fff;display: inline-block;height: 54px;margin: 0 -2px;padding-top: 19px;text-align: center;text-decoration: none;vertical-align: top;width: 54px;-webkit-transition: all .2s linear;transition: all .2s linear;} .add-cart {cursor:pointer;} .product .actions .add-cart {-webkit-border-radius: 3px 0 0 3px;-moz-border-radius: 3px 0 0 3px;border-radius: 3px 0 0 3px;} .product .actions .add-compare {-webkit-border-radius: 0 3px 3px 0;-moz-border-radius: 0 3px 3px 0;border-radius: 0 3px 3px 0;} .product .actions a:hover {background: #f2f2f2;-webkit-transition: all .2s linear;transition: all .2s linear;} .product.rotation, .employee.rotation {overflow: visible;border: 1px solid #3c7b20;background: #f2f2f2;} .rotation {background: none;-webkit-perspective: 600px;-moz-perspective: 600px;perspective: 600px;} .rotation .default, .rotation .front-end {overflow: hidden;position: relative;-webkit-transform: rotateX(0deg) rotateY(0deg);-webkit-transform-style: preserve-3d;-webkit-backface-visibility: hidden;-moz-transform: rotateX(0deg) rotateY(0deg);-moz-transform-style: preserve-3d;-moz-backface-visibility: hidden;transform: rotateY(0deg);-webkit-transition: all .6s ease-in-out;-moz-transition: all .6s ease-in-out;transition: all .6s ease-in-out;z-index: 24;} .rotation .default {-webkit-border-radius: 3px;-moz-border-radius: 3px;border-radius: 3px;} .rotation.hover .default, .rotation.hover .front-end {z-index: 35;-webkit-transform: rotateY(180deg);-moz-transform: rotateY(180deg);transform: rotateY(180deg);-webkit-transition-delay: .2s;-moz-transition-delay: .2s;transition-delay: .2s;} .rotation .product-hover, .rotation .back-end {display: block;height: inherit;-webkit-transform: rotateY(-180deg);-webkit-transform-style: preserve-3d;-webkit-backface-visibility: hidden;-moz-transform: rotateY(-180deg);-moz-transform-style: preserve-3d;-moz-backface-visibility: hidden;transform: rotateY(-180deg);-moz-transition: all .6s ease-in-out;-webkit-transition: all .6s ease-in-out;transition: all .6s ease-in-out;width: 100%;z-index: 13;} .rotation.hover .product-hover, .rotation.hover .back-end {z-index: 46;-webkit-transform: rotateX(0deg) rotateY(0deg);-moz-transform: rotateX(0deg) rotateY(0deg);transform: rotateY(0deg);-webkit-transition-delay: .2s;-moz-transition-delay: .2s;transition-delay: .2s;} .rotation .product-image:hover > img {opacity: 1;filter: alpha(opacity=100);} .item .default .sale{display:block;position: absolute;top: 10px;left: 10px;background: red; color: #fff;padding: 10px;z-index:10;}
замените на:
/* Товары таблицей */ .products-grid {display: flex;justify-content: center;align-items: center;flex-wrap: wrap;text-align: center;} .products-grid .item {display: inline-block;position: relative;margin: 0 5px 20px;text-align: center;width: 280px;} .products-grid .item .item-inner {display: inline-block;position: relative;} .products-grid .item .product-hover .product-image {display: block;position: relative;line-height: 260px;} .products-grid .item .product-hover .product-image:before {border: 6px solid #ffffff;bottom: 0;content: "";left: 0;position: absolute;z-index: 1;right: 0;top: 0;transition: all 300ms ease 0s;} .products-grid .item:hover .product-hover .product-image:before {border: 1px solid transparent;} .products-grid .item .add-to-links {position: absolute;top: 35%;transform: translateY(-50%);-webkit-transform: translateY(-50%);-moz-transform: translateY(-50%);-o-transform: translateY(-50%);left: -17px;opacity: 0;z-index: 10;} .products-grid .item:hover .add-to-links {opacity: 1;} .products-grid .item .add-to-links a {position: relative;} .products-grid .item .add-to-links .compare, .products-grid .item .add-to-links .wishlist {transform: scale(0.7);} .products-grid .item:hover .add-to-links .compare, .products-grid .item:hover .add-to-links .wishlist {transform: scale(1);} .products-grid .item .add-to-links .compare a, .products-grid .item .add-to-links .wishlist a {margin-top: 10px;} .products-grid .item .item-info {z-index: 1;position: relative;padding: 10px 0 20px;clear: both;margin: 0px;text-align: center;} .products-grid .item .item-info .product-name a {font-size: 16px;font-weight: 400;letter-spacing: 0.3px;line-height: 20px;text-transform: capitalize;display: block;height: 20px;overflow: hidden;white-space: nowrap;text-overflow: ellipsis;} .products-grid .item .item-info .price-box {padding: 0;line-height: normal;} .products-grid .item .item-info .price-box span.price {display: inline-block;margin: 0 10px 0 0;} .products-grid .item .item-info .rating-hover {position: absolute;margin: 0 0 30px 0;bottom: -30px;z-index: 1;opacity: 0;width: 100%;} .products-grid .item:hover .item-info .rating-hover {opacity: 1;bottom: -6px;background: #ffffff;} .products-grid .item .item-info .ratings {margin: auto;text-align: center;} .products-grid .item .item-info .ratings .rating-box {margin: auto;text-align: center;} .products-grid .item .actions {bottom: -17px;color: #ffffff;left: 0;position: absolute;text-align: center;width: 100%;z-index: 1;padding: 0px 0;} .products-grid .item .actions .button {text-transform: uppercase;} .products-grid .item .product-hover {position: absolute;max-height: 54px;} .product {-webkit-border-radius: 3px;-moz-border-radius: 3px;border-radius: 3px;display: inline-block;float: none;margin: 0;position: relative;text-align: left;vertical-align: top;} .product .default {-webkit-border-radius: 3px;-moz-border-radius: 3px;border-radius: 3px;overflow: hidden;position: relative;} .product-img {width: 270px;height: 270px;display:table-cell;vertical-align:middle;text-align:center;background-color:#f2f2f2;} .product-icon img {display:block;margin:0 auto;} .product .product-image {display: block;line-height: 0;margin: 0;} .product-image {display: inline-block;line-height: 0;position: relative;} .product-image > img {-webkit-transition: opacity 0.2s linear;transition: opacity 0.2s linear;} .product .product-description {background: #f2f2f2;border-top: 1px solid #e1e1e1;color: #505050;display: table;font-size: 13px;height: 54px;line-height: 18px;position: relative;text-align: center;width: 100.2%;z-index: 1;} .product .product-description .vertical {display: table-cell;height: 54px;padding-left: 5px;padding-right: 5px;vertical-align: middle;} .product .product-name {color: #ffffff;font-size: 15px;font-weight: normal;line-height: 16px;margin: 0 0 4px;text-transform: none;height:50px;overflow:hidden;background: #3e7a25;padding: 10px;} .product-name a {color: #ffffff;text-decoration: none;-webkit-transition: opacity .2s linear;transition: opacity .2s linear;} .product-name a:hover {opacity: 0.8;filter: alpha(opacity=80);-webkit-transition: opacity .2s linear;transition: opacity .2s linear;} .product .price {font-weight: bold;font-size: 20px;} .price-old {color: #7f7f7f;display: inline-block;margin-right: 6px;position: relative;text-decoration:line-through;} .product .not-rotation-actions {background: #00c59c;bottom:0;left: 0;right: 0;padding: 9px 10px;position: absolute;text-align: center;-webkit-transition: bottom .2s linear;transition: bottom .2s linear;z-index: 1;height:72px;width:99.9%;} .product:hover .not-rotation-actions {bottom: 100px;-webkit-transition: bottom .2s linear;transition: bottom .2s linear;} .col-md-1.product .product-hover, .col-md-2.product .product-hover, .col-md-3.product .product-hover, .col-md-4.product .product-hover, .col-md-5.product .product-hover, .col-md-6.product .product-hover, .col-md-7.product .product-hover, .col-md-8.product .product-hover, .col-md-9.product .product-hover, .col-md-10.product .product-hover, .col-md-11.product .product-hover, .col-md-11.product .product-hover {left: 15px;right: 15px;} .product .product-hover {-webkit-box-sizing: border-box;-moz-box-sizing: border-box;box-sizing: border-box;display: none;left: 0;padding: 0;position: absolute;right: 0;bottom: 0;width: 100%;} .product:hover .product-hover {display: block;-webkit-animation: fadeIn 0.8s;animation: fadeIn 0.8s;} .product .product-hover .actions {bottom: 0px;left: 0;position: absolute;text-align: center;width: 100%;} .product .actions a {background: #3e7a25;display: inline-block;height: 54px;margin: 0 -2px;padding-top: 19px;text-align: center;text-decoration: none;vertical-align: top;width: 100%;-webkit-transition: all .2s linear;transition: all .2s linear;color: #fff;text-transform: uppercase;font-size: 26px;} .add-cart {cursor:pointer;} .product .actions .add-cart {-webkit-border-radius: 3px 0 0 3px;-moz-border-radius: 3px 0 0 3px;border-radius: 3px 0 0 3px;} .product .actions a:hover {background: #f2f2f2;-webkit-transition: all .2s linear;transition: all .2s linear;} .product.rotation, .employee.rotation {overflow: visible;border: 1px solid #3c7b20;background: #f2f2f2;} .rotation {background: none;-webkit-perspective: 600px;-moz-perspective: 600px;perspective: 600px;} .rotation .default, .rotation .front-end {overflow: hidden;position: relative;-webkit-transform: rotateX(0deg) rotateY(0deg);-webkit-transform-style: preserve-3d;-webkit-backface-visibility: hidden;-moz-transform: rotateX(0deg) rotateY(0deg);-moz-transform-style: preserve-3d;-moz-backface-visibility: hidden;transform: rotateY(0deg);-webkit-transition: all .6s ease-in-out;-moz-transition: all .6s ease-in-out;transition: all .6s ease-in-out;z-index: 24;} .rotation .default {-webkit-border-radius: 3px;-moz-border-radius: 3px;border-radius: 3px;} .rotation .product-hover, .rotation .back-end {display: block;height: inherit;-webkit-transform: rotateY(-180deg);-webkit-transform-style: preserve-3d;-webkit-backface-visibility: hidden;-moz-transform: rotateY(-180deg);-moz-transform-style: preserve-3d;-moz-backface-visibility: hidden;transform: rotateY(-180deg);-moz-transition: all .6s ease-in-out;-webkit-transition: all .6s ease-in-out;transition: all .6s ease-in-out;} .rotation.hover .product-hover, .rotation.hover .back-end {z-index: 46;-webkit-transform: rotateX(0deg) rotateY(0deg);-moz-transform: rotateX(0deg) rotateY(0deg);transform: rotateY(0deg);-webkit-transition-delay: .2s;-moz-transition-delay: .2s;transition-delay: .2s;} .rotation .product-image:hover > img {opacity: 1;filter: alpha(opacity=100);} .item .default .sale{display:block;position: absolute;top: 10px;left: 10px;background: red; color: #fff;padding: 10px;z-index:10;}
После изменений почистите кэш и проверьте товары в категории.
#5
Отправлено 01 Март 2019 - 18:12
Vaccina (27 Февраль 2019 - 06:38) писал:
Здравствуйте.
Уточните пожалуйста, по какой причине он вам не подходит? Инструкция написана на основе скриншота из первого сообщения, результат следующий:
Полезные товары.png
Уточните пожалуйста, по какой причине он вам не подходит? Инструкция написана на основе скриншота из первого сообщения, результат следующий:
Полезные товары.png
#6
Отправлено 05 Март 2019 - 06:51
Здравствуйте.
Уточните пожалуйста, после изменений вы проверяете вывод товаров только в категориях? Так как инструкция выше только для данного раздела, код еще не адаптирован для товаров на главной странице, если проверяете в категории и некорректно отображается список товаров, то пришлите пожалуйста скриншот.
Уточните пожалуйста, после изменений вы проверяете вывод товаров только в категориях? Так как инструкция выше только для данного раздела, код еще не адаптирован для товаров на главной странице, если проверяете в категории и некорректно отображается список товаров, то пришлите пожалуйста скриншот.
Количество пользователей, читающих эту тему: 0
0 пользователей, 0 гостей, 0 анонимных