Hi i was wonder if i could set the assign min_characters and max_characters of the following input form field to vary based on a certain variant picked on a product.
The scenario is as following: If a person chooses to buy “X letters” in the variant lets call “Length”, they can only input X amount of letters in the input form field. This is so that if they lets say buy 5 letters they cannot input 10 letters in the input field.
The code for the input field:
{% assign field_label = “Enter a unique field label” %}
{% assign min_characters = 0 %}
{% assign max_characters = %}
{% assign placeholder_text = “” %}
{% assign required_field = false %}
{% assign spellchecker = true %}
{% assign hide_checkout = false %}
{% assign regular_expression = “*$” %}
{% assign expression_title = “The following values are not allowed < > { }” %}
{% assign validation_type = “key” %}
{% comment %}
Do not edit the code below
{% endcomment %}
{% assign gen_id = field_label | remove: " " | strip | downcase %}
{{ field_label }}
0 %}maxlength="{{ max_characters }}"{% endif %}
placeholder="{{ placeholder_text }}"
name="properties[{% if hide_checkout %}_{% endif %}{{ field_label }}]"
value="{{ value | escape }}"
title="{{ expression_title }}"
{% unless regular_expression == '' %}pattern="{{ regular_expression }}"{% endunless %}
data-controller-form-label="{{ field_label }}"
{% if required_field %}required{% endif %}
{% if spellchecker %}spellcheck="true"{% endif %}
data-validation-type="{{ validation_type }}">
.form__label {
max-width: 37rem;
margin-bottom: 0.6rem !important;
}
.product-form__input input[type='text'] {
cursor: text;
}
Hi @Hampus_S ,
The Easify Product Options app is your solution to address the challenges you’re facing. Here’s a demo 
:
Storefront:
App Settings:
- Start by creating your main product’s Length option with variants (e.g., 5 letters, 10 letters, 20 letters).
- Install the app and set up a new option set.
- Add the first text field - using the Text Box option type to display when customers select the “5 letters” variant. Ensure to limit the maximum number of characters to 5. Additionally, activate the Conditional Logic feature, ensuring this text field appears only when customers select the “5 letters” variant.
- Similarly, add more text fields for other length variants.
- Lastly, integrate the option set into your main product, and you’re all set!
Thanks i will check that out, it looks like something im looking for!
1 Like
