Liquid, JavaScript, themes, sales channels
Hello,
I added a personalization textbox to each of my products using a tutorial I found on here to my Simple Theme. I would like this text to be required before customers can add to cart but currently customers can add to cart without filling out the textbox. The code has "required" in it but it does not work. I tried a variety of tips I found on here but nothing has worked.
My website: astoriacrossing.com
Product page: http://astoriacrossing.com/products/animal-crossing-amiibo-passport-sanrio
My current code:
<p class="line-item-property__field">
<label for="please-enter-the-name-of-the-sanrio-villagers-you-want-here-rilla-marty-etoile-chai-chelsea-and-toby-if-ordering-more-than-1-card-remember-to-change-the-quantity-number">Please enter the name of the Sanrio villager(s) you want here: Rilla, Marty, Etoile, Chai, Chelsea, and Toby.
<br>If ordering more than 1 card, remember to change the quantity number!</label>
<textarea required class="required" id="please-enter-the-name-of-the-sanrio-villagers-you-want-here-rilla-marty-etoile-chai-chelsea-and-toby-if-ordering-more-than-1-card-remember-to-change-the-quantity-number" name="properties[ ]"></textarea>
</p>
<div class="product-single__cart-submit-wrapper{% if section.settings.enable_payment_button %} product-single__shopify-payment-btn{% endif %}{% if section.settings.add_to_cart_width == 'full_width' %} product-form--full{% endif %}">
<button type="submit" name="add" id="AddToCart" class="btn product-single__cart-submit{% if section.settings.add_to_cart_width == 'full_width' %} btn--full{% endif %}{% if section.settings.enable_payment_button and product.selling_plan_groups == empty %} shopify-payment-btn btn--secondary{% endif %}" data-cart-url="{{ routes.cart_url }}">
<span id="AddToCartText">{{ 'products.product.add_to_cart' | t }}</span>
</button>
{% if section.settings.enable_payment_button %}
{{ form | payment_button }}
{% endif %}
Any help would be greatly appreciated.
Hello @astoriacrossing ,
You have to use custom validation.
Follow this code to get an idea.
Thanks
Hi Guleria, thank you for the reply.
I've played around with the code you sent me and I got it to work. It seemed like my original "Add to Cart" button was not able to identify if the textbox was filled out or not so I deleted all of that code.
My code now looks like this:
<p class="line-item-property__field">
<label for="please-enter-the-name-of-the-sanrio-villagers-you-want-here-rilla-marty-etoile-chai-chelsea-and-toby-if-ordering-more-than-1-card-remember-to-change-the-quantity-number">Please enter the name of the Sanrio villager(s) you want here: Rilla, Marty, Etoile, Chai, Chelsea, and Toby.
<br>If ordering more than 1 card, remember to change the quantity number!</label>
<input id="id1" type="textarea" required id="please-enter-the-name-of-the-sanrio-villagers-you-want-here-rilla-marty-etoile-chai-chelsea-and-toby-if-ordering-more-than-1-card-remember-to-change-the-quantity-number" name="properties[ ]"></textarea>
</p><button onclick="myFunction()">Add to Cart</button>
<p id="demo"></p>
<script>
function myFunction() {
const inpObj = document.getElementById("id1");
if (!inpObj.checkValidity()) {
document.getElementById("demo").innerHTML = inpObj.validationMessage;
} else {
document.getElementById("demo").innerHTML = "";
}
}
</script>{% endform %}
Now I am wondering if there is a way I can change the size of the textbox? Also, how can I customize the "add to cart" button?
Thank you
Portrait of Stephen positioned next to an image of planet Earth, with the Stephen's World ...
By JasonH Mar 18, 2024Digital marketers and app developers have tracked activity in apps and websites for yea...
By Ollie Mar 13, 2024February was an exciting month with Shopify Editions, informative webinars, and more! F...
By JasonH Mar 7, 2024