маска телефона

[Rubik]

Здравствуйте, подскажите пж делаю маску для телефона установлен модуль покупки в 1 клик http://www.opencart.com/index.php?route=extension/extension/info&extension_id=26911&filter_search=buy%20in%201%20click&filter_license=0

 

1. Подключаю в header.tpl maskedinput.js <script src="catalog/view/theme/<?php echo $config->get( 'config_template' ); ?>/js/jquery.maskedinput.js"></script>

2. добавляю

<script>

jQuery(function($){
$("#input-telephone").mask("+38 (999) 999-99-99");
});

</script>

 

3. пробовал так $("#input-telephone").mask("+38(999) 999-99-99");

 

в footer добавлен скрипт 

<script>

    //$("#input-telephone").inputmask("+38 (999)999-99-99");

    //$("#input-telephone").mask("+38(999) 999-99-99");

    $(document).ready(function () {

        $('#button-oneclick').on('click', function () {

            $('.alert, .text-danger').remove();

 

            var tel_number = $("#input-telephone").val();

            var product_id = $('input[name=product_id]').val();

 

            var pattern = /^\+[1-9]{1}[0-9]{3,14}$/;

 

            if (pattern.test($("#input-telephone").val())) {

                $.ajax({

                    url: 'index.php?route=product/buyoneclick/oneclickadd',

                    type: 'post',

                    data: 'product_id=' + product_id + '&tel_number=' + tel_number,

                    dataType: 'json',

                    complete: function () {

                        $('#cart > button').button('reset');

                    },

                    success: function (json) {

                        if (json['redirect']) {

                            location = json['redirect'];

                        }

 

                        if (json['success']) {

                           $('.form-one-click-call').html('<label class="control-label" for="input-telephone">' + json['text_order_success'] + ' ' + json['code'] + '</label>');

                        }

                    },

                    error: function (xhr, ajaxOptions, thrownError) {

                        //console.log(xhr.status);

                        //console.log(thrownError);

                        $('#content').parent().before('<div class="alert alert-danger"><i class="fa fa-minus-circle"></i>'+ xhr.responseText +' <button type="button" class="close" data-dismiss="alert">×</button></div>');

}

                });

            }

            else {

                $('#content').parent().before('<div class="alert alert-danger"><i class="fa fa-minus-circle"></i> Телефонный номер неверен. Он должен состаять из цифр.<button type="button" class="close" data-dismiss="alert">×</button></div>');

            }

        });

 

    });

 

</script>

 

При клике на кнопку отправить нечего не происходит. Подскажите пж что не правильно? 

BuyOneClick.ocmod.zip

[SlideShow]

посмотрите, модуль "Купить в 1 клик", там маска есть, если упомню то тоже через meskedinput сделано тыц если не разберетесь, пишите сюда в ветку, попробую помочь

[Rubik]

я этот модуль видел но он не совсем подходит нужен такого вида

 

Модуль не работает:
ostore/opencart v1.4.x и ниже
ostore/opencart v2.x и выше

Змінено 26 серпня 2016 користувачем Rubik

[SlideShow]

вам для ostore v2.x?

[Rubik]

да для ocStore 2.1.0.2 такого вида

[SlideShow]

ну два варианта - можем поковырять имеющийся модуль, а можем сделать тот что я выше показывал, там в ветке есть адаптация под 2.x, а вывести не в модальное окно а сразу в шаблон не сложно

[ArtemPitov]

ловите 

https://habrahabr.ru/post/37249/ 

[Rubik]

ArtenPitov - читал эту статью но когда добавляю маску при клике на кнопку заказать нечего не происходит.

 

1. Подключаю в header.tpl maskedinput.js <script src="catalog/view/theme/<?php echo $config->get( 'config_template' ); ?>/js/jquery.maskedinput.js"></script>

2 . перед закрытием header добавлял 

<script type="text/javascript">

jQuery(function($){

   $("#input-telephone").mask("+38 (999)999-99-99");

});

</script>

 

3. в footer где добавлен скрипт добавляю 

