check list

✅ CHECKLIST COMPLETO – PLANTILLA PERSONALIZADA PARA BLOGGER (MAILY)

Configuración General

Esto es un ejemplo de lo que le debe salir al usuario en el panel de diseño. Así no tendrá que tocar código: simplemente colocando esta información ya quedará configurado todo.

Integraciones Sensibles con App Script u otro servidor seguro
Integraciones Públicas
App Script URLs
Configuración del Menú Principal
Redes Sociales
Configuración del Logo me gustaria que el logo estuviera centrado y más espaciado, y que de fondo se pueda confiugar el color y una animación con svg como lo muestra aquí en este enlace: https://www.sliderrevolution.com/resources/css-animated-background/ la parte que dice: Floating SVGS
Menú de Navegación
🖼️ Popup de notificación ( solo css y html)

que permita subir imagen desde el editor de blogger:

y que el icono sea una campana 🔔 - así como está en cart-js

Configuración de Notificación Asistente IA

Contenido de la Notificación
Alimentación del Bot

Aquí debe ir una lista de textos en la que la pregunta va antes de : y luego la respuesta (pregunta:respuesta)

Estructura Portada al estilo kolectiva

Configuración del Slider

Imágenes del Slider en search

Configuración del Blog

Detalles del Blog
🗓️ Calendario de Google

este calendario se muestra en los blogs que tengan la etiqueta calendar


Formas de Pago

QRs de Pago
Marketplace




🧱 ESTRUCTURA GENERAL

🧭 MENÚ Y NAVEGACIÓN

    • Registro | Login | Contact | Group | Selector moneda (COP | USD) | Traductor automático (Google Translate)
      • hay algo importante de la moneda que te debes fijar y que se maneje como en cart-js, por ejemplo si yo cambio USD por ARG en cart-js en el panel de diseño, la moneda se ajusta en todo el sitio web, esto lo hago precisamente para que el usuario en la parte izquierda ponga su moneda local y en la parte derecha la moneda o pais con el que quiere hacer los envíos internacionales.
    • LOGO - Menú de Navegación - Notificación popup (solo con css y html) - Modo oscuro - Buscador - Wishlist - Carrito (en una línea)
  • Click aquí para hablar con nuestro asistente IA. °Hablar ahora° X - quiero que en esta parte mires como funciona el bot ia de kolectiva https://www.kolectiva.co/ - cuando se le da clic al botón de whatsapp se abre un chat bot que si uno le pregunta el responde alimentado por TextList1 que es el widget qeu se titula ALIMENTACION BOT. entonces que ese bot se abra es cuando se le de clic en °Hablar ahora° - y el botón de whatsapp flotante que siga funcionando como lo hace en https://cart-jspuro.blogspot.com/

🛒 FUNCIONALIDADES DE TIENDA

    • Ejemplo: si el post tiene la etiqueta %30, se mostrará automáticamente un badge de "-30%" en la imagen del producto
    • Inspirado en Kolectiva: Ver ejemplo
    • Ejemplo de etiquetas soportadas:
      • New → Muestra etiqueta "Nuevo"
      • FreeShipping → Muestra etiqueta "Envío gratis"
      • Trending → Muestra etiqueta "Tendencia"
      • TopRated → Muestra etiqueta "Mejor valorado"
      • Hot → Muestra etiqueta "Popular"
      • EcoFriendly → Muestra etiqueta "Ecológico"
      • Pack → Muestra etiqueta "Pack especial"
      • Sponsor → Muestra etiqueta "Sponsor"
    • Ejemplo en vivo: Ver en Kolectiva
  • Métodos de pago en ficha de producto en el sidebar derecho:
    Ejemplo botones producto

🖼️ VISTA DE SLIDER EN LA PÁGINA DE BÚSQUEDA

  • Las fotos de portada deben poder añadirse desde el panel de diseño de Blogger (como gadgets o widgets editables)
  • Las portadas deben estar hechas solo con HTML y CSS puro, sin JavaScript, Puedes consultar la pagina de kolectiva, el slider que aparece ahí está hecho con css y html puro

✏️ VISUALIZACIÓN INDEX DE CONTENIDO

📰 quitar los margenes de los lados y que ocupe todo el espacio como se muestra aquí debajo y poner los colores de kolectiva

