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

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>

如您所见，所有产品都显示出来了，按钮也出现了。 但是，它们并未显示在所有其他页面上。在这些页面上，仅显示小部件标题。在这些页面上，标记如下所示：

<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">empty，不管remove_action行是否被注释掉。

我发现这与我的自定义有关。当我使用标准的二十二主题（我的子主题是构建的）时，它工作正常。

编辑

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

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

问题可能出在您的 Masonry 功能上，而不是小部件本身。默认的 WC 购物车小部件只为小部件创建一个空的 div；然后它使用 JS 插入产品。您展示的 Masonry JS 很可能会导致某种错误，从而阻止 WC 的 JS 工作。这就是为什么当您禁用脚本时，小部件可以正常工作。您需要检查您的控制台是否有任何您发现的 JS 错误并更正它们。