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


Proofi

Регистрация: 14 дек. 2020
Offline Активность: 16 июля 2021 12:35
-----

#288805 Установка Favicon

Отправлено Foxis_10 на 20 Февраль 2021 - 10:40

Рекомендации от Яндекса для favicon
-формат SVG
-размер 120 x 120px

Почему иконка не отображается в поисковиках?
Вам нужно подождать пока поисковой робот проиндексирует сайт. Обычно это занимает 3-4 недели.

Как добавить иконку favicon.ico
1)Переходите на сайт https://perfecto-web...-generator.html
2)Выбираете размер 120px х120px
3)Выберите файл (.png или .jpg)
4)Нажмите на кнопку "Создать favicon"
5)Скачайте.
6)Переименуйте изображение на favicon
7)В Сайт-Редактор шаблонов нажимаете на кнопку "Добавить файлы" и
загрузите скаченное изображение
8)Убедитесь, что название совпадает со скриншотом ниже

Скриншот.PNG
9)Обязательно, обновите страницу админ панели и страницы магазина. Ваша иконка появилась.
иконка.PNG


Как добавить иконку favicon.svg
1)Подготовьте иконку размером 120px х 120px и назовите ее favicon (Вы можете скачать ее в интернете и подогнать по размерам в Photoshop, illustrator или Figma)
2)
В Сайт-Редактор шаблонов нажимаете на кнопку "Добавить файлы" и загрузите изображение
3)Убедитесь, что название совпадает со скриншотом ниже
Скриншот2.PNG
4)Перейдите в шаблон HTML и найдите строки
<link rel="icon" href="{ASSETS_IMAGES_PATH}favicon.ico?design=neon" type="image/x-icon" />
<link rel="shortcut icon" href="{ASSETS_IMAGES_PATH}favicon.ico?design=neon" type="image/x-icon" />
По стандарту в обоих строках присутствует название favicon.ico
Замените его на favicon.svg, а так же измените тип файла с
image/x-icon на image/svg+xml

Пример
<link rel="icon" href="{ASSETS_IMAGES_PATH}favicon.svg?design=neon" type="image/svg+xml" />
<link rel="shortcut icon" href="{ASSETS_IMAGES_PATH}favicon.svg?design=neon" type="image/svg+xml" />

5)Обязательно обновите страницу админ панели и страницы магазина. Ваша иконка появилась.
иконка.PNG

Как сделать иконку из png в svg формате
1)Подготовьте иконку png размером
120px х 120px с названием favicon
2)Прейдите на сайт
https://onlineconver...mat/png-to-svg/ выберите изображение иконки, выберите в SVG. Конвертируйте изображение.
3)Скачайте


Причины почему не отображается иконка favicon на сайте
1)Неверное название изображение при загрузке на Сайт
Неверно: favicon.ico.svg, favicon.svg.ico, 07bdfac330d036a9bd212aef80b5888a и т.д.
Верно: favicon.ico или favicon.svg

2)Неверный размер
Верно:120px х 120px

3)Неверно прописаны строки в шаблоне HTML


Если иконка favicon.ico строки должны быть такими (одинаковое название в обеих строках)

<link rel="icon" href="{ASSETS_IMAGES_PATH}favicon.ico?design=neon" type="image/x-icon" />
<link rel="shortcut icon" href="{ASSETS_IMAGES_PATH}favicon.ico?design=neon" type="image/x-icon" />


Если иконка favicon.svg строки должны быть такими

<link rel="icon" href="{ASSETS_IMAGES_PATH}favicon.svg?design=neon" type="image/svg+xml" />
<link rel="shortcut icon" href="{ASSETS_IMAGES_PATH}favicon.svg?design=neon" type="image/svg+xml" />

4)Иконка некорректно отображается. Как это проверить?
Перейдите в Сайт-Редактор шаблонов Файлы и найдите вашу favicon.ico или  favicon.svg. Нажмите на нее.
Если в новом окне изображение иконки появилось, то все хорошо.
Если открылось подобное сообщение, то ваша иконка некорректна. Вероятно она другого формата. Например, называется favicon.svg, а формат имеет .ico
ошибка.PNG

