Question

我将woocommerce购物车小工具添加到我的侧边栏，由于主题和woocommerce行为的一些定制，我将这行代码添加到我的主题functions.php：

remove_action( 'woocommerce_after_single_product_summary', 'woocommerce_output_related_products', 20 );

当此行处于活动状态时，不显示购物车内容，只显示小部件标题。当我注释掉这一行时，购物车中的商品会显示在单个商品页面和商店页面上。见标记：

<div id="secondary" class="widget-area" role="complementary">
        <aside id="woocommerce_widget_cart-12" class="widget woocommerce widget_shopping_cart">
            <h3 class="widget-title">Winkelmand</h3>
            <div class="widget_shopping_cart_content">
               <ul class="cart_list product_list_widget ">
                  <li>
                      <a href="http://localhost/?product=flying-ninja">
                         <img width="600" height="600" src="//localhost/wp-content/uploads/2013/06/poster_2_up-600x600.jpg" class="attachment-shop_thumbnail wp-post-image" alt="poster_2_up">Flying Ninja                      </a>
                         <span class="quantity">1 × <span class="amount">€12,00</span></span>                   
                  </li>
                  <li>
                      <a href="http://localhost/?product=patient-ninja">
                         <img width="600" height="600" src="//localhost/wp-content/uploads/2013/06/hoodie_3_front-600x600.jpg" class="attachment-shop_thumbnail wp-post-image" alt="hoodie_3_front">Patient Ninja                       </a>                    
                         <span class="quantity">1 × <span class="amount">€35,00</span></span>                       
                  </li>
                  <li>
                      <a href="http://localhost/?product=photo-3">
                          <img width="399" height="600" src="//localhost/wp-content/uploads/2014/12/DSC07870-399x600.jpg" class="attachment-shop_thumbnail wp-post-image" alt="SONY DSC">Photo 3                        </a>
                          <span class="quantity">1 × <span class="amount">€15,00</span></span>                  
                  </li>
               </ul><!-- end product list -->

<p class="total"><strong>Subtotaal:</strong> <span class="amount">€62,00</span></p>

<p class="buttons">
    <a href="http://localhost/?page_id=334" class="button wc-forward">Winkelmand bekijken</a>
    <a href="http://localhost/?page_id=335" class="button checkout wc-forward">Afrekenen</a>
</p>

</div>
</aside>
</div>

正如您所见，所有的WI产品都会显示，并且按钮也会出现。但是，它们并未显示在所有其他页面上。在这些页面上只显示小部件标题。在这些页面上，标记看起来像这样：

<div id="secondary" class="widget-area" role="complementary">
    <aside id="woocommerce_widget_cart-12" class="widget woocommerce widget_shopping_cart">
        <h3 class="widget-title">Winkelmand</h3>
            <div class="widget_shopping_cart_content">
            </div>
    </aside>        
</div>

我的问题是：为什么remove_action代码行会干扰购物车小部件的内容？为什么div class="widget_shopping_cart_content">在其他页面上为空，无论remove_action行是否被注释掉。

我发现它与我的自定义有关。当我使用标准的Twetwelve主题（在我的孩子主题构建时）它工作正常。

修改

当然，我正在寻找自己并能够进一步缩小范围。原因在于我的主题函数中的这个功能。但是我不知道它有什么问题以及我应该怎么做。

function twentytwelve_child_masonry() {
if (!is_admin()) {
    wp_enqueue_script('masonry');

    add_action('wp_footer', 'twentytwelve_child_add_masonry');      
    function twentytwelve_child_add_masonry() { ?>
        <script>
                    (function( $ ) {
                        "use strict";
                        $(function() {
                        //set the container that Masonry will be inside of in a var
                        var container = document.querySelector('.products');
                        //create empty var msnry
                        var msnry;
                        // initialize Masonry after all images have loaded
                        imagesLoaded( container, function() {
                            msnry = new Masonry( container, {
                                itemSelector: '.product',
                                isAnimated: true
                            });
                        });
                        });
                        }(jQuery));
        </script>
    <?php 
    }
}
}
add_action('init', 'twentytwelve_child_masonry');

我把头发拉了出来......我现在试着用一个星期来解决这个问题。请帮忙！？

编辑2

当我尝试调试项目时收到此消息：

TypeError: 'null' is not an object (evaluating 'a.length') (15:45:27:306 | error, javascript)
at f (http://localhost/wp-includes/js/masonry.min.js?ver=3.1.2:1:28901)
at g (http://localhost/wp-includes/js/masonry.min.js?ver=3.1.2:1:29105)
at g (http://localhost/wp-includes/js/masonry.min.js?ver=3.1.2:1:29031)
at (anonymous function) (http://localhost/?product=happy-ninja:262:40)
at j (http://localhost/wp-includes/js/jquery/jquery.js?ver=1.11.1:2:27248)
at fireWith (http://localhost/wp-includes/js/jquery/jquery.js?ver=1.11.1:2:28057)
at ready (http://localhost/wp-includes/js/jquery/jquery.js?ver=1.11.1:2:29901)
at J (http://localhost/wp-includes/js/jquery/jquery.js?ver=1.11.1:2:30261)
>

Answer 1

问题可能在于你的砌体功能而不是小部件本身。默认的WC购物车小部件仅为小部件创建一个空div;然后使用JS插入产品。您展示的Masonry JS很可能会导致某种错误，导致WC的JS无法正常工作。这就是为什么当你禁用你的脚本时，小部件工作正常。您需要检查控制台是否存在任何您正在查找的JS错误。

Woocommerce购物车小部件不显示任何内容

1 个答案: