0

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

现在我想将它添加为单独的小部件。

4

1 回答 1

0

小部件是一个定义区域，开发人员可以在其中注入他/她的预期功能。核心团队已经定义了很多小部件，小部件插件的一个很好的例子是 NivoSlider。在您的插件中，您必须实现 IWidgetPlugin 并且需要在“GetPublicViewComponent”方法中定义插件的预期视图组件名称，并在“GetWidgetZones”方法中定义 nopcommerce 小部件的名称，您希望在公共站点上显示视图组件。如果您想了解有关小部件插件的更多信息，可以访问NOPCOMMERCE 4.10 WITH REAL-TIME COMMUNICATION中的开发和理解小部件插件

于 2019-01-13T07:59:54.177 回答