Support » Plugin: Locatoraid Store Locator » Clickable phone number for mobile

Viewing 3 replies - 1 through 3 (of 3 total)
  • Plugin Author hitcode

    (@hitcode)

    Hi,
    you may edit the template that is used to display search results.

    Go to Locatoraid, Configuration, Details In List, click Switch To Advanced Mode.
    Find the code where it renders the phone number and change this default code:

    {{=phone}}

    to something like this:

    <a href="tel:{{=phone}}">{{=phone}}</a>

    To make it visible for mobile devices only, here’s the code that should work:

    <div class="hc-xs-hide">
    {{=phone}}
    </div>
    <div class="hc-lg-hide">
    <a href="tel:{{=phone}}">{{=phone}}</a>
    </div>
    

    The first line will be displayed for computers, the second line will be visible for mobile devices only.

    This will define the view for the results in the list. For the map display edit this template:

    Locatoraid, Configuration, Details On Map, click Switch To Advanced Mode.

    • This reply was modified 1 year, 2 months ago by  hitcode.
    • This reply was modified 1 year, 2 months ago by  hitcode.

    That did the trick, thank you

    I was going to ask if on a mobile if we could have the results in a list come up first rather than the map, it confuses some users on phones and they don’t know to scroll down. Or just have the map gone all together on mobile devices

    Plugin Author hitcode

    (@hitcode)

    Hi,
    so far I can’t find a way to make the list come up on a mobile, but we can hide the map. Please make use of this CSS code, add it either to Additional CSS of your theme configuration, or paste it directly to the page content with Locatoraid shortcode (wrapped by <style> </style> tags):

    @media (max-width: 48em) {
    #hclc_map { position: absolute; visibility: hidden; }
    }
    
Viewing 3 replies - 1 through 3 (of 3 total)
  • The topic ‘Clickable phone number for mobile’ is closed to new replies.