0

Recently new to Craft and Twig although I have used Expression Engine in the past. I am looking for a way to update a for loop that is pulling entries from a defined category based on the current entry/page category by using a dropdown list with all categories available.

Entries: Vehicles

Categories: Truck, Suv, Compact, Economy

Fields: Color, numofDoors, passangers, gasmileage

Example of code:

{% set related = craft.entries.section('vehicles').relatedTo(entryVehicleCategories%}

{% for vehicle in related %}

    {% if related|length %}
        <h2>Name:{{vehicle.name}}</h2>
        <p>color:{{vehicle.color}}</p>
        <p>Number of doors:{{vehicle.numofdoors}}</p>
    {% else %}
        <h2>No content</h2>
    {% endif %}
{% endfor %}

<form action="{{ url('search/results') }}">
    <select name="vehicle-search" placeholder="Search">
        <option value="Truck">Truck</option>
        <option value="Suv"> Suv </option>
        <option value="Compact"> Compact </option>
        <option value="Economy"> Economy </option>
    </select>

    <input type="submit" value="Go">
</form> 

Upon form submit I am hoping I can change/set related to something new.

Example: Current loop is looping and showing all related truck entries.

Action wanted: User selects suv and div reloads suv entries on page without reloading page.

1

You will need to use JavaScript, either AJAX calling to a template that re-runs a new Twig for loop and returns the results in HTML, or a framework like Vue or React in conjunction with P&T's Element API that will create an endpoint of your section's entries in JSON format.


If you don't mind a page refresh, you can filter your entries dynamically using craft.request to grab pretty much whatever you want: a segment from the URL, query string, post data, etc. So basically, when the form submits, your redirect url should go to that page and either you add submitted data to the url via get or grab the data via post.


Also, fyi, you have a syntax error in your code: missing a ) at the end of your .relatedTo ;)

  • So there is no easy or simple way to do something such as onSubmit(); {{% set related = craft.entries.section('vehicles').relatedTo("FormVariable")%}} – Matthew Dillon Sep 20 '17 at 22:26
  • 1
    Twig is a templating language that compiles down to PHP on the server, which then compiles down to an HTML file that is sent out to the browser requesting it. If you press submit on a form, you yourself are working from the browser (not from the server), and either you are sending something back to the server to process and then receiving a response from said server, or you are running some javascript in the browser to do any number of things. So you're wanting to run a client-side process on server-side code. That's not how it works. The "easy/simple" way(s) is mentioned above. – Ryan Sep 20 '17 at 22:51

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.