Ayuda
Iniciar sesión

Agrega un selector de fecha de entrega al carrito

Puedes incluir un calendario en la página del carrito para que los clientes especifiquen una fecha de entrega para su pedido.

Selector de fecha de entrega

En esta página

Incluye jQuery en theme.liquid

Para que esta personalización funcione, algunos temas requieren que agregues una etiqueta de script de jQuery al archivo de diseño theme.liquid. Si usas un tema gratis de Shopify, quizá debas seguir este paso:

  1. En el directorio Layout, haz clic en theme.liquid.

  2. Busca la etiqueta de cierre </head> en el código. En una nueva línea encima de la etiqueta de cierre </head>, pega el siguiente código:

{{ '//ajax.googleapis.com/ajax/libs/jquery/2.2.3/jquery.min.js' | script_tag }}
  1. Haz clic en Guardar.

Crea un fragmento de fecha de entrega

Para crear un fragmento para el selector de fecha de entrega:

Escritorio

  1. Desde el panel de control de Shopify, ve a Tienda online > Temas.

  2. Busca el tema que quieres editar, haz clic en el botón … para abrir el menú de acciones y luego haz clic en Editar código.

  3. En el directorio Snippets, haz clic en Agregar un nuevo fragmento:

  4. Crea el fragmento:

  5. Asigna al fragmento el nombre delivery-date.

  6. Haz clic en Crear fragmento. El nuevo archivo de fragmento se abrirá en el editor de código.

  7. En el nuevo fragmento delivery-date.liquid, pega el siguiente código:

{{ '//code.jquery.com/ui/1.9.2/themes/base/jquery-ui.css' | stylesheet_tag }}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.3/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.9.2/jquery-ui.min.js"></script>


<div style="width:300px; clear:both;">
  <p>
    <label for="date">Pick a delivery date:</label>
    <input id="date" type="text" name="attributes[date]" value="{{ cart.attributes.date }}" />
    <span style="display:block" class="instructions"> We do not deliver during the weekend.</span>
  </p>
</div>


<script>
  document.addEventListener('DOMContentLoaded', function() {
    if (window.jQuery) {
      $(function() {
        $("#date").datepicker({
          minDate: +1,
          maxDate: '+2M',
          beforeShowDay: $.datepicker.noWeekends
        });
      });
    }
  });
</script>
  1. Haz clic en Guardar.
Móvil

  1. Desde la app de Shopify, toca el ícono Menu.

  2. En la sección Canales de venta, toca Tienda online.

  3. Toca Administrar temas.

  4. Busca el tema que quieres editar, toca el botón … para abrir el menú de acciones y luego toca Editar código.

  5. En el directorio Snippets, toca Agregar un nuevo fragmento:

  6. Crea el fragmento:

  7. Asigna al fragmento el nombre delivery-date.

  8. Toca Crear fragmento. El nuevo archivo de fragmento se abrirá en el editor de código.

  9. En el nuevo fragmento delivery-date.liquid, pega el siguiente código:

{{ '//code.jquery.com/ui/1.9.2/themes/base/jquery-ui.css' | stylesheet_tag }}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.3/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.9.2/jquery-ui.min.js"></script>


<div style="width:300px; clear:both;">
  <p>
    <label for="date">Pick a delivery date:</label>
    <input id="date" type="text" name="attributes[date]" value="{{ cart.attributes.date }}" />
    <span style="display:block" class="instructions"> We do not deliver during the weekend.</span>
  </p>
</div>


<script>
  document.addEventListener('DOMContentLoaded', function() {
    if (window.jQuery) {
      $(function() {
        $("#date").datepicker({
          minDate: +1,
          maxDate: '+2M',
          beforeShowDay: $.datepicker.noWeekends
        });
      });
    }
  });
</script>
  1. Toca Guardar.

Incluye el fragmento en la página del carrito

Para incluir el fragmento de fecha de entrega en la página del carrito:

  1. En el directorio Sections, haz clic en main-cart-items.liquid.

  2. Busca la etiqueta de cierre </form> en el código. En una nueva línea encima de la etiqueta de cierre </form>, pega el siguiente código:

{% render 'delivery-date' %}
  1. Haz clic en Guardar.

Ahora hay un campo de fecha de entrega en la página del carrito. Cuando hagas clic dentro del campo de texto, aparecerá un calendario:

Selector de fecha de entrega

El selector de fecha que se usa en esta personalización es un widget de la biblioteca jQuery UI.