Koderhan

Кто тут проверяет сайты на w3c ? Вот читайте , делайте выводы. Делитесь.

В этой теме я хочу поделиться полезными ссылками и советами для редактирования кода. Предлагаю модераторам тоже присоединиться к этой теме.

Как редактировать код на сайте и тут же видеть результат? В этом может помочь web inspector.
http://css-live.ru/f...ka-chast-1.html
http://css-live.ru/f...ka-chast-2.html

Ну и конечно же хороший справочник с описанием свойств и тегов http://htmlbook.ru/

Victor_33 (26 Февраль 2015 - 23:53) писал:

На главной странице просто переменная пути к странице товара другая.
Вот например.

{index_page_goods.URL | url_amp}

Эту переменную нужно прописать в атрибуте href
Код будет таким.

<a class="exclusive" href="{index_page_goods.URL | url_amp}"  title="Быстрый заказ">Купить</a>

Там в файле html 3 разных массива и соответственно имена у них тоже разные...
Например index_page_goods. - это массив вывода товаров на главной.

Victor_33 (26 Февраль 2015 - 23:31) писал:

Ну а если вам нужны такие кнопки Купить на главной странице то похожие изменения как описано выше. Можно применить в файле html.
Код немного может отличаться, суть та же.
<a class="exclusive" href="#" onclick="quickorder('.product-form-{index_page_goods.MIN_PRICE_NOW_ID}');return false;" title="Быстрый заказ">Быстрый заказ</a>

Если я правильно вас понял. То вам нужно чтобы при нажатие на кнопку Купить, пользователь переходил на страницу товара?
Если так то. Достаточно заменить код в файле Товары.

<a class="ajax_add_to_cart_button add_to_cart_ph" onclick="quickorder('.product-form-{goods.MIN_PRICE_NOW_ID}');return false;" title="Быстрый заказ">Быстрый заказ</a>

На код:

<a class="ajax_add_to_cart_button add_to_cart_ph" href="{goods.URL | url_amp}" title="Быстрый заказ">Купить</a>

Обратите внимание что данный код может встречаться в файле Товары в двух местах.
Те же самые действия вы можете проделать и в файле Поиск что бы соответственно изменить кнопку на странице поиска. В принципе код страницы Поиска и страницы Товары не сильно отличаются друг от друга.

{goods.URL | url_amp} - это переменная которая выводит ссылку на страницу товара.
goods - это цикл для вывода множества товаров в каталоге.

Victor_33 (26 Февраль 2015 - 22:36) писал:

Victor, вы можете удалить фон изменив код html.
В файле "товар" найдите id="wrap"

Рядом с этим текстом будет код:


background: #fff;

Его можно удалить. Этот код отвечает за вывод цвета в этом блоке. Можете даже попробовать изменить цвет с белого например на черный. Для этого достаточно заменить #fff на #000
Подробности можно узнать на http://htmlbook.ru/css/background

Victor_33 (26 Февраль 2015 - 21:59) писал:

Привет, Виктор. Пожалуйста, не мог бы сообщить адрес магазина что бы было проще помочь тебе с этим вопросом ?

Brown Bear (20 Сентябрь 2014 - 18:47) писал:

JUMP (20 Сентябрь 2014 - 15:32) писал:

Здравствуйте. Мы уже нашли ошибку в шаблоне . В скором времени шаблон обновиться. Приносим свои извинения.
В благодарность за нахождения ошибки мы пополнили баланс магазинам SL-241004 , SL-307233  на 500руб.

Random (21 Июль 2014 - 12:47) писал:

