Пример как будет выглядеть.
Установка таких кнопок производится довольно просто.
Все действия производятся в разделе Сайт -> Редактор шаблонов. Для добавления кнопок на страницу товара нужно открыть файл "Товар" и добавить после кода:
<div class="clear"></div> <!-- Блок описания модификации --> <div class="goodsDataMainModificationsDescriptionBlock" {% IFNOT GOODS_MOD_DESCRIPTION %}style="display:none;"{% ENDIF %}> {GOODS_MOD_DESCRIPTION} </div> <div class="clear"></div> </div>Вот такой код:
<div class="goodsDataYandexShare"> <!-- Кнопки социальных сетей от yandex-share --> <div id="yandex_share" class="orange"></div> <!-- end Кнопки социальных сетей от yandex-share --> </div>
В блоке с id yandex_share будут выводиться кнопки.
Теперь нужно добавить JavaScript код в конец файла "Товар":
<!-- Подключение скрипта от Yandex.Share, кнопки поделиться --> <script type="text/javascript" src="//yandex.st/share/m.share.js" charset="utf-8"></script> <script> new Ya.share({ element: 'yandex_share', // id блока в котором выводятся кнопки elementStyle: { 'type': 'none', // Кнопки сервисов 'quickServices': ['yaru', 'vkontakte', 'facebook', 'twitter', 'odnoklassniki', 'moimir', 'lj', 'gplus'] }, link: '{CURRENT_URL}', // ссылка на страницу title: '{PAGE_TITLE}', // заголовок страницы description: '{GOODS_DESCRIPTION}', // короткое описание страницы image: '{GOODS_IMAGE_LARGE}', // адрес изображения serviceSpecific: { twitter: { title: '@{NET_DOMAIN} {GOODS_NAME}', // вывод сообщения в твитере. Формат: @адрес страницы название сайта } } }); </script> <!-- END Подключение скрипта от Yandex.Share, кнопки поделиться -->
Осталось добавить стили к кнопкам. В конец файла Styles.css , в самый конец файла добавить код:
/* Стили для кнопки Поделиться */ #yandex_share { display: block; width: 100px; background: gray; line-height: 2; padding: 0 2%; background-color: #FFF; background-image: -webkit-linear-gradient(top, rgba(0, 0, 0, 0) 0, rgba(0, 0, 0, 0.15) 50%); background-image: -moz-linear-gradient(top, transparent 0, rgba(0, 0, 0, 0.15) 50%); background-image: -o-linear-gradient(top, transparent 0, rgba(0, 0, 0, 0.15) 50%); background-image: linear-gradient(top, transparent 0, rgba(0, 0, 0, 0.15) 50%); cursor: pointer; -moz-border-radius: 0.4em; -webkit-border-radius: 0.4em; border-radius: 0.4em; } .b-share-popup__yandex { color: white; text-align: left; width: 100%; display: inline-block; padding: 0px 10px; } .goodsDataYandexShare { padding: 2% 0%; } @media screen and (max-width: 480px) { #yandex_share { line-height: 2.5; width: 120px; text-align: center; } } /* end Стили для кнопки Поделиться */