.El Editor JS de Nextiendas te permite incorporar código JavaScript, scripts en el head y links CSS a tu sitio web. Este proceso puede ser un poco complejo, por lo que es recomendable tener un conocimiento básico de JavaScript y CSS.

Personalizar tu sitio web con Javascript

Pasos para acceder al Editor JS

1. Ingresa a tu Nextiendas > Configuración > Diseño > Editar sitio.

2. Haz clic en “Personalizar diseño” y luego en “Editor JS”.

3. Verás un campo de texto donde podrás escribir o pegar el código JavaScript que desees utilizar (Ctrl+V en Windows o Command + V en Mac). Si deseas realizar más cambios, te sugerimos pegar los distintos códigos uno arriba del otro, separados por un espacio y entre las etiquetas removed

4. Haz clic en el botón de “Guardar” en la parte inferior.

Los cambios se aplicarán a tu sitio web.

Ejemplos de personalización con el Editor JS

Aquí te presentamos algunos ejemplos de modificaciones que puedes realizar en tu sitio web de Nextiendas utilizando el Editor JS:

1. Incorporar un chatbot: Puedes agregar un chatbot a tu sitio web utilizando servicios como Tawk.to o ChatBot. Solo necesitas registrarte en su sitio web, configurar tu chatbot y luego pegar el código JavaScript que te proporcionan en el Editor JS de Nextiendas.

2. Agregar Google Analytics: Para rastrear y analizar el tráfico de tu sitio web, puedes agregar Google Analytics. Solo necesitas crear una cuenta de Google Analytics, obtener tu ID de seguimiento y luego agregar el siguiente código en el Editor JS:

3. Agregar un script personalizado: Si tienes un script personalizado que quieres ejecutar en tu sitio web, puedes agregarlo en el Editor JS. Solo asegúrate de que el script esté correctamente formateado y no cause ningún conflicto con el resto de tu sitio web. IMPORTANTE: Recuerda incluierlo con las etiquetas removed. 

4. Agregar un link CSS: Si tienes un archivo CSS alojado en otro lugar y quieres vincularlo a tu sitio web, puedes hacerlo agregando el siguiente código en el Editor JS:

var link = document.createElement('link');
link.rel = 'stylesheet';
link.href = 'URL-DE-TU-ARCHIVO-CSS';
document.head.appendChild(link);

<script>
$("form").on("submit", function(event) {
  event.preventDefault();
  $.ajax({
    url: "/path/to/your/script",
    type: "post",
    data: $(this).serialize(),
    success: function() {
      alert("Formulario enviado con éxito");
    }
  });
});
</script>

6. Agregar una galería de fotos: Con una biblioteca de JavaScript como Lightbox, puedes crear una galería de fotos que muestre tus productos o trabajos de una manera atractiva. Aquí tienes un ejemplo de cómo se vería el código:

<script>
$(document).on('click', '[data-toggle="lightbox"]', function(event) {
  event.preventDefault();
  $(this).ekkoLightbox();
});
</script>

<script>
<div class="fb-page" 
  data-href="https://www.facebook.com/facebook"
  data-width="380" 
  data-hide-cover="false"
  data-show-facepile="false"></div>
<script>

<script>
$(document).on('click', 'a[href^="#"]', function (event) {
    event.preventDefault();
    $('html, body').animate({
        scrollTop: $($.attr(this, 'href')).offset().top
    }, 500);
});
</script>

9. Crear un botón “Volver arriba”: Puedes agregar un botón que permita a los usuarios volver al inicio de la página con un solo clic:

<script>
$(window).scroll(function() {
    if ($(this).scrollTop() > 50 ) {
        $('.scrolltop:hidden').stop(true, true).fadeIn();
    } else {
        $('.scrolltop').stop(true, true).fadeOut();
    }
});
$(function(){ $(".scroll").click(function(){ $("html,body").animate({scrollTop:$("body").offset().top},"1000");return false})})
</script>

<script>
$('.parallax-window').parallax({imageSrc: '/path/to/image.jpg'});
</script>