Solved

"Submit" button in product page form does not send message, add product to cart instead.

acid-data
Tourist
4 0 1

Hello mates.

 

For more than a year we had a small code working within the product page, a subscription form for the customer to write down their email so he will be notified when a sold out product is restocked again. This form sent us an email with the following data: the email that the client had written down, product name and product id. Once we received this email, we externally processed this request on our own. It worked perfectly while we kept on Prestige theme 4.11.0.

 

We have recently updated the Prestige theme to version 5.7.0 and this code no longer works. The form "submit" button does not send the message anymore, but also when clicked product is added to cart and the user is redirected to cart page. We have not been able to locate how to fix it.

 

Find attached the form code.

 

{% unless product.available %}
  <div class="back-in-stock-form">
    {% form 'contact' %}
	  {% if form.posted_successfully? %}
		<p>¡Tomamos nota! Te avisaremos cuando vuelva a estar disponible.</p>
	  {% else %}
		{% if form.errors %}
		  <p style="color: red;">Por favor, introduce una dirección de correo electrónico válida.</p>
		{% else %}
		  <p>¿Quieres que te avisemos cuando vuelva a estar disponible?</p>
		{% endif %}
	  {% endif %}
	  {% unless form.posted_successfully? %}
		<div>
		  {% if customer %}
			<input style="float:left; width:65%;" required="required" type="email" name="contact[email]" placeholder="{{ customer.email }}" class="Form__Input{% if form.errors contains 'email' %} error{% endif %}" value="{{ customer.email }}" />
		  {% else %}
			<input style="float:left; width:65%;" required="required" type="email" name="contact[email]" placeholder="tu@email.com" class="Form__Input{% if form.errors contains 'email' %} error{% endif %}" value="{{ contact.fields.email }}" />
		  {% endif %}
		  <input type="hidden" name="contact[Mensaje]" value="Por favor, avisadme cuando {{ product.title | escape }} vuelva a estar disponible. Gracias." />
		  <input type="hidden" name="contact[Id]" value="{{ product.id }}" />
		  <div class="back-in-stock-form-submit">
            <input class="btn styled-submit back-in-stock-submit-button" type="submit" value="Avisadme" />
          </div><br/>
        </div>
	  {% endunless %}
	{% endform %}
  </div>
{% endunless %}

Is there someone who could give us some light about this issue?

 

Thank you in advance

 

Gerard

Accepted Solution (1)
LitExtension
Shopify Partner
4860 1001 1132

This is an accepted solution.

Hi @acid-data,

I checked and the form cart is wrapped outside the contact form, so it won't work. Please send me the code of the whole file, I will edit it for you.

LitExtension - Shopping Cart Migration Expert
Check out our Shopify migration app to migrate your online store to Shopify

View solution in original post

Replies 5 (5)

LitExtension
Shopify Partner
4860 1001 1132

Hi @acid-data,

Please send your site and if your site is password protected, please send me the password. I will check it.

LitExtension - Shopping Cart Migration Expert
Check out our Shopify migration app to migrate your online store to Shopify
acid-data
Tourist
4 0 1

Good afternoon @LitExtension.

 

Thank you for your reply.

 

The site is https://lacremeorganics.com and is live so without password.

 

For the moment I've limited the snippet only for the following product in order to not bother our customers experience.

 

https://lacremeorganics.com/products/savon-n-2-triangle-jabon-solido-artesano 

 

You'll find the snippet below the "Sold out" message box.

 

Regards

 

Gerard

LitExtension
Shopify Partner
4860 1001 1132

This is an accepted solution.

Hi @acid-data,

I checked and the form cart is wrapped outside the contact form, so it won't work. Please send me the code of the whole file, I will edit it for you.

LitExtension - Shopping Cart Migration Expert
Check out our Shopify migration app to migrate your online store to Shopify
acid-data
Tourist
4 0 1

Good morning @LitExtension.

 

Following your explanation I've checked the code by myself and I've found clearly what you suggested, so I've been able to modify it. Now it works like a charm!

 

You rock!

 

Thank you very much.

 

Gerard

kristinejrb
Explorer
45 0 8

Hi @LitExtension! I am having the same problem. Can you help me? Here's the code:

<div class="Container">
<header class="PageHeader">
<div class="SectionHeader SectionHeader--center">
<h1 class="SectionHeader__Heading Heading u-h1">{{ page.title }}</h1>
</div>
</header>

<div class="PageContent PageContent--narrow">
<div class="Rte">
{{- page.content -}}

{%- form 'contact', class: 'Form Form--spacingTight' -%}
{%- if form.posted_successfully? -%}
<p class="Alert Alert--success">{{ 'contact.form.successfully_sent' | t }}</p>
{%- endif -%}

