Lightbox2 et Thème Debut

Français Discussions Applications Shopify
1

Bonjour,

je viens demander un petit coup de pouce pour finaliser mon intégration de Lightbox2 sur Shopify, avec le Thème Debut. C’est le code qui correspond le mieux à ce que je recherche en terme de design pour pouvoir afficher les images produit en grand lorsqu’on clic dessus, et pouvoir les faire défiler en mode galerie. J’ai réussi l’intégration à 95%, avec persévérance malgré le fait que je n’ai pas de grande notion de code (seulement un peu de html/css il y a des années).

Tout fonctionne comme je le souhaites sur les fiches produit à l’exception d’un détail. C’est toujours la première et même image qui s’affiche lorsqu’on clic pour agrandir l’image du produit, peut importe la photo/variante sélectionnée. J’ai beau chercher, je ne trouve pas de solution.

Mon souhait est de garder le fonctionnement de base de Shopify en thème Debut. C’est à dire lorsqu’on clic sur les petites vignettes supplémentaires du produit, elle apparaissent sur l’emplacement principal un peu plus grand. Puis lorsqu’on clic sur cette image principale plus grande que les vignettes, c’est là qu’intervient Lightbox2 et affiche l’image en plein écran avec le fond assombri. Sauf que pour le moment ça affiche en grand toujours la première et même image de base du produit.

Voici mon code :

Dans Layout*theme.liquid*, entre les balise et :

{{ "lightbox.css" | asset_url | stylesheet_tag }}

Avant la balise :

{{ "lightbox-plus-jquery.js" | asset_url | script_tag }}

Dans Sections*product-template.liquid* pour l’image featured :

<div id="{{ img_wrapper_id }}" class="product-single__photo-wrapper js">
          <div
          id="{{ zoom_img_id }}"
          style="padding-top:{{ 1 | divided_by: image.aspect_ratio | times: 100}}%;"
          class="product-single__photo{% if enable_zoom %} js-zoom-enabled{% endif %}{% if product.images.size > 1 %} product-single__photo--has-thumbnails{% endif %}{% unless featured_image == image %} hide{% endunless %}"
          data-image-id="{{ image.id }}"
          {% if enable_zoom %} data-zoom="{{ image | img_url: product_image_zoom_size, scale: product_image_scale }}"{% endif %}>

          <!-- START ZOOM PHOTO MAISON 1/2 -->
          <a href="{{ featured_image | img_url: 'master'}}" data-lightbox="gallery">
            <img id="{{ img_id }}"
                 class="feature-row__image {{ img_class }} lazyload{% unless featured_image == image %} lazypreload{% endunless %}"
                 src="{{ image | img_url: '300x300' }}"
                 data-src="{{ img_url }}"
                 data-widths="[180, 360, 540, 720, 900, 1080, 1296, 1512, 1728, 2048]"
                 data-aspectratio="{{ image.aspect_ratio }}"
                 data-sizes="auto"
                 tabindex="-1"
                 alt="{{ image.alt | escape }}">
          </a>
          <!-- END ZOOM PHOTO MAISON 1/2-->
          </div>
        </div>

Pour les images thumbnails :

<div class="thumbnails-wrapper{% if enable_thumbnail_slides == true %} thumbnails-slider--active{% endif %}">
          {% if enable_thumbnail_slides == true %}
            <button type="button" class="btn btn--link medium-up--hide thumbnails-slider__btn thumbnails-slider__prev thumbnails-slider__prev--{{ section.id }}">
              {% include 'icon-chevron-left' %}
              <span class="icon__fallback-text">{{ 'sections.slideshow.previous_slide' | t }}</span>
            </button>
          {% endif %}
          <ul class="grid grid--uniform product-single__thumbnails product-single__thumbnails-{{ section.id }}">
            {% for image in product.images %}
              <li class="grid__item {{ product_thumbnail_width }} product-single__thumbnails-item js">
                <!-- START ZOOM PHOTO MAISON 2/2 -->
                <a href="{{ image.src | img_url: 'master'}}" data-lightbox="gallery"></a>
                <!-- END ZOOM PHOTO MAISON 2/2 -->
                <a href="{{ image.src | img_url: product_image_zoom_size, scale: product_image_scale }}"
                   class="text-link product-single__thumbnail product-single__thumbnail--{{ section.id }}"
                   data-thumbnail-id="{{ image.id }}"
                   {% if enable_zoom %}data-zoom="{{ image.src | img_url: product_image_zoom_size, scale: product_image_scale }}"{% endif %}>
                     <img class="product-single__thumbnail-image" src="{{ image.src | img_url: '110x110', scale: 2 }}" alt="{{ 'sections.featured_product.gallery_thumbnail_alt' | t: imageAlt: image.alt | escape }}">
                </a>
              </li>
            {% endfor %}
          </ul>
          {% if enable_thumbnail_slides == true %}
            <button type="button" class="btn btn--link medium-up--hide thumbnails-slider__btn thumbnails-slider__next thumbnails-slider__next--{{ section.id }}">
              {% include 'icon-chevron-right' %}
              <span class="icon__fallback-text">{{ 'sections.slideshow.next_slide' | t }}</span>
            </button>
          {% endif %}
        </div>

Si vous avez une idée du code manquant pour régler ce problème, je suis très volontier preneur.
Merci d’avance.

Loïc

2

A force de chercher, la doc de la Lightbox Fancybox fait mention de la fonction timber.productImageSwitch dans le fichier shop.js à modifier pour ce style de problème si je ne me trompe pas. Hors je n’ai pas de fichier shop.js dans mon Shopify (thème Debut), et impossible de trouver cette fonction Timber dans un autre fichier. J’ai fais la recherche dans une grande partie des fichier Shopify.

Voici ce que dis le point n°5 de la doc de Fancybox :

One of the last things we need to think about is the fact the “featured image”, the largest image at the top, is going to change everytime a visitor click a thumbnail image. Therefore, we need to update the tag around the featured image everytime the featured image changes.

Go to your shop.js file and find the timber.productImageSwitch function. This should be on line 253 if you haven’t done any code changes to this file before. You are going to add some code right before the “on click” event ends. You can replace the whole productImageSwitch function with the following:

timber.productImageSwitch = function () {
  if ( timber.cache.$thumbImages.length ) {
    // Switch the main image with one of the thumbnails
    // Note: this does not change the variant selected, just the image
    timber.cache.$thumbImages.on('click', function(evt) {
      evt.preventDefault();
      var newImage = $(this).attr('href');
      timber.switchImage(newImage, null, timber.cache.$productImage);

      //New link for Fancy image
      var $fancyImage = $('#fancy_image');
      if ($fancyImage) {
        var fancyLink = newImage.replace('_large.', '.');
        $fancyImage.attr('href', fancyLink);
      }
    });
  }
};

Merci d’avance pour votre aide.

Loïc