Recetario de plantillas del centro de ayuda

Iteración de los resultados

Este fragmento es un ejemplo de cómo se puede usar el asistente{{results}}para iterar a través de los resultados de la búsqueda federada:

{{#if results}} 
    {{#each results}}
  • {{title}} {{#if is_external}} {{/if}}

    {{#if vote_sum}} {{vote_sum}} {{/if}} {{#if comment_count}} {{comment_count}} {{/if}}
    {{text}}
  • {{/each}}
{{else}}

{{t 'no_results_unified'}} {{#link 'help_center'}} {{t 'browse_help_center'}} {{/link}}

{{/if}}

Agregar clasificación de tipos de suscripción en la página Siguiendo de Mis actividades

Para que sea más fácil que los usuarios vean sus suscripciones, puede permitir que ordenen las suscripciones por tipo en la página Mis actividades > Siguiendo.

Plantillas aplicables
  • Página de seguimiento
Receta
  • Debajo de la etiqueta , inserte el código siguiente:
    {{current_filter.label}} {{#each filters}} {{name}} {{/each}}

Agregar las opciones de clasificación "created at" y "updated at" para las solicitudes en Mis actividades

Se pueden agregar las opciones de clasificación "created at" ("creado el") y "updated at" ("actualizado el") para los usuarios finales en la página de solicitudes en Mis actividades.

Nota:Las opciones de clasificación “created at” y “updated at” vienen incluidas de manera predeterminada en lostemas estándary los temas que fueron personalizados después de agosto de 2016.
Plantilla aplicable
  • Página de lista de solicitudes

Receta

  • Reemplace{{t 'created'}}con:
    {{#link 'requests' sort_by='created_at'}}{{t 'created'}}{{/link}}
  • Reemplace{{t 'last_activity'}}con:
    {{#link 'requests' sort_by='updated_at'}}{{t 'last_activity'}}{{/link}}

Agregar botones Seguir/Dejar de seguir en una organización compartida

Se puede permitir que los usuarios reciban notificaciones por correo electrónico de las solicitudes enviadas a su organización compartida. El asistente {{subscribe}} inserta un botón "seguir" que los usuarios pueden usar si desean recibir notificaciones por correo electrónico cuando se crea o se actualiza una solicitud en su organización compartida. Los usuarios también tienen la opción de dejar de seguir si ya no desean recibir las actualizaciones.

Nota:El botón Seguir para las organizaciones compartidas está disponible de manera predeterminada en lostemas estándary en los temas que se personalizaron después del 23 de enero de 2016.
Plantilla aplicable
  • Página de lista de solicitudes
Objeto aplicable
  • {{#form 'requests_filter'}}...{{/form}}
Receta
  • Agregue el asistente{{subscribe}}al objeto form.

Ejemplo

{{#form 'requests_filter' class='request-table-toolbar'}} {{input 'query' id='quick-search' type='search' class='requests-search'}} 
{{label 'organization' for='request-organization-select' class='request-filter'}} {{select 'organization' id='request-organization-select' class='request-filter'}} {{subscribe}} {{label 'status' for='request-status-select' class='request-filter'}} {{select 'status' id='request-status-select' class='request-filter'}}
{{/form}}

Referencia

Permitir que los usuarios que han iniciado sesión envíen copias (CC) de solicitudes de soporte a otros usuarios

Se puede permitir que los usuarios que han iniciado sesión agreguen copias CC a las solicitudes de soporte nuevas y existentes en el centro de ayuda. Cuando se agrega una copia CC a una solicitud de soporte, el usuario que recibe la copia recibirá notificaciones por correo electrónico sobre las actualizaciones a los tickets.

Nota:La opción CC está disponible para las solicitudes de soporte de manera predeterminada en lostemas estándary en los temas que se personalizaron después del 14 de diciembre de 2015.

Después de agregar el código al tema personalizado, se debe activar la función, consulteConfigurar permisos para enviar copias (CC).

Plantilla aplicable
  • Página de solicitud
Objeto aplicable
  • {{#form 'comment' class='comment-form'}}...{{/form}}
Receta
  • Inserte el siguiente fragmento dentro del formulario de comentarios.
    {{#if help_center.request_ccs_enabled}} 
    {{token_field 'ccs' class="ccs-input"}}
    {{/if}}

Agregar un vínculo a la solicitud principal en las solicitudes de seguimiento

机构需要在联合国vinculo la solicitud普林西普al (si existe) en una solicitud de seguimiento.

Nota:El vínculo a la solicitud principal en la solicitud de seguimiento está disponible de manera predeterminada en lostemas estándary los temas que fueron personalizados después de agosto de 2016.

Plantilla aplicable
  • Página de solicitud

Receta

  • Agregue el siguiente fragmento a la plantilla de la página Solicitud donde desea mostrar el vínculo al ticket principal (si existe):
    {{#if request.followup_source_id}} 
    {{t 'followup'}}
    {{link 'request' id=request.followup_source_id}}
    {{/if}}
Referencia

Agregar botones para votar en los artículos

Los botones para votar en los artículos forman parte del tema Copengahen estándar. Pero si la opción para votar no está disponible en los artículos, es posible que se hayan eliminado los botones del tema.

El código para agregar botones para votar puede variar según el tema, pero este es el código para el tema Copenhagen estándar, por si se necesita.

Plantilla aplicable
  • Artículo
Receta
  • Agregue el código siguiente a la plantilla Página de artículo:
    {{#with article}} 
    {{t 'was_this_article_helpful'}}
    {{vote 'up' role='radio' class='button article-vote article-vote-up'}} {{vote 'down' role='radio' class='button article-vote article-vote-down'}}
    {{vote 'label' class='article-vote-label'}}
    {{/with}}

Agregar etiquetas de contenido a artículos y publicaciones

El tema Copenhagen estándar muestra etiquetas de contenido en los artículos, las publicaciones de la comunidad y las páginas de búsqueda de manera predeterminada. Si está usando un tema personalizado o del Marketplace, es posible que tenga que actualizar el tema para mostrar las etiquetas de contenido en esas páginas. Para comenzar, puede usar los siguientes archivos de plantilla del tema Copenhagen como guía:

Una vez que se sienta a gusto, puede comenzar a agregar etiquetas de contenido en otras páginas. Por ejemplo, el siguiente fragmento agrega una lista de etiquetas de contenido a la plantilla de la página de temas de la comunidad.

{{#each posts}} ... {{#if (compare content_tags.length ">" 0)}}  {{/if}} ... {{/each}}

Agregar insignias al tema personalizado del centro de ayuda

Nota:Las insignias están disponibles de manera predeterminada a partir del 1 de septiembre de 2020.
Si no desea usar el tema Copenhagen estándar, puede crear un tema personalizado. Sin embargo, con las insignias es necesario utilizar laAPI de creación de plantillas v2 para temas. Si aún está usando la v1, consultelas instrucciones de actualizaciónpara hacer esto. También puede consultar eltema de ejemplo de Zendesk en GitHubpara que le sirva de inspiración.

Este tema trata sobre lo siguiente:

Agregar el nuevo asistente actions de perfil de usuario

Deberá agregar la opción Otorgar insignia si desea otorgar insignias a los agentes. Sin embargo, antes de poder hacerlo, deberá agregar el nuevo asistenteactions.

Para agregar la declaración del asistente actions

  1. Abra el editor de código de temas en línea y vaya a la página del perfil de usuario de un agente.
    Page filename:user_profile_page.hbs
  2. Ubique la declaración del asistenteedit.
    {{edit}}
  3. Sustituya la declaración del asistenteeditpor la nueva declaración del asistenteactions.
    {{actions}}

Ahora los agentes podrán otorgar insignias. El nuevo botón será rediseñado con CSS de acuerdo a sus preferencias. Si desea más inspiración consulte el tema deejemplo de Zendesk.

Mostrar las insignias de cargo en la página de lista de publicaciones

Puede agregar insignias de cargos a modo de rótulos que se encuentran contiguos al nombre del autor en la página de la lista de publicaciones. El aspecto es parecido a los rótulos del estado de publicación ya que, para hacerlo más sencillo, se vuelve a utilizar la clase de estilo.

Para mostrar las insignias de cargo en la página de lista de publicaciones

  1. 白岩洞el编辑脏污德尔德特马
    Page filename:community_topic_page.hbs
  2. Busque la declaraciónauthor name. En el tema Copenhagen, la línea se vería así:
    <李class="meta-data">{{author.name}}
  3. Agregue este fragmento a la línea después de la declaración:
    {{#each author.badges}}<李class="meta-data">{{#is category_slug "titles"}}{{name}}{{/is}}
  4. {{/each}}

Para usuarios avanzados: no (re)utilice la clase CSSstatus-labelen esta situación. En lugar de ello, cree una nueva clase CSS especializada que se pueda modificar de forma independiente del estilo del rótulo del estado.

Este es un ejemplo de una insignia de cargo para un miembro de la comunidad

Ejemplo de insignia de cargo de Gather.

Mostrar las insignias de cargo en una página de publicaciones y de comentarios

Para mostrar las insignias de cargo en la página de lista de publicaciones

  1. 白岩洞el编辑脏污德尔德特马
    Page filename:community_post_page.hbs
  2. Busque la declaraciónauthor name. En el tema Copenhagen, la línea se vería así:
    <李class="meta-data">{{author.name}}
  3. Agregue este fragmento a la línea después de la declaración:
    {{#each author.badges}}<李class="meta-data">{{#is category_slug "titles"}}{{name}}{{/is}}
  4. {{/each}}

Mostrar las insignias de cargo y logros en una página de perfil de usuario

En una página de perfil de usuario, lo más seguro es que quiera agregar más que solo las insignias de cargos; por ejemplo, también puede agregar los logros del usuario. El siguiente ejemplo supone que existe un icono gráfico para cada insignia de logro. Basándonos en el tema Copenhagen, las insignias de logros podrían verse así:

Insignias de Gather para cargos y éxitos.

Para mostrar las insignias de cargo y logros en una página de perfil de usuario

  1. 白岩洞el编辑脏污德尔德特马
    Page filename:user_profile_page.hbs
  2. Ubique las líneas en el archivo donde se renderiza el nombre del usuario. Por ejemplo:

    {{#if user.url}} {{user.name}} {{else}} {{user.name}} {{/if}}

  3. Reemplace ese fragmento con lo siguiente:

    {{#if user.url}} {{user.name}} {{else}} {{user.name}} {{/if}}{{#each user.badges}}{{#is category_slug "titles"}}{{name}}{{/is}}{{/each}}

    {{#each user.badges}}{{#is category_slug "achievements"}}

    {{name}}
    {{/is}}{{/each}}

En este ejemplo, todos los estilos CSS están integrados para que el ejemplo sea sencillo. Lo más conveniente es usar estos ejemplos de inspiración pero dedicar el tiempo que sea necesario para asegurarse de que el estilo refleje su propio tema.

Permitir que los usuarios vean los perfiles de usuario en el centro de ayuda

En esta sección se describe cómo actualizar las plantillas necesarias para que los usuarios del centro de ayuda puedan hacer clic en el nombre o el avatar del autor y ver el perfil del usuario.

Nota:Los perfiles de usuario están disponibles de manera predeterminada en lostemas estándary en los temas que se personalizaron después del 20 de junio de 2016.
Las soluciones que se describen en esta sección implican el uso del asistentelinken el lenguaje de plantillas Curlybars (consultelink helperen la documentación de las plantillas (en inglés)) para actualizar las siguientes plantillas: Artículos

Haga las siguientes actualizaciones en la plantilla de la página de artículo.

Actualizar el nombre del autor del artículo

Reemplace el siguiente bloqueif:

{{#if article.author.url}}  {{article.author.name}}  {{else}} {{article.author.name}} {{/if}}

con el siguiente asistentelink:

{{#link "user_profile" id=article.author.id class="user-profile"}} {{article.author.name}} {{/link}}
Actualizar los nombres de los autores de los comentarios

Reemplace el siguiente bloqueif:

{{#if author.url}} {{author.name}} {{else}} {{author.name}} {{/if}}

con el siguiente asistentelink:

{{#link "user_profile" id=author.id class="user-profile"}} {{author.name}} {{/link}}
Actualizar el avatar de los autores de los artículos y los comentarios

Reemplace la siguiente etiqueta de imagen:

Avatar

con el siguiente asistentelink:

{{#link "user_profile" id=article.author.id class="user-profile"}} Avatar {{/link}}
Publicaciones en la comunidad

Haga las siguientes actualizaciones en la plantilla de la página de publicación de la comunidad.

Actualizar los nombres de los autores de las publicaciones

Reemplace el siguiente bloqueif:

{{#if post.author.url}}  {{post.author.name}}  {{else}} {{post.author.name}} {{/if}}

con el siguiente asistentelink:

{{#link "user_profile" id=post.author.id class="user-profile"}} {{post.author.name}} {{/link}}
Actualizar los nombres de los autores de los comentarios

Reemplace el siguiente bloqueif:

{{#if author.url}} {{author.name}} {{else}} {{author.name}} {{/if}}

con el siguiente asistentelink:

{{#link "user_profile" id=author.id class="user-profile"}} {{author.name}} {{/link}}
Actualizar los avatares de los autores de las publicaciones

Reemplace la siguiente etiqueta de imagen:

Avatar

con el siguiente asistentelink:

{{#link "user_profile" id=post.author.id class="user-profile"}} Avatar {{/link}}
Actualizar los avatares de los autores de los comentarios

Reemplace la siguiente etiqueta de imagen:

Avatar

con el siguiente asistentelink:

{{#link "user_profile" id=author.id class="user-profile"}} Avatar {{/link}}
Resultados de la búsqueda

Haga las siguientes actualizaciones en la plantilla de resultados de la búsqueda.

Actualizar los nombres de los autores de los artículos en los resultados

Reemplace el siguiente bloqueifen el bloque{{#each article_results}}:

{{#if author.url}} {{author.name}} {{else}} {{author.name}} {{/if}}

con el siguiente asistentelink:

{{#link "user_profile" id=author.id class="user-profile"}} {{author.name}} {{/link}}
Actualizar los nombres de los autores de las publicaciones en los resultados

Reemplace el siguiente bloqueifen el bloque{{#each post_results}}:

{{#if author.url}} {{author.name}} {{else}} {{author.name}} {{/if}}

con el siguiente asistentelink:

{{#link "user_profile" id=author.id class="user-profile"}} {{author.name}} {{/link}}
Actualizar los resultados de la búsqueda en los temas más antiguos

Si tiene un tema más antiguo, es probable que los resultados de la búsqueda utilicen el asistente{{meta}}en su lugar. En ese caso, puede usar el código que se describe en esta sección para vincular los nombres de los autores a las páginas de perfil del centro de ayuda.

Puede que tenga que actualizar el estilo del CSS para que la página de resultados se vea uniforme.

Actualizar los nombres de los autores de los artículos en los resultados

Reemplace las siguientes etiquetas div:

{{meta}}
{{text}}

Con lo siguiente:

 
{{text}}
{{#link "user_profile" id=author.id class="user-profile"}} {{author.name}} {{/link}} {{date created_at}}

Para el resultado final:

{{#each article_results}} 
  • {{title}} {{#if vote_sum}} {{vote_sum}} {{/if}}
    {{text}}
    {{#link "user_profile" id=author.id class="user-profile"}} {{author.name}} {{/link}} {{date created_at}}
  • {{/each}}
    Actualizar los nombres de los autores de las publicaciones en los resultados

    Agregue:

    Para el resultado final:

    {{#each post_results}} 
  • {{title}}
    {{text}}
    {{#link "user_profile" id=author.id class="user-profile"}} {{author.name}} {{/link}} {{date created_at}} {{t 'comments_count' count=comment_count}}
  • {{/each}}

    Activar subsecciones en el tema del centro de ayuda

    Puedeagregar subseccionesa la base de conocimientos de su centro de ayuda para crear más niveles en la jerarquía de contenido. Si está usando un tema personalizado antes del 29 de marzo de 2019, debe agregar código al tema personalizado del centro de ayuda para activar las subsecciones. El código que sigue viene con versiones posteriores del tema Copenhagen.

    Nota:Las subsecciones están disponibles para Guide Enterprise de manera predeterminada en lostemas estándary en los temas que se personalizaron después del 29 de marzo de 2019.
    Plantilla aplicable
    • Sección
    Objeto aplicable
    • section.sections
    Receta
    • Inserte el siguiente fragmento en la plantilla de la página de sección de Zendesk,section_page.hbs, después de la etiqueta del encabezado ( ) y antes de la etiqueta de paginación ({{pagination}}) :
      {{#if section.sections}}  {{/if}} {{#if section.articles}} 
        {{#each section.articles}}
      • {{#if promoted}}{{/if}} {{title}}
      • {{/each}}
      {{else}} {{t 'empty'}} {{/if}}

    Agregar filtros y resultados a la barra lateral de varios centros de ayuda en la página de resultados de la búsqueda

    La búsqueda del centro de ayuda les permite a los usuarios hacer búsquedas en todos los centros de ayuda (si son varios), y presentar los resultados de una búsqueda realizada en los centros de ayuda, la base de conocimientos y la comunidad en una secuencia unificada y con filtros en la página de resultados de la búsqueda.

    Si está usando un tema que fue personalizado antes del 29 de marzo de 2019, deberá agregar código al tema personalizado del centro de ayuda para admitir los resultados unificados de la búsqueda y la función de búsqueda en varios centros de ayuda. Si cuenta con varios centros de ayuda, tendrá que actualizar el tema para cada uno de ellos.

    Nota:Los resultados unificados de una búsqueda y la función de búsqueda en varios centros de ayuda son admitidos de manera predeterminada en lostemas estándary los temas que fueron personalizados después del 25 de septiembre de 2019.

    La forma más rápida de realizar los cambios necesarios en su tema es importar la última versión del tema Copenhagen que sí admite los resultados unificados de búsqueda. Para ello, consulteAdición de un tema del centro de ayuda a Guide.

    Si prefiere actualizar su tema personalizado existente, esta sección ofrece una descripción de todos los cambios que debe hacer. Las soluciones que se describen en esta sección implican el uso de los asistenteshelp_center_filters,filtersysubfiltersen el lenguaje de plantillas Curlybars para actualizar los siguientes archivos:

    Actualizar la plantilla de resultados de la búsqueda para agregar filtros a la barra lateral

    Es necesario actualizar la plantilla de resultados de la búsqueda para poder agregar filtros a la barra lateral e iterar a través de la lista de resultados.

    Agregar filtros a la barra lateral

    Este fragmento es un ejemplo de cómo se pueden implementar facetas de búsqueda en la barra lateral de la página de resultados de la búsqueda usando los nuevos asistentes de filtro.

    Inserte el siguiente código

    en la plantilla de resultados de la búsqueda:
    {{#if help_center.community_enabled}}

    {{t 'filter_by_type'}}

    {{/if}} {{#if subfilters}}
    {{#is current_filter.identifier 'knowledge_base'}}

    {{t 'filter_by_category'}}

    {{/is}} {{#is current_filter.identifier 'community'}}

    {{t 'filter_by_topic'}}

    {{/is}}
    {{/if}}
    Iteración de los resultados

    Este fragmento es un buen ejemplo de cómo usar el asistente {{results}} para iterar a través de la lista de resultados unificados de la búsqueda.

    Reemplace los asistentes{{article_results}}y{{post_results}}, además de sus subencabezados asociados de búsqueda-resultados H3

    en la plantilla de resultados de la búsqueda con lo siguiente:

    {{#if results}} 
      {{#each results}}
    • {{title}}

      {{#if vote_sum}} {{vote_sum}} {{/if}} {{#if comment_count}} {{comment_count}} {{/if}}
      {{text}}
    • {{/each}}
    {{else}}

    {{t 'no_results_unified'}} {{#link 'help_center'}} {{t 'browse_help_center'}} {{/link}}

    {{/if}}

    Actualizar el estilo CSS para los filtros de la barra lateral en la página de resultados de la búsqueda

    Es posible agregar estilos CSS para los filtros de la barra lateral. El siguiente ejemplo se basa en el tema Copenhagen.

    Asegúrese de que las siguientes reglas CSS estén incluidas en el archivo style.css:

    / * * * * * * * * * *搜索结果/ .search-results{说play: flex; flex-direction: column; flex-wrap: wrap; justify-content: space-between; } @media (min-width: 1024px) { .search-results { flex-direction: row; } } .search-results-column { flex: 1; } @media (min-width: 1024px) { .search-results-column { flex: 0 0 75%; } } .search-results-sidebar { border-top: 1px solid #ddd; flex: 1 0 auto; margin-bottom: 20px; padding: 0; } @media (min-width: 1024px) { .search-results-sidebar { border: 0; flex: 0 0 20%; height: auto; } } .search-results-sidebar .sidenav-item[aria-selected="true"] { background-color: $brand_color; color: $brand_text_color; text-decoration: none; } .search-results-subheading { font-size: 18px; font-weight: 600; } .search-results-list { margin-bottom: 25px; } .search-results-list > li { padding: 20px 0; } .search-results-list > li:first-child { border-top: 1px solid #ddd; } .search-results-list > li h2 { margin-bottom: 0; } .search-result-title { font-size: 16px; } .search-result-description { margin-top: 15px; word-break: break-word; } .search-result-votes, .search-result-meta-count { color: lighten($text_color, 20%); display: inline-block; font-size: 13px; font-weight: 300; padding: 4px 5px; position: relative; } .search-result-votes::before, .search-result-meta-count::before { color: $brand_color; } [dir="ltr"] .search-result-votes, [dir="ltr"] .search-result-meta-count { margin-left: 5px; } [dir="ltr"] .search-result-votes::before, [dir="ltr"] .search-result-meta-count::before { margin-right: 3px; } [dir="rtl"] .search-result-votes, [dir="rtl"] .search-result-meta-count { margin-right: 5px; } [dir="rtl"] .search-result-votes::before, [dir="rtl"] .search-result-meta-count::before { margin-left: 3px; } .search-result-votes::before { content: "\1F44D"; } .search-result-meta-count::before { content: "\1F4AC"; } .search-result .meta-group { align-items: center; } .search-result-breadcrumbs { margin: 0; } .search-result-breadcrumbs li:last-child::after { content: "·"; display: inline-block; margin: 0 5px; } /* Non-latin search results highlight */ /* Add a yellow background for Chinese */ html[lang|="zh"] .search-result-description em { font-style: normal; background: yellow; } /* Use bold to highlight for the rest of supported non-latin languages */ html[lang|="ar"] .search-result-description em, html[lang|="bg"] .search-result-description em, html[lang|="el"] .search-result-description em, html[lang|="he"] .search-result-description em, html[lang|="hi"] .search-result-description em, html[lang|="ko"] .search-result-description em, html[lang|="ja"] .search-result-description em, html[lang|="ru"] .search-result-description em, html[lang|="th"] .search-result-description em { font-style: bold; }

    Actualizar JavaScript para la barra lateral plegable en la página de resultados de la búsqueda

    Es posible añadir JavaScript para la barra lateral plegable en la página de resultados de la búsqueda. El siguiente ejemplo se basa en el tema Copenhagen.

    Reemplace el siguiente bloque en el archivo script.js en el tema personalizado:

    // Toggles expanded aria to collapsible elements Array.prototype.forEach.call(document.querySelectorAll('.collapsible-nav, .collapsible-sidebar'), function(el) { el.addEventListener('click', function(e) { e.stopPropagation(); var isExpanded = this.getAttribute('aria-expanded') === 'true'; this.setAttribute('aria-expanded', !isExpanded); }); });

    con el siguiente fragmento de código:

    // Toggles expanded aria to collapsible elements var collapsible = document.querySelectorAll('.collapsible-nav, .collapsible-sidebar'); Array.prototype.forEach.call(collapsible, function(el) { var toggle = el.querySelector('.collapsible-nav-toggle, .collapsible-sidebar-toggle'); el.addEventListener('click', function(e) { toggleNavigation(toggle, this); }); el.addEventListener('keyup', function(e) { if (e.keyCode === 27) { // Escape key closeNavigation(toggle, this); } }); });
    Regresar al inicio

    1 Comentarios

    • AAHHOO®

      Gracias. En home_page.hbs del tema Copenhague utilice la variable:

      • Especifique la ID de la categoría, la sección o el artículo en un bloqueis:
        {{#is id 200646205}} ... {{/is}}

      Para mostrar una imagen en el idioma Español. ¿Cual es la receta para mostrar una imagen distinta para el idioma Ingles?

      Muchas gracias. Jose Moya

      0

    Inicie sesiónpara dejar un comentario.

    Tecnología de Zendesk