<script>

    $("#input-telephone").mask("+38 (999)999-99-99");

    //$("#input-telephone").inputmask("+38 (999)999-99-99");

    $(document).ready(function () {

        $('#button-oneclick').on('click', function () {

            $('.alert, .text-danger').remove();

 

            var tel_number = $("#input-telephone").val();

            var product_id = $('input[name=product_id]').val();

 

            var pattern = /^\+[1-9]{1}[0-9]{3,14}$/;

 

            if (pattern.test($("#input-telephone").val())) {

                $.ajax({

                    url: 'index.php?route=product/buyoneclick/oneclickadd',

                    type: 'post',

                    data: 'product_id=' + product_id + '&tel_number=' + tel_number,

                    dataType: 'json',

                    complete: function () {

                        $('#cart > button').button('reset');

                    },

                    success: function (json) {

                        if (json['redirect']) {

                            location = json['redirect'];

                        }

 

                        if (json['success']) {

                           $('.form-one-click-call').html('<label class="control-label" for="input-telephone">' + json['text_order_success'] + ' ' + json['code'] + '</label>');

                        }

                    },

                    error: function (xhr, ajaxOptions, thrownError) {

                        //console.log(xhr.status);

                        //console.log(thrownError);

                        $('#content').parent().before('<div class="alert alert-danger"><i class="fa fa-minus-circle"></i>'+ xhr.responseText +' <button type="button" class="close" data-dismiss="alert">×</button></div>');

}

                });

            }

            else {

                $('#content').parent().before('<div class="alert alert-danger"><i class="fa fa-minus-circle"></i> Телефонный номер неверен. Он должен состаять из цифр.<button type="button" class="close" data-dismiss="alert">×</button></div>');

            }

        });

 

    });

 

</script>

 

$("#input-telephone").mask("+38 (999)999-99-99");

 

но при клике нечего не происходит.

[ArtemPitov]

пункт 2 лишний 

[Rubik]

пробовал и без пункта 2.

[Rubik]

footer

 

<?php 

