Agregar un selector de fecha de entrega a tu carrito

Esta página fue impresa el Nov 28, 2023. Para acceder a la versión actual, por favor visita https://help.shopify.com/es/manual/online-store/themes/customizing-themes/add-date-picker.

Puedes incluir un calendario en tu página del carrito que permite a los clientes especificar una fecha de entrega para su pedido.

Selector de fecha de entrega

En esta página

Incluye jQuery en tu theme.liquid

Para que esta personalización funcione, algunos temas requieren que se agregue una etiqueta de script para jQuery al archivo de diseño theme.liquid. Si usas un tema gratuito de Shopify Online Store 2.0, es posible que debas seguir el siguiente paso:

  1. En el directorio Diseño, 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.

Crear un fragmento de fecha de entrega

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

  1. Desde el panel de control de Shopify, ve a Tienda online > Temas.
  2. Busca el tema que desees 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 Fragmentos, haz clic en Agregar un nuevo fragmento:

  4. Crear el fragmento:

    1. Asigna a tu fragmento el nombre delivery-date.
    2. Haz clic en Crear fragmento. El nuevo archivo del fragmento se abrirá en el editor de código.

  5. En tu 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/jqueryui/1.9.2/jquery-ui.min.js" defer="defer"></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>
  window.onload = function() {
      if (window.jQuery) {
        let $ = window.jQuery;

        $(function() {
          $("#date").datepicker({
          minDate: +1,
          maxDate: '+2M',
          beforeShowDay: $.datepicker.noWeekends
        });
      });
    }
  }
</script>
  1. Haz clic en Guardar.
  1. En la aplicación de Shopify, toca el botón ….
  2. En la sección Canales de ventas, toca Tienda online.
  3. Toca Administrar temas.
  4. Busca el tema que desees editar, haz clic en el botón … para abrir el menú de acciones y, luego, haz clic en Editar código.
  5. En el directorio Fragmentos, haz clic en Agregar un nuevo fragmento:

  6. Crear el fragmento:

    1. Asigna a tu fragmento el nombre delivery-date.
    2. Haz clic en Crear fragmento. El nuevo archivo del fragmento se abrirá en el editor de código.

  7. En tu 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/jqueryui/1.9.2/jquery-ui.min.js" defer="defer"></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>
  window.onload = function() {
      if (window.jQuery) {
        let $ = window.jQuery;

        $(function() {
          $("#date").datepicker({
          minDate: +1,
          maxDate: '+2M',
          beforeShowDay: $.datepicker.noWeekends
        });
      });
    }
  }
</script>
  1. Haz clic en Guardar.
  1. En la aplicación de Shopify, toca el botón ….
  2. En la sección Canales de ventas, toca Tienda online.
  3. Toca Administrar temas.
  4. Busca el tema que desees editar, haz clic en el botón … para abrir el menú de acciones y, luego, haz clic en Editar código.
  5. En el directorio Fragmentos, haz clic en Agregar un nuevo fragmento:

  6. Crear el fragmento:

    1. Asigna a tu fragmento el nombre delivery-date.
    2. Haz clic en Crear fragmento. El nuevo archivo del fragmento se abrirá en el editor de código.

  7. En tu 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/jqueryui/1.9.2/jquery-ui.min.js" defer="defer"></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>
  window.onload = function() {
      if (window.jQuery) {
        let $ = window.jQuery;

        $(function() {
          $("#date").datepicker({
          minDate: +1,
          maxDate: '+2M',
          beforeShowDay: $.datepicker.noWeekends
        });
      });
    }
  }
</script>
  1. Haz clic en Guardar.

Incluir el fragmento en tu página del carrito

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

  1. En el directorio Secciones, 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.

Ya tienes un campo de entrada de fecha de entrega en tu página del carrito. Cuando hagas clic dentro del campo de texto, aparecerá un calendario:

Selector de fecha de entrega

El selector de fecha utilizado en esta personalización es un widget de la biblioteca de interfaz de usuario de jQuery.

¿Estás listo/a para comenzar a vender con Shopify?

Prueba gratis