Добавьте виджет рейтинга на свою веб-страницу SimplyEdit или в интернет-магазин
Добавить инструмент оценки на вашу веб-страницу SimplyEdit или в интернет-магазин очень просто. Вот краткое руководство по встраиванию звездообразного инструмента в ваш код.
Рейтинг-виджет - популярный инструмент для включения, к тому же простой. Сначала создайте учетную запись на http://rating-widget.com/. Просто нажмите Получить бесплатный виджет. Там вы можете установить всевозможные настройки стиля и загрузить небольшой фрагмент javascript, например:
<script type=”text/javascript”>(function(d, t, e, m){ // Async Rating-Widget initialization. window.RW_Async_Init = function(){ RW.init({ huid: “…”, uid: “…”, source: “website”, options: { “size”: “medium”, “style”: “oxygen”, “isDummy”: false } }); RW.render(); }; // Append Rating-Widget JavaScript library. var rw, s = d.getElementsByTagName(e)[0], id = “rw-js”, l = d.location, ck = “Y” + t.getFullYear() + “M” + t.getMonth() + “D” + t.getDate(), p = l.protocol, f = ((l.search.indexOf(“DBG=”) > -1) ? “” : “.min”), a = (“https:” == p ? “secure.” + m + “js/” : “js.” + m); if (d.getElementById(id)) return; rw = d.createElement(e); rw.id = id; rw.async = true; rw.type = “text/javascript”; rw.src = p + “//” + a + “external” + f + “.js?ck=” + ck; s.parentNode.insertBefore(rw, s); }(document, new Date(), “script”, “rating-widget.com/”));</script>
Вы можете добавить это на свою веб-страницу и добавить контейнер виджета рейтинга в шаблон продукта. Однако есть две вещи, которые требуют настройки для работы с SimplyEdit:
Во-первых, если у вас на странице более одного продукта, вам также понадобится более одного виджета рейтинга. Итак, вам нужен атрибут data-title, и вы также должны иметь возможность редактировать его в SimplyEdit. Поэтому добавьте в шаблон продукта следующее:
<p class=”product-hidden” data-simply-field=”rating.data-title” data-simply-content=”text”>my rating</p> <div class=”rw-ui-container” data-title=”my rating” data-simply-field=”rating” data-simply-content=”attributes” data-simply-attributes=”data-title”></div>
Во-вторых, код javascript виджета рейтинга должен запускаться после того, как SimplyEdit отрендерил весь контент, в противном случае он может выполняться до того, как поля `data-title` будут установлены правильно. Поэтому вместо исходного javascript измените его немного следующим образом:
<script type=”text/javascript”> document.addEventListener(‘simply-content-loaded’, function() { (function(d, t, e, m){ // Async Rating-Widget initialization. window.RW_Async_Init = function(){ RW.init({ huid: “…”, uid: “…”, source: “website”, options: { “size”: “medium”, “style”: “oxygen”, “isDummy”: false } }); RW.render(); }; // Append Rating-Widget JavaScript library. var rw, s = d.getElementsByTagName(e)[0], id = “rw-js”, l = d.location, ck = “Y” + t.getFullYear() + “M” + t.getMonth() + “D” + t.getDate(), p = l.protocol, f = ((l.search.indexOf(“DBG=”) > -1) ? “” : “.min”), a = (“https:” == p ? “secure.” + m + “js/” : “js.” + m); if (d.getElementById(id)) return; rw = d.createElement(e); rw.id = id; rw.async = true; rw.type = “text/javascript”; rw.src = p + “//” + a + “external” + f + “.js?ck=” + ck; s.parentNode.insertBefore(rw, s); }(document, new Date(), “script”, “rating-widget.com/”)); }); </script>
Как видите, мы обернули исходный код javascript внутри EventListener. SimplyEdit запускает событие, называемое просто загрузка содержимого, сразу после того, как страница визуализирована и вся информация становится доступной. В этот момент виджет рейтинга имеет атрибут data-title
, и только после этого он может инициализировать свой код javascript.
И это все. Вы добавили простой инструмент оценки в свой интернет-магазин или веб-сайт.
Если вы читали нашу предыдущую статью: теперь у вас есть полноценный интернет-магазин с рейтингами пользователей. Возможно, вам придется настроить еще кое-что в Snipcart, но веб-сайт и панель управления Snipcart помогут вам разобраться в этом.