Для перемещения списка статей в левую колонку выполните следующею инструкцию.
В файле "html".
После кода:

					 <div class="homePageListCart">
						 <h4><a href="{CART_URL}">Корзина</a></h4>
						 <div class="block_content">
						 {% IF cart_count_empty %}
							 <p>Корзина пуста</p>
						 {% ELSE %}
							 <div id="cart_block_list">
							 <dl class="products">
								 {% FOR cart_items %}
								 <dt class="cart_block_product_{cart_items.GOODS_ID}" class="item">
									 <div class="cartCountBlock">
									 {cart_items.ORDER_LINE_QUANTITY}
									 <span>{cart_items.GOODS_MOD_MEASURE_NAME}</span>
									 </div>
									 <div class="cartNameBlock">
									 <h5>
										 <a href="{cart_items.GOODS_URL}" data-role="item-title">{cart_items.GOODS_NAME}</a>
									 </h5>
									 </div>
									 <div class="cartDeleteBlock">
									 <a class="ajaxCartBlockRemoveLink" href="{cart_items.ORDER_LINE_DELETE_URL}" title="Убрать товар из корзины">x</a>
									 </div>
									 <div class="cartLine"></div>
									 <div class="cartPriceBlock">
									 {cart_items.GOODS_MOD_PRICE_NOW | money_format}
									 </div>
								 </dt>
								 {% ENDFOR %}
								 <dt id="cartPrices">
								 {% FOR cart_sum %}
									 <div class="cartPricingBlock">
									 <span>Итого</span>
									 <span id="cart_block_total" class="price ajaxBlockArtTotal">{cart_sum.NOW | money_format}</span>
									 </div>
								 {% ENDFOR %}
								 </dt>
								 <dt class="toOformZakazCart">
								 <a href="{CART_URL}" class="btn btn-success" title="Перейти к оформлению заказа">Оформить заказ</a>
								 </dt>
							 </dl>
							 </div>
						 {% ENDIF %}
						 </div>
					 </div>

Добавить:

<!-- Если есть список статей магазина и если в тарифном плане подключен модуль новостей -->
					 {% IFNOT news_list_articles_empty && TARIFF_FEATURE_NEWS %}
						 <div class="news_list_articles column ">
							 <div class="newHead">
								 <h4><a href="{NEWS_ARTICLES_URL}" title="Перейти к странице &laquo;Статьи&raquo;">Статьи<span class="toggleImg hide"></span></a></h4>
							 </div>
							 <div class="newCont">
								 <ul class="postList">
								 {% FOR news_list_articles %}
									 <!-- Вывод не больше 4 пунктов новостей -->
									 {% IF news_list_articles.index > 4 %} {break} {% ENDIF %}
									 <li><a href="{news_list_articles.URL}" title="Перейти к странице &laquo;{news_list_articles.TITLE}&raquo;" {% IF news_list_articles.ID = NEWS_ID %} class="selected" {%ENDIF%}>{news_list_articles.TITLE}</a></li>
								 {% ENDFOR %}
								 </ul>
							 </div>
						 </div>
					 {% ENDIF %}
					 <!-- END Если есть список статей магазина и если в тарифном плане подключен модуль новостей -->

Точно такой же код есть в нижней части файла "html", его вы можете удалить если не хотите чтобы список статей выводился в подвале.
И для стилизации добавленного списка в левой колонке, нужно изменить стили в файле "main.css".
В конец файла "main.css".
Добавить код:

.contactsSite .column {
width: 100%;
float: left;
padding: 0;
margin: 0;
margin-top: 18px;
}
.contactsSite .column h4 {
padding: 4px 6px;
-webkit-border-radius: 2px;
-moz-border-radius: 2px;
border-radius: 2px;
background-color: #34495E;
color: #ECF0F1;
font-size: 120%;
}
.contactsSite .column h4 a {
color: white;
}

Как это будет выглядеть ?

В файле "HTML".
После кода:

	<script>
		var folderImg = '{ASSETS_IMAGES_PATH}';
		var indexPage = "{index_page}";
	</script>

Добавить:

	<div id="toTop">^ Вверх</div>

В конец файла "main.js".
Добавить код:

$(document).ready(function(){
   $("#toTop").hide();
  $(function () {
   $(window).scroll(function () {
	if ($(this).scrollTop() > 50) {
	 $('#toTop').fadeIn();
	} else {
	 $('#toTop').fadeOut();
	}
   });
   $('#toTop').click(function () {
	$('body,html').animate({
	 scrollTop: 0
	}, 800);
	return false;
   });
  });
});

В конец файла "main.css".
Добавить код:

