smir-ant / profiru_custom_widget

мне пришла идея(правда она так и не нашла применения) сделать кастомный виджет profi.ru :)

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

И я подумал вытащить из их виджета значения, до того как они запеклись в iframe. Получилос :)

---

Подключение

❗️ т.к. тут для обхода cors используется cors-anywhere, то перед тем как юзать статический скрипт надо запрос им кинуть на демо сюда https://cors-anywhere.herokuapp.com/corsdemo

скачиваете файл getProfiStats.js, затем вставляете себе на сайт

<script src="getProfiStats.js" data-id="940160087112dfcc6e222d4802df76f1"></script>

меняя id на свой.

– – – – – – – – – – – – – – – – – – – –

Где взять id?

Profi.ru -> Анкета -> Поделиться анкетой -> выбирая любой виджет жмём "скопировать код".

Например вот такое получим:

<!-- Profi.ru widget start -->
    <div class="profi-widget" data-id="940160087112dfcc6e222d4802df76f1" data-type="210x190">
        Powered by <a href="https://profi.ru/profile/SmirnovAV628">Profi.ru</a>
    </div>
    <script src="https://profi.ru/jqs/widget/widget.js"></script>
  <!-- Profi.ru widget end -->

вытаскиваем data-id="940160087112dfcc6e222d4802df76f1", подставляем и кайфули

---

Не забудьте

подключив скрипт не забудьте создать <div id="target-container">, в него будет вставлено два тега с классом profi-widget__value: первый - рейтинг, второй - отзывы.

– – – – – – – – – – – – – – – – – – – –

Пример

в example.html показал минимальную версию приближенную к нативному виджету, подключил их шрифт и повторил кнопку