📰 VISUALIZACIÓN INTERNA DE CONTENIDO

🧩 MÓDULOS CONDICIONALES POR ETIQUETA

Al etiquetar un post, se activan estos módulos como sidebar derecho, Y ME GUSTARÍA QUE LA VISUALIZACIÓN FUERA COMO ESTA: https://maily.zkreations.com/2022/12/bowl-of-shrimp-soup.html

  • para este modulo en especifico el usuario debe poner dos etiquetas, la primera es "relacionado" y la segunda la etiqueta REF-XXXXXX con el id del producto

🔐 LOGIN Y SEGURIDAD

  • pero quiero que esto pueda ser opcional, que el cliente pueda decidir si lo activa o lo desactiva

💰 GOOGLE ADSENSE

  • Zonas habilitadas:
    • Widgets listos para insertar el código

🔔 NOTIFICACIONES Y POPUPS

📄 PÁGINAS ESPECIALES

✅ OTRAS RECOMENDACIONES

Navegación estilo Kolectiva

me gustaria una animación de fondo para la parte de abajo marcada en la imgen https://www.sliderrevolution.com/resources/css-animated-background/

Footer Kolectiva

✅ Mejoras opcionales

Puedes revisar Kolectiva y Kangutingo para identificar mejoras de rendimiento o interfaz aplicables a Maily. Prioriza rapidez, experiencia de usuario y minimalismo.

✅ OTRAS RECOMENDACIONES DE OPTIMIZACIÓN

🔧 Script: Lazy Load de Google Adsense

<script>
//<![CDATA[
let lzAd = false;
window.addEventListener('scroll', () => {
  if ((document.documentElement.scrollTop !== 0 || document.body.scrollTop !== 0) && !lzAd) {
    (function(){
      let ignLzPub = "adsenseClientId"; // Reemplaza con tu ID de cliente de AdSense
      let ignLzAd = document.createElement('script');
      ignLzAd.src = 'https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js?client=' + ignLzPub;
      ignLzAd.async = true;
      ignLzAd.setAttribute('crossorigin', 'anonymous');
      document.head.appendChild(ignLzAd);
    })();
    lzAd = true;
  }
}, true);
//]]>
</script>

🖼️ Script: Lazy Load de Imágenes con Imgix y fallback a Cloudinary

<script>
//<![CDATA[
document.addEventListener('DOMContentLoaded', function () {
  const blogTitle = document.title;

  function transformToImgixURL(url) {
    if (url.includes("blogger.googleusercontent.com")) {
      return url.replace("https://blogger.googleusercontent.com", "https://kolectiva.imgix.net")
                .replace('/img/img/', '/img/');
    }
    return url;
  }

  function transformToCloudinaryURL(url) {
    if (url.includes("blogger.googleusercontent.com")) {
      return url.replace("https://blogger.googleusercontent.com", "https://res.cloudinary.com/dae9sa0vt/image/fetch/https://blogger.googleusercontent.com");
    }
    return url;
  }

  function processImage(img, url) {
    const imgixUrl = transformToImgixURL(url);
    const testImg = new Image();
    testImg.src = imgixUrl;

    testImg.onload = () => {
      img.src = imgixUrl;
    };

    testImg.onerror = () => {
      const cloudinaryUrl = transformToCloudinaryURL(url);
      const fallbackImg = new Image();
      fallbackImg.src = cloudinaryUrl;

      fallbackImg.onload = () => {
        img.src = cloudinaryUrl;
      };

      fallbackImg.onerror = () => {
        img.src = url;
      };
    };
  }

  document.querySelectorAll('img[src]').forEach((img) => {
    const originalUrl = img.src;
    if (originalUrl) processImage(img, originalUrl);

    const imgAlt = img.getAttribute('alt') || `Imagen relacionada con el tema ${blogTitle}`;
    const imgTitle = img.getAttribute('title') || `Descubre más sobre ${blogTitle}`;
    img.setAttribute('alt', imgAlt);
    img.setAttribute('title', imgTitle);

    if (img.hasAttribute('data-original-height') && img.hasAttribute('data-original-width')) {
      img.setAttribute('height', img.getAttribute('data-original-height'));
      img.setAttribute('width', img.getAttribute('data-original-width'));
      img.removeAttribute('data-original-height');
      img.removeAttribute('data-original-width');
    }

    if (img.hasAttribute('border')) img.removeAttribute('border');
  });

  document.querySelectorAll('.separator').forEach(div => {
    const link = div.querySelector('a');
    const image = link?.querySelector('img');
    if (link && image) {
      image.src = transformToImgixURL(image.src);
      div.parentNode.insertBefore(link, div);
      div.remove();
    }
  });

  document.querySelectorAll('.productPhoto a').forEach(link => {
    link.removeAttribute('style');
  });

  const firstImage = document.querySelector('.productPhoto img');
  if (firstImage && !firstImage.classList.contains('item_thumb')) {
    firstImage.classList.add('item_thumb');
  }
});
//]]>
</script>