if($this->registry->has('theme_options') == true) { 

$theme_options = $this->registry->get('theme_options');

$config = $this->registry->get('config');

require_once( DIR_TEMPLATE.$config->get('config_template')."/lib/module.php" );

$modules = new Modules($this->registry);

 

$language_id = $config->get( 'config_language_id' );

$customfooter = $theme_options->get( 'customfooter' );

if(!isset($customfooter[$language_id])) {

$customfooter[$language_id] = array(

'facebook_status' => 0,

'contact_status' => 0

);

}

 

 

$grids = 3; $columns = 0;  

if($customfooter[$language_id]['contact_status'] == '1') { $columns++; } 

if($theme_options->get( 'custom_footer1_status' ) == '1') { $columns++; }

if($theme_options->get( 'custom_footer2_status' ) == '1') { $columns++; }

if($columns == 1) { $grids = 25; }

if($columns == 2) { $grids = 2; }

 

 

?>

 

 

 

<!-- FOOTER

================================================== -->

<div class="footer full-width">

<div class="container">

<?php 

$footer_top = $modules->getModules('footer_top');

if( count($footer_top) ) { 

foreach ($footer_top as $module) {

echo $module;

}

} ?>

<div class="row">

 

<?php if($theme_options->get( 'custom_footer1_status' ) == 1) { ?>

<div class="col-sm-<?php echo $grids; ?> col-xs-6 footer-column">

<?php $lang_id = $config->get( 'config_language_id' ); ?>

<?php $custom_content = $theme_options->get( 'custom_footer1_content' ); ?>

<?php if(isset($custom_content[$lang_id])) echo html_entity_decode($custom_content[$lang_id]); ?>

</div>

<?php } ?>

 

<?php if($theme_options->get( 'custom_footer2_status' ) == 1) { ?>

<div class="col-sm-<?php echo $grids; ?> col-xs-6 footer-column">

<?php $lang_id = $config->get( 'config_language_id' ); ?>

<?php $custom_content = $theme_options->get( 'custom_footer2_content' ); ?>

<?php if(isset($custom_content[$lang_id])) echo html_entity_decode($custom_content[$lang_id]); ?>

</div>

<?php } ?>

 

 

 

<?php if($customfooter[$language_id]['contact_status'] == '1') { ?>

<!-- Contact -->

<div class="col-sm-<?php echo $grids; ?> col-xs-6 footer-column">

<?php if($customfooter[$language_id]['contact_title'] != '') { ?>

<h4><?php echo $customfooter[$language_id]['contact_title']; ?></h4>

<?php } ?>

<ul class="contact-us clearfix">

<?php if($customfooter[$language_id]['contact_phone'] != '' || $customfooter[$language_id]['contact_phone2'] != '') { ?>

<!-- Phone -->

<li>

<i class="fa fa-phone" style="font-size: 17px;"></i>

<p>

<?php if($customfooter[$language_id]['contact_phone'] != '') { ?>

<?php echo $customfooter[$language_id]['contact_phone']; ?><br>

<?php } ?>

 

</p>

 

 

<?php if($customfooter[$language_id]['contact_phone2'] != '') { ?>

<i class="fa fa-mobile"></i>

<p><?php echo $customfooter[$language_id]['contact_phone2']; ?></p>

<?php } ?>

</li>

<?php } ?>

<?php if($customfooter[$language_id]['contact_email'] != '') { ?>

<!-- Email -->

<li>

<i class="fa fa-envelope" style="font-size: 14px;"></i>

<p>

<?php if($customfooter[$language_id]['contact_email'] != '') { ?>

<span><?php echo $customfooter[$language_id]['contact_email']; ?></span><br>

<?php } ?>

</p>

</li>

<?php } ?>

<?php if($customfooter[$language_id]['contact_skype'] != '') { ?>

<!-- Skype -->

<li>

<i class="fa fa-skype" style="font-size: 16px;"></i>

<p>

<?php if($customfooter[$language_id]['contact_skype'] != '') { ?>

<?php echo $customfooter[$language_id]['contact_skype']; ?><br>

<?php } ?>

</p>

</li>

<?php } ?>

<?php if($customfooter[$language_id]['contact_location'] != '') { ?>

<!-- Location -->

<li>

<i class="fa fa-home" style="font-size: 16px;"></i>

<p>

<?php if($customfooter[$language_id]['contact_location'] != '') { ?>

<?php echo $customfooter[$language_id]['contact_location']; ?><br>

<?php } ?>

</p>

</li>

<?php } ?>

<?php if($customfooter[$language_id]['contact_hours'] != '') { ?>

<!-- Location -->

<li>

<i class="fa fa-clock-o" style="font-size: 16px;"></i>

<p>

<?php if($customfooter[$language_id]['contact_hours'] != '') { ?>

<?php echo $customfooter[$language_id]['contact_hours']; ?><br>

<?php } ?>

</p>

</li>

<?php } ?>

</ul>

</div>

<?php } ?>

 

<!-- Information -->

<div class="col-sm-<?php echo $grids; ?> col-xs-6 footer-column">

<h4><?php echo $text_information; ?></h4>

 

<ul>

<?php foreach ($informations as $information) { ?>

<li><a href="<?php echo $information['href']; ?>"><?php echo $information['title']; ?></a></li>

<?php } ?>

</ul>

</div>

 

<!-- Customer Service -->

<div class="col-sm-<?php echo $grids; ?> col-xs-6 footer-column">

<h4><?php echo $text_service; ?></h4>

 

<ul>

<li><a href="<?php echo $contact; ?>"><?php echo $text_contact; ?></a></li>

<li><a href="<?php echo $return; ?>"><?php echo $text_return; ?></a></li>

<li><a href="<?php echo $sitemap; ?>"><?php echo $text_sitemap; ?></a></li>

</ul> 

</div>

 

<!-- Extras -->

<div class="col-sm-<?php echo $grids; ?> col-xs-6 footer-column">

<h4><?php echo $text_extra; ?></h4>

 

<ul>

<li><a href="<?php echo $manufacturer; ?>"><?php echo $text_manufacturer; ?></a></li>

<li><a href="<?php echo $voucher; ?>"><?php echo $text_voucher; ?></a></li>

<li><a href="<?php echo $affiliate; ?>"><?php echo $text_affiliate; ?></a></li>

<li><a href="<?php echo $special; ?>"><?php echo $text_special; ?></a></li>

</ul>

</div>

 

<!-- My Account -->

<div class="col-sm-<?php echo $grids; ?> col-xs-6 footer-column">

<h4><?php echo $text_account; ?></h4>

 

<ul>

<li><a href="<?php echo $account; ?>"><?php echo $text_account; ?></a></li>

<li><a href="<?php echo $order; ?>"><?php echo $text_order; ?></a></li>

<li><a href="<?php echo $wishlist; ?>"><?php echo $text_wishlist; ?></a></li>

<li><a href="<?php echo $newsletter; ?>"><?php echo $text_newsletter; ?></a></li>

</ul>

</div>

 

 

</div>

 

</div>

</div>

 

<!-- COPYRIGHT

================================================== -->

<div class="copyright">

 

<div class="container pattern">

 

<!--

OpenCart is open source software and you are free to remove the powered by OpenCart if you want, but its generally accepted practise to make a small donation.

Please donate via PayPal to [email protected]

//-->

<p class="copyright-left">Powered by <a href="http://www.opencart.com">OpenCart</a>  Made by <a href="http://www.themeglobal.com">ThemeGlobal - OpenCart Template Club</a></p>

<!--

OpenCart is open source software and you are free to remove the powered by OpenCart if you want, but its generally accepted practise to make a small donation.

Please donate via PayPal to [email protected]

//-->

 

<?php if(is_array($theme_options->get( 'payment' ))) { if($theme_options->get( 'payment_status' ) != '0') { ?>

 

<ul class="copyright-right">

<?php foreach($theme_options->get( 'payment' ) as $payment) { 

echo '<li>';

if($payment['link'] != '') {

$new_tab = false;

if($payment['new_tab'] == 1) {

$new_tab = ' target="_blank"';

}

echo '<a href="' .$payment['link']. '"'.$new_tab.'>';

}

echo '<img src="image/' .$payment['img']. '" alt="' .$payment['name']. '">';

if($payment['link'] != '') {

echo '</a>';

}

echo '</li>'; 

} ?>

</ul>

 

<?php } } ?>

 

 

</div>

 

 

</div>

 

 

 

 

 

<script type="text/javascript" src="catalog/view/theme/<?php echo $config->get( 'config_template' ); ?>/js/megamenu.js"></script>

</div>

 

<a href="#" class="scrollup"><i class="fa fa-caret-up"></i>Top</a>

</div>

<?php } ?>

