Skip to main content

DNN · Razor snippets

This page collects the code fragments you will copy most often when integrating Neuroon into a DNN Skin. The text assumes you already have NeuroonSettings, NeuroonClient and WidgetTokenProvider defined (see full-csharp).

Widget embed in .ascx​

Minimal Skin / SkinObject. <asp:PlaceHolder> lets you condition the render from code-behind if you need to:

<%@ Control Language="C#" AutoEventWireup="true" %>
<%@ Register TagPrefix="dnn" Namespace="DotNetNuke.UI.Skins.Controls" Assembly="DotNetNuke" %>
<asp:PlaceHolder ID="neuroonWidget" runat="server">
    <div id="neuroon-search"></div>
    <script
        src="https://cdn.neuroon.ai/widget@0.9.10/widget.js"
        integrity="sha384-JTaG/IN0Jj/ImfUj2x5QVMG4HkbFHzui7fTpLtwl1hsP+kY9W8OODeSJRFWN1ZP5"
        data-token='<%= WidgetTokenProvider.Get() %>'
        data-container="#neuroon-search"
        data-theme="auto"
        data-locale='<%= System.Threading.Thread.CurrentThread.CurrentCulture.TwoLetterISOLanguageName %>'
        data-api-url='<%= NeuroonSettings.ApiUrl %>'
        crossorigin="anonymous"
        async></script>
</asp:PlaceHolder>

Embed as a Razor partial (.cshtml)​

For Razor-based DNN modules:

@inherits DotNetNuke.Web.Razor.DotNetNukeWebPage
@using System.Threading

@{
    var token  = WidgetTokenProvider.Get();
    var apiUrl = NeuroonSettings.ApiUrl;
    var locale = Thread.CurrentThread.CurrentCulture.TwoLetterISOLanguageName;
}

<div id="neuroon-search"></div>
<script
    src="https://cdn.neuroon.ai/widget@0.9.10/widget.js"
    integrity="sha384-JTaG/IN0Jj/ImfUj2x5QVMG4HkbFHzui7fTpLtwl1hsP+kY9W8OODeSJRFWN1ZP5"
    data-token="@token"
    data-container="#neuroon-search"
    data-theme="auto"
    data-locale="@locale"
    data-api-url="@apiUrl"
    crossorigin="anonymous"
    async></script>

Conditional embed by TabId​

To show the widget only on the home and /search:

<script runat="server">
protected void Page_PreRender(object sender, EventArgs e)
{
    var portal = DotNetNuke.Entities.Portals.PortalSettings.Current;
    var allowed = new HashSet<int> { portal.HomeTabId, GetSearchTabId(portal) };
    neuroonWidget.Visible = allowed.Contains(this.TabId);
}
</script>

Cart bridge: _NeuroonCartUpdate.cshtml partial​

@model dynamic
@using Newtonsoft.Json

<script>
(function() {
    var detail = @Html.Raw(JsonConvert.SerializeObject(Model));
    window.dispatchEvent(new CustomEvent('neuroon:cart-update', { detail: detail }));
})();
</script>

And from your "Add to cart" / "Update line" view:

@{
    var payload = new {
        items = currentCart.Lines.Select(l => new {
            productId = l.Sku,
            name      = l.ProductName,
            price     = l.UnitPrice,
            quantity  = l.Quantity,
            imageUrl  = l.ImageUrl
        }),
        total    = currentCart.Total,
        currency = currentCart.Currency
    };
}
@Html.Partial("_NeuroonCartUpdate", payload)

Cart bridge without payload ("ping" mode)​

If your cart has sensitive calculations (offers, tax) that you prefer not to expose to the frontend, dispatch the event without detail. The widget will ask the server for the updated state:

<script>
window.dispatchEvent(new CustomEvent('neuroon:cart-update'));
</script>

Equivalent to the pattern used by the WordPress plugin (see plugins/wordpress/cart-bridge).

Emit from a global Skin with jQuery​

To hook the cart:updated event your module fires into neuroon:cart-update with a 200 ms debounce:

<script>
(function() {
    if (typeof jQuery === 'undefined') return;
    var debounceTimer = null;
    jQuery(document).on('cart:updated', function() {
        if (debounceTimer) clearTimeout(debounceTimer);
        debounceTimer = setTimeout(function() {
            window.dispatchEvent(new CustomEvent('neuroon:cart-update'));
        }, 200);
    });
})();
</script>

Injection from WebForms code-behind​

If you prefer not to read settings from the ASPX:

public partial class NeuroonSearchSkin : DotNetNuke.UI.Skins.SkinObjectBase
{
    protected string Token   { get; private set; }
    protected string ApiUrl  { get; private set; }
    protected string Locale  { get; private set; }

    protected override void OnPreRender(EventArgs e)
    {
        base.OnPreRender(e);
        Token  = WidgetTokenProvider.Get();
        ApiUrl = NeuroonSettings.ApiUrl;
        Locale = Thread.CurrentThread.CurrentCulture.TwoLetterISOLanguageName;
    }
}

And in the .ascx:

<script
    src="https://cdn.neuroon.ai/widget@0.9.10/widget.js"
    data-token='<%= Token %>'
    data-api-url='<%= ApiUrl %>'
    data-locale='<%= Locale %>'
    data-container="#neuroon-search"
    async></script>

Next steps​

Last updated on