📊 Script: Lazy Load de Google Analytics

<b:if cond='data:blog.analyticsAccountNumber'>
<script>
  function downloadJSAtOnload() {
    var d = document.createElement('script');
    d.src = 'https://www.googletagmanager.com/gtag/js?id=<data:blog.analyticsAccountNumber/>';
    document.body.appendChild(d);
  }

  window.addEventListener ? window.addEventListener('load', downloadJSAtOnload, false) :
  window.attachEvent ? window.attachEvent('onload', downloadJSAtOnload) :
  window.onload = downloadJSAtOnload;

  window.dataLayer = window.dataLayer || [];
  function gtag(){dataLayer.push(arguments);}
  gtag('js', new Date());
  gtag('config', '<data:blog.analyticsAccountNumber/>');
</script>
</b:if>

📦 Script: Facebook Pixel - hay que ajustarlo a las clases del nuevo tema

<script>
//<![CDATA[
if (tw_config.FBPixel_ID != null || tw_config.FBPixel_ID != "") {
  !function(f,b,e,v,n,t,s)
  {if(f.fbq)return;n=f.fbq=function(){n.callMethod?
  n.callMethod.apply(n,arguments):n.queue.push(arguments)};
  if(!f._fbq)f._fbq=n;n.push=n;n.loaded=!0;n.version='2.0';
  n.queue=[];t=b.createElement(e);t.async=!0;
  t.src=v;s=b.getElementsByTagName(e)[0];
  s.parentNode.insertBefore(t,s)}(window, document,'script',
  'https://connect.facebook.net/en_US/fbevents.js');

  fbq('init', tw_config.FBPixel_ID);
  fbq('track', 'PageView');

  $('<noscript><img height="1" width="1" style="display:none" src="https://www.facebook.com/tr?id='+tw_config.FBPixel_ID+'&ev=PageView&noscript=1"/></noscript>').appendTo('body');

  $('.productPhotoWrapper a').each(function(){
    var precio = $(this).parents('.itemPost').attr('data-price');
    var monedaActual = "USD"; // Ajustar si es necesario

    $(this).click(function(){
      fbq('track', 'ViewContent', {
        value: precio,
        currency: monedaActual,
      });
    });
  });

  $('.productOrder a.tombol-wa').click(function(){
    fbq('track', 'InitiateCheckout');
  });

  $('#checkoutWhatsApp .submit').on('click', function(){
    var total = rpToAngka($('.productCheckoutInfo .total').text());
    var monedaActual = "USD"; // Ajustar si es necesario
    fbq('track', 'Purchase', {
      value: total,
      currency: monedaActual,
    });
  });

  $('.poptamv-btn.waFix').click(function(){
    fbq('track', 'Contact');
  });
}
//]]>
</script>

No hay comentarios:

Suscribirse a: Enviar comentarios (Atom)
Checklist linkbio

Checklist linkbio

Checklist de tareas preguntarle a daniel por que en el la pagina https://testing.zkreations.com si aparecen 4 botones de carga en ...
publicación 4

publicación 4

Todo lo que debes saber para lanzar una tienda online exitosa En la era digital, montar una tienda online se ha convertido en una opor...
check list

check list

✅ CHECKLIST COMPLETO – PLANTILLA PERSONALIZADA PARA BLOGGER (MAILY) Configuración General Esto es un ejemplo de lo que le debe...