Добавьте виджет рейтинга на свою веб-страницу 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 помогут вам разобраться в этом.