Боковой поп-ап с просмотренными товарами

var popupContent = '<style> @import url("https://fonts.googleapis.com/css?family=PT+Sans:400,700"); .carrotquest-castom { background: #fff; box-shadow: 0px -1px 5px #989898; height: 100%; position: fixed; right: 0; top: 0; width: 370px; z-index: 2147483001; font-family: "PT Sans", sans-serif; } #carrotquest-castom-close { cursor: pointer; height: 32px; opacity: 0.5; position: absolute; right: 5px; top: 10px; width: 32px; z-index: 99; } #carrotquest-castom-close:hover { opacity: 1; } #carrotquest-castom-close:before, #carrotquest-castom-close:after { background-color: #000; content: " "; height: 18px; left: 15px; position: absolute; width: 2px; } #carrotquest-castom-close:before { transform: rotate(45deg); } #carrotquest-castom-close:after { transform: rotate(-45deg); } #carrotquest-castom-title { color: #000; display: block; font-family: "PT Sans", sans-serif; font-size: 22px; font-weight: 400; margin: 0 auto; padding: 25px 40px 10px; position: relative; text-align: center; } #carrotquest-castom-img { display: block; margin: 0 auto; position: relative; } #carrotquest-castom-subtext { color: #646464; font-family: "PT Sans", sans-serif; font-size: 16px; font-weight: bold; margin-top: 10px; padding: 0 10px; text-align: center; } .carrotquest-castom-carts > p { display: block; font-family: "PT Sans", sans-serif; font-size: 27px; margin: 19px 0 0 0; padding: 0; text-align: center; width: 100%; } .carrotquest-castom-cart { color: #646464; display: table; padding: 20px 15px 0px; } .carrotquest-castom-cart:nth-child(2) { padding-top: 20px; } .carrotquest-castom-carts .carrotquest-castom-cart:last-child { border: 0; } .carrotquest-castom-item-img { display: inline-block; float: left; width: 100px; } .carrotquest-castom-item-img img { display: block; margin: 0 auto; max-width: 90px; } .carrotquest-castom-item-name { display: inline-block; float: right; margin-left: 5px; position: relative; width: 226px; } .carrotquest-castom-item-name p { font-family: "PT Sans", sans-serif; font-size: 14px; margin: 0; } .carrotquest-castom-item-price { display: inline-block; float: right; font-family: "PT Sans", sans-serif; font-size: 14px; font-weight: bold; margin-left: 5px; position: relative; width: 226px; } .carrotquest-castom-item-href { display: inline-block; float: right; margin: 10px 0 0 5px; position: relative; width: 226px; } .carrotquest-castom-item-href a { border: 1px solid #c8c8c8; border-radius: 2px; color: #6f6f6f; font-family: "PT Sans", sans-serif; font-size: 14px; padding: 5px 10px; text-decoration: none; } #carrotquest-castom-end-block { bottom: 50px; display: block; margin: 15px 0 0 0; position: absolute; text-align: center; width: 100%; } #carrotquest-castom-btn-finish { background-color: #609772; border-radius: 3px; box-shadow: 0px 2px 2px 0px #c7c7c7; color: white; cursor: pointer; display: block; font-family: "PT Sans", sans-serif; font-size: 16px; font-weight: 700; margin: 0 auto; padding: 10px 67px; width: 147px; } #carrotquest-castom-btn-finish:hover { background-color: #548363; } @media screen and (max-height: 830px) { .carrotquest-castom-carts { height: calc(100% - 346px); overflow-y: overlay; } } </style> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script> {% set massViewed = [] %} {% set massViewedName = [] %} {% for e in get_last_events("$product_viewed") %} {% if e.props["$name"].lower().strip() not in massViewedName %} {% set x = massViewed.append(e) %} {% set x = massViewedName.append(e.props["$name"].lower().strip()) %} {% endif %} {% endfor %} <div id="carrotquest-castom" class="carrotquest-castom"> <a id="carrotquest-castom-close"></a> <p id="carrotquest-castom-title">Дорогой друг, на товары, которые вы посмотрели, особое предложение!</p> <img id="carrotquest-castom-img" src="https://files.carrotquest.io/messenger/1489467592863-3819a3b5-603b-4c33-93ac-c5676b63cedf.png"> <div class="carrotquest-castom-carts"> {% for b in massViewed[:3] %} {% set link = b.props["$url"] %} {% set img = b.props["$img"] %} {% set name = b.props["$name"] %} {% set price = b.props["$amount"] %} <div class="carrotquest-castom-cart"> <div class="carrotquest-castom-item-img"> <img src="{{img}}"> </div> <div class="carrotquest-castom-item-name"> <p>{{name}}</p> </div> <div class="carrotquest-castom-item-price"> <span>{{price}}</span> руб. </div> <div class="carrotquest-castom-item-href"> <a target="_top" href="{{link}}">Подробнее</a> </div> </div> {% endfor %} </div> <div id="carrotquest-castom-end-block"> <a id="carrotquest-castom-btn-finish">ПОЛУЧИТЬ СКИДКУ</a> </div> </div> <script> var cqpopup_name = "Поп-ап с просмотренными товарами"; var carrotquest = {}; carrotquest.track = function(name, parametr) { var data = { comand: "carrotquest.track", "name": name, "parametr": parametr }; top.postMessage(data, "*"); }; carrotquest.identify = function(props) { var data = { comand: "carrotquest.identify", "props": props }; top.postMessage(data, "*"); }; carrotquest.trackMessageInteraction = function(id, type) { var data = { comand: "carrotquest.trackMessageInteraction", "id": id, "type": type }; top.postMessage(data, "*"); }; function close_popup() { $("#carrotquest-castom").remove(); var data = {comand: "carrotquest.close_popup"}; top.postMessage(data, "*"); }; carrotquest.trackMessageInteraction("{{ sending_id }}", "read"); carrotquest.track("Коммуникации: Прочитано сообщение - " + cqpopup_name); $("#carrotquest-castom-btn-finish").on("click", function() { carrotquest.track("Коммуникации: Кликнул по кнопке «Получить скидку» - " + cqpopup_name); close_popup(); }); $(".carrotquest-castom-item-href a").on("click", function() { carrotquest.track("Коммуникации: Перешел по ссылке в сообщение - " + cqpopup_name); carrotquest.trackMessageInteraction("{{ sending_id }}", "clicked"); }); $("#carrotquest-castom-close").on("click", function() { close_popup(); }); Element.prototype.remove = function() { this.parentElement.removeChild(this); }; NodeList.prototype.remove = HTMLCollection.prototype.remove = function() { for (var i = this.length - 1; i >= 0; i--) { if (this[i] && this[i].parentElement) { this[i].parentElement.removeChild(this[i]); } } }; $(".carrotquest-castom-item-price span").each(function() { $(this).html(parseInt($(this).text()).toLocaleString()); }); </script> ';

var str = '\
       <iframe id="carrot_frame" frameborder="0" style="width: 390px;height: 100%;right: 0;top: 0;position: fixed!important;z-index: 9999">\
        </iframe>';

var div = document.createElement('div');
div.innerHTML = str;
document.body.appendChild(div)
var iframe = document.getElementById("carrot_frame");
var frameDoc = iframe.document;
if(iframe.contentWindow)
    frameDoc = iframe.contentWindow.document; // IE
frameDoc.open();
frameDoc.writeln(popupContent);
frameDoc.close();