WP ecommerce – Как изменить образ продукта для каждого варианта продукта?

Я хотел бы иметь функциональность для изменения изображения, когда пользователь выбирает другое изменение.

т. е. если я продаю футболку и создаю два варианта (красный и белый). Я хотел бы, чтобы в главном окне изображения продукта отображалось изображение, когда пользователь выбирает цвет. Изображение красной рубашки должно отображаться при выборе красного цвета «Цвет». На бэкэнде есть область для добавления миниатюр продукта для каждого варианта, но это не соответствует каким-либо изменениям изображения продукта на интерфейсе.

Solutions Collecting From Web of "WP ecommerce – Как изменить образ продукта для каждого варианта продукта?"

Надеюсь, это не слишком поздно ..

Я тоже искал это немного назад и нашел следующее в Интернете, не могу вспомнить, где …

Я купил опцию золотой корзины, но я не уверен, что для нее это необходимо.

в файле заголовка темы добавьте следующее:

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

затем на экране store-> presentation выберите копию страницы wpsc-single-product на вашу тему. Отредактируйте файл и добавьте следующий блок кода, который должен дать изображение для каждого варианта:

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

Наконец, внизу wp-content / plugins / wp-e-commerce / wpsc-core / js / wp-e-commerce.js я обновил JQuery, чтобы он отображал полный рисунок на главном изображении продукта.

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

Я думаю, что это уже на странице wpsc-single-product-page, но для полноты она даст вам раскрывающийся список.

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

Это должно быть так – фотографии не контролируются запасом, поэтому обратите внимание на то, что это должно быть достаточно легко добавить.

Мне не удалось заставить предлагаемое решение работать (возможно, оно не работает с последним).

Существует плагин под названием SP WPEC Variation Image Swap . Он хорошо работает с WP E Commerce 3.8.7.6.2 (но не 3.8.8 бета).

Примечание: чтобы установить изменения, отредактируйте основной продукт, и как только вы сделаете изменения / настройки доступными, проверив их и нажав кнопку обновления, вы увидите все варианты, перечисленные ниже, со ссылкой для ИЗМЕНЕНИЯ каждого варианта. Часть, которая потребовала времени, чтобы понять, что для изображения вариации недостаточно просто выбрать изображение, щелкнув «управлять изображениями продукта», но вы должны пойти туда, чтобы выбрать свое изображение (нажмите «показать» рядом с образ, если он уже находится в медиа-библиотеке), ТОГДА вы должны нажать ссылку «использовать как миниатюру продукта», сохранить, сохранить все изменения и нажать «публикация», которая вернет вас на экран EDIT основного продукта.

Одна боль заключается в том, что вы должны делать это для каждой комбинации вариантов. Например, на сайте футболки с размерами и цветами каждый параметр изменения цвета должен быть добавлен для каждого изменения размера (синий, синий, синий, синий, синий и т. Д. И т. Д.), Но все в целом очень удобное решение