首页 文章

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

提问于
浏览
0

我将woocommerce Cart Widget添加到我的侧边栏,由于主题和woocommerce行为的一些自定义,我将这行代码添加到我的主题functions.php:

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

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

<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产品都会显示出来,并且按钮也会出现 . 但是,它们并未显示在所有其他页面上 . 在这些页面上只显示小部件 Headers . 在这些页面上,标记看起来像这样:

<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主题(在我的孩子主题构建时)它工作正常 .

EDIT

当然,我正在寻找自己,并能够进一步缩小范围 . 原因是在我的主题的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');

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

EDIT 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)
>

1 回答

  • 1

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

相关问题