Personalizar página/post del blog (wix velo)

Hoy traemos otro código "ready to go" para poder personalizar tu página de blog y que sea realmente atractiva, a diferencia del post nativo de wix y editor x.

Hemos buscado artículos y vídeos relacionados a como lograr esta personalización de la que hablamos, y no dimos con ninguna respuesta funcional, práctica ni concisa, por eso en Mediatility desarrollamos una solución sencilla que sabemos que te podrá ayudar si no eres muy bueno programando, cabe aclarar que la funcionalidad podría decirse que es de un 90% pues puede presentar uno que otro fallo al cargar la información, pero creemos que será de gran ayuda para los novatos de wix que no hayan logrado hacer funcionar el código del tutorial oficial de velo: https://www.wix.com/velo/example/custom-post-page

Primero necesitarás establecer el diseño de tu página, podrás poner cualquier elemento de la información básica y nativa del blog de wix, (título, categoría, tags, vistas, likes, autor, fecha de publicación y de edición, etc).

En nuestro caso usamos los siguientes datos y el siguiente layout (el cual podrás diseñar a tu propio gusto)

Si ya tienes listo en tu editor tu layout con la información que quieras mostrar (repetimos, ya sea la misma que en nuestro ejemplo o cualquier otro estilo), ahora resta agregar un dataset vinculado a "posts" del blog.

Layout listo y dataset (Posts) colocado y vinculado a cada elemento, vincúlalo como normalmente lo haces (categoría a main Categhory, número de likes a likeCount, fecha a publishedDate, etc.) conecta todos los que tengas EXCEPTO: el título y la imagen de portada (pues estarán conectado por medio del código)

¿Listo? Ya tienes todos los elementos conectados a su respectiva información desde el dataset, ahora activa el modo developer (velo) y agrega este código:

// Custome post

    import wixData from 'wix-data';

    $w('#post1').getPost()
      .then( (post) => {
        let postTitle = post.title;
            $w('#postTitle').text = postTitle 
        let postImage = post.coverImage;
            $w('#postHeaderStrip').src = postImage 
        
        // Esta parte filtra el contenido del dataset por el título del post actual, permitiendo que el resto de datos conectados al dataset sin código coincidan con los del post
        
        $w("#post").setFilter( wixData.filter()
        .contains("title", postTitle)
        );
        
    } )
    .catch( (error) => {
        console.log(error);
    } );

    // Esta parte permite que los elementos se recarguen al momento de cambiar de post directamente en "post relacionados"
wixLocation.onChange( (location) => {
    wixLocation.to(wixLocation.url);
} );

Los textos subrayados son los únicos textos que deberás cambiar por los tags que tienen tus elementos propios:

#postTitle representa el cuadro de texto del título del post

#postHeaderStrip representa el elemento de imagen de portada del post

#post representa el dataset conectado a "Post"

Y listo, tu página debe funcionar correctamente, es todo lo que necesitas hacer, pegar el código de arriba y conectar esos tres elementos.

Cualquier duda o mal funcionamiento platícanoslo en los comentarios y te ayudaremos lo más pronto posible