Agregar un selector de fecha de entrega a tu carrito

Esta página fue impresa el Oct 31, 2022. 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

Incluye jQuery en tu theme.liquid

Para que funcione esta personalización, 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 directorioDiseño, haz clic entheme.liquid.

  2. Buscala etiqueta de cierreen el código. En una nueva línea encima de la etiqueta de cierre,就是el siguiente脏污:

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

Crear un fragmento de fecha de entrega

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

  1. Desde tu panel de control de Shopify, ve aTienda online>Temas.

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

  1. Desde la应用de Shopify, tocaTienda.

  2. En la secciónCanales de ventas, seleccionaTienda online.

  3. TocaAdministrar temas.

  4. Busca el tema que deseas editar, haz clic en el botón...para abrir el menú de acciones y luego haz clic enEditar código.

  1. Desde la应用de Shopify, tocaTienda.

  2. En la secciónCanales de ventas, seleccionaTienda online.

  3. TocaAdministrar temas.

  4. Busca el tema que deseas editar, haz clic en el botón...para abrir el menú de acciones y luego haz clic enEditar código.

  1. En el directorioFragmentos, haz clic enAgregar un nuevo fragmento:

  2. Crear el fragmento:

  3. En tu nuevo fragmentodelivery-date.liquid,就是el siguiente脏污:

{{ '//code.jquery.com/ui/1.9.2/themes/base/jquery-ui.css' | stylesheet_tag }}<跨class="nt">src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.9.2/jquery-ui.min.js"defer="defer">style="width:300px; clear:both;">
for="date">Pick a delivery date:<跨class="nt">id="date"type="text"name="attributes[date]"弗吉尼亚州lue="{{ cart.attributes.date }}"/><跨style="display:block"class="instructions">We do not deliver during the weekend.<跨class="nt">
  1. Haz clic enGuardar.

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 directorioSecciones, haz clic enmain-cart-items.liquid.

  2. Buscala etiqueta de cierreen el código. En una nueva línea encima de la etiqueta de cierre,就是el siguiente脏污:

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

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 labiblioteca de interfaz de usuario de jQuery.