• 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
            };
        }
    );

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

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

      

  • 相关阅读:
    31款简单实用的CSS+JS下拉菜单脚本
    POWERDESIGNER 15 反向生成PDM[转]
    WCF异常信息
    下载文件
    分区表的维护 ORA14402 更新分区关键字列
    [转]Winform框架之字典数据管理
    用例图(User Case)
    datetime的时值
    JS date对象的减法处理
    JS获取当前页面的高度
  • 原文地址:https://www.cnblogs.com/q1104460935/p/10594664.html
Copyright © 2020-2023  润新知