Jump to content

  • You cannot start a new topic
  • You cannot reply to this topic

Как Модифицировать Социальные Кнопки От Яндекса? Rate Topic   - - - - -

 
  • zoldat
  • Senior Member
  • Members
  • Join Date: 24-Nov 16
  • 593 posts

Posted 13 February 2018 - 01:06 PM #1

Приветствую всех.

 

Исходные данные:

Имеется код социальных кнопок от Яндекса, который установлен через стандартный модуль "Социальные кнопки". Приводить скриншот не буду. Эти кнопочки знают все.

 

С одной стороны - социальные кнопки вроде как способны увеличить количество социальных сигналов для поисковиков. Т.е. как бы полезны.

 

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

 

Решение подсмотрел у Вайлдберрис и Ламода.

WB: http://prntscr.com/ie46f1

Lamoda: http://prntscr.com/ie46y6

Поясню: На этих сайтах всё время кнопки черно-белые и не являются контрастным элементом. При наведении курсора мыши кнопки "превращаются" в цветные.

 

Вопрос: как можно реализовать такое решение для кнопок от яндекса?

В дефолтной теме нужный эффект используется для блока "Брэнды" на главной странице. Можно ли это как-то использовать?

 

PS: Поскольку я вовсе не программист, буду очень благодарен за излишнюю подробность в ответе.



 
  • eComLabs
  • CS-Cart Expert
  • Authorized Reseller
  • Join Date: 27-Jan 14
  • 16,431 posts

Posted 13 February 2018 - 01:23 PM #2

В упомянутом блоке используется класс ty-grayscale  . Попробуйте его повесить на весь блок с кнопками


GET A FREE QUOTE | CS-Cart Add-ons | CS-Cart Licenses | CS-Cart Development | CS-Cart Design | Server Configuration

Certified CS-Cart RU Developer | Сертифицированный разработчик на CS-Cart Русская Версия

 
  • zoldat
  • Senior Member
  • Members
  • Join Date: 24-Nov 16
  • 593 posts

Posted 13 February 2018 - 01:40 PM #3

В упомянутом блоке используется класс ty-grayscale  . Попробуйте его повесить на весь блок с кнопками

Можно прямо пример с синтаксисом, чтобы я ерунду не напорол... Спасибо!

 

Дело в том, что блока самостоятельного сейчас нет. Код кнопок прописываю через модуль "социальные кнопки", сами кнопки в итоге выводятся в блоке "Главное содержимое". Надо как-то код во что-то "обернуть", если я правильно понимаю. Как это должно выглядеть?



 
  • zoldat
  • Senior Member
  • Members
  • Join Date: 24-Nov 16
  • 593 posts

Posted 13 February 2018 - 01:49 PM #4

Сделал так (итоговый код): 

Поделитесь с друзьями:
<script src="//yastatic.net/es5-shims/0.0.2/es5-shims.min.js" async="async"></script>
<script src="//yastatic.net/share2/share.js" async="async"></script>
<div class="ty-grayscale">
<div class="ya-share2" data-services="collections,vkontakte,facebook,odnoklassniki,twitter,viber,whatsapp,telegram,skype"></div>
</div>

Почти получилось, но...

Сейчас при наведении курсора на любую кнопку, цветными становятся все кнопки. Можно как-то сделать цветной только конкретную кнопку? Или я много хочу? :grin:



 
  • zoldat
  • Senior Member
  • Members
  • Join Date: 24-Nov 16
  • 593 posts

Posted 13 February 2018 - 02:17 PM #5

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

<script src="//yastatic.net/es5-shims/0.0.2/es5-shims.min.js" async="async"></script>
<script src="//yastatic.net/share2/share.js" async="async"></script>
<div class="hidden-phone">
<div class="ty-grayscale">
<div class="ya-share2" data-services="collections,vkontakte,facebook,odnoklassniki,twitter,skype"></div>
</div>
</div>

<div class="hidden-desktop">
<div class="ty-grayscale">
<div class="ya-share2" data-services="collections,vkontakte,facebook,odnoklassniki,twitter,viber,whatsapp,telegram,skype"></div>
</div>
</div>

Идея в том, чтобы на компе не показывать кнопки Ватсап, Вайбер и Телеграм.



 
  • albinos
  • Newbie
  • Trial users
  • Join Date: 21-Jan 18
  • 6 posts

Posted 13 February 2018 - 02:18 PM #6