Снимок.JPG

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

  • Скриншот.PNG
  • иконка.PNG
  • Скриншот2.PNG
  • ошибка.PNG
  • Снимок.JPG



#288501 Защита На Кнопку "оформить Заказ" От Дублирования Заказа

Отправлено Mr.Nito на 24 Декабрь 2020 - 16:51

в main.js заменить
// Валидация формы на странице оформления заказа
$("#quickform").submit(function(){
// Если форма невалидна не отправляем её на сервер
if(!$(this).valid()) {
	 return false;
}
// Получаем данные формы, которые будем отправлять на сервер
var formData = $(this).serializeArray();
// Сообщаем серверу, что мы пришли через ajax запрос
formData.push({name: 'ajax_q', value: 1});
// Аяксом добавляем товар в корзину и вызываем форму быстрого заказа товара
$.ajax({
	 type : "POST",
	 dataType: 'json',
	 cache : false,
	 url	 : $(this).attr('action'),
	 data : formData,
	 success: function(data) {
	 // Если заказ был успешно создан
	 if( data.status == 'ok' ) {
		 window.location = data.location;
	 } else if( data.status == 'error' ) {
		 alert(data.message);
	 } else {
		 alert('Во время оформления заказа возникла неизвестная ошибка. Пожалуйста, обратитесь в службу технической поддержки.');
	 }
	 }
});
return false;	
}).validate();
на
// Валидация формы на странице оформления заказа
$("#quickform").submit(function(){
// Если форма невалидна не отправляем её на сервер
if(!$(this).valid()) {
	 return false;
}
// Получаем данные формы, которые будем отправлять на сервер
var formData = $(this).serializeArray();
// Сообщаем серверу, что мы пришли через ajax запрос
formData.push({name: 'ajax_q', value: 1});
var $btn = $("#quickform").find('button[type="submit"]')
// Аяксом добавляем товар в корзину и вызываем форму быстрого заказа товара
$.ajax({
	 type : "POST",
	 dataType: 'json',
	 cache : false,
	 url	 : $(this).attr('action'),
	 data : formData,
	 timeout: 3000,
	 beforeSend: function() {
	 $btn.addClass('disabled').html('Оформляется')
	 },	
	 success: function(data) {
	 // Если заказ был успешно создан
	 if( data.status == 'ok' ) {
		 window.location = data.location;
	 } else if( data.status == 'error' ) {
		 alert(data.message);
		 $btn.removeClass('disabled').html('Оформить заказ')
	 } else {
		 alert('Во время оформления заказа возникла неизвестная ошибка. Пожалуйста, обратитесь в службу технической поддержки.');
	 }
	 },
	 error: function() {
	 $btn.removeClass('disabled').html('Оформить заказ')
	 }
});
return false;	
}).validate();

в main.css добавить строку
.button.disabled {opacity: 0.7;cursor: default; pointer-events: none;}



#287702 Замена формы Подписки на Поиск товаров на слайдере

Отправлено metry на 08 Август 2020 - 17:34

Для внесения изменений зайдите в Редактор шаблонов-->HTML и найдите:

			 <div class="subscribe">
				 <div class="subscribe__wrapper">
				 <form method="post" action="{CALLBACK_URL}" class="subscribe__form" enctype="multipart/form-data">
					 <input type="hidden" name="hash" value="{HASH}" />
					 <input class="callbackredirect" type="hidden" name="return_to" value="{CALLBACK_URL}"/>
					 <!-- Набор полей которые не видит пользователь, но видят боты. Когда они их заполняют мы точно знаем, что их прислал нам бот и мы не сохраняем подобный отзыв о товаре, а боту отправившему отзыв сообщаем, что отзыв добавлен успешно, но будет отображён здесь после прохождения модерации -->
					 {ANTISPAM_CODE}
					 <input type="hidden" name="form[{ANTISPAM_FORM_FIELD_NAME_CALLBACK_PERSON}]" value="Подписаться"/>
					 <input type="hidden" name="form[{ANTISPAM_FORM_FIELD_NAME_CALLBACK_PHONE}]" value="Подписаться"/>					
					 <div class="subscribe__input-wrapper">
					 <input class="input subscribe__email" required type="email" pattern="([A-z0-9_.-]{1,})@([A-z0-9_.-]{1,}).([A-z]{2,8})" name="form[callback_email]" value="{FORM_CALLBACK_EMAIL}" placeholder="Введите Ваш E-Mail" maxlength="255" />
					 <button type="submit" title="Подписаться" class="button subscribe__button">Подписаться</button>
					 </div>
					 <div class="politics _subscribe__politics">
					 Нажимая на кнопку Подписаться, Вы соглашаетесь с <a data-fancybox class="underline" href="#fancybox-politics">правилами обработки данных</a>
					 </div>
				 </form>				
				 </div>
			 </div>

