web-dev-qa-db-fra.com

WP ecommerce - Comment puis-je changer l'image du produit pour chaque variation de produit?

J'aimerais que la fonctionnalité de l'image change lorsque l'utilisateur sélectionne une variante différente.

c'est-à-dire, si je vends un t-shirt et que je crée deux variations (rouge et blanc). Je voudrais pour la zone d'image du produit principal à l'image lorsque l'utilisateur sélectionne une couleur. L'image de la chemise rouge doit être affichée lorsque la variation "Couleur" rouge est sélectionnée. Sur le backend, il y a une zone pour ajouter des vignettes de produits pour chaque variante, mais cela ne correspond à aucun changement de l'image du produit sur le front-end.

plugin-wp-e-commerce
2
Richard

J'espère que ce n'est pas trop tard ..

Je cherchais aussi cela un peu en arrière et j'ai trouvé ce qui suit sur Internet, je ne me souviens plus où ...

J'ai acheté l'option Gold Cart, mais je ne sais pas si c'est un préalable pour que cela fonctionne ..

dans votre fichier d'en-tête de thème, ajoutez les éléments suivants:

    <script type="text/javascript">
        jQuery(document).ready(function($){
            $('.wpsc_select_variation').change(function() {
                var pid = $(this).val();
                pimg = 'img.product_image_'+pid;
                $('img.product_image').attr("src",$(pimg).attr('src'));
            });


            $(".product_image_variation").bind("click", function() {
                $('img.product_image').attr("src",$(this).attr('src'));
                var className = $($(this)).attr('class');
                $('.wpsc_select_variation').val(className.substring((className.lastIndexOf('_')+1))).change();

            });
        });
    </script>

puis dans l'écran de présentation de la boutique, choisissez de copier la page wpsc-single-product-product sur votre thème. Editez le fichier et ajoutez le bloc de code suivant qui devrait donner une image pour chaque variante:

      <?php /** My variation stuff */ ?>
      <div id="variation-colours">
        <?php if (wpsc_have_variation_groups()) { ?>
          <?php while (wpsc_have_variation_groups()) : wpsc_the_variation_group(); ?>
            <?php /** the variation HTML and loop */ ?>
            <?php $skipone = true; ?>
            <?php while (wpsc_have_variations()) : wpsc_the_variation(); ?>
              <?php
              $isox = get_term_by('id', wpsc_the_variation_id(), 'wpsc-variation');
              $slugslug = basename(get_permalink()) . '-' . $isox->slug;
              $isox->ID;
              $variation_subs = get_children(array(
                  'post_parent' => wpsc_the_product_id()
                      ));
              foreach ($variation_subs as $variationss) {
                if ($variationss->post_name == $slugslug) {
                  $attached_images = get_children(array(
                      'post_parent' => $variationss->ID,
                      'order' => 'ASC'
                          ));
                  foreach ($attached_images as $image) {
                    $image = array(
                        'URL' => $image->guid,
                        'title' => $image->post_title,
                    );
                  }
                }
              }
              ?>
              <?php if (!$skipone) { ?>
                                <img src="<?php echo $image['URL']; ?>" width="<?php echo get_option('product_image_width'); ?>" height="<?php echo get_option('product_image_height'); ?>" class="product_image_variation product_image_<?php echo wpsc_the_variation_id(); ?>" />

              <?php } $skipone = false; ?>
            <?php endwhile; ?>
          <?php endwhile; ?>
        <?php } ?>
  </div> <!--close My Variation-->

Enfin, au bas de wp-content/plugins/wp-e-commerce/wpsc-core/js/wp-e-commerce.js, j’ai mis à jour le JQuery afin qu’il affiche l’image complète sur l’image principale du produit.

<script type="text/javascript">
jQuery(document).ready(function(){
        jQuery('.attachment-gold-thumbnails').click(function(){
//              jQuery(this).parents('.imagecol:first').find('.product_image').attr('src', jQuery(this).parent().attr('rev'));
//              jQuery(this).parents('.imagecol:first').find('.product_image').parent('a:first').attr('href', jQuery(this).parent().attr('href'));
                jQuery('.imagecol:first').find('.product_image').attr('src', jQuery(this).parent().attr('href'));
                jQuery('.imagecol:first').find('.product_image').parent('a:first').attr('href', jQuery(this).parent().attr('href'));
                return false;
        });
});
</script>

Je pense que cela est déjà dans la page wpsc-single-product-page, mais pour être complet, cela vous donnera la liste déroulante choisie ..

  <?php /** the variation group HTML and loop */ ?>
  <?php if (wpsc_have_variation_groups()) { ?>
    <fieldset><legend><?php _e('Product Options', 'wpsc'); ?></legend>
      <div class="wpsc_variation_forms">
        <table>
          <?php while (wpsc_have_variation_groups()) : wpsc_the_variation_group(); ?>
            <tr><td class="col1"><label for="<?php echo wpsc_vargrp_form_id(); ?>"><?php echo wpsc_the_vargrp_name(); ?>:</label></td>
              <?php /** the variation HTML and loop */ ?>
              <td class="col2"><select class="wpsc_select_variation" name="variation[<?php echo wpsc_vargrp_id(); ?>]" id="<?php echo wpsc_vargrp_form_id(); ?>">
                  <?php while (wpsc_have_variations()) : wpsc_the_variation(); ?>
                    <option value="<?php echo wpsc_the_variation_id(); ?>" <?php echo wpsc_the_variation_out_of_stock(); ?>><?php echo wpsc_the_variation_name(); ?></option>
                  <?php endwhile; ?>
                </select></td></tr> 
          <?php endwhile; ?>
        </table>
      </div><!--close wpsc_variation_forms-->
    </fieldset>
  <?php } ?>
  <?php /** the variation group HTML and loop ends here */ ?>

Cela devrait être le cas - les images ne sont pas contrôlées par le stock, alors soyez vigilant. Cela devrait être assez facile à ajouter.

5
richardw

J'étais incapable de faire fonctionner la solution proposée (peut-être ne fonctionne-t-elle pas avec la dernière version).

Il existe un plugin appelé SP WPEC Variation Image Swap . Cela fonctionne bien avec WP E Commerce 3.8.7.6.2 (mais pas 3.8.8 beta).

Remarque: pour définir les variations des images, éditez le produit principal. Une fois que vous avez rendu les variations/ensembles disponibles en les cochant et en appuyant sur le bouton de mise à jour, vous verrez chacune des variantes énumérées ci-dessous, avec un lien pour les modifier. La partie qui m'a pris un certain temps à comprendre est que pour l'image de variation, il ne suffit pas de sélectionner simplement l'image en cliquant sur "gérer les images du produit", mais vous devez y aller pour choisir votre image (cliquez sur "afficher" à côté de la image si elle est déjà dans la médiathèque), ALORS vous devez cliquer sur le lien "Utiliser comme miniature du produit", enregistrer, enregistrer toutes les modifications et cliquer sur "Publier", ce qui vous ramènera à la page principale EDIT du produit.

Une douleur est que vous devez faire cela pour chaque combinaison de variations. Par exemple, sur un site de t-shirts avec des tailles et des couleurs différentes, chaque image de variation de couleur doit être ajoutée pour chaque variation de taille (S bleu, M bleu, L bleu, XL bleu, etc.). solution pratique

2
Interstice