#toTop {
	display: block;
	position: fixed;
	right: 2%;
	background-color: #16A085;
	padding: 10px;
	bottom: 18px;
	color: white;
	overflow: visible;
	z-index: 9;
	cursor: pointer;
	-webkit-transition: 1s;   -moz-transition: 1s;   transition: 1s;
}
#toTop:hover {
	background-color: #1ABC9C;
}
@media screen and (max-width: 480px) {
	#toTop {
		right: 0;
		bottom: 0;
		opacity: 0.5;
	}
}

После этих действий на  страницах будет появляться кнопка "Вверх" при прокрутке.

В файле "main.css".
Найти код:

.menu-item-box {
position: relative;
display: block;
float: left;
min-height: 327px;
width: 194px;
border: 1px solid #bdc3c7;
-webkit-border-radius: 2px;
-moz-border-radius: 2px;
border-radius: 3px;
border-radius: 2px;
background-color: #fff;
}
.menu-item-badges {
position: absolute;
top: -2px;
left: 10px;
z-index: 2;
padding: 3px 7px 3px 7px;
border-top: 2px solid #FC6C5C;
-webkit-border-radius: 0px 0px 3px 3px;
-moz-border-radius: 0px 0px 3px 3px;
border-radius: 0px 0px 3px 3px;
background-color: #E74C3C;
color: #ffffff;
opacity: 0.8;
}

Заменить:

.menu-item-box {
position: relative;
display: block;
float: left;
min-height: 327px;
width: 194px;
border: 1px solid #bdc3c7;
-webkit-border-radius: 2px;
-moz-border-radius: 2px;
border-radius: 3px;
border-radius: 2px;
background-color: #fff;
overflow: hidden;
}
.menu-item-badges {
position: absolute;
top: 25px;
right: -30px;
z-index: 2;
padding: 0px 42px 3px 40px;
-webkit-border-radius: 0px 0px 3px 3px;
-moz-border-radius: 0px 0px 3px 3px;
border-radius: 0px 0px 3px 3px;
background-color: #E74C3C;
color: #ffffff;
opacity: 0.8;
-webkit-transform: rotate(45deg); -moz-transform: rotate(45deg); -o-transform: rotate(45deg); -ms-transform: rotate(45deg);
}

И чтобы не "ехал" на маленьких экранах.

В файле "main.css".
Удалить код:

.menu-item-badges {
	 padding: 0;
	 margin: 0 auto;
	 bottom: 0;
	 top: initial;
	 border: 0;
	 border-radius: 0;
	 border-bottom-left-radius: 3px;
	 left: 0;
	 padding: 0px 3px 0px 3px;
}

злая я))) (25 Июнь 2014 - 12:01) писал:

Можно добавить в конец файла "main.css" код:

#toZakaz {
	background-color: red;
	border-color: red;
}
/* Цветета при наведение на кнопку "Заказать" */
#toZakaz:hover {
	background-color: black;
	border-color: black;
}
.cartbottom .left a {
	background-color: blue;
	border-color: blue;
}
/* Цветета при наведение на кнопку "Очистить" */
.cartbottom .left a:hover {
	background-color: black;
	border-color: black;
}

Про свойства background-color и border-color

Цитата

В файле "main.css".
Найти код:

#sb-site.wrapper {
	position: relative;
	z-index: 0;
	margin: 0 auto;
	min-width: 305px;
	min-height: 100%;
	height: auto;
	background-color: #2C3E50;
}

Заменить:

#sb-site.wrapper {
	position: relative;
	z-index: 0;
	margin: 0 auto;
	min-width: 305px;
	min-height: 100%;
	height: auto;
}

В файле "main.css".
Найти код:

.footer {
	position: relative;
	height: auto;
	background-color: #2C3E50;
	color: white;
}

Заменить:

.footer {
	position: relative;
	height: auto;
	background-color: white;
	color: black;
	border-top: 1px solid gray;
}

Код:

.infoSite {
	display: block;
	float: right;
	padding: 1% 1% 1% 2%;
	margin: 1% 1% 0% 0%;
	width: 20%;
	-webkit-border-radius: 3px;
	-moz-border-radius: 3px;
	border-radius: 3px;
	background-color: #1abc9c;
	color: #d1f2eb;
	line-height: 1.4;
}

Заменить:

.infoSite {
	display: block;
	float: right;
	padding: 1% 1% 1% 2%;
	margin: 1% 1% 0% 0%;
	width: 20%;
	-webkit-border-radius: 3px;
	-moz-border-radius: 3px;
	border-radius: 3px;
	background-color: white;
	color: gray;
	line-height: 1.4;
}

Код:

.error-text a, .copyrightFor a {
	color: #ECF0F1;
	text-decoration: underline;
}
.error-text a:hover, .copyrightFor a:hover {
	color: white;
}

Заменить:

.error-text a, .copyrightFor a {
	color: #16A085;
	text-decoration: underline;
}
.error-text a:hover, .copyrightFor a:hover {
	color: #1ABC9C;
}

Если не нужны новости и меню в подвале сайта, то их можно удалить в файле "html".
Код меню:

{% FOR menu %}
						{% FOR footer %}
							<ul id="megamenu_bottom">
								{% FOR links %}
									<li {% IF menu.footer.links.SELECTED %}class="active"{%ENDIF%}><a href="{menu.footer.links.URL}" {% IF menu.footer.links.TITLE %}title="{menu.footer.links.TITLE}"{% ENDIF %}>{menu.footer.links.NAME}</a></li>
								{% ENDFOR links %}
							</ul>
						{% ENDFOR footer %}
					{% ENDFOR  menu %}

Код новостей:

<!-- Если есть список новости магазина и если в тарифном плане подключен модуль новостей -->
						{% IFNOT news_list_shop_empty && TARIFF_FEATURE_NEWS %}
							<div class="news_list_shop column ">
								<div class="newHead">
								  <h4><a href="{NEWS_SHOP_URL}" title="Перейти к странице &laquo;Новости&raquo;">Новости<span class="toggleImg hide"></span></a></h4>
								</div>
								<div class="newCont">
								  <ul class="postList">
									{% FOR news_list_shop %}
										<!-- Вывод не больше 4 пунктов новостей -->
										{% IF news_list_articles.index > 4 %} {break} {% ENDIF %}
										<li><a href="{news_list_shop.URL}" title="Перейти к странице &laquo;{news_list_shop.TITLE}&raquo;" {% IF news_list_shop.ID = NEWS_ID %} class="selected" {%ENDIF%}>{news_list_shop.TITLE}</a></li>
									{% ENDFOR %}
								  </ul>
								</div>
							</div>
						{% ENDIF %}
						<!-- END Если есть список новости магазина и если в тарифном плане подключен модуль новостей -->
						<!-- Если есть список статей магазина и если в тарифном плане подключен модуль новостей -->
						{% IFNOT news_list_articles_empty && TARIFF_FEATURE_NEWS %}
							<div class="news_list_articles column ">
								<div class="newHead">
								  <h4><a href="{NEWS_ARTICLES_URL}" title="Перейти к странице &laquo;Статьи&raquo;">Статьи<span class="toggleImg hide"></span></a></h4>
								</div>
								<div class="newCont">
								  <ul class="postList">
									{% FOR news_list_articles %}
										<!-- Вывод не больше 4 пунктов новостей -->
										{% IF news_list_articles.index > 4 %} {break} {% ENDIF %}
										<li><a href="{news_list_articles.URL}" title="Перейти к странице &laquo;{news_list_articles.TITLE}&raquo;" {% IF news_list_articles.ID = NEWS_ID %} class="selected" {%ENDIF%}>{news_list_articles.TITLE}</a></li>
									{% ENDFOR %}
								  </ul>
								</div>
							</div>
						{% ENDIF %}
						<!-- END Если есть список статей магазина и если в тарифном плане подключен модуль новостей -->
						<!-- Если есть список материалов СМИ магазина и если в тарифном плане подключен модуль новостей -->
						{% IFNOT news_list_mass_media_empty && TARIFF_FEATURE_NEWS %}
							<div class="news_list_mass_media column ">
								<div class="newHead">
								  <h4><a href="{NEWS_MASS_MEDIA_URL}" title="Перейти к странице &laquo;Материалы СМИ&raquo;">Материалы СМИ<span class="toggleImg hide"></span></a></h4>
								</div>
								<div class="newCont">
								  <ul class="postList">
									{% FOR news_list_mass_media %}
										<!-- Вывод не больше 4 пунктов новостей -->
										{% IF news_list_mass_media.index > 4 %} {break} {% ENDIF %}
										<li><a href="{news_list_mass_media.URL}" title="Перейти к странице &laquo;{news_list_mass_media.TITLE}&raquo;" {% IF news_list_mass_media.ID = NEWS_ID %} class="selected" {%ENDIF%}>{news_list_mass_media.TITLE}</a></li>
									{% ENDFOR %}
								  </ul>
								</div>
							</div>
						{% ENDIF %}
						<!-- END Если есть список материалов СМИ магазина и если в тарифном плане подключен модуль новостей -->

