Menedżer skryptów

Spis treści

This post is also available in:

Menadżer skryptów pozwala na osadzenie dowolnego kodu JavaScript bezpośrednio w Sambie. Można używać go do tworzenia popupów wyskakujących w Twoim sklepie internetowym lub do dodawania nowych elementów na stronę sklepy. Korzystanie z menedżera wymaga jednak biegłej znajomość JavaScript. W przypadku jakichkolwiek problemów z implementacją, należy skonsultować się ze swoim deweloperem.

Z menu głównego Samby wybierz „Menedżer skryptów”. Będziesz mógł tu edytować istniejące kontenery skryptów lub tworzyć zupełnie nowe.

Kliknij „Dodaj kontener”, ustaw nazwę kontenera i wstaw skrypt JS. Na przykład:

Dodaliśmy skrypt do naszego kontenera, który wyświetli wiadomość tekstową „Tutaj pojawi się skrypt” na stronie sklepu internetowego.

Po dodaniu skryptu można zapisać go jako szablon, klikając przycisk Zapisz lub opublikować go bezpośrednio za pomocą przycisku Opublikuj. Na potrzeby tej demonstracji użyjemy przycisku Zapisz wersję roboczą.

Po zapisaniu automatycznie wrócimy do głównego widoku Menedżera skryptów, gdzie możesz pracować ze wszystkimi wcześniej utworzonymi skryptami. Możesz teraz kliknąć menu rozwijane (obok przycisku edytuj) i wybrać jedną z opcji: Testuj, Przekaż(udostępnij) lub Usuń.

Za pomocą przycisku Testuj możesz sprawdzić, jak skrypt zachowuje się w rzeczywistym środowisku, nie zmieniając niczego w sklepie internetowym.

Możesz użyć poniższego przykładu (pod przyciskiem Exit Popup), aby zobaczyć przykładowy, gotowy do zaimplementowania skrypt. Oczywiście zachęcamy do wykorzystania go we własnym sklepie internetowym.

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);

Skrypt ten utworzy wyskakujące okienko w sklepie internetowym, które pojawi się po najechaniu kursorem myszy na przycisk zamknięcia karty w przeglądarce.

This post is also available in:

Zaktualizowano na 5 maja, 2025

Czy ten artykuł był pomocny?

Yes No

Exit Popup

Czy ten artykuł był pomocny?

Artykuły powiązane