TA-Foodtrucks - The Basic HTML structure

TA-Foodtrucks is easy to customize. Learn more about the basic structure and how to adapt it to your needs.

Basic structure

This is the basic structure of TA-Foodtrucks. Alpine JS is used to do it’s magic on your webpage. Add TA-Foodtruck to the x-data directive and initialize the component with the x-init directive. To learn more about the different ways of adding TA-Foodtruck to your website - check out How to start .

<div
    class="ta-foodtrucks rounded-lg border border-gray-50 shadow-xl px-4 py-4 mb-8"
    x-data="taFoodtrucks()"
    x-init="init()"
    data-endpoint="https://api.craftplaces.com/api/v1/dip/location/twodays"
    data-locale="de-DE"
    data-min-height="10rem"
    data-duration="1000"
    data-today="Today"
    data-tomorrow="Tomorrow"
    data-seperator=" - "
    data-suffix=""
>
    <div
        class="ta-foodtrucks-loading bg-white text-gray-400 ta-foodtrucks-loading-out"
        :class="{'ta-foodtrucks-loading-out': initialized}"
        x-show="loading"
    >
        <svg xmlns="http://www.w3.org/2000/svg" class="fill-current h-24 w-24" viewBox="0 0 100 100"><path d="M27.136 52.495c1.377 12.625 12.734 21.747 25.359 20.37s21.747-12.735 20.37-25.36m-3.878.423c1.14 10.438-6.378 19.91-16.915 21.06s-19.92-6.478-21.06-16.916"><animateTransform attributeName="transform" attributeType="XML" type="rotate" dur="1s" rom="0 50 50" to="360 50 50" repeatCount="indefinite" ></animateTransform></path></svg>
    </div>
    <div class="ta-foodtrucks-error" x-show="!has_dates || error">
        Sorry, no dates available at the moment...
    </div>
    <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"
        >
            <div
                class="ta-foodtrucks-logo rounded-full w-24 h-24 border border-gray-200 shadow-md sm:mr-8"
            >
                <img :src="item.logo.url.local" alt="asdas" class="ta-foodtrucks-logo-image" />
            </div>
            <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>
                <div class="text-4xl sm:text-5xl font-light mb-2">
                    <span x-text="getTime(index, ' - ', 'o\'clock')"></span>
                </div>
                <div class="text-base font-semibold">
                    <span x-text="item.name"></span>
                    : <span x-text="item.location.address.street"></span>
                    <span x-text="item.location.address.number"></span>,
                    <span x-text="item.location.address.city"></span>
                </div>
                <div class="text-sm font-regular mb-2">
                    <span class="font-normal" x-text="item.vendor.name.long"></span>:
                    <span x-text="item.vendor.offer"></span>
                </div>
                <div class="w-full flex flex-wrap justify-between font-normal text-sm">
                    <div class="flex flex-wrap items-center my-2">
                        <a
                            :href="getWhat3WordsLink(index)"
                            class="inline-flex text-sm text-primary font-bold items-center"
                            target="_blank"
                        >
                            <svg class="fill-current h-4" viewBox="0 0 576 512"><path d="M288 0c-69.59 0-126 56.41-126 126 0 56.26 82.35 158.8 113.9 196.02 6.39 7.54 17.82 7.54 24.2 0C331.65 284.8 414 182.26 414 126 414 56.41 357.59 0 288 0zm0 168c-23.2 0-42-18.8-42-42s18.8-42 42-42 42 18.8 42 42-18.8 42-42 42zM20.12 215.95A32.006 32.006 0 0 0 0 245.66v250.32c0 11.32 11.43 19.06 21.94 14.86L160 448V214.92c-8.84-15.98-16.07-31.54-21.25-46.42L20.12 215.95zM288 359.67c-14.07 0-27.38-6.18-36.51-16.96-19.66-23.2-40.57-49.62-59.49-76.72v182l192 64V266c-18.92 27.09-39.82 53.52-59.49 76.72-9.13 10.77-22.44 16.95-36.51 16.95zm266.06-198.51L416 224v288l139.88-55.95A31.996 31.996 0 0 0 576 426.34V176.02c0-11.32-11.43-19.06-21.94-14.86z" ></path></svg>
                            <span class="ml-1">What3Words</span>
                        </a>
                        <span class="ml-2">
                            (<span x-text="item.location.position.what3words"></span>)
                        </span>
                    </div>
                    <a
                        :href="getGoogleMapsLink(index)"
                        class="inline-flex text-sm text-primary font-bold items-center my-2"
                        target="_blank"
                    >
                        <svg class="fill-current h-4" viewBox="0 0 384 512">
                            <path
                                d="M172.268 501.67C26.97 291.031 0 269.413 0 192 0 85.961 85.961 0 192 0s192 85.961 192 192c0 77.413-26.97 99.031-172.268 309.67-9.535 13.774-29.93 13.773-39.464 0zM192 272c44.183 0 80-35.817 80-80s-35.817-80-80-80-80 35.817-80 80 35.817 80 80 80z"
                            ></path>
                        </svg>
                        <span class="ml-1"> Google Maps </span>
                    </a>
                </div>
            </div>
        </div>
    </template>
</div>

…and this is how this working example looks like.

Sorry, no dates available at the moment...

Craftplaces API

The Craftplaces API provides you with all dates and opening times of vendors with changing locations such as food trucks, street food or regional markets. Learn more about the Craftplaces API or check out the Craftplaces API documentation .

Tailwind CSS

Thanks to Tailwind CSS and the Tailwind CSS plugin everything is prepared for you but if you want to run the TA-Foodtrucks without Tailwind CSS you have to use the pre rendered styles inside the /dist/styles folder - ta-foodtrucks.css .

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