замените на:

			 <div class="subscribe">
				 <div class="subscribe__wrapper">
					 <div class="search">
						 <form id="search_mini_form" action="{SEARCH_URL}" method="get" title="Поиск по магазину">
						 <div class="subscribe__input">
							 <input type="hidden" name="goods_search_field_id" value="0">
							 <input required type="text" name="q" value="{SEARCH_QUERY}" class="input search-string" placeholder="Поиск по магазину..." autocomplete="off">
							 <button type="submit" class="search__submit button subscribe__button" title="Искать"><span>Искать</span></button>
						 </div>
						 </form>
					 </div>
				 </div>
			 </div>


- указанную замену необходимо произвести 3 раза для каждого слайдера.



Далее зайдите в Редактор шаблонов-->main.css и найдите:

/* Блок подписаться */
.subscribe {position: relative}
.subscribe .subscribe__wrapper {max-width: 895px;width: 100%;margin: 0 auto;border-radius: 3px}
.subscribe .subscribe__input-wrapper {position: relative}
.subscribe .subscribe__email {height: 55px;border: 1px solid #02c1f5;background-color: #fff;padding: 20px;width: 100%;border-radius: 30px;color: #333}
.subscribe .subscribe__email + label.error {right: auto;left: 20px}
.subscribe .subscribe__email.error {padding-left: 50px}
.subscribe .subscribe__button {position: absolute;z-index: 1;top: 0;right: 0;height: 100%;background: 0 0;padding: 0 30px;color: #fff;background-color: #02c1f5;font-size: 18px;font-weight: 400;text-transform: uppercase;border-bottom-right-radius: 25px;border-top-right-radius: 25px;border-top-left-radius: 0;border-bottom-left-radius: 0;border: none}
.subscribe .subscribe__input-wrapper:hover .subscribe__button {background-color: #ff4c77;color: #fff}
.subscribe .subscribe__input-wrapper:hover .subscribe__email {border-color: #ff4c77}
.politics._subscribe__politics {padding-top: 10px;color: #4c4c4c;font-size: 16px;font-weight: 400}
.politics._subscribe__politics a {display: inline;text-decoration: none;color: #ff4c77}

замените на:

/* Блок подписаться */
.subscribe {position: relative}
.subscribe .subscribe__wrapper {max-width: 895px;width: 100%;margin: 0 auto;border-radius: 3px}
.subscribe .subscribe__input {position: relative}
.subscribe .search-string {height: 55px;border: 1px solid #02c1f5;background-color: #fff;padding: 20px;width: 100%;border-radius: 30px;color: #333}
.subscribe .search-string + label.error {right: auto;left: 20px}
.subscribe .search-string.error {padding-left: 50px}
.subscribe .subscribe__button {position: absolute;z-index: 1;top: 0;right: 0;height: 100%;background: 0 0;padding: 0 30px;color: #fff;background-color: #02c1f5;font-size: 18px;font-weight: 400;text-transform: uppercase;border-bottom-right-radius: 25px;border-top-right-radius: 25px;border-top-left-radius: 0;border-bottom-left-radius: 0;border: none}
.subscribe .subscribe__input:hover .subscribe__button {background-color: #ff4c77;color: #fff}
.subscribe .subscribe__input:hover .search-string {border-color: #ff4c77}
.politics._subscribe__politics {padding-top: 10px;color: #4c4c4c;font-size: 16px;font-weight: 400}
.politics._subscribe__politics a {display: inline;text-decoration: none;color: #ff4c77}



#287588 Изменение изображения при смене модификации

Отправлено metry на 16 Июль 2020 - 10:07

Для внесения изменений зайдите в Редактор шаблонов-->Товар и найдите:

<input type="hidden" name="is_has_in_compare_list" value="{goods_modifications.IS_HAS_IN_COMPARE_LIST}" />

после него вставьте:
<input type="hidden" name="goods_mod_image_id" value="{goods_modifications.GOODS_MOD_IMAGE_ID}" />

далее найдите:

<li><a href="{goods_images.LARGE}" title="{goods_images.NAME}" class="thumblisticon" rel="gallery"><img src="{goods_images.ICON}" alt="{goods_images.NAME}" class="goods-image-icon" itemprop="image" /></a></li>

замените на:
<li><a href="{goods_images.LARGE}" data-id="{goods_images.ID}" title="{goods_images.NAME}" class="thumblisticon" rel="gallery"><img src="{goods_images.ICON}" alt="{goods_images.NAME}" class="goods-image-icon" /></a></li>



2) В шаблоне main.js после кода:

// Идентификатор товарной модификации
goodsModificationId.val(modificationId);

добавьте:


// Меняет главное изображение товара на изображение с идентификатором goods_mod_image_id
function changePrimaryGoodsImage(goods_mod_image_id) {
// Если не указан идентификатор модификации товара, значит ничего менять не нужно.
if(1 > goods_mod_image_id) {
return true;
}
var
// Блок с изображением выбранной модификации товара
goodsModImageBlock = $('.thumblist [data-id="' + parseInt(goods_mod_image_id) + '"'),
// Блок, в котором находится главное изображение товара
MainImageBlock = $('#zoom1'),
// Изображение модификации товара, на которое нужно будет изменить главное изображение товара.
MediumImageUrl = goodsModImageBlock.attr('href'),
// Главное изображение, в которое будем вставлять новое изображение
MainImage = MainImageBlock.find('img'),
MainImageUrl = MainImageBlock.find('a'),
// В этом объекте хранится идентификатор картинки главного изображения для коректной работы галереи изображений
MainImageIdObject = MainImageBlock.attr('data-id');

// Если изображение модификации товара найдено - изменяем главное изображение
MainImage.attr('src', MediumImageUrl);
MainImageUrl.attr('href', MediumImageUrl);
// Изменяем идентификатор главного изображения
MainImageBlock.attr("data-id", parseInt(goods_mod_image_id));
return true;
}
// Обновляем изображение модификации товара, если оно указано
changePrimaryGoodsImage(modificationGoodsModImageId);

3) В шаблон main.js после кода:

modificationIsHasInCompareList= modificationBlock.find('[name="is_has_in_compare_list"]').val(),

добавить:

modificationGoodsModImageId = modificationBlock.find('[name="goods_mod_image_id"]').val(),



#288453 Исправление Js-Ошибки И Скорллинга При Перелистывании Сопутствующих Товаров

Отправлено metry на 15 Декабрь 2020 - 18:33

Для внесения изменений зайдите в Редактор шаблонов-->main.css и найдите:

.navigation .prev, .navigation .next, .owl-nav .owl-prev, .owl-nav .owl-next {display: block;background-color: #fff;color: #a7a7a7;font-size: 50px;width: 50px;height: 50px;line-height: 50px;font-family: "Material Icons";margin: 0;padding: 0;overflow: hidden;text-align: center;cursor: pointer;z-index: 2;}

замените на:

.navigation .prev, .navigation .next, .owl-nav .owl-prev, .owl-nav .owl-next {display: block;background-color: #fff;color: #a7a7a7;font-size: 50px;width: 50px;height: 50px;line-height: 50px;font-family: "Material Icons";margin: 0;padding: 0;overflow: hidden;text-align: center;cursor: pointer;z-index: 2;border: 0;outline: 0;}

далее найдите:

/*** Сопутствующие товары, С этим товаром смотрят ***/
#related {position: relative;background-color: #fff;padding: 30px 0;}
#related .products-grid .item {padding: 0;}

после него вставьте:

#related .block-title {position: relative;}
#related .navigation .owl-prev, #related .navigation .owl-next {position: absolute;top: 0;}

Далее зайдите в Редактор шаблонов-->main.js  и найдите:

// С этим товаром смотрят
jQuery(function($) {
var owl = $('.related-views .products-grid');
// Показывать\Скрывать навигацию
owl.on('initialized.owl.carousel changed.owl.carousel', function(event) {
var items = event.item.count;
var size = event.page.size;
if (items < size){
	 $('.related-views .navigation').hide();
} else {
	 $('.related-views .navigation').show();
}
});
owl.owlCarousel({
items: 4,
margin: 30,
loop: false,
rewind: true,
lazyLoad: false,
dots: false,
nav: false,
navContainer: '.related-views .navigation',
navText: [ , ],
autoplay: true,
autoplayHoverPause: true,
smartSpeed: 500,
mouseDrag: true,
touchDrag: true,
pullDrag: true,
responsiveClass: true,
responsiveRefreshRate: 100,
responsive: {
	 0:{items:1},
	 320:{items:1},
	 480:{items:1},
	 641:{items:2},
	 768:{items:2},
	 992:{items:3},
	 1200:{items:3},
	 1366:{items:4}
}
});
// Кнопки навигации
$('.related-views .navigation .next').click(function(event) {
event.preventDefault();
owl.trigger('next.owl.carousel');
});
$('.related-views .navigation .prev').click(function(event) {
event.preventDefault();
owl.trigger('prev.owl.carousel');
});
});
// Сопутствующие товары
jQuery(function($) {
var owl = $('.related-goods .products-grid');
// Показывать\Скрывать навигацию
owl.on('initialized.owl.carousel changed.owl.carousel', function(event) {
var items = event.item.count;
var size = event.page.size;
if (items < size){
	 $('.related-goods .navigation').hide();
} else {
	 $('.related-goods .navigation').show();
}
});
owl.owlCarousel({
items: 4,
margin: 30,
loop: false,
rewind: true,
lazyLoad: false,
nav: false,
navContainer: '.related-goods .navigation',
navText: [ , ],
dots: false,
autoplay: true,
autoplayHoverPause: true,
smartSpeed: 500,
mouseDrag: true,
touchDrag: true,
pullDrag: true,
responsiveClass: true,
responsiveRefreshRate: 100,
responsive: {
	 0:{items:1},
	 320:{items:1},
	 480:{items:1},
	 641:{items:2},
	 768:{items:2},
	 992:{items:3},
	 1200:{items:3},
	 1366:{items:4}
}
});
// Кнопки навигации
$('.related-goods .navigation .next').click(function(event) {
event.preventDefault();
owl.trigger('next.owl.carousel');
});
$('.related-goods .navigation .prev').click(function(event) {
event.preventDefault();
owl.trigger('prev.owl.carousel');
});
});
}

замените на:

// С этим товаром смотрят
$('.related-views .owl-carousel').owlCarousel({
items: 5,
margin: 32,
loop: false,
rewind: true,
loop: false,
rewind: true,
lazyLoad: true,
nav: true,
navContainer: '.related-views .navigation',
navText: [ , ],
dots: false,
autoHeight: false,
autoHeightClass: 'owl-height',
autoplay: false,
autoplayHoverPause: false,
smartSpeed: 500,
mouseDrag: true,
touchDrag: true,
pullDrag: true,
responsiveClass: true,
responsiveRefreshRate: 100,
responsive: {
	 0:{items:1},
	 320:{items:1},
	 480:{items:1},
	 641:{items:2},
	 768:{items:2},
	 992:{items:3},
	 1200:{items:3},
	 1366:{items:4}
}
});
// Сопутствующие товары Слайдер
$('.related-goods .owl-carousel').owlCarousel({
items: 4,
margin: 32,
loop: false,
rewind: true,
lazyLoad: true,
nav: true,
navContainer: '.related-goods .navigation',
navText: [ , ],
dots: false,
autoHeight: false,
autoHeightClass: 'owl-height',
autoplay: false,
autoplayHoverPause: false,
smartSpeed: 500,
mouseDrag: true,
touchDrag: true,
pullDrag: true,
responsiveClass: true,
responsiveRefreshRate: 100,
responsive: {
	 0:{items:1},
	 320:{items:1},
	 480:{items:1},
	 641:{items:2},
	 768:{items:2},
	 992:{items:3},
	 1200:{items:3},
	 1366:{items:4}
}
});
}