TA-Foodtrucks - All functions and values

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>