Цвет номер телефона в заказе

Общее Магазины на CS-Cart
1

Всем привет.

На почту приходит заказ где номер телефона покупателя, если в mail стоит черная тема то номер нереально сложно прочесть, где сменить цвет?

Хочу сделать светло голубого как у названия товара.
Походу проблема в ios, т.к на андройде в темной теме цвет телефона и названия товары идентичны.

Окно переполнения области задач._260122172545
Окно переполнения области задач._260122172545723×280 38.1 KB

Спасибо.

1 лайк
2

Здравствуйте!

Для теста разместил заказ, пришло письмо, но номер там в другом виде - некликабельный по-умолчанию:

image
image1292×378 30.8 KB

Вы редактировали контент сниппета ship_to? так, чтобы номер был кликабелен?

image
image2448×690 82.1 KB

Что-то типа такого мб добавляли?
<a href="tel:{{ u.phone }}"

Если да, то можете попробовать в качестве решения такой код:

<a href="tel:{{ u.phone }}"
   style="color:#2b7de9; text-decoration:underline; font-weight:600; -webkit-text-fill-color:#2b7de9;">
  {{ u.phone }}

В тёмной теме он будет выглядеть так:

image

Я поставил синий цвет, он нормально читается и на светлом, и на тёмном фоне

3

Доброе утро @d.lotochkov

Благодарю за обратную связь и предоставленное решение.

Нет, мы не редактировали ship_to

На ПК в mail номер не кликабилен, и цвет у него белый.
На андройде в mail темной теме номер нормального цвета как и название товара.
А вот на ios в mail.ru цвет номера телефона едко синий.

скрин что вы приложили самый нижний это с ios?

С уважением, Артур.

вот что там стоит:

<h2 style="margin: 0px; font-size: 22px; font-family: Helvetica, Arial, sans-serif; color: #444444; text-transform: uppercase; padding-bottom: 20px; border-bottom: 3px solid #e8e8e8; margin-bottom: 20px;">{{__("ship_to")}}</h2>
<p style="margin: 0px; padding-bottom: 5px; font-family: Helvetica, Arial, sans-serif;">
    {% if u.s_firstname %}
        <strong>{{u.s_firstname}} {{u.s_lastname}}</strong>
    {% else %}
        <strong>{{u.firstname}} {{u.lastname}}</strong>
    {% endif %}
</p>
<p style="margin: 0px; padding-bottom: 5px; font-family: Helvetica, Arial, sans-serif;">
    {{u.s_address}} <br>{{u.s_address_2}}
</p>
<p style="margin: 0px; padding-bottom: 5px; font-family: Helvetica, Arial, sans-serif;">
    {{u.s_city}}, {{u.s_state_descr}} {{u.s_zipcode}}
</p>
<p style="margin: 0px; padding-bottom: 5px; font-family: Helvetica, Arial, sans-serif;">
    {{u.s_country_descr}}
</p>
<p style="margin: 0px; padding-bottom: 5px; font-family: Helvetica, Arial, sans-serif;">
    {% if u.s_phone %}
        <span dir="ltr">{{u.s_phone}}</span>
    {% else %}
        <span dir="ltr">{{u.phone}}</span>
    {% endif %}
</p>
4

Спасибо за уточнения. Я на десктопном клиенте в темной теме проверял на макоси, наверное из-за этого не отображался кликабельный телефон. Попрошу отдел поддержки проверить на IOS и запостить задачу, спасибо за предложение.

Что касается вашего кода. В конце есть такой кусок:

{% if u.s_phone %} {{u.s_phone}} {% else %} {{u.phone}} {% endif %}

Просто добавьте color (и желательно ещё -webkit-text-fill-color для некоторых клиентов) прямо в стиль <p>

Чтобы выглядело так:

<p style="margin: 0px; padding-bottom: 5px; font-family: Helvetica, Arial, sans-serif; color:#2b7de9; -webkit-text-fill-color:#2b7de9;">
    {% if u.s_phone %}
        <span dir="ltr">{{ u.s_phone }}</span>
    {% else %}
        <span dir="ltr">{{ u.phone }}</span>
    {% endif %}
</p>

P.S я не тестил на устройстве - поэтому, пожалуйста, сразу проверьте, всё ли ок.

5

Не-а, не хочет, похоже проблема в самом ios.
gpt выдал кодов 20 ) и все равно результат не меняется :upside_down_face:

сделал вот так:

<h2 style="margin: 0px; font-size: 22px; font-family: Helvetica, Arial, sans-serif; color: #444444; text-transform: uppercase; padding-bottom: 20px; border-bottom: 3px solid #e8e8e8; margin-bottom: 20px;">
    {{__("ship_to")}}
</h2>

<p style="margin: 0px; padding-bottom: 5px; font-family: Helvetica, Arial, sans-serif;">
    {% if u.s_firstname %}
        <strong>{{u.s_firstname}} {{u.s_lastname}}</strong>
    {% else %}
        <strong>{{u.firstname}} {{u.lastname}}</strong>
    {% endif %}
</p>

<p style="margin: 0px; padding-bottom: 5px; font-family: Helvetica, Arial, sans-serif;">
    {{u.s_address}} <br>{{u.s_address_2}}
</p>

<p style="margin: 0px; padding-bottom: 5px; font-family: Helvetica, Arial, sans-serif;">
    {{u.s_city}}, {{u.s_state_descr}} {{u.s_zipcode}}
</p>

<p style="margin: 0px; padding-bottom: 5px; font-family: Helvetica, Arial, sans-serif;">
    {{u.s_country_descr}}
</p>

<p style="margin: 0px; padding-bottom: 5px; font-family: Helvetica, Arial, sans-serif;">
    {% if u.s_phone %}
        <span dir="ltr" style="color:#2b7de9; -webkit-text-fill-color:#2b7de9;">{{u.s_phone}}</span>
    {% else %}
        <span dir="ltr" style="color:#2b7de9; -webkit-text-fill-color:#2b7de9;">{{u.phone}}</span>
    {% endif %}
</p>

так выглядит на андройде в темной теме

Окно переполнения области задач._260123121950

а это уже ios

Окно переполнения области задач._260123121933

1 лайк
6

Жаль. Ну, я в любом случае уже передал богатым ответственным лицам с айфонами для воспроизведения проблемы и размещения задачи. Спасибо, что сообщили! :slightly_smiling_face:

1 лайк
7

Да, жаль.
Если будет решение, отпишитесь пожалуйста.

Спасибо большое.

1 лайк