Question

之前我曾问过related question，但我仍有问题。

我正在构建一个PrestaShop模块。 PS版本1.6.10，我想使用jQuery UI Menu和Dialog。

TLDR： 我的代码在前台工作正常。但不是在后台。根据我包含的jQueryUI模块数量，我会得到不同的错误。如果我以没有错误的方式包含它，我的菜单就不会做他们应该做的事情。 Dialog工作正常，但Menu没有（部分有效，见图片）。

我显示的内容已经完全移动到一个单独的文件中，因此我们在前台和后台看到的html代码是相同的，因为它们都引用了同一个文件。由于前台工作得很好，错误不应该在我的代码中。

但是，我无法在后台工作，这是我尝试的所有内容：

1.）不包括任何Jquery模块 [导致控制台出错，无效]

现在我在控制台中收到错误：

未捕获的TypeError：$（...）。对话框不是函数

未捕获的TypeError：$（...）。菜单不是函数

2.）包括Google的所有Jquery模块 [导致控制台出错，无效]

这就是我在前台工作的方法。我将google托管的jquery UI库添加到hookHeader。对于后台办公室，我在hookBackOfficeHeader中粘贴了相同的代码。

$this->context->controller->addCSS('https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/themes/smoothness/jquery-ui.css');
$this->context->controller->addJS('https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js');

但是我得到了这些错误：

3.）包括Pretashop的所有Jquery模块 [导致控制台出错，无效]

接下来，我尝试使用以下代码包含prestashop附带的所有jQuery UI库：

    $all_plugins = scandir ( dirname(dirname(dirname(__FILE__))).'/js/jquery/ui' );
    foreach($all_plugins as $file)
    {
        if( substr( $file, 0, 10 ) === "jquery.ui.")
        {
            $comp =  explode('.',$file);
            $this->context->controller->addJqueryUI('ui.'.$comp[2]);
        }
    }

这个脚本执行得很好，但现在我收到了这些错误：

4.。）包括PS，但跳过效果库 [导致无错误，但用户界面仍然无法正常工作]

    $all_plugins = scandir ( dirname(dirname(dirname(__FILE__))).'/js/jquery/ui' );
    foreach($all_plugins as $file)
    {
        if( substr( $file, 0, 10 ) === "jquery.ui." 
        && substr( $file, 0, 17 ) !== "jquery.ui.effect-" )
        {
            $comp =  explode('.',$file);
            $this->context->controller->addJqueryUI('ui.'.$comp[2]);
        }
    }

最后，我没有错误！但现在Menu不起作用。我的意思是它在元素的样式方面起作用，并且它正确地隐藏了子菜单。但当我将鼠标悬停在菜单上时，没有任何反应，侧面的小箭头也消失了......就像在最顶层的图片一样。

5。）仅包括那些绝对需要的Jquery模块 [导致无错误，但用户界面仍然无法正常工作]

    $this->context->controller->addJqueryUI('ui.dialog');
    $this->context->controller->addJqueryUI('ui.menu');

如果我这样做，我会得到相同的结果：控制台中没有更多错误，但悬停效果不起作用（如上图所示）。

为什么会发生这种情况，我该如何解决？

根据要求，这是我的其余代码：

模块/ MyModule的/控制器/管理/ AdminMyMenuController.php

class AdminMyMenuControllerextends ModuleAdminController {

            public function display()
            {

                $this->context->smarty->assign(array(

                        'mymenu_html_code' => $this->getMenuHtmlCode(),

                    ));
                parent::display();
            }


            public function getMenuHtmlCode($vars)
            {
                return
                    '<ul>

                        <li>
                        <div><small>'.$var0.'</small></div>
                            <ul>
                                <li class="ui-widget-header">Test Menu:</li>
                                <li class="ui-state-disabled"><div><b>'.$var1.'</b></div></li>
                                <li class="ui-state-disabled">'.$var2.'</li>
                                <li class="ui-state-disabled">'.$var3.'</li>
                                <li><div>
                                '.$var4.'
                                <i class="icon-pencil"></i> edit</div></li>

                                <li><div><i class="icon-trash"></i> delete</div>
                                    <ul>
                                        <li class="ui-state-disabled">Sure?</li>
                                        <li>
                                            <form method="POST">
                                                <input type="hidden" name="id_menu" value="'.$id.'">
                                                <input type="hidden" name="delete" value="delete">
                                                <div id="delete_menu" onclick="$(this).parent().submit();"><i class="icon-check"></i> Yes!</div>
                                            </form>
                                        </li>
                                    </ul>
                                </li>
                            </ul>
                        </li>
                    </ul>'; 
            }

模块/ MyModule的/ JS / back.js

$(document).ready(function(){
    $( "td.mymenu ul" ).menu();
});

Answer 1

只使用必需的组件（＃5），您也可能不希望在每个后台页面上加载组件，而只在控制器中加载组件，因此将代码从// Add a second password field to the checkout page in WC 3.x. add_filter( 'woocommerce_checkout_fields', 'wc_add_confirm_password_checkout', 10, 1 ); function wc_add_confirm_password_checkout( $checkout_fields ) { if ( get_option( 'woocommerce_registration_generate_password' ) == 'no' ) { $checkout_fields['account']['account_password2'] = array( 'type' => 'password', 'label' => __( 'Confirm password', 'woocommerce' ), 'required' => true, 'placeholder' => _x( 'Confirm Password', 'placeholder', 'woocommerce' ) ); } return $checkout_fields; } // Check the password and confirm password fields match before allow checkout to proceed. add_action( 'woocommerce_after_checkout_validation', 'wc_check_confirm_password_matches_checkout', 10, 2 ); function wc_check_confirm_password_matches_checkout( $posted ) { $checkout = WC()->checkout; if ( ! is_user_logged_in() && ( $checkout->must_create_account || ! empty( $posted['createaccount'] ) ) ) { if ( strcmp( $posted['account_password'], $posted['account_password2'] ) !== 0 ) { wc_add_notice( __( 'Passwords do not match.', 'woocommerce' ), 'error' ); } } }挂钩移动到控制器＆＃ 39; s displayBackOfficeHeader方法。

setMedia()

您必须在public function setMedia() { parent::setMedia(); $this->addJqueryUI('ui.dialog'); $this->addJqueryUI('ui.menu'); }菜单项上使用ui-menu-item课程才能使悬停正常工作。

<li>

我还要说，你在Prestashop有MVC是有原因的。不要在控制器或模型中生成HTML。你有模板是有原因的。

Answer 2

jQuery UI库已经包含在PrestaShop前端和后台中。您可以在PrestaShop安装中的以下路径中检查文件：

/ JS / jquery的/ UI

您可以检查页面的来源，可能已经包含了要添加的文件。如果它们不在那里，那么你可以包括它们。

jQuery UI菜单在PrestaShop后台无效

2 个答案: