Добрый день, помогите подключить виджеты рекомендаций от retailrocket.

Виджет  "Самые востребованные товары на вашем сайте" можно разместить на главной странице под меню сайта или слайдером.

Каким образом  можно разместить данный виджет на главной странице сайта, чтобы он отражался вместо сторлендовского раздела "товары на главной".

Ниже перечислю коды для вставки, которые предоставляет retailrocket:

<div data-retailrocket-markup-block="581e2c475a6588b66087106a" ></div>
<style>
.retailrocket-widget .retailrocket-item-description
{
  display: none;
}
</style>



<div class="retailrocket retailrocket-widget retailrocket-theme-tiny"
data-algorithm-type="visitor-category-interest"
data-algorithm="popular"
data-template-param-header-text="Самые востребованные товары на вашем сайте"
data-template-param-number-of-items="5"
data-template-param-item-image-width="150"
data-template-param-item-image-height="150"
data-textoverflowhidden="true"
data-retailrocket-morebutton="false"
data-retailrocket-buybutton="false"
data-template-container-id="widget-template-popular-main-page">
</div>



<script id="widget-template-popular-main-page" type="text/html">
<header class="retailrocket-widgettitle">
    <%=(headerText || "")%>
</header>
<ul class="retailrocket-items">
    <% for (var i = 0 ; i < numberOfItems; ++i) with(items[i]) { %>
        <li class="retailrocket-item" style="width:<%=itemImageWidth%>px;">
            <a class="retailrocket-item-info" href="<%=Url%>" onmousedown='retailrocket.widget.click(<%=ItemId%>,"<%=suggesterId%>","<%=algorithm%>") '>
                <div class="retailrocket-item-image"> <img  onerror="retailrocket.widget.hideProduct(this)" src="//cdn.retailrocket.ru/api/1.0/partner/<%=partnerId%>/item/<%=ItemId%>/picture/?format=png&width=<%=itemImageWidth%>&height=<%=itemImageHeight%>&scale=both" style="width:<%=itemImageWidth%>px;height:<%=itemImageHeight%>px"></div>
                <div class="retailrocket-item-brand">
                    <%=Vendor %>
                </div>
                <div class="retailrocket-item-title">
                    <%=Name %>
                </div>
                <div class="retailrocket-item-description">
                    <%=Description %>
                </div>
            </a>
            <div class="retailrocket-item-price"> <span class="retailrocket-item-price-value"><%= Price %></span> <span class="retailrocket-item-price-currency"></span> </div>
            <nav class="retailrocket-actions">
                <a class="retailrocket-actions-more" href="<%=Url%>"></a>
                <a class="retailrocket-actions-buy" href="<%=Url%>" onclick='return retailrocket._widgetAddToBasket("<%=ItemId%>", "<%=onAddToBasket%>")'></a>
            </nav>
        </li>
    <% } %>
</ul>
</script>
<script>retailrocket.widget.render();</script>

Вопрос, куда и в каком порядке вставлять эти коды?

Вопрос с email трекером решен подстановкой атрибута  onblur="var regex = /^([a-zA-Z0-9_.+-])+\@(([a-zA-Z0-9-])+\.)+([a-zA-Z0-9]{2,4})+$/;if(regex.test(this.value)) { try {rrApi.setEmail(this.value);}catch(e){}}" в

<td><input type="text" id="contactEmail" name="form[contact][email]" value="{ORDER_FORM_CONTACT_EMAIL}" maxlength="255" {% IF ORDER_FORM_CONTACT_WANT_REGISTER %}class="required"{% ENDIF %}

теперь email трекер автоматически собирает электронную почту всех клиентов заполнивших поле электронная почта и автоматически рассылает им уведомления по электронке о не оформленных до конца заказах, брошенных корзинах и рекомендациях.
Надеюсь пост поможет, тем кто подключает retailrocket к своему интернет-магазину.