злая я))) (25 Июнь 2014 - 12:15) писал:

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

Новый, легкий,адаптивный шаблон "Бистро".
Из опыта создания шаблона "Радость" стало понятно что на мобильных устройствах все еще медленный интернет. Поэтому при создание нового шаблона мы хотели как можно меньше нагружать шаблон излишними графическими элементами чтобы ускорить загрузку.

• В шаблоне используется плагин Owl. Который специально адаптирован для сенсорных устройств. Если открыть сайт на мобильном телефоне с сенсорным управлением, то можно пролистать изображения на странице товара скользящим движением пальца. http://owlgraphic.com/owlcarousel/
  
• Используется другая галерея изображений, которая доступна и из каталога товаров.
  
• Сделали более привычное меню на мобильных устройствах.
  
• Оформить заказ можно прямо из корзины, при этом пользователь видит что лежит у него в корзине в момент оформления.

Пример шаблона: http://sample-bistro.storeland.ru/

В ввиде карусели можно сделать товары на главной из категорий "Новинки", "Хиты продаж", "Товары на главной".
Расмотрим пример с категорией "Товары на главной". (У каждой категории свои переменные...)

В файле "html".
После кода:

														 <div class="btn-toolbar">
															 <!-- Если товара нет в наличие и в настройках отключена возможность класть -->
															 {% IF SETTINGS_GOODS_DONT_PUT_TO_CART_MORE_THAN_AVAILABLE && index_page_goods.MAX_REST_VALUE==0 %}
																 <div class="tovar-available fnt11 fntupcase aunder">
																	 <a href="#" rel="false" class="catalog-available-false" >
																		 <div class="stikno">Товара нет в наличии</div>
																	 </a>
																 </div>
															 {%ELSE%}
																 <form action="{CART_ADD_GOODS_MODIFICATION_URL | url_amp}" method="post" id="goodsListFormId{index_page_goods.MIN_PRICE_NOW_ID}" class="goodsListForm">
																	 <div class="btnToCart">
																		 <input type="hidden" name="hash" value="{HASH}" />
																		 <input type="hidden" name="form[goods_from]" value="{index_page_goods.GOODS_FROM}" />
																		 <input type="hidden" name="form[goods_mod_id]" value="{index_page_goods.MIN_PRICE_NOW_ID}" />
																		 <a class="btn btn-success toCart" onclick="addItem('.index_page_goods #goodsListFormId{index_page_goods.MIN_PRICE_NOW_ID}');
																	 return false;" href="{CART_ADD_GOODS_MODIFICATION_URL | url_amp}?hash={HASH | url_amp}&amp;form%5Bgoods_from%5D={index_page_goods.GOODS_FROM}&amp;form%5Bgoods_mod_id%5D={index_page_goods.MIN_PRICE_NOW_ID}" title="Положить &laquo;{index_page_goods.NAME}&raquo; в корзину">
																			 <span class="basket_add"></span>
																		 </a>
																	 </div>
																	 <div class="numeric input-prepend input-append btn-group">
																		 <a class="js-minus btn minus">
																			 <i class="icon-minus">
																				 -
																			 </i>
																		 </a>
																		 <input type="number" name="form[goods_mod_quantity]" class="quantity" min="1" max="999" step="1" value="1" title="Количество" />
																		 <a class="js-plus btn plus">
																			 <i class="icon-plus">
																				 +
																			 </i>
																		 </a>
																	 </div>
																 </form>
															 {% ENDIF %}
														 </div>
													 </div>
												 </div>
											 </div>
										 {% ENDFOR index_page_goods %}
										 <!-- END Вывод товаров таблицей-->
									 </div>
								 </div>

