Help with product form for Lorenza Theme

jamesMeegan
Excursionist
47 1 9

So Im trying to implement a notify when available form on the product-form.liquid file but it keeps giving me an error if I remove "{% form 'product', product %}" and its corresponding {% endform %} it will work but will mess up the format of the the page and cause the buttons to be close to the text. Please let me know how I can fix this. 

Screen Shot 2021-10-17 at 2.31.07 PM.png

Screen Shot 2021-10-17 at 2.31.17 PM.png

 Here is the code: 

{% form 'product', product %}
<select name="id" id="ProductSelect-{{ product.id }}" class="product-single__variants" style="display: none;">
{% 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>
<button type="submit" name="add" class="button {% if section.settings.enable_payment_button %}secondary{% endif %} {% unless product.available %}disabled{% endunless %} add-to-cart" {% unless product.available %}disabled="disabled"{% endunless %}>
{% if product.available %}
<span class="add-to-cart-text">{{ 'products.product.add_to_cart' | t }}</span>
{% else %}
<span class="add-to-cart-text">{{ 'products.product.sold_out' | t }}</span>
{% endif %}
<span class="add-to-cart-loading"></span>
</button>
<br>

{% unless product.available %}
<div class="product__notify-form";>
<button class="button secondary"; point-events: "none">
{% comment %}
Below is the code for contact me form that appears when the product is sold out
{% endcomment %}

{% form 'contact' %}
{% if form.posted_successfully? %}
<p class="accent-text">Thanks! We will notify you when this product becomes available!</p>
{% else %}
<p>Notify me when this product is available</p>
<div id="notify-me-wrapper" class="clearfix" style="button secondary">
{% if customer %}
<input type="hidden" name="contact[email]" value="{{ customer.email }}" />
{% else %}
<input style="align-items: "center"; width:auto;height:"15px"; required="required" type="email" name="contact[email]" placeholder="your@email.com" class="styled-input{% if form.errors contains 'email' %} error{% endif %}" value="{{ contact.fields.email }}" />
{% endif %}
<input background-color:green;align-items = "center"; type="submit" value="Send" />
</div>
{% endif %}
</button>

</div>


{% endform %}
{% endunless %}

{% if section.settings.enable_payment_button %}
{{ form | payment_button }}
{% endif %}
{% endform %}

 

Preview Link: https://w0llfhv7sf90rb04-4339695709.shopifypreview.com

Replies 0 (0)