TA-Foodtrucks - All functions and values

Alpine JS makes it easy to use functions as expressions in every directive. Learn more about every function and value and how to get the right data.

Functions

getStartTime(index): String - Get the start time of a single food truck date

getEndTime(index): String - Get the end time of a single food truck date

getTime(index, seperator = null, suffix = null): String - Get a combined string of the start and end time of a single food truck date. Optionally you can define a separator and a suffix if you want e.g. getTime( index , ” - “ , "o’clock”).

getTimezone(index): String - Get details about the timezone of a single food truck date but only if the timezone is different to the users ones.

getWeekday(index, relative = false): String - Get the weekday of a single food truck date based on the defined locale. Optionally you can get a relative date like “today” or “tomorrow” if you want.

getDay(index): String - Get the day of a single food truck date based on the defined locale.

getAddress(index): String - Get the address of a single food truck date.

getWhat3WordsLink(index): String - Get the What3Words location details of a single food truck date.

getGoogleMapsLink(index): String - Get the link to the specific location of a single food truck date.

Example for getWeekday() and getDay()

<div
    class="ta-foodtrucks rounded-lg border border-gray-50 shadow-xl px-4 py-4 mb-8"
    x-data="taFoodtrucks()"
    x-init="init()"
    x-cloak
    data-endpoint="https://api.craftplaces.com/api/v1/dip/location/twodays"
> 
    <!-- CONTENT -->
    <template x-for="(item, index) in dates" :key="item.id" x-if="has_dates">
        <div class="flex flex-col sm:flex-row items-center justify-between border-b-2 border-dashed border-gray-100 last:border-b-0 py-8 px-4">
            <!-- CONTENT -->
            <div class="ta-foodtrucks-details leading-tight">
                <div class="text-base text-secondary-600 font-bold">
                    <span x-text="getWeekday(index, true)"></span>,
                    <span x-text="getDay(index)"></span>
                </div>
                <!-- CONTENT -->
            </div>
        </div>
    </template>
    <!-- CONTENT -->
</div>

Values

TA-Foodtrucks provides you with the following values so you can use it to improve the user experience.

initialized: Boolean - Gives you the information if the data is valid and can be used.

loading: Boolean - Gives you the information if the data is loading.

has_dates: Boolean - Gives you the information if there are dates to show.

error: Boolean - Gives you the information if there was an error while fetching the data from the Craftplaces API.

dates: Array - Gives you all food truck dates provided by the Craftplaces API.

Example for dates

<div
    class="ta-foodtrucks rounded-lg border border-gray-50 shadow-xl px-4 py-4 mb-8"
    x-data="taFoodtrucks()"
    x-init="init()"
    x-cloak
    data-endpoint="https://api.craftplaces.com/api/v1/dip/location/twodays"
> 
    <!-- CONTENT -->
    <template x-for="(item, index) in dates" :key="item.id" x-if="has_dates">
        <!-- CONTENT -->
    </template>
    <!-- CONTENT -->
</div>
TA Styled Plugins Logo
Explore all TA Styled Plugins and learn how to enhance your website fast and easy. All TA Styled Plugins stand for light-weight, responsive, mobile first and 100% customizable with endless animation options and are based on Tailwind CSS and Alpine JS.

TA Styled Plugins are licensed under the MIT license, see LICENSE for details.

Copyright © 2019-2021 Markus A. Wolf - www.markusantonwolf.com

Imprint | Privacy