Подскажите плагин

АлексКокс

Участник
Статус
offline
Регистрация
20.01.2018
Сообщения
90
Репутация
42
Ку! Подскажите плагин на скрине под WP Elementor. Периодически всплывающие окна о фейк заказах.

Скриншот 02-07-2021 110138.jpg
 

YooZoo

Участник
Статус
offline
Регистрация
15.06.2021
Сообщения
18
Репутация
29
Я думаю там проще написать js-ку. Там 5 строк кода будет (ну это если знания позволяют).
 

АлексКокс

Участник
Статус
offline
Регистрация
20.01.2018
Сообщения
90
Репутация
42
В смысле куда и какие файлы закинуть. Отредачить то смогу )))
 

YooZoo

Участник
Статус
offline
Регистрация
15.06.2021
Сообщения
18
Репутация
29
оооо! Ты замутил?
Ну чет захотелось. Это час времени было.


В смысле куда и какие файлы закинуть. Отредачить то смогу )))
В шаблон страницы главной в шаблоне (не помню как там в wp) ставишь вот это все вот это (много).
Потом через ctrl+F находишь вот такую строку "var cardController = new FakeCard({" (в конце). Ну и там есть комменты - от скольки до скольки секунд интервал, чтобы показывать этот попап. Массив с именами случайными (может у тебя там Стивы\Джейкобы\Сюзаны и т.д.), массив с городами любыми, ну и массив любых товаров. Дальше сам придумай там.
Попробуй короче.
Ну или в лс (возможно я буду пьян\накурен\обдолбан) - помогу, если будет желание.

HTML:
<style>
    .fake-card {
        position: fixed;
        width: 170px;
        right: 20px;
        bottom: 20px;
        padding: 10px;
        font: 12px/16px 'Arial', sans-serif;
        color: #fff;
        background: #de7132;
        border-radius: 10px;
        opacity: 1;
        transform: translateY(0);
        transition: 1s;
        animation: fake-card--show .3s linear forwards;
        }

        .fake-card.--hide {
        opacity: 0;
        transform: translateY(-20px);
        }

        @keyframes fake-card--show {
        0% {
            opacity: 0;
            transform: translateY(20px);
        }
        100% {
            opacity: 1;
            transform: translateY(0);
        }
        }

        .fake-card__title {
        font-size: 14px;
        margin-bottom: 5px;
        padding-bottom: 5px;
        border-bottom: 1px solid rgba(255,255,255,.2);
        }
</style>

<script>
    (function() {
        function FakeCard(options) {
            this.layout = {
                container: null,
                title: null,
                text: null
            },
            this.timeRangeFrom = options.timeRangeFrom || 3,
            this.timeRangeTo = options.timeRangeTo || 10,
            this.timeForShow = options.timeForShow || 5,
            this.names = options.names || [];
            this.positions = options.positions || [];
            this.cities = options.cities || [];
            this.timer = null;
            this.interval = null;
            }

            FakeCard.prototype = {
            getTagElement: function(tag, param) {
                var element = document.createElement(tag);

                if(!param)
                    return element;

                if(param.className || param.class)
                    element.className = param.className ? param.className : param.class;
                    
                if(param.id)
                    element.id = param.id;

                if(param.events)
                {
                    for(action in param.events)
                    {
                        element.addEventListener(action, param.events[action], false); 
                    }
                }

                if(param.style)
                {
                    for(attribute in param.style)
                    {
                        element.style[attribute] = param.style[attribute];
                    }
                }

                if(param.text)
                    element.innerText = param.text;

                return element;
            },

            getContainer: function() {
                if(!this.layout.container) {
                this.layout.container = this.getTagElement('div', {
                    className: 'fake-card'
                });

                this.layout.container.appendChild(this.getContainerTitle());
                this.layout.container.appendChild(this.getContainerText());
                }

                return this.layout.container;
            },

            getContainerTitle: function() {
                if(!this.layout.title) {
                this.layout.title = this.getTagElement('div', {
                    className: 'fake-card__title',
                    text: this.title || 'Оплаченный заказ'
                });
                }

                return this.layout.title;
            },

            getContainerText: function() {
                if(!this.layout.text) {
                this.layout.text = this.getTagElement('div', {
                    className: 'fake-card__text',
                    text: this.getRandomText()
                });
                }

                return this.layout.text;
            },

            getRandomText: function() {
                var text = '';
                var name = this.names[Math.floor(Math.random() * this.names.length)];
                var city = this.cities[Math.floor(Math.random() * this.cities.length)];
                var position = this.positions[Math.floor(Math.random() * this.positions.length)];

                return name + ' из города ' + city + ' заказал ' + position;
            },

            getRandomInterval: function() {
                return Math.floor(this.timeRangeFrom + Math.random() * (this.timeRangeTo + 1 - this.timeRangeFrom)) * 1000;
            },

            setTimer: function() {
                if(!this.timer) {
                var interval = this.getRandomInterval();
                this.timer = setTimeout(function() {
                    this.updateText();
                    this.show();
                    this.timer = null;
                    this.setTimer();
                }.bind(this), interval)
                }
            },

            adjustShowing: function() {
                this.setTimer();
            },

            updateText: function() {
                this.getContainerText().innerText = this.getRandomText();
            },

            show: function() {
                document.body.appendChild(this.getContainer());
                setTimeout(function() {
                this.remove();
                }.bind(this), 3000);
            },

            remove: function() {
                if(this.getContainer().parentNode) {
                this.getContainer().parentNode.removeChild(this.getContainer());
                }
            },

            init: function() {
                this.adjustShowing();
            }
        };

        var cardController = new FakeCard({
          title: 'Оплаченный заказ', // заголовок корзины
          timeRangeFrom: 3, // интервал от скольки секунд
          timeRangeTo: 10, // интервал до скольки секунд
          names: [
            'Денис', 'Валера', 'Лёва', 'Степан', 'Марина', 'Даша'
          ], // случайные имена
          cities: [
            'Бобруйск', 'Воркута', 'Москва', 'Воронеж'
          ], // случайные города
          positions: [
            'PS4 Slim 1tb', 'Электрочайник Xiaomi x5', 'Samsunz Z4', 'Долото 10мм'
          ] // случайные товары
        });

        cardController.init();
    })();
</script>