Agregar un selector de fecha de entrega a tu carrito

Precaución

Los temas vintage no están disponibles en la Theme Store. Estos temas no tienen las funciones incluidas en los temas de la Online Store 2.0 de Shopify, y los temas vintage gratuitos de Shopify no reciben actualizaciones aparte de las correcciones de seguridad.

Nota

Si usas un tema gratis de Shopify, puedes comunicarte con atención al cliente de Shopify para que te ayude con este tutorial. Requiere 15 minutos de tiempo de diseño. Para obtener más información, consulta la Política de diseño de Shopify.

Nota

Esta personalización es para temas vintage de Shopify, y no se aplica a temas de Online Store 2.0.

• Conocer la versión de la arquitectura del tema
• Explorar las personalizaciones de temas de Online Store 2.0

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

Precaución

esta personalización no funcionará para los estilos de carrito lateral o emergente y solo funcionará para una página de carrito (en la URL your-store.com/cart). Si usas un carrito lateral o emergente, deberás cambiar el estilo de tu carrito en la Página del editor de temas. Agrega un producto al carrito en la vista previa del tema y luego haz clic en la pestaña Página del carrito en el editor de temas para ver la configuración de tu carrito.

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 Boundless, Debut versión 17.2.0 o posterior, Express, Narrative o Venture, es posible que debas realizar el paso siguiente:

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

Escritorio

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 week-end.</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.

iPhone

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 week-end.</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.

Android

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 week-end.</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 cart-template.liquid. Si tu tema no tiene este archivo, haz clic en cart.liquid en el directorio Plantillas.

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:

El selector de fecha usado en esta personalización es un widget de la biblioteca de interfaz de usuario jQuery. Este artículo del blog explica cómo desactivar fechas específicas en el calendario del selector de fechas.