Добавить код:

									<div class="customNavigation my">
									  <a class="btn prev" title="Назад"></a>
									  <a class="btn next" title="Вперед"></a>
									</div>
									<script>
									  $(document).ready(function() {
										var owl = $(".index_page_goods .blockTableTovarIndexPage");
										owl.owlCarousel({
										  items : 4, //количество плиток
										  autoPlay: 4000 // скорость прокрутки
										});
										// Custom Navigation Events
										$(".next").click(function(){
										  owl.trigger('owl.next');
										});
										$(".prev").click(function(){
										  owl.trigger('owl.prev');
										});
									  });
									</script>

Добавить в конец файла "main.css" код:

.blockIndexPage .owl-wrapper-outer {
max-width: none;
}
.customNavigation.my {
position: relative;
margin-bottom: -40px;
height: 40px;
bottom: 0;
width: 100%;
overflow: visible;
opacity: 0.5;
}
.index_page_goods .menu-item {
width: 90%;
}
.my .next, .my .prev {
position:relative;
bottom:235px;
background: url('{ASSETS_IMAGES_PATH}sprites.png') no-repeat -305px -0.5%;
height: 30px;
width: 5px;
background-color: #4E6D8D;
}
.my .prev {
float: left;
background-position-x: -277px;
left: 1px;
}
.my .next {
float: right;
background-position-x: -315px;
}
.customNavigation.my:hover {
opacity: 0.5;
}
.my .next:hover, .my .prev:hover {
opacity: 1;
background-color: #0E4277;
}
.index_page_goods .menu-item-icon {
right: 8%;
}

При нажатие на кнопку "Добавить в корзину" будет всплывать сообщение об успешном добавление товара в корзину. При этом пользователя не будет перекидывать на страницу корзину.
Для того чтобы сделать такое уведомление нужно выполнить некоторые действия в разделе Редактор шаблонов.

• Создать бекап текущего шаблона.
  
  
• В файле "Товар" код:
  

  	 <p id="add_to_cart"> <input type="submit" name="Submit" value="Добавить в корзину" class="add_to_cart" onclick="$('.goodsDataForm').submit()"></p>
  	

  Заменить:
  

  				 <div class="tovar-in">
  				 <span>Товар добавлен в корзину</span>
  				 </div>
  				 <p id="add_to_cart"> <input type="submit" name="Submit" value="Добавить в корзину" class="add_to_cart" onclick="$('.goodsDataForm').submit(); return false;"></p>
  	

  
  
  
• В файле "main.js".
  Код:
  

  	 // Добавление товара в корзину через ajax
  	 $('.goodsListItemCatalogueAddToCartButton, .goodsToCartFromCompareForm').submit(function(){
  	 // Если нужно быстро положить в корзину
  	 if($(this).attr('rel') == 'quick') {
  		 return true;
  	
  	 // Если нужно просто добавить в корзину и продолжить покупки
  	 } else {
  		 $(this).nyroModalManual({
  		 formIndicator: 'ajax_q', // Value added when a form is sent
  		 minWidth: 420, // Minimum width
  		 minHeight: 150, // Minimum height
  		 gallery: null // Gallery name if provided
  		 });
  		 return false;
  		 }
  	 });
  	

  Заменить:
  

  	 $('.tovar-in').hide();
  	 // Добавление товара в корзину через ajax
  	 $('.goodsListItemCatalogueAddToCartButton, .goodsToCartFromCompareForm, .goodsDataForm').submit(function(){
  	 // Если нужно быстро положить в корзину
  	 if($(this).attr('rel') == 'quick') {
  		 return true;
  	
  	 // Если нужно просто добавить в корзину и продолжить покупки
  	 } else {
  		 $('.tovar-in').fadeIn(500);
  		 return false;
  		 }
  	 });
  	

  
  
• В конец файла style.css добавить стили:
  

  	.tovar-in {
  	 clear: both;
  	 margin: -9px 0px;
  	 margin-top: auto;
  	 line-height: 3;	
  	 margin-left: 0.8%;
  	}
  	.tovar-in span {
  	 padding: 1%; border: 1px solid #4CCC5F; font-size: 13px; background: #BDF7A7;
  	}