<script>

    $("#input-telephone").mask("+38 (999)999-99-99");

    //$("#input-telephone").inputmask("+38 (999)999-99-99");

    $(document).ready(function () {

        $('#button-oneclick').on('click', function () {

            $('.alert, .text-danger').remove();

 

            var tel_number = $("#input-telephone").val();

            var product_id = $('input[name=product_id]').val();

 

            var pattern = /^\+[1-9]{1}[0-9]{3,14}$/;

 

            if (pattern.test($("#input-telephone").val())) {

                $.ajax({

                    url: 'index.php?route=product/buyoneclick/oneclickadd',

                    type: 'post',

                    data: 'product_id=' + product_id + '&tel_number=' + tel_number,

                    dataType: 'json',

                    complete: function () {

                        $('#cart > button').button('reset');

                    },

                    success: function (json) {

                        if (json['redirect']) {

                            location = json['redirect'];

                        }

 

                        if (json['success']) {

                           $('.form-one-click-call').html('<label class="control-label" for="input-telephone">' + json['text_order_success'] + ' ' + json['code'] + '</label>');

                        }

                    },

                    error: function (xhr, ajaxOptions, thrownError) {

                        //console.log(xhr.status);

                        //console.log(thrownError);

                        $('#content').parent().before('<div class="alert alert-danger"><i class="fa fa-minus-circle"></i>'+ xhr.responseText +' <button type="button" class="close" data-dismiss="alert">×</button></div>');

}

                });

            }

            else {

                $('#content').parent().before('<div class="alert alert-danger"><i class="fa fa-minus-circle"></i> Телефонный номер неверен. Он должен состаять из цифр.<button type="button" class="close" data-dismiss="alert">×</button></div>');

            }

        });

 

    });

 

</script>

 

 

</body>

</html>

[ArtemPitov]

откройте консоль значит где то есть ошибки 

[Rubik]

Всем спасибо! Проблема была в регулярном выражение var pattern = /^\+[1-9]{1}[0-9]{3,14}$/; по большому она в данном случае не нужна так как есть маска она и так не даст нечего ввести кроме чисел.

[ArtemPitov]

Всем спасибо! Проблема была в регулярном выражение var pattern = /^\+[1-9]{1}[0-9]{3,14}$/; по большому она в данном случае не нужна так как есть маска она и так не даст нечего ввести кроме чисел.

var pattern = "/^\+[1-9]{1}[0-9]{3,14}$/";

[Rubik]

Да! Выходи что маска +38 (отсюда человек начинает заполнять телефон при проверке знаком на 3 меньше было

[ArtemPitov]

я проверяю на стороне сервера #[^0-9/+/-/s+/]#