Я хочу создать плагин для виджетов чата в nopcommerce 4.1 или выше - PullRequest
Новая
       54

Я хочу создать плагин для виджетов чата в nopcommerce 4.1 или выше

0 голосов
/ 09 января 2019

Я новичок в nopcommerce, я понял весь основной поток кода nopcommerce. Итак, я начал реплицировать плагины (виджеты). Я создал плагин, который можно устанавливать и удалять, но не знаю, как создать виджет и добавить его обычно в все страницы. То, чего я пытаюсь добиться, это вызвать компонент iframe внутри панели чата. Я добавлю код просмотра в этом вопросе

Теперь я добавил этот код в nop.web / shared / _root.cshtml. Так что теперь панель чата появляется на всех страницах 

<div>
        <a class="float" id="button" onclick="openForm()">
            <img src="~/files/chatbotv4/VertChat.png" class="my-float">
        </a>
        <div class="chat-popup" id="myForm">
            <div class="chathead">
                <div class="btn-close">
                    <button type="button" class="close" onclick="closeForm()">_</button>
                </div>
                <div class="btn-max" id="max">
                    <div type="button" class="fa fa-window-maximize" style="background-color:#16c886; font-size:21px;" onclick="max_chat()">&square;</div>
                </div>
                <div class="btn-min" id="min">
                    <div type="button" class="fa fa-window-restore" style="background-color:#16c886;  font-size:21px;" onclick="min_chat()">&#10064;</div>
                </div>
            </div>
            <iframe src='~/files/chatbotv4/botchat.html?name=@customerName&id=@customerId' style='min-width: 100%; width: 100%; min-height: 100%;'></iframe>
        </div>
    </div>
    <script>
        function openForm() {
            document.getElementById("myForm").style.display = "block";
            document.getElementById("button").style.display = "none";
            document.getElementsByClassName("header")[0].style.zIndex = "0";
            document.getElementsByClassName("header-menu")[0].style.zIndex = "0";
            document.getElementsByClassName("footer-lower")[0].style.zIndex = "-1";
            //$(".header").css("csstext", " z-index: 0 ;");
            //$(".header-menu").css("csstext", " z-index: 0;");
        }
        function closeForm() {
            document.getElementById("myForm").style.display = "none";
            document.getElementById("button").style.display = "block";
            document.getElementsByClassName("header")[0].style.zIndex = "1";
            document.getElementsByClassName("header-menu")[0].style.zIndex = "1";
            document.getElementsByClassName("footer-lower")[0].style.zIndex = "1";
        }
        function max_chat() {
            document.getElementById("max").style.display = "none";
            document.getElementById("min").style.display = "block";
            // $(".chat-popup").css("cssText", " width: 50%;");
            document.getElementsByClassName("chat-popup")[0].style.width = "50%";
        }
        function min_chat() {
            document.getElementById("min").style.display = "none";
            document.getElementById("max").style.display = "block";
            document.getElementsByClassName("chat-popup")[0].style.width = "30%";
        }

    </script>
<style>

    body {
        font-family: Arial, Helvetica, sans-serif;
    }

    * {
        box-sizing: border-box;
    }
    /* Button used to open the chat form - fixed at the bottom of the page */
    .open-button {
        background-color: #555;
        color: white;
        padding: 16px 20px;
        border: none;
        cursor: pointer;
        opacity: 0.8;
        position: fixed;
        bottom: 23px;
        right: 28px;
        width: 280px;
    }
    /* The popup chat - hidden by default */
    .chat-popup {
        display: none;
        position: fixed;
        bottom: 0;
        right: 15px;
        border: 3px solid #f1f1f1;
        z-index: 1;
        height: 100%;
        width: 30%;
    }

    iframe {
        background-color: white;
        min-height: 95% !important;
        min-width: 100%
    }

    .btn-close {
        padding-left: 95%;
        position: absolute;
        z-index: 1032;
    }

    .close {
        background: transparent;
        border: none;
    }

    .float {
        position: fixed;
        width: 60px;
        height: 60px;
        bottom: 20px;
        right: 20px;
        background-color: #0C9;
        //color:#FFF;
        border-radius: 50px;
        text-align: center;
        box-shadow: 2px 2px 3px #999;
        z-index: 1030;
    }

    .my-float {
        margin-top: 1px;
        margin-left: auto;
        height: 58px;
        width: 58px;
    }

    .btn-max {
        padding-left: 87%;
        position: absolute;
        margin-top: 0.2%;
        z-index: 1032;
        cursor: pointer;
    }

    .btn-min {
        padding-left: 90%;
        position: absolute;
        margin-top: 0.2%;
        z-index: 1032;
        display: none;
        cursor: pointer;
    }

    .chathead {
        height: 5%;
        width: 100%;
        position: relative;
        background-color: #16c886;
    }

</style>

Теперь я хочу добавить его в качестве отдельного виджета.

1 Ответ

0 голосов
/ 13 января 2019

Виджет - это определенная область, в которую разработчик может добавить свои ожидаемые функциональные возможности. Уже есть много виджетов, определенных основной командой, один из хороших примеров плагина виджетов - NivoSlider. В вашем плагине вы должны реализовать IWidgetPlugin и определить ожидаемое имя компонента представления вашего плагина в методе «GetPublicViewComponent», а также имя виджета nopcommerce в методе «GetWidgetZones», где вы хотите отобразить компонент представления на общедоступном сайте. Если вы хотите узнать больше о плагине виджета, вы можете посетить РАЗРАБОТАТЬ И ПОНЯТЬ ПЛАГИН ВИДЖЕТА В NOPCOMMERCE 4.10 С КОММУНИКАЦИЕЙ В РЕАЛЬНОМ ВРЕМЕНИ

...