我想在nopcommerce 4.1或更高版本中創建chatbot小部件插件

Question

我是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>

現在我想將其添加為單獨的小部件。

Answer 1

小部件是定義的區域，開發人員可以在該區域中注入他/她的預期功能。 核心團隊已經定義了許多小部件，NivoSlider是一個很好的小部件插件示例。 在您的插件中，您必須實現IWidgetPlugin，並且需要在“ GetPublicViewComponent”方法中定義插件的預期viewcomponent名稱，並在“ GetWidgetZones”方法中定義希望在公共站點上顯示viewcomponent的nopcommerce窗口小部件的名稱。 如果您想了解有關小部件插件的更多信息，可以在NOPCOMMERCE 4.10中通過實時通信訪問DEVELOP和UNDERSTAND WIDGET PLUGIN。