WP ecommerce - ¿Cómo cambio la imagen del producto para cada variación de producto?

2

Me gustaría tener la funcionalidad para que la imagen cambie cuando el usuario selecciona una variación diferente.

es decir, si estoy vendiendo una camiseta y he creado dos variaciones (rojo y blanco). Me gustaría para el cuadro principal de la imagen del producto a la imagen cuando el usuario selecciona un color. La imagen de la camisa roja debe mostrarse cuando se selecciona la variación de "Color" rojo. En el backend hay un área para agregar miniaturas de productos para cada variación, pero eso no corresponde con ningún cambio en la imagen del producto en la interfaz.

    
pregunta Richard 23.08.2011 - 21:03

2 respuestas

5

Espero que esto no sea demasiado tarde ...

También estaba buscando esto un poco atrás y encontré lo siguiente en internet, no recuerdo dónde ...

He comprado la opción de carrito de oro, pero no estoy seguro de que sea un requisito previo para que esto funcione.

en su archivo de encabezado de tema, agregue lo siguiente:

    <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>

luego, en la pantalla de presentación de la tienda > elige copiar la página de producto único de wpsc a tu tema. Edite el archivo y agregue el siguiente bloque de código que debe proporcionar una imagen para cada variación:

      <?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-->  

Finalmente, en la parte inferior de wp-content / plugins / wp-e-commerce / wpsc-core / js / wp-e-commerce.js actualicé JQuery para que se mostrara la imagen completa en la imagen principal del producto.

<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>

Creo que esto ya está en la página wpsc-single-product page, pero para completar, te dará la lista desplegable de selección ..

  <?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 */ ?>

Eso debería ser, las imágenes no están siendo controladas por el inventario, así que ten cuidado, debería ser lo suficientemente fácil como para agregarlas.

    
respondido por el richardw 17.01.2012 - 22:54
2

No pude hacer que la solución propuesta funcionara (tal vez no funciona con la última).

Hay un complemento llamado SP WPEC Variation Image Swap . Funciona bien con WP E Commerce 3.8.7.6.2 (pero no con 3.8.8 beta).

Nota: para configurar las imágenes de variación, edite el producto principal y, una vez que haya disponible las variaciones / conjuntos al marcarlas y presionar el botón de actualización, verá cada variación enumerada a continuación, con un enlace para EDITAR cada variación. La parte que me tomó un tiempo para darme cuenta es que para la imagen de variación no es suficiente simplemente seleccionar la imagen haciendo clic en 'administrar imágenes del producto', pero debe ir allí para elegir su imagen (haga clic en 'mostrar' al lado de Si ya está en la biblioteca de medios), ENTONCES debe hacer clic en el enlace 'usar como miniatura del producto', guardar, guardar todos los cambios y presionar 'publicar', que lo llevará de vuelta a la pantalla principal EDITAR del producto.

Un dolor es que tienes que hacer esto para cada combinación de variaciones. Por ejemplo, en un sitio de camisetas con tamaños y colores, se debe agregar cada imagen de variación de color para cada variación de tamaño (azul S, M azul, L azul, XL azul, etc.), pero en general es muy solución práctica

    
respondido por el Interstice 12.04.2012 - 16:57

Lea otras preguntas en las etiquetas