I am trying to add a select dropdown (That shows Product title, image and price) form field inside a contact form that enable user to select product and selected products show under the field. I am using this code but it only display 50 product and just showing product titles and product image path, not the actual image.
<label for="ContactFormProductNameField">Products</label>
<select id="ContactFormProductNameField" name="contact[Product]" required>
<option selected disabled>Choose your product</option>
<option value="Others - No product-related concerns">Others - No product-related concerns</option>
{% for product in collections['all'].products %}
<option value="{{ product.title }}">{{ product.title}}{{ product.featured_image}}</option>
{% endfor %}
</select>
On the first question why displaying only 50 products:
This could because of some data restriction from Shopify.
Did you check that collections['all'].products in the current context has length more than 50?
On the second one "just showing product titles and product image path, not the actual image."
{{ product.featured_image}} is probably just the image path not 'actual' image.
Also the HTML <option> tag can contain only text inside it.
It could not contain tag which is your intention. For that you will need custom select implementation.
Check this thread How to add images in select list?
Related
To have a page be compliant with all government accessibility requirements, each form element should have a label. However, we have a birth date picker with three dropdowns: Day, Month, and Year. The visible label is simply "Birth Date".
Is there a way to:
Specify that a form element has no label?
Specify that a label is for multiple form elements?
You can specify a label for a group using <fieldset> and <legend>, however, this does not mean you can omit the individual label. In your example, you could argue that the proximity to the other selects serve as a "visual label", so you can use the title attribute to label each of the individual components and a fieldset/legend for the group
In your instance, you also need to indicate that the * indicates a required field
Here is some markup
<fieldset>
<legend>Date of Birth* <span class="offscreen">required</span></legend>
<select title="month">...</select>
<select title="day">...</select>
<select title="year">...</select>
<button title="pick date" class="datepicker"></button>
</fieldset>
I have a tabbed form and I want to output a form field more than once. Say I have a tab called "individual" and another called "company". In the first tab I want to have the fields "name"and "address". In the second tab I want to have the fields "company" and "address", so I want to show the address form field twice (the user would select if they are an individual or a company by selecting the tab). But when I try to do this Symfony will not render the second address field because it has already been output.
Is there a way to override this behavior and have symfony output this field twice?
Unfortunately it seems that Symfony2 ( at least v2.2 and 2.3 ) only allow to render a form once because of Symfony2 form's internal handling ( token, id etc ).
The only way I have found is "tinkering", use twig set to capture form into a twig variable and then you will be able to use it more than once, ex :
{% set twig_form %}
<form method="POST" name="payment" action="{{ url('form_action') }}" {{ form_enctype(form) }}>
<label>My label</label>{{form_widget(form.input)}}
{{form_widget(form._token)}}
{% endset %}
{{twig_form}}
<button type="submit"></button>
</form>
<div>...</div>
{{twig_form}}
<button type="submit"></button>
</form>
I have a view in Symfony 2.3 that shows a full list of employee likes and dislikes. I am trying to create a simple form at the top of this view to filter the list by employee by name.
I have currently created the form within a twig template using regular HTML and some TWIG conditional statements to check if the employee_name GET param matches one of the employees. This solution works but isn't ideal.
<form action="{{ path('report') }}" method="GET">
<select id='employee_name' name='employee_name'>
<option value='John' {% if app.request.get("employee_name") == 'John' %} selected {% endif %}>John</option>
<option value='Aaron' {% if app.request.get("employee_name") == 'Aaron' %} selected {% endif %}>Aaron</option>
<option value='Sam' {% if app.request.get("employee_name") == 'Sam' %} selected {% endif %}>Sam</option>
</select>
<button type="submit">Submit</button>
</form>
My question is, is there a way to write the above form using the Form Builder and still have it auto-fill the fields when submitting? I'd like my filter form to be scalable and reusable. Perhaps it be would better to just use an Twig Include? Suggestions welcome.
Sure. Just create the form with the form builder and render it in Twig. Since you're using the GET method and if you're calling $form->handleRequest($request), the form will have the right values selected based on GET parameters.
I'm creating a template showcase theme that has a set of image blocks and i'm having a custom contact form too. As soon as users selects an image it'll dynamically select from my custom form's select option too.
Now i'm trying to hide my select option field,
My code is
<form action="">
<select name="templates">
<option value="THEME001">THEME001</option>
<option value="THEME002">THEME002</option>
<option value="THEME003">THEME003</option>
<option value="THEME004">THEME004</option>
<option value="THEME005">THEME005</option>
</select>
</form>
So far i tried type="hidden" but its not working. Is there any other way to do it other than using ccs visibility:hidden
You can use jquery's hide function like
$("select").hide();
I think you can remove it by Jquery's remove function.
$("select").remove();
Just pick the select element and you can use these Jquery functions to hide or remove your select element
With javascript you have to use like the following (display = 'none')
document.getElementById('THE ID OF YOUR SELECT BOX').style.display = 'none'
In my struts2 action that prepares the ftl page i have
private static List<Product> listOfProducts;
with getter and setters. This list is filled with products. First product in the list has type B.
In ftl page I am iterating over the list of products
<#list listOfProducts as product>
<select name = product[0].type>
<option value="A">fistType</option>
<option value="B">secondType</option>
<option value="C">thirdType</option>
</select>
</#list>
Problem is that firstType is preselected each time even if in the list i have a product with type B.
Can you tell me what am i missing here? Why option B was not selected when the ftl is loaded?
Thanks
See http://www.w3schools.com/tags/tag_select.asp on the correct syntax for a select
The attribute "name" sets the name of the control - it does not influence the selection
See How can I set the default value for an HTML <select> element?
on how to do that
Use Struts select tag.
<#s.select theme="simple" name="selectedProduct" list="listOfProducts" listKey="productId" listValue="productName" value="defaultProduct"/>
Please go through the example in below link for more understanding.
http://www.mkyong.com/struts2/struts-2-sselect-drop-down-box-example/