Botón "submit" en formulario de página de producto no envia mensaje, añade producto al carro.

[acid-data]

Buenos días.

Durante más de un año teníamos funcionando un pequeño código dentro de la página de producto, con un  formulario de suscripción para que el cliente anote su email y sea avisado cuando vuelva a haber stock de un producto agotado. El tema utilizado hasta que dejó de funcionar era el Prestige 4.11.0.

El formulario en cuestión nos hacía llegar un correo electrónico con información sobre el email que el cliente había anotado, el nombre y la id del producto. Una vez recibíamos este correo procesábamos externamente esta solicitud por nuestra cuenta.

Recientemente hemos actualizado el tema Prestige a la versión 5.7.0 y este código ha dejado de funcionar. El botón "submit" del formulario no envia el mensaje si no que lo que hace al ser pulsado es añadir el producto al carro y no hemos podido localizar el porqué de este comportamiento.

Adjuntamos a continuación el código en cuestión para su análisis y observaciones al respecto.

{% unless product.available %}
  <div class="email-back-in-stock">
    {% form 'contact' %}
	  {% if form.posted_successfully? %}
		<br/><p>¡Tomamos nota! Te avisaremos en cuanto vuelva a estar disponible.</p>
	  {% else %}
		{% if form.errors %}
		  <br/><p style="color: red;">Por favor, introduce una dirección de correo electrónico válida.</p>
		{% else %}
		  <br/><p>Indícanos tu correo electrónico si quieres que te avisemos cuando <span style="text-transform: uppercase;">{{ product.title }}</span> 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 }}" />
		  <input style="float: left; margin-left: 10px; background-color: #343434; padding: 12px 14px; color: #ffffff; text-transform: uppercase; width:32%; letter-spacing: 0.2em;" class="btn styled-submit" type="submit" value="Avisadme" /><br/>
        </div>
	  {% endunless %}
	{% endform %}
  </div>
{% endunless %}

Gracias de antemano.

Gerard

[Teo · Accepted solution]

Hola, @acid-data:

Muchas gracias por escribirnos. Entiendo por tu mensaje que recientemente has actualizado el tema Prestige en tu tienda. Con todo, ha dejado de funcionar un código personalizado para recoger el correo de los clientes en un formulario de producto agotado, ¿no es así?

A modo de contexto, es importante tener en cuenta que cualquier pregunta relacionada con el lenguaje de código Liquid o la API de Shopify queda fuera del alcance de nuestro conocimiento en el equipo de soporte por redes sociales y la Comunidad de Shopify. Dicho esto, me alegra informarte de que existe un subforo en los foros de la comunidad en inglés que se llama Shopify APIs and SDKs que está controlado por desarrolladores y expertos. Además, también contamos con otro subforo dedicado a preguntas específicas de Liquid llamado Shopify Design.

En estos subforos podrás buscar hilos para ver si alguien ha planteado una situación similar a la tuya y ya se ha resuelto en el pasado. Si no encuentras lo que estás buscando, puedes subir tu pregunta de nuevo y uno de los desarrolladores o participantes podrán darte orientación al respecto. Ten en cuenta que en estos subforos el idioma de interacción es el inglés. No obstante, siempre puedes utilizar el traductor de Google para mostrar el contenido en español si lo necesitas.

Como alternativa, cabe mencionar también que investigando a fondo el tema Prestige, me he percatado de que esta ha sido desarrollado por un proveedor externo a Shopify. En este caso, para poder revisar si el código que nos has facilitado funciona con la nueva versión del tema, te recomendaría contactar directamente con su equipo de soporte. Te dejo un enlace con más información sobre dónde encontrar ayudar para tu tema que estás usando en tu tienda.

Mientras se soluciona esto, una de las principales ventajas de utilizar Shopify es que siempre puedes integrar tu cuenta con una aplicación a terceros de nuestra tienda de aplicaciones. Existen varias aplicaciones para crear sistemas automatizados de aviso cuando vuelves a tener existencias de un producto. A continuación, te dejo un par de ejemplos distintos de este tipo de aplicaciones para ver si se adaptan a las necesidades de tu negocio:

• Back in Stock: Customer Alerts
• ReStock: Back in stock alerts
• Back In Stock - Restock Alerts

Al tratarse de aplicaciones desarrolladas por proveedores externos ajenos a Shopify, si tienes cualquier cuestión o consulta con respecto a su funcionamiento, lo más recomendable sería contactar con sus desarrolladores. Desde la propia página de la aplicación en la tienda de Shopify encontrarás una sección de soporte. Si consideras que estas aplicaciones no se adaptan a lo que buscas, recuerda que siempre puedes optar por contratar a un experto de Shopify.

Mientras tanto, me pregunto cómo va el resto de cuestiones con tu tienda. Dime, ¿está tu tienda abierta de cara al público? Si es así, ¿has podido hacer uso de la herramienta de informes y estadísticas de Shopify para evaluar la información específica de tu negocio? ¿Cómo van los informes de sesiones, conversiones, ventas, etc. en tu tienda en línea?