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小部件的名称。如果您想进一步了解小部件插件，可以访问DEVELOP AND UNDERSTAND WIDGET PLUGIN IN NOPCOMMERCE 4.10 WITH REAL-TIME COMMUNICATION

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

1 个答案: