时间戳

首页 > 解决方案 > Wordpress Woocommerce：单一产品页面的变体库

wordpress - Wordpress Woocommerce：单一产品页面的变体库

问题描述

我需要的是当我单击与之关联的图像时，在所选产品上更改变化。与显示的图像相同的方式从下拉菜单更改单击变化（反之亦然）。我花了几天时间寻找解决方案，这一定很简单。写一些代码可以解决吗？我不想要像样本这样的插件。我不是天生会说英语的人，所以希望它是可以理解的。感谢您提供任何帮助。

在这里： http: //obrazyzedreva.cekuj.net/produkt/svata-rodina/

Wordpress、Woocommerce、自定义模板

标签： wordpresswoocommerce

解决方案

这就是我解决它的方法：

product-image.php 的一部分

<div>
    <div>
        <?php 
        if( $product->is_type( 'variable' ) ){
            ?>
            <div>
            <div>
                <strong>Vyberte si variantu:</strong>
            </div>
                <?php 
                $variations = $product->get_available_variations();
                foreach ( $variations as $variation ) {                 
                    echo '<div style="display:inline-block">';
                        echo '<img class="selector_'. $variation['variation_id'] .'" width="80" height="80" src=' . $variation['image']['url'] . ' style="margin-right:7px;">';                 
                    echo '</div>';
                }
                ?>  
            </div>
            <script type="text/javascript"> 
                jQuery(function($){
                    <?php foreach ( $variations as $variation ) {
                        foreach($variation['attributes'] as $attributes) {
                            ?>                  
                            $('.selector_<?php echo $variation['variation_id'] ?>').click(function(){
                                $('select[name="attribute_model-vyrobni-cislo"] option[value="<?php echo $attributes ?>"]').attr("selected","selected").trigger('change');
                            });
                        <?php
                        }
                    }
                    ?>
                });
            </script>
            <?php
        }
        ?>  
    </div>  
</div>

推荐阅读