How to display dynamic values from Products to <select> tag inside {% form %}

Solved
Highlighted
Tourist
6 0 0

Hi, I've created a custom contact form and would like to add a <select> tag that allows the user to request additional information on their product of choice. For visualization purposes, I'm using the <optgroup> tag to divide products into different categories. So technically I could add each product title manually as different <option> tags, but that would be inefficient.

 

Not sure what the right solution would be, but I'm trying to create an if statement that checks whether a collection.title has a certain name and, if it does, {% capture %}s the {{ product.title }}s and displays them as <option>s. I don't know if I'm approaching this the right way at all. Any guidance would be appreciated.

 

Here's my code below and the page it's been used https://audi-cuerna.myshopify.com/pages/prueba-de-manejo for you to take a look at what it currently outputs:

 

{% if collection.title contains 'Audi' %}
{% capture audiCars %}{{ product.title }}{% endcapture %}

{% elsif collection.title contains 'BMW' %}
{% capture bmwCars %}{{ product.title }}{% endcapture %}

{% elsif collection.title contains 'Volkswagen' %}
{% capture volkswagenCars %}{{ product.title }}{% endcapture %}

{% else %}
{% capture otherCars %}{{ product.title }}{% endcapture %}

{% endif %}

{% form 'contact' %}
{{ form.errors | default_errors }}
{% if form.posted_successfully? %}
<p class="note form-success">{{ 'contact.form.post_success' | t }}</p>
{% endif %}
<div class="row">
  <div class="col-lg-6">
    <div class="contact-form-style mb-20">
      <input type="text" {% if form.error contains 'first_name' %}error{% endif %} name="contact[first_name]" id="contactFirstName" value="{% if form.name %}{{ form.name }}{% elsif customer %}{{ customer.name }}{% endif %}" placeholder="{{ section.settings.first_name_placeholder }}">
    </div>
  </div>
  <div class="col-lg-6">
    <div class="contact-form-style mb-20">
      <input type="text" {% if form.error contains 'last_name' %}error{% endif %} name="contact[first_name]" id="contactLastName" value="{% if form.name %}{{ form.name }}{% elsif customer %}{{ customer.name }}{% endif %}" placeholder="{{ section.settings.last_name_placeholder }}">
    </div>
  </div>
  <div class="col-lg-4">
    <div class="contact-form-style mb-20">
      <input type="tel" {% if form.error contains 'phone' %}error{% endif %} name="contact[phone]" id="contactPhone" placeholder="{{ section.settings.phone_placeholder}}" minlength="10" maxlength="10" pattern="[0-9\-]*">
    </div>
  </div>
  <div class="col-lg-8">
    <div class="contact-form-style mb-20">
      <input type="text" {% if form.error contains 'email' %}error{% endif %} name="contact[email]" id="contactEmail" value="{% if form.email %}{{ form.email }}{% elsif customer %}{{ customer.email }}{% endif %}" placeholder="{{ section.settings.email_placeholder }}">
    </div>
  </div>
  <div class="col-lg-6">
    <div class="contact-form-style mb-20">
      <input type="text" {% if form.error contains 'date' %}error{% endif %} name="test_drive[date]" id="testDriveDate" placeholder="{{ section.settings.date_placeholder }}" onfocus="(this.type='date')" onblur="(this.type='text')">
    </div>
  </div>
  <div class="col-lg-6">
    <div class="contact-form-style mb-20">
      <input type="text" {% if form.error contains 'time' %}error{% endif %} name="test_drive[time]" id="testDriveTime" placeholder="{{ section.settings.time_placeholder }}" onfocus="(this.type='time')" onblur="(this.type='text')">
    </div>
  </div>
  <div class="col-lg-12">
    <div class="contact-form-style mb-20">
      <label for="testDriveCar">¿Qué auto te gustaría probar?</label>
      <select id="testDriveCar" name="test_drive[Car]" multiple>
        <optgroup label="Audi">
          <option value="Audi">{{ audiCars }}</option>
        </optgroup>
        <optgroup label="BMW">
          <option value="BMW">{{ bmwCars }}</option>
        </optgroup>
        <optgroup label="Volkswagen">
          <option value="volkswagenCars">{{ volkswagenCars }}</option>
        </optgroup>
        <optgroup label="Otros">
          <option value="Otros">{{ otherCars }}</option>
        </optgroup>
      </select>
    </div>
  </div>
  <div class="col-lg-12">
    <div class="contact-form-style">
      <textarea name="contact[body]" {% if form.error contains 'body' %}error{% endif %} placeholder="{{ section.settings.message_placehoder }}">{% if form.body %}{{ form.body }}{% endif %}</textarea>
      <button class="submit" type="submit">AGENDAR PRUEBA</button>
    </div>
  </div>
</div>
{% endform %}

 

Thank you!

0 Likes
Shopify Partner
1767 289 374

First of all you can not get collections object on separate pages, so here in collection.title you can not get anything. and you no need to use separate capture for all. 

Want to modify or custom changes on store hire me.
If helpful then please Like and Accept Solution.
Email: jasoliyabrijesh123@gmail.com
Skype: jasoliya.brijesh
1 Like
Tourist
6 0 0

Hi Jasoliya,

 

That's okay. That's exactly what I needed to know. So what's the right way to think about this problem?

0 Likes
Shopify Partner
1767 289 374

Sure, by which condition you want to generate select box? 

Want to modify or custom changes on store hire me.
If helpful then please Like and Accept Solution.
Email: jasoliyabrijesh123@gmail.com
Skype: jasoliya.brijesh
1 Like
Tourist
6 0 0

I'd simply like to show a list of all my product titles. So when I add new products, that list will be updated automatically.

0 Likes
Shopify Partner
1767 289 374

For that need to make some custom code, You want to show all product title on drop down? how many product you have? 

Want to modify or custom changes on store hire me.
If helpful then please Like and Accept Solution.
Email: jasoliyabrijesh123@gmail.com
Skype: jasoliya.brijesh
0 Likes
Tourist
6 0 0

Yes, exactly. I'd like to show all product titles on drop down. Right now, I have about 20 products.

0 Likes

Success.

Shopify Partner
1767 289 374

Use this Code:

<select>
        {% for pro_in in collections['all'].products %}
            <option>{{pro_in.title}}</option>
        {% endfor %}
</select>
Want to modify or custom changes on store hire me.
If helpful then please Like and Accept Solution.
Email: jasoliyabrijesh123@gmail.com
Skype: jasoliya.brijesh
1 Like
Tourist
6 0 0

Thank you Jasoliya. That worked perfectly.

 

=)

0 Likes