Liquid, JavaScript, themes, sales channels
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
Solved! Go to the solution
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.
Hi @acid-data,
Please send your site and if your site is password protected, please send me the password. I will check it.
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
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.
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
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 %}
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