Shopify - Cart notes

nota-carrito.liquid

{% comment %}
    @rotcl
{% endcomment %}

<p class="cart-attribute__field">
  <label for="mensaje-carrito">Mensaje</label>
  
  <input type="text" id="mensaje-carrito" name="attributes[mensaje-carrito]" value="{{ cart.attributes["mensaje-carrito"]
  
  <textarea id="mensaje-carrito" name="attributes[mensaje-carrito]">{{ cart.attributes["mensaje-carrito"] }}</textarea>
  
  <input type="radio" name="attributes[mensaje-carrito]" value="Opcion 1"{% if cart.attributes["mensaje-carrito"] == "Opcion 1" %} checked{% endif %}> <span>Opcion 1</span><br>
  <input type="radio" name="attributes[mensaje-carrito]" value="Opcion 2"{% if cart.attributes["mensaje-carrito"] == "Opcion 2" %} checked{% endif %}> <span>Opcion 2</span><br>
  <input type="radio" name="attributes[mensaje-carrito]" value="Opcion 3"{% if cart.attributes["mensaje-carrito"] == "Opcion 3" %} checked{% endif %}> <span>Opcion 3</span><br>
  
  <input type="hidden" name="attributes[mensaje-carrito]" value="No">
  <input type="checkbox" name="attributes[mensaje-carrito]" value="Yes"{% if cart.attributes["mensaje-carrito"] == "Yes" %} checked{% endif %}>
  <label>Mensaje checkbox</label>
  
  <select id="mensaje-carrito" name="attributes[mensaje-carrito]">
    <option value="Opcion 1"{% if cart.attributes["mensaje-carrito"] == "Opcion 1" %} selected{% endif %}>Opcion 1</option>
    <option value="Opcion 2"{% if cart.attributes["mensaje-carrito"] == "Opcion 2" %} selected{% endif %}>Opcion 2</option>
    <option value="Opcion 3"{% if cart.attributes["mensaje-carrito"] == "Opcion 3" %} selected{% endif %}>Opcion 3</option>
  </select>

</p>

eCommerce - ⚡️ Shopify ⚡️

¿Cómo agregar una mensaje en el carrito de compra?

Muchas veces nuestros clientes quieren agregar notas especiales dentro del pedido, y las funciones propias de cada plantilla no nos ayudan mucho con esto; en nuestro caso, en Green Glass vimos la necesidad de añadir un elemento distintivo para cuando los clientes buscaran un package de regalo especial, o quisieran mandar un mensaje especial junto a su vaso preferido.

Para incluir el snippet solo basta agregar este comando: {% include 'nota-carrito' %} antes del elemento ''< /form>'' de la sección cart.liquid, o cart-template.liquid; dependiendo de la plantilla que estés ocupando.

Este sería el detalle de cada elemento del código, puedes usar los que te sirvan o sino te llenarás de opciones sin sentido:

• label: Este será el mensaje a desplegar, no tiene ninguna función más que mostrar un texto fijo.

• input type="text": Formulario de texto de pequeño tamaño.

• textarea: Formulario de text de gran tamaño.

• input type="radio": Botones redondos con los cuales podemos ofrecer opciones (una sola a la vez).

• input type="checkbox": Botones cuadrados para ofrecer opciones. (más de una a la vez).

• select: Dropdown para ofrecer opciones distintas.

Si te peinas con el CSS y Javascript tienes muchas más opciones para hacerlo más bonito o más funcional.