{%- if form.errors -%}
<div class="Form__Alert Alert Alert--error">
<ul class="Alert__ErrorList">
{%- for field in form.errors -%}
{%- if field == 'form' -%}
<li class="Alert__ErrorItem">{{ form.errors.messages[field] }}</li>
{%- else -%}
<li class="Alert__ErrorItem"><strong>{{ form.errors.translated_fields[field] }}</strong> {{ form.errors.messages[field] }}</li>
{%- endif -%}
{%- endfor -%}
</ul>
</div>
{%- endif -%}
<div class="Form__Group">
<div class="Form__Item">
<input type="text" class="Form__Input" name="contact[name]" required {% if customer %}value="{{ customer.name }}"{% endif %}>
<label class="Form__FloatingLabel">{{ 'contact.form.name' | t }}</label>
</div>

<div class="Form__Item">
<input type="email" class="Form__Input" name="contact[email]" required {% if customer %}value="{{ customer.email }}"{% endif %}>
<label class="Form__FloatingLabel">{{ 'contact.form.email' | t }}<span aria-hidden="true"> *</span></label>
</div>
</div>
<div class="Form__Item"><input type="text" class="Form__Input" name="contact[Contact number]" aria-label="" placeholder="" required="">
<label class="Form__FloatingLabel">Contact Number<span aria-hidden="true"> *</span></label> </div>
<div class="Form__Group">
<div class="Form__Item"><input type="text" class="Form__Input" name="contact[Delivery Suburb]" aria-label="b" placeholder="" required="">
<label class="Form__FloatingLabel">Delivery Suburban <span aria-hidden="true"> *</span></label> </div>
<div class="Form__Item"><input type="number" class="Form__Input" name="contact[Post Code]" aria-label="" placeholder="" required="">
<label class="Form__FloatingLabel">Post Code <span aria-hidden="true"> *</span></label></div>
</div>

<div class="Form__Item">
<div class="Form__Select Select Select--primary"><svg class="Icon Icon--select-arrow" role="presentation" viewBox="0 0 19 12">
<polyline fill="none" stroke="currentColor" points="17 2 9.5 10 2 2" fill-rule="evenodd" stroke-width="2" stroke-linecap="square"></polyline>
</svg><select name="contact[]" title="" required="">
<option value="" disabled="" selected="">When do you need the hire to start? <span aria-hidden="true"> *</span></option><option value="Initial Equiry">Initial Equiry</option><option value="First Available">First Available</option><option value="On-going Hire">On-going Hire</option></select>
</div>
</div>
<div class="Form__Item">
<div class="Form__Select Select Select--primary"><svg class="Icon Icon--select-arrow" role="presentation" viewBox="0 0 19 12">
<polyline fill="none" stroke="currentColor" points="17 2 9.5 10 2 2" fill-rule="evenodd" stroke-width="2" stroke-linecap="square"></polyline>
</svg><select name="contact[]" title="" required="">
<option value="" disabled="" selected="">Who are you hiring for? <span aria-hidden="true"> *</span></option><option value="Myself">Myself</option><option value="My Family">My Family</option><option value="My Client">My Client</option></select>
</div>
</div>
<div style= "color: #FF0000"> <p> *All fields are compulsory fields and must be answered.</p> </div>
<input type="checkbox"value="" required/> I understand that it is available in Melbourne Metro only. <span aria-hidden="true"> *</span>
<button type="submit" class="Form__Submit Button Button--primary Button--full">{{ 'contact.form.submit' | t }}</button>
<p> or <a href="https://agedcareandmedical.com.au/">Return to Store </a> </p>
{%- endform -%}
</div>
</div>
</div>

{% schema %}
{
"name": "Contact page",
"settings": [],
"blocks": [
{
"type": "text",
"name": "Text field",
"settings": [
{
"type": "text",
"id": "title",
"label": "Name",
"default": "Custom field"
},
{
"type": "checkbox",
"id": "use_long_text",
"label": "Use long text",
"default": false
},
{
"type": "checkbox",
"id": "is_required",
"label": "Field is required",
"default": false
}
]
},
{
"type": "dropdown",
"name": "Dropdown",
"settings": [
{
"type": "text",
"id": "title",
"label": "Name",
"default": "Custom field"
},
{
"type": "text",
"id": "values",
"label": "Values",
"info": "Separate each value by a comma.",
"default": "value 1, value 2, value 3"
}
]
}
],
"default": {
"blocks": [
{
"type": "text",
"settings": {
"title": "Your phone (optional)"
}
}
]
}
}
{% endschema %}