it-swarm-ja.com

WP eコマース - 製品バリエーションごとに製品イメージを変更する方法

ユーザーが異なるバリエーションを選択したときに画像の機能が変わるようにしたいです。

つまり、Tシャツを販売していて、2つのバリエーション(赤と白)を作成したとします。ユーザーが色を選択したときの画像をメインの商品画像ボックスにしたいです。赤の「カラー」バリエーションが選択されている場合は、赤のシャツの画像が表示されます。バックエンドには、バリエーションごとに製品のサムネイルを追加するための領域がありますが、フロントエンドの製品イメージに対する変更とは対応していません。

2
Richard

私はこれが遅すぎないことを願っています..

私はまた、これを少し前に探していて、インターネット上で次のことを発見しました。

私はゴールドカートオプションを購入しましたが、これが機能するための前提条件であるかどうかわかりません。

テーマヘッダファイルに、以下を追加します。

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

それはそれであるべきです - 写真は在庫によって制御されていないのでそれを探してそれはそれを追加するのに十分に簡単なはずです。

5
richardw

提案された解決策を実行することができませんでした(おそらく最新のものでは動作しません)。

SP WPEC Variation Image Swap というプラグインがあります。 WP E Commerce 3.8.7.6.2(ただし3.8.8 Betaでは不可)でうまく機能します。

注:バリエーションの写真を設定するには、メインの製品を編集し、バリエーション/セットをチェックして更新ボタンをクリックして使用可能にすると、各バリエーションがEDITへのリンクとともに表示されます。ちょっと時間がかかったのは、バリエーション画像の場合は、[商品画像の管理]をクリックして画像を選択するだけでは不十分だということです。画像が既にメディアライブラリにある場合は、[製品のサムネイルとして使用]リンクをクリックして保存し、すべての変更を保存して[公開]をクリックすると、メインの製品編集画面に戻ります。

一つの苦痛はあなたがバリエーションのあらゆる組み合わせに対してこれをしなければならないということです。たとえば、サイズと色が設定されたTシャツのサイトでは、各カラーバリエーションの写真をすべてのサイズバリエーション(Sブルー、Mブルー、Lブルー、XLブルーなど)ごとに追加する必要があります。便利な解決策

2
Interstice