Script Manager

Obsah

This post is also available in:

Díky Script manageru lze do Samby vložit JavaScript, který bude plnit různé funkce. Script manager lze využít opravdu na cokoliv, lze jím například vytvořit vlastní pop-up (vyskakovací okno) či přidat prvky do editoru. Pokud nemáte zkušenosti s JavaScriptem, doporučujeme následující kroky nechat na vašem IT týmu.

Z hlavní nabídky Samby zvolte “Script Manager”. Dostanete se tak do jeho hlavní nabídky, kde lze pracovat s aktuálními skripty, či vytvořit nové.

Zde klikněte na “Add container”: Vyplňte název containeru a přidejte JS script, který použijete, tedy například:

Do vzoru jsme přidali skript, na základě kterého nám náš e-shop zahlásí větu „Sem patří script“.

Po přidání skriptu je možné uložit tento script jako vzor (pomocí “Save draft”), případně jej rovnou publikovat tlačítkem “Publish”. Pro demonstraci použijeme tlačítko “Save draft”.

Po uložení vzoru se vrátíme do hlavní nabídky Script Manageru, kde lze pracovat se všemi vytvořenými skripty. Při kliknutí na rozbalovací nabídku (šipka vedle tlačítka „Test“), máme možnost skript sdílet (tlačítko „Share“), případně jej smazat (tlačítko „Delete“).

Po kliknutí na tlačítko “Test” zjistíme, jak se script chová v simulovaném prostředí, aniž bychom jakýmkoliv způsobem měnili samotný e-shop v reálném čase.

Na obrázku vidíme ID skriptu, který jsme si právě vytvořili. Odkaz na tento test také můžeme sdílet pomocí tlačítka „Copy activation link“.

Po kliknutí na následující tlačítko se Vám otevře příklad skriptu, který je možné zkopírovat a vyzkoušet na svém e-shopu metodou výše:

var startDelay = 5 // seconds
var message = 'Would you like 15% off your first purchase?'
var yesBtnText = 'Yes, get my 15% off'
var noBtnText = 'No, reject this offer'
var coupon = 'FIRST15OFF'

var html =
    '<!DOCTYPE html>' +
    '<html lang='en'>' +
    '<head>' +
    '<meta charset='UTF-8'>' +
    '<meta name='viewport' content='width=device-width, initial-scale=1.0'>' +
    '<meta http-equiv='X-UA-Compatible' content='ie=edge'>' +
    '<title>Document</title>' +
    '<style>html, body {' +
    'margin: 0;' +
    'padding: 20px 0;' +
    'color: #3b3b3b;width:400px;height:200px;' +
    'font-family: Verdana, Geneva, sans-serif;' +
    'overflow: hidden;' +
    '}' +
    'p {font-size: 20px;text-align:center;font-weight: bold;}' +
    'h2 {font-size: 45px;text-align:center;font-weight: bold;display:none;}' +
    '.myButton {background-color:#1abc9c;-moz-border-radius:28px;-webkit-border-radius:28px;border-radius:28px;border:1px solid #1abc9c;' +
    'display:inline-block;cursor:pointer;color:#ffffff;font-family:Arial;font-size:13px;padding:12px 33px;text-decoration:none;text-shadow:0px 1px 0px #2f6627;}' +
    '.myButton:hover {background-color:#16a085;}.myButton:active {position:relative;top:1px;}'+
    '.closeButton {background-color:#768d87;border:1px solid #566963;margin-left:10px;}.closeButton:hover {background-color:#6c7c7c;}' +
    '</style>' +
    '</head>' +
    '<body>' +
    '<p id='message'>' + message + '</p>' +
    '<h2 id='coupon'>' + coupon + '</h2>' +
    '<div id="btn-container" style='text-align: center;'><button class='myButton' id='yes'>' + yesBtnText + '</button><button class='myButton closeButton' id='no'>' + noBtnText + '</button></div>' +
    '</body>' +
    '</html>'

var style = '<style>' +
    '.yt-container {position: fixed;width:400px;height:200px;bottom:0;left:0;right:0;top:0;margin:auto;overflow:hidden;z-index:100;border-radius:5px;background-color:white;' +
    '-webkit-box-shadow: 0px 0px 15px 0px rgba(0,0,0,0.75);' +
    '-moz-box-shadow: 0px 0px 15px 0px rgba(0,0,0,0.75);' +
    'box-shadow: 0px 0px 15px 0px rgba(0,0,0,0.75);}' +
    '.yt-close {position:absolute;top:5px;right:5px;}' +
    '.yt-close>img {width:30px;}'
'</style>'

var head = document.querySelector("head");
head.innerHTML += style;
const savedValue = localStorage.getItem('ytExitPopupShowed');
window['ytExitPopupShowed'] = savedValue ? JSON.parse(savedValue) : false;
function openPopup() {
    var id = 'yt-' + Number(new Date());
    var closeFunc = function(e) {
        if (e) {
            e.preventDefault()
            e.stopPropagation()
        }
        var element = document.getElementById(id);
        element.parentElement.removeChild(element);
        localStorage.setItem('ytExitPopupShowed', 'true');
    }

    var div = document.createElement('div');
    var closeButton = document.createElement('a');
    closeButton.className = 'yt-close';
    closeButton.onclick = closeFunc
    closeButton.innerHTML = '<img src="https://img.icons8.com/ios-glyphs/64/000000/delete-sign.png">';
    div.className = 'yt-container';

    var iframe = document.createElement('iframe');
    iframe.srcdoc = html;
    iframe.width = "400";
    iframe.height = "200";
    iframe.frameBorder = "0";

    iframe.onload = function() {
        iframe.contentWindow.document.getElementById('yes').addEventListener('click', function() {
            iframe.contentWindow.document.getElementById('message').style.display = 'none';
            iframe.contentWindow.document.getElementById('btn-container').style.display = 'none';
            iframe.contentWindow.document.getElementById('coupon').style.display = 'block';
        })
        iframe.contentWindow.document.getElementById('no').addEventListener('click', closeFunc);
    }

    div.appendChild(iframe);
    div.appendChild(closeButton);

    var backdrop = document.createElement('div');
    backdrop.style.position = 'fixed';
    backdrop.style.width = '100vw';
    backdrop.style.height = '100vh';
    backdrop.style.zIndex = '100';
    backdrop.style.top = '0';
    backdrop.style.left = '0';
    backdrop.id = id;
    backdrop.appendChild(div);

    backdrop.onclick = closeFunc;

    document.querySelector('body').appendChild(backdrop);
    document.addEventListener('keyup', function(e) {
        if (e.which === 27) {
            var element = document.getElementById(id);
            element.parentElement.removeChild(element);
            localStorage.setItem('ytExitPopupShowed', 'true');
        }
    })
}

setTimeout(function() {
    document.body.addEventListener("mouseout", (e) => {
        e = e ? e : window.event;
        const vpWidth = Math.max(document.documentElement.clientWidth, window.innerWidth || 0);
        if (e.clientX >= (vpWidth)) return;
        if (e.clientY >= 50) return;
        const from = e.relatedTarget || e.toElement;
        if (!from && !window['ytExitPopupShowed']) {
            window['ytExitPopupShowed'] = true;
            openPopup()
        }
    });
}, startDelay * 1000);

Tento skript vyvolá na e-shopu vyskakovací okno po přenesení kurzoru na tlačítko „zavřít panel prohlížeče“:

This post is also available in:

Upraveno 6 listopadu, 2024

Byl pro vás tento článek užitečný?

Yes No

Ukázat kód pro Exit popup

Byl pro vás tento článek užitečný?

Mohlo by vás zajímat