0
Левое Меню Каталог Товаров
Автор Lalaweb, 12 июня 2020 13:21
Сообщений в теме: 10
#1
Отправлено 12 Июнь 2020 - 13:21
Добрый день!
Как можно сделать развернутым каталог товаров, то есть чтобы все категории были видны. И уменьшить шрифт, сделать высоту колонки поменьше.
Как можно сделать развернутым каталог товаров, то есть чтобы все категории были видны. И уменьшить шрифт, сделать высоту колонки поменьше.
#2
Отправлено 01 Июль 2020 - 21:50
Добрый день! Задам еще один вопрос, может поступит ответ)
Как сделать выпадающее меню, на шаблоне фиеста?
Благодарю за быстрый ответ!
Как сделать выпадающее меню, на шаблоне фиеста?
Благодарю за быстрый ответ!
#3
Отправлено 02 Июль 2020 - 00:48
Здравствуйте.
Пришлите пожалуйста номер аккаунта, где установлена дизайн-тема Фиеста, так как на аккаунте указанном в профиле форума установлен Какаду.
Пришлите пожалуйста номер аккаунта, где установлена дизайн-тема Фиеста, так как на аккаунте указанном в профиле форума установлен Какаду.
#4
Отправлено 02 Июль 2020 - 01:13
Аккаунт SL-28348
#5
Отправлено 02 Июль 2020 - 01:43
Данное изменение сильно вытянет блоки, так как много категорий.
Зайдите в раздел Сайт - Редактор шаблонов - main.css - найдите:
замените на:
далее найдите и удалите:
Зайдите в раздел Сайт - Редактор шаблонов - main.css - найдите:
.catalogWrp {height: 271px;}
замените на:
.catalogWrp {height: 100%;}
далее найдите и удалите:
.catalogWrp:hover{overflow:visible;} .more-button:after{content:' ';position:absolute;bottom:0;left:0;width:100%;background-color:#f3f3f3;height:50px;background-position:center center;background-repeat:no-repeat;z-index:11; background-image: url("data:image/svg+xml,%0A%3Csvg xmlns='http://www.w3.org/2000/svg' fill='%23e2e2e2' width='20' height='20'%3E%3Cpath d='M4.516 7.548c.436-.446 1.043-.481 1.576 0L10 11.295l3.908-3.747c.533-.481 1.141-.446 1.574 0 .436.445.408 1.197 0 1.615-.406.418-4.695 4.502-4.695 4.502a1.095 1.095 0 01-1.576 0S4.924 9.581 4.516 9.163s-.436-1.17 0-1.615z'/%3E%3C/svg%3E");}
#6
Отправлено 02 Июль 2020 - 14:12
Извините, я неправильно выразилась, нужно сделать его выпадающим, чтобы оно выпадало при наведении. Как в шаблоне Какаду
#7
Отправлено 03 Июль 2020 - 00:53
Здравствуйте.
Зайдите в раздел Сайт - Редактор шаблонов - HTML - найдите:
замените на:
далее зайдите в main.css - найдите:
замените на:
далее найдите:
замените на:
Зайдите в раздел Сайт - Редактор шаблонов - HTML - найдите:
<!-- Каталог --> <div class="navigation"> <div class="header-catalog"> <a href="{CATALOG_URL}" class="header-catalog-hover-element">Каталог <span>товаров</span></a> </div> </div> <div class="search"> <form id="search_form" class="search_form" action="{QUICK_SEARCH_URL}" method="get" title="Поиск по магазину"> <input type="hidden" name="goods_search_field_id" value="0"> <input placeholder="Поиск по каталогу" type="text" name="q" value="" class="search-string" autocomplete="off"> <button type="reset" title="Очистить" class="search-reset"></button> <button type="submit" title="Искать" class="search-submit"><i class="svg-search"></i></button> <div class="search-close" title="Закрыть форму поиска"> <i class="svg-close"></i> </div> </form> <div id="search-result" style="display: none;"> <div class="inner"> <div class="result-category"></div> <div class="result-goods"></div> </div> </div> </div> <div class="lr-search-button"> <i class="svg-search"></i> </div> {% IFNOT SETTINGS_COMPARE_DISABLE %} <a href="{COMPARE_URL}" class="compare compare-js {%IF COMPARE_GOODS_COUNT > 0%}have-items{% ENDIF %}" title="Сравнить"> <div class="header-bottom-inner"> <span class="svg-compare"></span> <span class="compareGoodsCount count-circle" {%IFNOT COMPARE_GOODS_COUNT%}style="display:none;"{% ENDIF %}>{COMPARE_GOODS_COUNT}</span> </div> </a> {%ENDIF%} <a href="{FAVORITES_URL}" class="favorites favorites-js {%IF FAVORITES_GOODS_COUNT > 0%}have-items{%ENDIF%} {% IF SETTINGS_COMPARE_DISABLE %}nocompare{%ENDIF%} {% IFNOT CLIENT_IS_LOGIN %}favorite-message{%ENDIF%}" title="Избранные товары"> <div class="header-bottom-inner"> <span class="svg-favorites"></span> <span class="favoritesGoodsCount count-circle">{FAVORITES_GOODS_COUNT}</span> </div> </a> <div class="header-cart unselectable {%IFNOT CART_SUM_NOW%}empty-cart{%ENDIF%} {% IF SETTINGS_COMPARE_DISABLE %}nocompare{%ENDIF%}"> <a class="cart_anch" href="{CART_URL}"> <div class="cart-left"> <span class="count count-circle">{CART_COUNT_TOTAL}</span> <i class="svg-cart"></i> </div> <div class="cart-price"> {%IF CART_SUM_NOW%} {CART_SUM_NOW | money_format} {%ELSE%} Корзина пуста {%ENDIF%} </div> </a> <div class="cart-dropdown {% IF MOD_LNAME = cart %}not_visible{% ENDIF %}"> {% IF cart_count_empty %} <div class="empty_text">Корзина покупок пуста.<br/>Вы можете выбрать товар из <a href="{CATALOG_URL}">каталога</a></div> {% ELSE %} <ul class="cart-products-list"> {% FOR cart_items %} <li class="cart-item" data-goods-id="{cart_items.GOODS_MOD_ID}"> <a href="{cart_items.GOODS_URL}" title="{cart_items.GOODS_NAME}" class="product-image"> <img src="{% IF cart_items.GOODS_IMAGE_EMPTY %}{ASSETS_IMAGES_PATH}no-photo-icon.png?design=sport{% ELSE %}{cart_items.GOODS_IMAGE_ICON}{% ENDIF %}" alt="{cart_items.GOODS_NAME}" class="goods-image-icon"> </a> <div class="product-details"> <a class="cart-product-name" href="{cart_items.GOODS_URL}" title="{cart_items.GOODS_NAME}">{cart_items.GOODS_NAME}</a> {% IFNOT cart_items.distinctive_properties_empty %}<p class="product-mod"><span>({% FOR distinctive_properties %}{cart_items.distinctive_properties.NAME}: {cart_items.distinctive_properties.VALUE}{% IFNOT cart_items.distinctive_properties.last %}, {% ENDIF %}{% ENDFOR %})</span></p>{% ENDIF %} <div class="cart-prod-count">{cart_items.ORDER_LINE_QUANTITY} x <span class="price {CURRENCY_CHAR_CODE}" data-price="{cart_items.GOODS_MOD_PRICE_NOW}">{cart_items.GOODS_MOD_PRICE_NOW | money_format}</span></div> <a data-href="{cart_items.ORDER_LINE_DELETE_URL}" data-count="{cart_items.ORDER_LINE_QUANTITY}" title="Удалить позицию" class="product-remove" data-id="{cart_items.GOODS_MOD_ID}"></a> </div> </li> {% ENDFOR %} </ul> {% FOR cart_sum %} <div class="cart_total_sum"><div class="text">Итого:</div> <div class="total-sum">{cart_sum.NOW | money_format}</div></div> {% ENDFOR %} <a class="button" title="Перейти к оформлению заказа" href="{CART_URL}">Посмотреть мою корзину</a> <a class="products-remove" title="Очистить корзину" data-href="{CART_TRUNCATE_URL}">Очистить корзину</a> {% ENDIF %} </div> </div> </div> </div> </header> {% IF index_page %} <section class="index-middle-section"> <div class="container"> <div class="left-col catalog-col"> <div class="catalogWrp" itemscope itemtype="https://schema.org/SiteNavigationElement"> {% FOR catalog_full %} {% IF catalog_full.FIRST %}<ul class="accordion lvl{catalog_full.LEVEL}">{% ENDIF %} <li {% IF catalog_full.HIDE %}style="display:none;"{% ENDIF %} class="catalog-lvl{catalog_full.LEVEL} {% IF catalog_full.ISSET_SUB %}parent{% ENDIF %}{% IF catalog_full.CURRENT %} active{% ELSEIF catalog_full.CURRENT_PARENT %} active{% ENDIF %}"> <a href="{catalog_full.URL}" class="{% IF catalog_full.CURRENT %}selected{% ENDIF %} link-lvl{catalog_full.LEVEL} {% IF catalog_full.ISSET_SUB %}parent{% ENDIF %}">{catalog_full.NAME}</a> {% IF catalog_full.ISSET_SUB=0 %}</li>{% ENDIF %} {% IF catalog_full.LAST %}{%FOR out%}</ul>{%IFNOT catalog_full.out.LAST%}</li>{%ENDIF%}{%ENDFOR%}{% ENDIF %} {% ENDFOR %} </div> </div>
замените на:
<!-- Каталог --> <div class="navigation"> <div class="header-catalog"> <a href="{CATALOG_URL}" class="header-catalog-hover-element">Каталог <span>товаров</span></a> <div class="catalogWrp" itemscope itemtype="https://schema.org/SiteNavigationElement"> {% FOR catalog_full %} {% IF catalog_full.FIRST %}<ul class="accordion lvl{catalog_full.LEVEL}">{% ENDIF %} <li {% IF catalog_full.HIDE %}style="display:none;"{% ENDIF %} class="catalog-lvl{catalog_full.LEVEL} {% IF catalog_full.ISSET_SUB %}parent{% ENDIF %}{% IF catalog_full.CURRENT %} active{% ELSEIF catalog_full.CURRENT_PARENT %} active{% ENDIF %}"> <a href="{catalog_full.URL}" class="{% IF catalog_full.CURRENT %}selected{% ENDIF %} link-lvl{catalog_full.LEVEL} {% IF catalog_full.ISSET_SUB %}parent{% ENDIF %}">{catalog_full.NAME}</a> {% IF catalog_full.ISSET_SUB=0 %}</li>{% ENDIF %} {% IF catalog_full.LAST %}{%FOR out%}</ul>{%IFNOT catalog_full.out.LAST%}</li>{%ENDIF%}{%ENDFOR%}{% ENDIF %} {% ENDFOR %} </div> </div> </div> <div class="search"> <form id="search_form" class="search_form" action="{QUICK_SEARCH_URL}" method="get" title="Поиск по магазину"> <input type="hidden" name="goods_search_field_id" value="0"> <input placeholder="Поиск по каталогу" type="text" name="q" value="" class="search-string" autocomplete="off"> <button type="reset" title="Очистить" class="search-reset"></button> <button type="submit" title="Искать" class="search-submit"><i class="svg-search"></i></button> <div class="search-close" title="Закрыть форму поиска"> <i class="svg-close"></i> </div> </form> <div id="search-result" style="display: none;"> <div class="inner"> <div class="result-category"></div> <div class="result-goods"></div> </div> </div> </div> <div class="lr-search-button"> <i class="svg-search"></i> </div> {% IFNOT SETTINGS_COMPARE_DISABLE %} <a href="{COMPARE_URL}" class="compare compare-js {%IF COMPARE_GOODS_COUNT > 0%}have-items{% ENDIF %}" title="Сравнить"> <div class="header-bottom-inner"> <span class="svg-compare"></span> <span class="compareGoodsCount count-circle" {%IFNOT COMPARE_GOODS_COUNT%}style="display:none;"{% ENDIF %}>{COMPARE_GOODS_COUNT}</span> </div> </a> {%ENDIF%} <a href="{FAVORITES_URL}" class="favorites favorites-js {%IF FAVORITES_GOODS_COUNT > 0%}have-items{%ENDIF%} {% IF SETTINGS_COMPARE_DISABLE %}nocompare{%ENDIF%} {% IFNOT CLIENT_IS_LOGIN %}favorite-message{%ENDIF%}" title="Избранные товары"> <div class="header-bottom-inner"> <span class="svg-favorites"></span> <span class="favoritesGoodsCount count-circle">{FAVORITES_GOODS_COUNT}</span> </div> </a> <div class="header-cart unselectable {%IFNOT CART_SUM_NOW%}empty-cart{%ENDIF%} {% IF SETTINGS_COMPARE_DISABLE %}nocompare{%ENDIF%}"> <a class="cart_anch" href="{CART_URL}"> <div class="cart-left"> <span class="count count-circle">{CART_COUNT_TOTAL}</span> <i class="svg-cart"></i> </div> <div class="cart-price"> {%IF CART_SUM_NOW%} {CART_SUM_NOW | money_format} {%ELSE%} Корзина пуста {%ENDIF%} </div> </a> <div class="cart-dropdown {% IF MOD_LNAME = cart %}not_visible{% ENDIF %}"> {% IF cart_count_empty %} <div class="empty_text">Корзина покупок пуста.<br/>Вы можете выбрать товар из <a href="{CATALOG_URL}">каталога</a></div> {% ELSE %} <ul class="cart-products-list"> {% FOR cart_items %} <li class="cart-item" data-goods-id="{cart_items.GOODS_MOD_ID}"> <a href="{cart_items.GOODS_URL}" title="{cart_items.GOODS_NAME}" class="product-image"> <img src="{% IF cart_items.GOODS_IMAGE_EMPTY %}{ASSETS_IMAGES_PATH}no-photo-icon.png?design=sport{% ELSE %}{cart_items.GOODS_IMAGE_ICON}{% ENDIF %}" alt="{cart_items.GOODS_NAME}" class="goods-image-icon"> </a> <div class="product-details"> <a class="cart-product-name" href="{cart_items.GOODS_URL}" title="{cart_items.GOODS_NAME}">{cart_items.GOODS_NAME}</a> {% IFNOT cart_items.distinctive_properties_empty %}<p class="product-mod"><span>({% FOR distinctive_properties %}{cart_items.distinctive_properties.NAME}: {cart_items.distinctive_properties.VALUE}{% IFNOT cart_items.distinctive_properties.last %}, {% ENDIF %}{% ENDFOR %})</span></p>{% ENDIF %} <div class="cart-prod-count">{cart_items.ORDER_LINE_QUANTITY} x <span class="price {CURRENCY_CHAR_CODE}" data-price="{cart_items.GOODS_MOD_PRICE_NOW}">{cart_items.GOODS_MOD_PRICE_NOW | money_format}</span></div> <a data-href="{cart_items.ORDER_LINE_DELETE_URL}" data-count="{cart_items.ORDER_LINE_QUANTITY}" title="Удалить позицию" class="product-remove" data-id="{cart_items.GOODS_MOD_ID}"></a> </div> </li> {% ENDFOR %} </ul> {% FOR cart_sum %} <div class="cart_total_sum"><div class="text">Итого:</div> <div class="total-sum">{cart_sum.NOW | money_format}</div></div> {% ENDFOR %} <a class="button" title="Перейти к оформлению заказа" href="{CART_URL}">Посмотреть мою корзину</a> <a class="products-remove" title="Очистить корзину" data-href="{CART_TRUNCATE_URL}">Очистить корзину</a> {% ENDIF %} </div> </div> </div> </div> </header> {% IF index_page %} <section class="index-middle-section"> <div class="container">
далее зайдите в main.css - найдите:
/* Каталог */ .navigation .header-catalog{display:block;width:calc(248px + 14px);} .navigation .header-catalog .header-catalog-hover-element{font-size:18px;display:block;font-family: 'Rubik';padding-left:30px;cursor:pointer;background-repeat:no-repeat;line-height:60px;background-position:left center;background-size:24px; background-image: url("data:image/svg+xml,%0A%3Csvg xmlns='http://www.w3.org/2000/svg' fill='%232a2a2a' width='24' height='24'%3E%3Cpath d='M3 18h12v-2H3v2zM3 6v2h18V6H3zm0 7h18v-2H3v2z'/%3E%3Cpath fill='none' d='M0 0h24v24H0V0z'/%3E%3C/svg%3E");} .navigation .header-catalog .header-catalog-hover-element:hover{background-image: url("data:image/svg+xml,%0A%3Csvg xmlns='http://www.w3.org/2000/svg' fill='%233cacf6' width='24' height='24'%3E%3Cpath d='M3 18h12v-2H3v2zM3 6v2h18V6H3zm0 7h18v-2H3v2z'/%3E%3Cpath fill='none' d='M0 0h24v24H0V0z'/%3E%3C/svg%3E");} .catalogWrp{width:100%;display:flex;-webkit-display:flex;flex-wrap:wrap;height:542px;overflow:hidden;position:relative;}
замените на:
/* Каталог */ .navigation .header-catalog{display:block;width:calc(248px + 14px);position:relative;} .navigation .header-catalog .header-catalog-hover-element{font-size:18px;display:block;font-family: 'Rubik';padding-left:30px;cursor:pointer;background-repeat:no-repeat;line-height:60px;background-position:left center;background-size:24px; background-image: url("data:image/svg+xml,%0A%3Csvg xmlns='http://www.w3.org/2000/svg' fill='%232a2a2a' width='24' height='24'%3E%3Cpath d='M3 18h12v-2H3v2zM3 6v2h18V6H3zm0 7h18v-2H3v2z'/%3E%3Cpath fill='none' d='M0 0h24v24H0V0z'/%3E%3C/svg%3E");} .navigation .header-catalog .header-catalog-hover-element:hover{background-image: url("data:image/svg+xml,%0A%3Csvg xmlns='http://www.w3.org/2000/svg' fill='%233cacf6' width='24' height='24'%3E%3Cpath d='M3 18h12v-2H3v2zM3 6v2h18V6H3zm0 7h18v-2H3v2z'/%3E%3Cpath fill='none' d='M0 0h24v24H0V0z'/%3E%3C/svg%3E");} .catalogWrp{width:100%;display:none;height:542px;overflow:hidden;position: absolute;top: 99%;left: 0;z-index: 10;} .navigation .header-catalog .header-catalog-hover-element:hover + .catalogWrp, .catalogWrp:hover{display: block;}
далее найдите:
.right-col{width:calc(100% - 248px - 30px);} .right-col.slider-col{width:calc(100% - 248px - 14px);display:flex;-webkit-display:flex;flex-wrap:wrap;} .banner-big{display:block;width:570px;height:542px;} .banner-big .item{height:542px;background-repeat:no-repeat;background-position:center center;} .banner-big .item.first{background-color:#c0eeff;} .banner-big .item.second{background-color:#6ce9ff;background-size:cover;} .banner-big .item.third{background-size:cover;} .banner-big .SlideContent{display:block;width:100%;height:100%;padding:45px;} .banner-big .SlideContent:hover{color:#2a2a2a;} .banner-big .SlideTitle{font-size:16px;line-height:36px;font-family:'Rubik',sans-serif;} .banner-big .SlideText{font-size:26px;line-height:36px;font-family:'Rubik',sans-serif;} .banner-big .SlideGoto{margin-top:25px;font-size:16px;color:#3cacf6;display:flex;-webkit-display:flex;flex-wrap:wrap;} .banner-big .SlideGoto:hover{text-decoration:underline;} .svg-arrow-right{background-position:center center;display:block;width:24px;height:20px;margin-left:5px;background-size:24px;background-image: url("data:image/svg+xml,%0A%3Csvg xmlns='http://www.w3.org/2000/svg' fill='%233cacf6' height='24' viewBox='0 0 24 24' width='24'%3E%3Cpath d='M22 12l-4-4v3H3v2h15v3z'/%3E%3Cpath d='M0 0h24v24H0z' fill='none'/%3E%3C/svg%3E");} .banner-small-wrp{width:calc(100% - 570px);}
замените на:
/* Баннеры на главной */ .right-col{width:100%;} .right-col.slider-col{width:100%;display:flex;-webkit-display:flex;flex-wrap:wrap;} .banner-big{display:block;width:calc(100% - 340px);height:542px;} .banner-big .item{height:542px;background-repeat:no-repeat;background-position:center center;} .banner-big .item.first{background-color:#c0eeff;} .banner-big .item.second{background-color:#6ce9ff;background-size:cover;} .banner-big .item.third{background-size:cover;} .banner-big .SlideContent{display:block;width:100%;height:100%;padding:45px;} .banner-big .SlideContent:hover{color:#2a2a2a;} .banner-big .SlideTitle{font-size:16px;line-height:36px;font-family:'Rubik',sans-serif;} .banner-big .SlideText{font-size:26px;line-height:36px;font-family:'Rubik',sans-serif;} .banner-big .SlideGoto{margin-top:25px;font-size:16px;color:#3cacf6;display:flex;-webkit-display:flex;flex-wrap:wrap;} .banner-big .SlideGoto:hover{text-decoration:underline;} .svg-arrow-right{background-position:center center;display:block;width:24px;height:20px;margin-left:5px;background-size:24px;background-image: url("data:image/svg+xml,%0A%3Csvg xmlns='http://www.w3.org/2000/svg' fill='%233cacf6' height='24' viewBox='0 0 24 24' width='24'%3E%3Cpath d='M22 12l-4-4v3H3v2h15v3z'/%3E%3Cpath d='M0 0h24v24H0z' fill='none'/%3E%3C/svg%3E");} .banner-small-wrp{width:340px;}
#9
Отправлено 04 Июль 2020 - 03:30
Здравствуйте.
У вас не все изменения выполнены в main.css, результат должен выглядеть иначе.
У вас не все изменения выполнены в main.css, результат должен выглядеть иначе.
#10
Отправлено 04 Июль 2020 - 10:49
Сделала всё по инструкции, но съехала нижняя часть
#11
Отправлено 06 Июль 2020 - 17:41
Lalaweb (04 Июль 2020 - 10:49) писал:
Сделала всё по инструкции, но съехала нижняя часть
Дублируем ответ:
Зайдите в Редактор шаблонов --- main.css и найдите данный код:
/* Баннеры на главной */ .right-col{width:100%;}
Замените его на:
/* Баннеры на главной */ .right-col{width:calc(100% - {SETTINGS_GOODS_IMAGES_SIZE_SMALL | divide("2")}px - 30px);}
Количество пользователей, читающих эту тему: 0
0 пользователей, 0 гостей, 0 анонимных