Custom text box input not showing on Order page

Solved
MiaH26
New Member
3 0 0

So, I have a customizable product where the customer can input a name and an image. The image shows on my unfulfilled orders -page, but not the name field. The name field is empty, and the customer swears they put the name on there. Also, the coding for the name is a "required" field, so it can't have been left empty. So it's got to be something in my code. Could you please have a look at what I did wrong:?

This is from my custom product template.liquid

<select name="id" id="ProductSelect--{{ section.id }}" class="product-single__variants no-js">
{% for variant in product.variants %}
{% if variant.available %}
<option {% if variant == product.selected_or_first_available_variant %}
selected="selected" {% endif %}
data-sku="{{ variant.sku }}"
value="{{ variant.id }}">
{{ variant.title }} - {{ variant.price | money_with_currency }}
</option>
{% else %}
<option disabled="disabled">
{{ variant.title }} - {{ 'products.product.sold_out' | t }}
</option>
{% endif %}
{% endfor %}
</select>

<p class="line-item-property__field">
<label for="pups-name">Pup's name &nbsp;&nbsp;&nbsp;</label>
<input required class="required" id="pups-name" type="text" name="properties[Pup's name ]">
</p>

<p class="line-item-property__field">
<label for="pups-name">Pup's name -2 </label>
<input id="pups-name" type="text" name="properties[Pup's name ]">
</p>

<p class="line-item-property__field">
<label for="pups-photo">Pup's photo </label>
<input required class="required" id="pups-photo" type="file" name="properties[Pup's photo ]">
</p>

<p class="line-item-property__field">
<label for="pups-photo">Pup's photo -optional </label>
<input id="pups-photo" type="file" name="properties[Pup's photo-optional ]">
</p>

{% if section.settings.quantity_enabled %}
<div class="product-single__quantity">
<label for="Quantity" class="product-single__quantity-label js-quantity-selector">{{ 'products.product.quantity' | t }}</label>
<input type="number" hidden="hidden" id="Quantity" name="quantity" value="1" min="1" class="js-quantity-selector">
</div>
{% endif %}

<div class="product-single__add-to-cart{% if section.settings.add_to_cart_button_size == 'large' %} product-single__add-to-cart--full-width{% endif %}">
<button type="submit" name="add" id="AddToCart--{{ section.id }}" class="btn btn--add-to-cart{% if section.settings.enable_payment_button and product.selling_plan_groups == empty %} btn--secondary-accent{% endif %}"{% unless current_variant.available %} disabled="disabled"{% endunless %}>
<span class="btn__text">
{% if current_variant.available %}
{{ 'products.product.add_to_cart' | t }}
{% else %}
{{ 'products.product.sold_out' | t }}
{% endif %}
</span>
</button>
{% if section.settings.enable_payment_button %}
{{ form | payment_button }}
{% endif %}
</div>
{% endform %}

</div>

TIA! 

0 Likes
Guleria
Shopify Partner
1781 376 532

This is an accepted solution.

Hello @MiaH26 ,

1) Check in your code two inputs fields have same id and name which is wrong.

<p class="line-item-property__field">
<label for="pups-name">Pup's name &nbsp;&nbsp;&nbsp;</label>
<input required class="required" id="pups-name" type="text" name="properties[Pup's name ]">
</p>

<p class="line-item-property__field">
<label for="pups-name">Pup's name -2 </label>
<input id="pups-name" type="text" name="properties[Pup's name ]">
</p>

 

2) It's not difficult for a technical person to bypass the  basic 'required' validation you are using. 

Thanks

 

Want to modify or custom changes on store hire me.
Email: guleriathakur43@gmail.com, Skype: navrocks1
If helpful then please Like and Accept Solution.
Buy me a coffee ☕ My PayPal
MiaH26
New Member
3 0 0

DUH!!! That's an error, of course! Thank you very much! 

 

0 Likes