Как вариант. Чтоб не бросались в глаза иконки и было по красоте, в CSS вставьте следующий код:

 

 
.b-share_theme_counter .b-share-btn__vkontakte {
filter: grayscale(100);
opacity: .5;
}
 
.b-share_theme_counter .b-share-btn__vkontakte:hover {
filter: grayscale(0);
opacity: 1;
}
 
.b-share_theme_counter .b-share-btn__facebook {
filter: grayscale(100);
opacity: .5;
}
 
.b-share_theme_counter .b-share-btn__facebook:hover {
filter: grayscale(0);
opacity: 1;
}
 
.b-share_theme_counter .b-share-btn__twitter {
filter: grayscale(100);
opacity: .5;
}
 
.b-share_theme_counter .b-share-btn__twitter:hover {
filter: grayscale(0);
opacity: 1;
}
 
.b-share_theme_counter .b-share-btn__odnoklassniki {
filter: grayscale(100);
opacity: .5;
}
 
.b-share_theme_counter .b-share-btn__odnoklassniki:hover {
filter: grayscale(0);
opacity: 1;
}
 
.b-share_theme_counter .b-share-btn__moimir {
filter: grayscale(100);
opacity: .5;
}
 
.b-share_theme_counter .b-share-btn__moimir:hover {
filter: grayscale(0);
opacity: 1;
}
 
Результат "вживую" можно глянуть тут:  http://test-cart.tw1...ry/dualshock-4/


 
  • albinos
  • Newbie
  • Trial users
  • Join Date: 21-Jan 18
  • 6 posts

Posted 13 February 2018 - 02:48 PM #7

Сделал более универсальный вариант с небольшими изменениями. 

Результат сразу для всех кнопок, а не для каждой по отдельности:

 

.b-share-btn__wrap {
    filter: grayscale(100);
    -webkit-filter: grayscale(100);
    opacity: .5;
    transition: 1s;
}
 
.b-share-btn__wrap:hover {
    filter: grayscale(0);
    -webkit-filter: grayscale(0);
    opacity: 1;
    transition: .5s;
}


 
  • zoldat
  • Senior Member
  • Members
  • Join Date: 24-Nov 16
  • 593 posts

Posted 13 February 2018 - 06:38 PM #8

Коллега albinos помог с решением задачи.

Заслуга в этом только его. Я лишь выкладываю решение. Всё протестировано, все работает.

 

Решение работает с кодом социальных кнопок, представленным тут: https://tech.yandex.ru/share/

 

Чтобы кнопочки в пассивном состоянии были бледненько-черно-белые, а "загорались" по отдельности при наведении курсора нужно вставить пользовательский CSS:

.ya-share2__list_direction_horizontal > .ya-share2__item {

    -webkit-filter: grayscale(100);

    filter: grayscale(100);
    opacity: .5;
    transition: 1s;
}
 
.ya-share2__list_direction_horizontal > .ya-share2__item:hover {
    -webkit-filter: grayscale(0);
    filter: grayscale(0);
    opacity: 1;
    transition: .5s;
}

Для таких же "продвинутых", как я: вставляется он Дизайн-Темы-Редактор_тем-Редактировать-Пользовательские_CSS.

 

Чтобы на ПК не отображались кнопки "телефонных" месенджеров (Ватсап, Вайбер и Телеграм), туда же вставляем код:

@media screen and (min-width: 767px) {
.ya-share2__item_service_viber .ya-share2__icon {
    display: none;
}
 
.ya-share2__item_service_whatsapp .ya-share2__icon {
    display: none;
}
 
.ya-share2__item_service_telegram .ya-share2__icon {
    display: none;
  }
}

Благодарим автора!



 
  • zoldat
  • Senior Member
  • Members
  • Join Date: 24-Nov 16
  • 593 posts

Posted 14 February 2018 - 10:25 AM #9

Возник вопрос: как фразу "Поделиться", предшествующую кнопкам сделать с ними в одной строке? Сейчас она над кнопками...

Исходный код такой:

Поделиться:
<script src="//yastatic.net/es5-shims/0.0.2/es5-shims.min.js"></script>
<script src="//yastatic.net/share2/share.js"></script>
<div class="ya-share2" data-services="collections,vkontakte,facebook,odnoklassniki,moimir"></div>

Есть мысль оформить вывод таблицей, но от этого решения каким-то "колхозом" веет. Есть другие варианты?