Magento 2 自带模态的应用

 

Modal widget in Magento 2

Magento 2 自带模态的应用

使用magento 2 的自带模态组件，以下代码只供参考使用。

1，DOM 》模态块与触发元素

.pthml

?

<!-- 模态DOM -->

    <div id="modal-content" hidden="hidden" data-goodsid="">

 

        <?php if ($block->isLogin()): ?>

            <!--        fixme view data-->

            <!--        Add list CSS @var todo $mcsize_list Mc_Size::css/account/mcsize_list.css -->

            <link rel="stylesheet" href="<?php echo $this->getViewFileUrl('Mc_Size::css/account/mcsize_list.css'); ?>">

 

            <!--        Add list DOM-->

            <div id="account-mcsize-lists">

                <span class="base page-title">Select size</span>

                <hr>

                <div>

                    <span class="btn-xs cursor" id="tape">Tape </span>

                    <span> | </span>

                    <span class="btn-xs cursor" id="shirt">Shirt </span>

                </div>

                <br>

                <!--                fixme tape-->

                <div id="class_tape" class="measurement-profiles">

 

                    <?php $list_data = $block->getTapeList(); ?>

                    <?php foreach ($list_data as $news) { ?>

                        <div class="measurement-profile c-24 c-m-24" data-id="<?php echo $news['tape_id'] ?>"  data-type="tape">

                            <div>

                                <div class="icon">

                                    <!--fixme img icon-->

                                    <!--fixme edit-->

 

                                    <img src="<?php echo $this->getViewFileUrl('Mc_Size::images/tape-measure.svg'); ?>"

                                         alt="">

 

                                </div>

                                <div class="summary">

                                    <span class="name"><?php echo $news['name']; ?></span><br>

                                    <span class="type">Body measurements - <?php echo $news['created_at']; ?></span>

                                </div>

 

                                <div class="actions">

                                    <a class="primaryButton mini"

                                       href="/mcsize/index/tape?id=<?php echo $news['tape_id'] ?>">Edit</a>

                                </div>

                            </div>

                        </div>

                    <?php } ?>

                </div>

                <!--                end-->

 

            </div>

        <?php else: ?>

            <!--        fixme view message-->

            <div class="col-md-12">Go to <a href="/customer/account/login" class="">Login</a> now !</div>

        <?php endif ?>

    </div>

 

<!-- 触发元素-->

  <div id="__modal-button-<?php echo $_item->getId(); ?>" style="cursor: pointer;" data-mage-init='{"example-modal": {"target": "#modal-content"}}' class="btn-xs btn-primary"> Binding size</div>

　　

2，配置模块名》目录自动加载

/app/code/vendor_name/module_name/view/frontend/requirejs-config.js

var config = {
    map: {
        '*': {
            'example-modal': '<vendor_name>_<module_name>/js/example-modal'
        }
    }
};

 

3，调用模态》用于触发的 js 代码

example-modal.js ——  注意：ExampleModal 对象对模块绑定函数

define([
        "jquery", "Magento_Ui/js/modal/modal", 'Mc_Size/plugins/sweetalert.min'
    ], function ($) {


        var p = "#account-mcsize-lists";
        var f = ".measurement-profile";
        var ac = 'active';

        $(p).find(f).on('click', clickSize);

        function clickSize(e) {
            e.stopPropagation();
            var me = $(this);
            me.addClass(ac);

            me.siblings().removeClass('active');
        }

        /**
         *
         * @param name
         * @returns {*|jQuery.fn.init|n.fn.init|m.fn.init|jQuery|HTMLElement}
         */
        function getobj(name) {
            return $(name);
        }

        $('#tape').on('click', function () {//todo click tape

            var s = '#class_shirt';
            var t = '#class_tape';
            var t_html = $(t).clone(true);
            var s_html = $(s).clone(true);

            $(t).remove();
            $(s).remove();

            $(p).append(t_html);
            $('#shirt_dom').append(s_html);
        });

        $('#shirt').on('click', function () {//todo click shirt

            var s = '#class_shirt';
            var t = '#class_tape';
            var t_html = $(t).clone(true);
            var s_html = $(s).clone(true);

            $(t).remove();
            $(s).remove();

            $('#shirt_dom').append(t_html);
            $(p).append(s_html);

            $(p).find(f).on('click', clickSize);
        });

        // fixme modal
        var ExampleModal = {
            initModal: function (config, element) {
                $target = $(config.target);
                $element = $(element);
                $target.modal({
                    closed: function () {
                        // Do some action when modal closed
                        var tape_id = $(p).find('.active').data('id');
                        var type = $(p).find('.active').data('type');
                        if (!tape_id) {
                            $target.modal('openModal');//open modal
                            return;
                        }

                        var active = '#cart-' + ac;
                        $(active).attr({'data-id': tape_id,'data-type':type}).text('Already bound').addClass('btn-danger');
                        $(p).find(f).removeClass(ac);
                        $(active).attr('id', '');//remove id
                    }
                });

                $element.click(function () {
                    var dataid = $(this).attr('data-id');
                    var datatype = $(this).attr('data-type');

                    $(this).attr('id', 'cart-' + ac);//add id

                    //data-type is shirt
                    if(datatype === 'shirt'){
                        $('#shirt').trigger('click');//event trigger
                    }else if(datatype === 'tape'){
                        $('#tape').trigger('click');//event trigger
                    }

                    if (dataid) {
                        $(p).find('div[data-id=' + dataid + ']').addClass(ac);
                    }else{
                        // ..
                    }

                    $target.modal('openModal');//open modal

                });

            }
        };
        return {
            'example-modal': ExampleModal.initModal
        };
    }
);

 

 

@其它——直接在页面使用

+ View Code?

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17

<script>     require(         ["jquery", "Magento_Ui/js/modal/modal", 'Mc_Size/plugins/sweetalert.min']         , function ($,modal,swal) {               var options = {                 'type': 'popup',                 'title': 'Select Gender',                 'responsive': true,                 'innerScroll': true,             };                             var popup = modal(options, $('#modal-content'));             $('#modal-content').modal('openModal');//open modal         }) </script>