call button on mobile

[kakalxlax]

hi, im using default mobile theme 1.5.4.1

i wanted to add a "call" button on the mobile theme, so when they press it, it would call out store telephone line.

is there any way to do this?

thanks in advance

[kakalxlax]

?

[zimmer-media]

hello
 

I re-enter the subject, since I have also found nothing further.

Is it possible to create such a function?

 

thanks

[rocky]

It's easy to do. Find the code that displays the phone number and wrap it in an anchor with tel:. For example, in the default PrestaShop v1.6.1.11 theme, you could change line 36 of themes/default-bootstrap/modules/blockcontact/blockcontact.tpl from:

    <span class="label">{l s='Phone:' mod='blockcontact'}</span>{$telnumber|escape:'html':'UTF-8'}

to:

    <span class="label">{l s='Phone:' mod='blockcontact'}</span><a href="tel:{$telnumber|escape:'html':'UTF-8'}">{$telnumber|escape:'html':'UTF-8'}</a>

[maximonunez]

 

It's easy to do. Find the code that displays the phone number and wrap it in an anchor with tel:. For example, in the default PrestaShop v1.6.1.11 theme, you could change line 36 of themes/default-bootstrap/modules/blockcontact/blockcontact.tpl from:

    <span class="label">{l s='Phone:' mod='blockcontact'}</span>{$telnumber|escape:'html':'UTF-8'}

to:

    <span class="label">{l s='Phone:' mod='blockcontact'}</span><a href="tel:{$telnumber|escape:'html':'UTF-8'}">{$telnumber|escape:'html':'UTF-8'}</a>

Hi Rocky,

Can you show me a link how it will see/work this modification in the front end on mobile, because i changed the code in my prestashop 1.6.0.14 and nothing happen, i'm even not able to see the block on the top of my front end throught mobile (before and after of the modification), module is available in the backend for mobile tablet and desktop. 

 

Regards,

 

MN.-

[rocky]

There's some CSS on line 6 of themes/default-bootstrap/css/modules/blockcontact/blockcontact.css that hides the phone number in mobile view:

    .shop-phone {
      display: none; } }

If you remove it, the phone number will appear in mobile view.

[maximonunez]

There's some CSS on line 6 of themes/default-bootstrap/css/modules/blockcontact/blockcontact.css that hides the phone number in mobile view:

    .shop-phone {
      display: none; } }

If you remove it, the phone number will appear in mobile view.

My friend Rocky, 

When i removed the line 6 in css works ok and appear the phone number in mobile view, but when i modified the .tpl file in line 36 nothing happen, can you show me an example how this see/work in the front end?

 

Regards,

 

MN.-

Edited September 22, 2017 by maximonunez (see edit history)

[rocky]

Oops, I just realised that will only change the contact block, not the navigation link. You also need to change line 30 of themes/default-bootstrap/modules/blockcontact/nav.tpl from:

		<i class="icon-phone"></i>{l s='Call us now:' mod='blockcontact'} <strong>{$telnumber}</strong>

to:

		<i class="icon-phone"></i>{l s='Call us now:' mod='blockcontact'} <strong><a href="tel:{$telnumber|escape:'html':'UTF-8'}">{$telnumber|escape:'html':'UTF-8'}</a></strong>

[maximonunez]

 

Oops, I just realised that will only change the contact block, not the navigation link. You also need to change line 30 of themes/default-bootstrap/modules/blockcontact/nav.tpl from:

		<i class="icon-phone"></i>{l s='Call us now:' mod='blockcontact'} <strong>{$telnumber}</strong>

to:

		<i class="icon-phone"></i>{l s='Call us now:' mod='blockcontact'} <strong><a href="tel:{$telnumber|escape:'html':'UTF-8'}">{$telnumber|escape:'html':'UTF-8'}</a></strong>

 

when i made the change in line 36 it did not change the block, stay the same, this is why i'm asking how will see after the change. Right now it just work when delete line 6 in CSS an appear in mobile view (but still the phone number did not wrap it in an anchor).

Edited September 23, 2017 by maximonunez (see edit history)

[rocky]

Changing line 36 of themes/default-bootstrap/modules/blockcontact/blockcontact.tpl will only affect the contact block when it is transplanted in the left or right column:

 

 

It won't affect the contact information in the header or footer. To change the header, you'll need to edit line 30 of themes/default-bootstrap/modules/blockcontact/nav.tpl. To change the footer, you'll need to edit ine 40 of themes/default-bootstrap/modules/blockcontactinfos/blockcontactinfos.tpl.

[yakilemapa]

Hello. Finally, Does it works??