Уважаемая техподдержка, помогите подключить трекер получения email для полной настройки retailrocket на сайте.
Ниже инфа от retailrocket относительно настройки, но мне не понятно какой код использовать и куда его прописывать, чтобы подключить трекер получения email:

Каждый раз, когда вы получаете email пользователя, исполняйте код:
(window["rrApiOnReady"] = window["rrApiOnReady"] || []).push(function() { rrApi.setEmail(""); });
Важно: передавайте e-mail только тех пользователей, кто явно разрешил отправлять им письма.

Пример 1: добавьте следующий атрибут для подтверждающей кнопки формы подписки, которая используется на вашем сайте: onClick="(window["rrApiOnReady"] = window["rrApiOnReady"] || []).push(function() { rrApi.setEmail($(‘#EmailFieldID’).val();});”

Пример 2: добавьте следующий код на страницу «спасибо за заказ», если пользователь подписался на маркетинговые рассылки интернет- магазина:

Пример 3: передача дополнительных данных о пользователе для дальнейшей персонализации в рассылках: (window["rrApiOnReady"] = window["rrApiOnReady"] || []).push(function() { rrApi.setEmail("example@email.com", { gender: "Male", age: 21, stockId: "Amsterdam", birthday: "15.01.1983" }); }); Рекомендуемые параметры для использования: gender (строка) age (число без кавычек) stockId – (строка) name – (только имя, строка) birthday – (строка,формат DD.MM.YYYY)


Передача email пользователей сайта


Для того, чтобы система Retail Rocket могла отправлять письма с персональными рекомендациями, необходимо передавать адреса электронной почты пользователей сайта (явно разрешивших отправлять им письма). Сделать это можно несколькими способами:

• На странице "Спасибо за заказ", перед кодом обработчика тразакции Retail Rocket (п.5 инструк>п.5 инструкции по настройке трекинга) установите код:
  
  
  (window["rrApiOnReady"] = window["rrApiOnReady"] || []).push(function() { rrApi.setEmail("email_пользователя"); });
  
• Этот же код можно исполнить в любой момент, когда пользователь указал свой email: при авторизации, заполнении формы подписки на рассылку и т.д. Системе достаточно один раз получить email человека, чтобы отправлять ему письма, сформированные на основе всех последующих визитов на сайт.
  
• На странице оформления заказа в поле, где пользователю необходимо ввести email, добавьте атрибут:
  
  
  onblur="var regex = /^([a-zA-Z0-9_.+-])+\@(([a-zA-Z0-9-])+\.)+([a-zA-Z0-9]{2,4})+$/;if(regex.test(this.value)) { try {rrApi.setEmail(this.value);}catch(e){}}"Такой код захватит email пользователя в момент оформления заказа и система сможет отправить ему письмо с персональным предложением даже если заказ по каким-то причинам не будет оформлен.

Firefly (22 Июнь 2016 - 15:25) писал:

Здравствуйте!

Спасибо за код. ".product-info .price-new .num {    color: #ff0551;}". - цена, при входе в карточку товара стала розового цвета как и требовалось.

В строке ".num {font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;font-style: normal !important;font-weight: bold;color: #ff0551;white-space: nowrap;}" я заменил цвет на #999999  и стоимость доставки стала серого цвета, но также серой стала и цена товара, при выходе из карточки товара.

Как сохранить предыдущие изменения. но при этом окрасить цены товаров на сайте в розовый цвет?

Vaccina (15 Июнь 2016 - 05:33) писал:

Забыл прикрепить файл к посту.

Vaccina (15 Июнь 2016 - 05:33) писал:

Vaccina, спасибо за код.

Есть еще вопрос. Я поменял цвет цены в карточке товара, но изменился также цвет стоимости доставки. Как сделать так, чтобы поменялся только цвет цены? А стоимость доставки (цифры) осталась осталась серой как и надпись "стоимость доставки".
webkit-fake-url://c1252811-aa7f-4099-bd92-7cbbdffe5c8f/application.pdf

support 2.0 (11 Июнь 2016 - 20:01) писал:

Ответа, на второй вопрос, похоже, не дождусь!

Итак,немного модернизировав Ваш код, получилось менять цвет в надписи "Цена от.."
Ваш код в css:
".catinfo .size {font-size:12px;font-weight: 100;color:#000;} /*Посмотреть все размеры и цвета: размер, толщина от 100 до 600, цвет */"

В этом коде менялся только размер font-size и все. Толщина и цвет оставались неизменными. Толщина менялась только после написания font-weight: bold .
В итоге цвет можно было менять, после следующей модификации кода в css:
".catinfo .size {font-size:12px;}.catinfo {color:#FF0000;}"

Модераторы, пожалуйста, ответьте на мои вопросы!

Firefly (11 Июнь 2016 - 20:02) писал:

Спасибо за код.
Но это немного не то что нужно. Я изменяю параметр px в строке .prod_hold .name a, .prod_hold_recent .name a {font-size:16px;text-transform: uppercase;text-decoration:none;display:block;}   например на 18px, а в строке  .prod_hold .prod-info-fly .name a, .prod_hold_recent .prod-info-fly .name a{font-size:17px;text-decoration:none;} ​изменяю параметр на 13px, далее изменяется размер шрифта в категории (это ОК!) на 18px, затем когда переходишь в категорию, в ней название товара сначала тоже размером 18px, а нужно чтобы было сразу 13 px, а не когда наводишь мышкой на товар и оно становится 13 px. Нужно сразу 13px в каталоге и при наведении, а не 18px сначала и при наведении на карточку товара 13 px.
Как это сделать?

support 2.0 (11 Июнь 2016 - 20:01) писал:

Спасибо большое за строки кода.
Итак, первая строка:
1. ".catinfo .size {font-size:12px;font-weight: 100;color:#000;} /*Посмотреть все размеры и цвета: размер, толщина от 100 до 600, цвет */",
с её помощью поменялся размер шрифта font-size:12px на любую величину px. Менял числа в font-weight и color, но толщина не меняется, цвет тоже.
Цвет текста меняется изменением параметра color в строке:
a{ text-decoration:underline; color:#333333; }
a:hover{ text-decoration:underline; color:#ff0551;  },
но тогда меняется цвет не только надписи "Посмотреть все размеры и цвета", но и заголовков категорий, каталога и названия товаров, что не приемлемо.
Как сделать так, чтобы менялся только цвет надписи "Посмотреть все размеры и цвета"?
2. В строке ".catinfo .pricefrom {font-size:12px;font-weight: 100;color:#000;} /* от: размер, толщина от 100 до 600, цвет */"  к сожалению, ничего не работает. Все серое и одного размера.
Как сделать чтобы изменялся цвет, размер и толщина надписи "от.." или "Цена от.." как в моем случае?

Спасибо за помощь! Все получилось. По клику на просмотр всех размеров и цветов я пока вставил ссылку на соответствующую категорию.

Возникли следующие вопросы:

1. Каким образом в css можно можно редактировать параметры надписи "посмотреть все размеры и цвета" (менять шрифт, толщину и прочее) и надписи "от..."? А то нашел только как цвет изменить, когда изменил, то другие заголовки, которые до этого были бледно-серыми стали розовыми)). Когда пробовал менять шрифт и его размер изменялись обе надписи одновременно, а это не есть хорошо. Нужно чтобы надпись "посмотреть все размеры и цвета" была маленькой по размеру, а надпись "от..." крупной.

2. Как сменить шрифт, размер названия категории, так чтобы при этом не поменялось на сменяемый шрифт название товара в категории?

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

Подскажите, пожалуйста, как можно расположить цену под названием категории товара, как в файле "как надо". Клиентам было бы удобно при попадании в раздел с категориями видеть цену (например "цена от..."), не заходя в саму категорию. Цену можно указать на самый дешевый товар в категории. Хочется также добавить надпись под название категории "посмотреть все размеры и цвета" как в прикрепленном образце.