es.davy.ai

Preguntas y respuestas de programación confiables

¿Tienes una pregunta?

Si tienes alguna pregunta, puedes hacerla a continuación o ingresar lo que estás buscando.

Un problema extraño en la sección de diapositivas de Shopify.

28 Jul, 2023 Programación

Espero que estén bien.

Estoy usando Swiper js para crear una sección de diapositivas, el problema real está en el editor de temas, cuando agrego la sección y hago clic en la diapositiva 2, por ejemplo, mi script no funciona, pero cuando guardo los cambios funciona correctamente.

¿Me he perdido algo?

Aquí está lo que he escrito para cambiar la diapositiva cuando se hace clic en cada diapositiva

{% if request.design_mode %}
  $(document)
    .on('shopify:section:load', MakeTheSlider )
    .on('shopify:section:unload', process_slick_event )
    .on('shopify:section:select', process_slick_event )
    .on('shopify:section:deselect', process_slick_event )
    .on('shopify:section:reorder', process_slick_event )
    .on('shopify:block:select', process_slick_event )
    .on('shopify:block:deselect', process_slick_event );
{% endif %}

function process_slick_event(evt){
  if(evt.detail.sectionId === '{{section.id}}'){
    var CurrentSlide = $("#slideshow-{{ section.id }}").find('#'+evt.target.id).data('index');

    $("#slideshow-{{ section.id }} #pagginat-{{ section.id }} :eq("+CurrentSlide+")").click();
  }
}

Tengo otra pregunta. ¿Por qué el código JS no funciona cuando el usuario agrega una sección y necesita guardar o actualizar para que funcione correctamente? ¿Tenemos alguna solución para esto? Gracias de antemano.

Tags:  ,

Answer

  1. Avatar for davy.ai
    davy.ai

    Solución para Swiper JS que no funciona en el Editor de Temas

    Parece que el problema está relacionado con el design_mode en el editor de temas. El Swiper JS no funciona al intentar cambiar entre diapositivas dentro del editor. Sin embargo, después de guardar los cambios, funciona correctamente en el sitio en vivo.

    Para resolver el problema, intenta usar el siguiente fragmento de código:

    {% if request.design_mode == true %}
  $(window).on('load', function() {
    MakeTheSlider();
  });
{% else %}
  $(document).on('ready', function() {
    MakeTheSlider();
  });
{% endif %}

    En lugar de shopify:section:load y shopify:section:unload, utiliza window.load para el modo de diseño y document.ready para el sitio en vivo. Esto debería solucionar el problema y hacer que el Swiper JS funcione correctamente incluso en el editor de temas.

    ¿Por qué el código JS no funciona sin guardar o actualizar?

    La razón por la que el código JS no funciona inmediatamente después de agregar una sección es que la nueva sección aún no se ha renderizado y no está disponible en el DOM (Modelo de Objeto del Documento). El código solo funciona después de guardar o actualizar, ya que luego se vuelve a cargar la página y se obtiene la nueva sección del servidor, lo que la hace disponible en el DOM.

    Para superar este problema, puedes utilizar el evento shopify:section:load para activar tu código JS. Este evento se dispara cuando se agrega o edita una nueva sección, y el contenido de la sección se carga completamente y está disponible en el DOM.

    $(document).on('shopify:section:load', function(event) {
  // Tu código JS aquí
});

    Al utilizar este evento, puedes asegurarte de que tu código JS se ejecute solo después de que la nueva sección esté completamente cargada y disponible en el DOM, sin necesidad de guardar o actualizar.

Comments are closed.