Saltar al contenido principal

DNN · Razor snippets

Esta página recoge los fragmentos de código que más copiarás al integrar Neuroon en un Skin DNN. Los textos asumen que ya tienes NeuroonSettings, NeuroonClient y WidgetTokenProvider definidos (ver full-csharp).

Embebido del widget en .ascx​

Skin / SkinObject mínimo. <asp:PlaceHolder> permite condicionar el render desde code-behind si lo necesitas:

<%@ 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>

Embebido como Razor partial (.cshtml)​

Para módulos DNN basados en Razor:

@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>

Embebido condicional por TabId​

Para mostrar el widget solo en la home y en /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: partial _NeuroonCartUpdate.cshtml​

@model dynamic
@using Newtonsoft.Json

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

Y desde tu vista de "Add to cart" / "Update line":

@{
    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 sin payload (modo "ping")​

Si tu carrito tiene cálculos sensibles (ofertas, tax) que prefieres no exponer al frontend, dispatcha el evento sin detail. El widget pedirá al servidor el estado actualizado:

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

Equivalente al patrón usado por el plugin WordPress (ver plugins/wordpress/cart-bridge).

Emitir desde Skin global con jQuery​

Para enganchar el evento cart:updated que dispara tu módulo a neuroon:cart-update con debounce 200 ms:

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

Inyección desde code-behind WebForms​

Si prefieres no leer settings desde el 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;
    }
}

Y en el .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>

Próximos pasos​

Última actualización en