我想有功能的图像改变时,用户选择不同的变化。
也就是说,如果我在销售一件T恤,并制作了两种变体(红色和白色)。我想在用户选择颜色时,将主产品图像框中的图像。选择红色“颜色”变化时,应显示红色衬衫图像。在后端,有一个区域可以为每个变体添加产品缩略图,但与前端产品图像的任何更改都不对应。
我想有功能的图像改变时,用户选择不同的变化。
也就是说,如果我在销售一件T恤,并制作了两种变体(红色和白色)。我想在用户选择颜色时,将主产品图像框中的图像。选择红色“颜色”变化时,应显示红色衬衫图像。在后端,有一个区域可以为每个变体添加产品缩略图,但与前端产品图像的任何更改都不对应。
我希望这不会太晚。。
我也在网上找了一下,发现了以下内容,不记得在哪里。。。
我已经购买了gold cart选项,但我不确定这是否是这项工作的先决条件。。
在主题头文件中,添加以下内容:
<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 I更新了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单产品页面中,但为了完整性,它将为您提供select下拉列表。。 <?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 beta)配合良好。
注意:要设置变体图片,请编辑主产品,一旦您通过检查变体/集合并点击更新按钮使其可用,您将看到下面列出的每个变体,以及编辑每个变体的链接。我花了一段时间才弄明白,对于变体图像,仅仅通过单击“管理产品图像”来选择图像是不够的,但您必须去那里选择您的图像(如果已经在媒体库中,请单击图像旁边的“显示”),然后您必须单击“用作产品缩略图”链接,保存,保存所有更改,然后点击“发布”,这将使您返回到主产品编辑屏幕。
一个痛苦是你必须为每一个变化的组合这样做。例如,在有尺寸和颜色的t恤网站上,必须为每个尺寸变化(S蓝、M蓝、L蓝、XL蓝等)添加每个颜色变化图片,但所有这些都是非常方便的解决方案