Доработать маску (плейсхолдер) телефона в ядре Карта

ikoshkin · 22.Август.2019 05:52:10

Посты, которые нарушают правила форума и не несут никакого конструктива, из темы удалил. В остальных убрал излишние эмоции и оставил то, что по существу. Если в теме будет больше неконструктивных постов, мне придётся закрыть обсуждение и оставить только голосование.

Я отвечал одному человеку, и не на первый пост, а на конкретный комментарий:

Смысл моего ответа был такой:

Пост создавал ошибочное впечатление, что “Гугл требует только так, и никак иначе”. Это не так. Есть способы соответствовать требованиям Гугла, но пока без дополнительных фишек, которые раньше сторонним модулем добавлялись.
Заранее введённый код (или автоподстановка кода в зависимости от страны) — вещь полезная. Это и без голосований понятно. Вопрос лишь в приоритетах. Лично на мой взгляд, в опросе не хватает варианта: “Вещь нужная, но есть другие функции, которые мне сначала хотелось бы получить”.
Мы видим, что голосов много. Но я пока не могу сказать наверняка, в какой версии это будет сделано. Смогу сказать только тогда, когда задача попадёт к программистам.

А до этого надо изучить все подобные запросы (в том числе на международном форуме) и спланировать, что, как, а главное, когда мы будем делать. Задач с большим количеством запросов много, и некоторые из них появились раньше.

AndreyJ · 22.Август.2019 06:04:06

я там честно указал и второй способ

но вы же понимаете во что эт превратит базу номеров

Это бессмысленный пункт, неинформативный.
Тут миллион таких вещей…
Предлагаю вам уже не в первый раз расставлять приоритет задач по количеству голосов которые за них отдали покупатели вашей системы. Тут было 24 за первые сутки. Такого единодушия давно не было…

alex_vp · 22.Август.2019 07:47:11

@ikoshkin, Вы не обижайтесь только, посты в этой теме действительно эмоциональные, поймите, я не знаю, насколько бы эмоциональным был мой пост, когда я буквально за пару недель до выхода обновления с маской уже совсем собрался купить модуль АБ соответствующего содержания, то есть, читая дословно: за пару недель до того, как они прекратят его дальнейшую разработку в связи с тем, что в ядре появился “аналогичный” функционал.
Кстати, что значит - появился? Микроформат cm-phone существует уже очень давно, и если я правильно помню, когда-то давно он уже стоял на поле с телефоном, так как всплывают в памяти темы 7-8 летней давности, когда люди-человеки наоборот спрашивали, как от этого избавиться (вот тут я вас прекрасно понимаю, у нас нередко, народ что-то активно требует, добьется, сделаете, и через некоторое время начинается обратка: зачем вы это сделали, это никому не надо, надо как раньше - поневоле призадумаешься, прежде чем что-то делать из вопрошаемого).
Вы конечно отвечали Андрею, но на вопросы гугла, которые он передал, что на самом деле все нормально работает и удовлетворяет их условиям.

Но разве вам надо, чтобы оно просто работало, неважно как, главное - работает?

Несколько раз звучала уже фраза - мы не будем смотреть, как у других, иначе мы потеряем уникальность и станем как все.
Смотреть, как сделано у других - не зазорно.
Касательно именно ввода телефона. Вы же тоже наверняка пользуетесь сайтами, где авторизация по номеру телефона происходит (я просто до сих пор надеюсь, что это тоже стоит в планах). Знаете, на каких сайтах я чувствую наибольшее душевное облегчение и благодарность? Где написано: “Введите номер телефона в любом формате”!
То есть, ввожу я его со скобками или без, две-три-или-пять черточек, с плюсом или без, пишу вначале 7 или 8 или просто опускаю эту цифру - мой ввод телефона ВСЕГДА воспринимается правильно!
Ну и надо понять, что такое маска. Я не понимаю, зачем вы ее храните в базе - то есть сам номер телефона со всеми скобками и черточками - прямо в таблице БД.
Номер телефона - это ТОЛЬКО цифры. Маска - это ТОЛЬКО отображение цифрового ряда для удобного восприятия. Это даже просто хороший тон программирования - разделить данные и отображение, что позволит сразу переключиться на другое отображение, если вы вдруг решите изменить маску.
Если я что-то не понимаю, не могу правильно понять, только буду рад если вы меня поправите.

Или… @AndreyJ, может действительно проще будет уговорить @alexbranding возобновить поддержку своего модуля, ввиду отсутствия ближайшей перспективы?..

lexizli · 22.Август.2019 07:56:18

Увы, могу поставить только один лайк, потому эмоционально скажу тут — это вообще-то единственно правильное решение!

mrmaster · 22.Август.2019 08:00:13

Скорее всего это уже используются сторонние сервисы, по типу DaData.

А вообще, с масками телефона, в том виде, в котором они есть сейчас у CS-cart и у AB всегда будут недовольные, так как они жестко привязывают ввод телефона к маске, и если у покупателя стоит автозаполнение (у меня это около 5% покупателей), то очень часто возникают ошибки.

albinoz · 22.Август.2019 11:03:59

В CS Cart используется js-библиотека Inputmask, которую можно настроить под себя. Если кому не хочется ждать реализации нужной маски, то небольшой скрипт поможет.

Включить модули “Мои изменения” и в responsive/templates/addons/my_changes/hooks/index/scripts.post.tpl вставить код.

Для +380:

<script>
$(document).bind('ready ajaxComplete', function(){
    $('input[type="tel"]').inputmask({
        mask: '+380(99)999-99-99',
        placeholder: '_',
        showMaskOnHover: true
    });
});
</script>

Для +7:

<script>
$(document).bind('ready ajaxComplete', function(){
    $('input[type="tel"]').inputmask({
        mask: '+7(999)999-99-99',
        placeholder: '_',
        showMaskOnHover: true
    });
});
</script>

Почистить кэш и указанная маска будет накидываться на поле телефона в чекауте.

P.S. Для обратного звонка и одного клика тоже будет работать, если у инпута поля телефона сменить атрибут type с text на tel и удалить cm-mask-phone из class, чтоб не было конфликтов масок (в responsive/templates/addons/call_requests/views/call_requests/components/call_requests_content.tpl):

SanyaSaj · 13.Сентябрь.2019 16:41:29

Подскажите, вроде все сделал по инструкции, но при первом клике в поле “Телефон” все равно сначала отображается +____________, потом когда уже вводишь несколько цифр появляется маска +380. В обратном звонке все ОК.

albinoz · 13.Сентябрь.2019 16:59:26

Проверьте, чтоб в responsive/templates/addons/call_requests/views/call_requests/components/call_requests_content.tpl правки правильные были.

Надо заменить:

<input id="call_data_{$id}_phone" class="ty-input-text-full cm-mask-phone ty-inputmask-bdi" size="50" type="text" name="call_data[phone]" value="{$call_data.phone}" data-enable-custom-mask="true" />

на

<input id="call_data_{$id}_phone" class="ty-input-text-full ty-inputmask-bdi" size="50" type="tel" name="call_data[phone]" value="{$call_data.phone}" data-enable-custom-mask="true" />

и почистить кэш.

Вот здесь сделал изменения по инструкции, можете проверить работу маски: http://dev.demo.cs-cart.ru/stores/d0bc4efe55f740e4/

SanyaSaj · 13.Сентябрь.2019 19:07:57

На демо по ссылке тоже не отображается при первом вводе.
Получилось добиться нормального результата удалив {$input_meta = " cm-mask-phone"} в файле design/themes/responsive/templates/views/checkout/components/profile_fields.tpl

Но в мобильной версии с смартфона не получается номер ввести

albinoz · 13.Сентябрь.2019 19:22:58

Попробуйте задать еще такую настройку в Настройки - Внешний вид:

В хроме на десктопе и на айфоне маска работает без проблем.

SanyaSaj · 13.Сентябрь.2019 19:29:28

Огромнейшее спасибо теперь все ОК

SanyaSaj · 13.Сентябрь.2019 19:37:38

С телефона пальцем было сложно попасть в активную область, проблема решилась правкой стилей:
.litecheckout .litecheckout__input:placeholder-shown:not(:focus) + .litecheckout__label, .litecheckout select:placeholder-shown:not(:focus) + .litecheckout__label {
top: 2px;
}

anatolii · 01.Октябрь.2019 02:12:39

А как сделать что бы маска всегда показывалась ,а не после наведения на нее мышкой ?

anatolii · 01.Октябрь.2019 02:18:28

А можно более подробно ? а то тоже на телефоне не работает

albinoz · 01.Октябрь.2019 03:12:47

showMaskOnHover: true заменить на clearMaskOnLostFocus: false

SanyaSaj · 04.Октябрь.2019 08:08:05

Рекомендую для Украины делать маску в таком формате: mask: ‘+38-(999)-999-99-99’
После тестирования mask: ‘+380(99)999-99-99’ (как предложено выше) стали приходить заказы с некорректным номером телефона. У многих клиентов из автозаполнения подтягивает телефон например 0998887766 и тогда при заказе обрезается последняя цифра то есть получается +380099888776

vetalm · 24.Ноябрь.2019 16:39:27

в 4.1.11 не дает оформить заказ, пишет номер телефона не корректный

AndreyJ · 03.Январь.2020 23:40:15

Подскажите как сделать, чтобы и в модуле от АБ это работало?
upd нашел
\www\design\themes\responsive\templates\addons\ab__quick_order_by_phone\views\components\product_form.tpl сделать теже правки

Может можно куда-то в код вписать, чтобы во все сразу места вода номера вставляло плейсхолдер?

albinoz · 04.Январь.2020 00:02:21

@AndreyJ в скрипте, вот в этом месте $('input[type="tel"]').inputmask({ через запятую можно прописать все нужные поля, на которых надо применять маску.

Например, $('input[type="tel"], .ab__qobp_phone').inputmask({ добавит маску к полям с типом tel и к полю с классом ab__qobp_phone (класс поля телефона у модуля AB “Быстрый заказ”).

AndreyJ · 21.Январь.2020 13:16:40

Оставлю тут ,чтоб не забыть.
Чтоб и в админке заработало тут.

надо сюда
/design/backend/templates/addons/my_changes/hooks/index/scripts.post.tpl
вот это

  <script>
$(document).bind('ready ajaxComplete', function(){
    $('#simple_search .cm-phone').inputmask({
        mask: '+7(999)999-99-99',
        placeholder: '_',
        showMaskOnHover: false
    });
});
</script>

и почистить кеш

@albinoz просьба поправить, если я вдруг есть проще способ