Перейти к содержимому


Левое Меню Каталог Товаров


  • Авторизуйтесь для ответа в теме
Сообщений в теме: 10

#1 Lalaweb

Lalaweb

    Продвинутый пользователь

  • Пользователи
  • PipPipPip
  • 67 сообщений

Отправлено 12 Июнь 2020 - 13:21

Добрый день!
Как можно сделать развернутым каталог товаров, то есть чтобы все категории были видны. И уменьшить шрифт, сделать высоту колонки поменьше.

#2 Lalaweb

Lalaweb

    Продвинутый пользователь

  • Пользователи
  • PipPipPip
  • 67 сообщений

Отправлено 01 Июль 2020 - 21:50

Добрый день! Задам еще один вопрос, может поступит ответ)
Как сделать выпадающее меню, на шаблоне фиеста?
Благодарю за быстрый ответ!

#3 Vaccina

Vaccina

    Активный участник

  • Модераторы
  • 24 353 сообщений

Отправлено 02 Июль 2020 - 00:48

Здравствуйте.

Пришлите пожалуйста номер аккаунта, где установлена дизайн-тема Фиеста, так как на аккаунте указанном в профиле форума установлен Какаду.

#4 Lalaweb

Lalaweb

    Продвинутый пользователь

  • Пользователи
  • PipPipPip
  • 67 сообщений

Отправлено 02 Июль 2020 - 01:13

Аккаунт SL-28348

#5 Vaccina

Vaccina

    Активный участник

  • Модераторы
  • 24 353 сообщений

Отправлено 02 Июль 2020 - 01:43

Данное изменение сильно вытянет блоки, так как много категорий.

Зайдите в раздел Сайт - Редактор шаблонов - 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 Lalaweb

Lalaweb

    Продвинутый пользователь

  • Пользователи
  • PipPipPip
  • 67 сообщений

Отправлено 02 Июль 2020 - 14:12

Извините, я неправильно выразилась, нужно сделать его выпадающим, чтобы оно выпадало при наведении. Как в шаблоне Какаду

#7 Vaccina

Vaccina

    Активный участник

  • Модераторы
  • 24 353 сообщений

Отправлено 03 Июль 2020 - 00:53

Здравствуйте.

Зайдите в раздел Сайт - Редактор шаблонов - 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}&nbsp;x&nbsp;<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}&nbsp;x&nbsp;<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;}


#8 Lalaweb

Lalaweb

    Продвинутый пользователь

  • Пользователи
  • PipPipPip
  • 67 сообщений

Отправлено 03 Июль 2020 - 13:23

Всё получилось. Большое спасибо.
По последнему изменению, съехали нижние баннеры.
Хотелось бы, чтобы слайдеры были как показано ни рисунке.

Прикрепленные изображения

  • 134.png


#9 Vaccina

Vaccina

    Активный участник

  • Модераторы
  • 24 353 сообщений

Отправлено 04 Июль 2020 - 03:30

Здравствуйте.

У вас не все изменения выполнены в main.css, результат должен выглядеть иначе.

#10 Lalaweb

Lalaweb

    Продвинутый пользователь

  • Пользователи
  • PipPipPip
  • 67 сообщений

Отправлено 04 Июль 2020 - 10:49

Сделала всё по инструкции, но съехала нижняя часть

#11 stasia

stasia

    Активный участник

  • Модераторы
  • 561 сообщений

Отправлено 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 анонимных