質問: wp eコマース - 製品バリエーションごとに製品イメージを変更する方法 ユーザーが異なるバリエーションを選択したときに画像の機能が変わるようにしたいです。つまり、tシャツを販売していて、2つのバリエーション(赤と白)を作成したとします。ユーザーが色を選択したときの画像をメインの商品画像ボックスにしたいです。赤の「カラー」バリエーションが選択されている場合は、赤のシャツの画像が表示されます。バックエンドには、バリエーションごとに製品のサムネイルを追加するための領域がありますが、フロントエンドの製品イメージに対する変更とは対応していません。
回答: 私はこれが遅すぎないことを願っています..私はまた、これを少し前に探していて、インターネット上で次のことを発見しました。私はゴールドカートオプションを購入しましたが、これが機能するための前提条件であるかどうかわかりません。テーマヘッダファイルに、以下を追加します。 <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-pageをあなたのテーマにコピーすることを選択します。ファイルを編集して、バリエーションごとに画像を作成する次のコードブロックを追加します。 <?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 */ ?> それはそれであるべきです - 写真は在庫によって制御されていないのでそれを探してそれはそれを追加するのに十分に簡単なはずです。