web-dev-qa-db-fra.com

Faire des vignettes dans woocommerce remplace l'image principale au lieu d'ouvrir fancybox

Je souhaite que les vignettes situées sous l'image principale de la page de produit unique remplacent l'image principale lorsqu'elles sont cliquées ou en survol, je préfère le survol. Pour le moment, les vignettes s'ouvrent dans leur propre boîte fantaisie. Ceci est une fonctionnalité très courante sur la plupart des grands sites de commerce électronique et il est étrange que ce ne soit pas une option dans woocommerce. Toute aide est la bienvenue.

pluginsthumbnails
4
Sam

Je viens d'obtenir l'effet par moi-même. Je vais le poster ici au cas où d'autres trouveraient ce fil de discussion:

jQuery(document).on('click','.thumbnails .zoom', function(){
        var photo_fullsize =  jQuery(this).find('img').attr('src').replace('-100x132','');
        jQuery('.woocommerce-main-image img').attr('src', photo_fullsize);
        return false;
    });

.replace ('- 100x132') élimine la taille de l'URL de l'image pour renvoyer l'image complète et non la vignette. Remplacez-le par vos propres tailles de vignettes.

Ma solution est basée sur:

6
Gastón Labarthe

Solution JavaScript

Comme la réponse originale fonctionne déjà avec string, mais doit être modifiée pour chaque cas d'utilisation, voici une solution utilisant un fast Regex .test() encapsulé dans une fonction d'invocation automatique qui utilise la méthode par défaut pour empêcher événements (comme les liens suivants) de se produire.

Ce plugin supprimera la première occurrence de 2 à 4 chiffres séparés par un x et suivis par 2 à 4 autres chiffres. Quelques exemples

image-name-123x456.ext
image_name123x456.ext
imageName1230x45.ext
imageName12x4567.ext

Voici le plugin actuel. Il vous suffira de remplir un seul bit: le sélecteur actuel.

À faire: La seule chose à faire est de fournir votre sélecteur actuel (au lieu de .class-of-the-thumbnail-image) pour l'image. Le mieux serait de (a) renseigner une classe, puis d’ajouter un filtre à la vignette pour ajouter cette classe à chaque image que vous souhaitez cibler.

<?php
defined( 'ABSPATH' ) or exit;
/* Plugin Name: (#83993) Full image size */

add_action( 'wp_footer', 'wpse83993FullImageSize' );
function wpse83993FullImageSize()
{
    ?>
    <script type="text/javascript">
( function( $ ) {
    $( '.thumbnails .zoom' ).on( 'click', function( event ) {
        event.preventDefault();

        var $img = $( this ).find( 'img' ),
            $src = $img.attr( 'src' ),
            search = /^([-]?)([\d]{2,4})((\s*)(x)(\s*))([\d]{2,4})$/;

        // Regex .test() is fast, so we use it *before* we actually do something
        if ( search.test( $src ) ) {
            var $url = $src.replace( search, '' );
            $( '.class-of-the-thumbnail-image' ).attr( 'src', $url );
        }
    } );
} )( jQuery );
    </script>
    <?
}

Un point possible où votre plugin pourrait s’accrocher serait de combiner cela avec un filtre sur post_thumbnail_html. Ce filtre a quelques arguments: $html, $post_id, $post_thumbnail_id, $size, $attr que vous pouvez utiliser pour modifier le code HTML.

Un autre, peut-être même meilleur, serait le filtre wp_get_attachment_image_attributes- dans wp_get_attachment_image(), appelé par get_the_post_thumbnail(), lui-même encapsulé par the_post_thumbnail().

apply_filters( 'wp_get_attachment_image_attributes', $attr, $attachment );

Ajoutez simplement quelque chose comme ce qui suit au plugin ci-dessus:

add_filter( 'wp_get_attachment_image_attributes', 'wpse83993AddDefaultThumbnailClass', 20, 2 );
function wpse83993AddDefaultThumbnailClass( $atts, $attachment )
{
    $atts['class'] .= "class-of-the-thumbnail-image";
    return $atts;
}

Solution côté serveur: PHP

Il est beaucoup plus facile d’utiliser le filtre suivant, au cas où il correspond à votre cas d’utilisation.

apply_filters( 'post_thumbnail_size', $size );

Vous pouvez ajouter simplement appeler la taille complète pour chaque miniature de message et tout va bien. Réduisez ensuite la taille de l'image via CSS.

4
kaiser

Une fois que Wordpress a implémenté les images responsive dans Wordpress 4.4, ces autres scripts ont tendance à être bogués/ne fonctionnent pas à cause des attributs srcset ajoutés.

Voici l'extrait de code que j'utilise pour résoudre les problèmes liés à ceci:

$(document).on('click', '.thumbnails .zoom', function() {
    var photo_fullsize = $(this).find('img').attr('src').replace('-180x180','');
    var photo_srcset = $(this).find('img').attr('srcset').replace('-180x180','');
    $('.woocommerce-main-image img').attr('src', photo_fullsize);
    $('.woocommerce-main-image img').attr('srcset', photo_srcset);
    return false;
});
1
turtledropbomb

J'avais des problèmes pour utiliser l'exemple de la réponse acceptée, alors reformulez-le un peu, juste au cas où quelqu'un aurait besoin d'un exemple de travail, indépendant du remplacement de la taille de la vignette, qui désactive également l'action PrettyPhoto par défaut.

$(".thumbnails").find("a.zoom").unbind('click');
$('.thumbnails .zoom').on('click', function(e){
    console.log( $('.thumbnails .zoom') );
    var photo_fullsize =  $(this).attr('href');
    $('.woocommerce-main-image img').attr('src', photo_fullsize);
    $('a.woocommerce-main-image').attr('href', photo_fullsize);
    return false;
});
0
Jeppe

J'ai trouvé ceci http://www.magictoolbox.com/magiczoomplus/ et il gère ce dont j'avais besoin. Je viens de régler le zoom sur interne afin de ne pas ouvrir une fenêtre de zoom et il a survol vignette qui remplace l'image principale. Peut-être que cela pourrait aider quelqu'un avec un problème similaire.

0
Sam