Agregar una opción de envoltura de regalo a tu página del 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 recibir ayuda con este tutorial. Requiere 15 minutos de tiempo de diseño. Obtén más información sobre 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 ofrecer un servicio de envoltura de regalo a tus clientes en la página del carrito de tu tienda online. Para los clientes que desean envolver su pedido, puedes cobrar una tarifa plana o cobrar en función del producto.

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.

Crear un producto de envoltura de regalo

Primero, crearás la opción de envoltura de regalo como producto:

1. Desde tu panel de control de Shopify, ve a Productos.

2. Haz clic en Add product (Agregar producto).

3. Crea un producto de envoltura de regalo de la misma manera en que crearías cualquier otro producto:

   

• Puedes usar tu descripción del producto para explicar qué materiales se usarán para envolver los artículos en forma de regalo.
• Asigna a tu producto de envoltura de regalos el precio que deseas cobrar por el servicio. Si deseas que la envoltura de regalos sea gratis, configura el precio de tu producto de envoltura de regalos como 0.
• Puedes subir una imagen del producto para mostrar a tus clientes cómo se verá un pedido envuelto como regalo.
• Asegúrate de que tu producto de envoltura de regalo incluya inventario, o bien ajusta la configuración para que Shopify no haga seguimiento de inventario del producto de envoltura de regalo. Si tu tienda tiene varias sucursales, desmarca Hacer seguimiento de cantidad para evitar que Shopify haga seguimiento de inventario del producto de envoltura de regalo.

1. Haz clic en Guardar.

Crear un menú

A continuación, crea un menú que redirija a tu producto de envoltura de regalo:

Escritorio

1. Desde tu panel de control de Shopify, ve a Tienda online > Navegación.
2. Haz clic en Agregar menú.
3. Asigna a tu menú el nombre Gift wrapping para que el identificador asignado al menú sea gift-wrapping.

4. Agregar el producto de envoltura de regalo al menú:

   1. Haz clic en Agregar elemento del menú y luego introduce un Nombre para el enlace al producto de envoltura de regalo.
   2. En el campo Enlace, selecciona Productos y luego selecciona el producto de envoltura de regalo en el menú desplegable.
   3. Haz clic en Agregar.

5. Haz clic en Guardar menú.

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 Navegación.
4. Haz clic en Agregar menú.
5. Asigna a tu menú el nombre Gift wrapping para que el identificador asignado al menú sea gift-wrapping.

6. Agregar el producto de envoltura de regalo al menú:

   1. Haz clic en Agregar elemento del menú y luego introduce un Nombre para el enlace al producto de envoltura de regalo.
   2. En el campo Enlace, selecciona Productos y luego selecciona el producto de envoltura de regalo en el menú desplegable.
   3. Haz clic en Agregar.

7. Haz clic en Guardar menú.

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 Navegación.
4. Haz clic en Agregar menú.
5. Asigna a tu menú el nombre Gift wrapping para que el identificador asignado al menú sea gift-wrapping.

6. Agregar el producto de envoltura de regalo al menú:

   1. Haz clic en Agregar elemento del menú y luego introduce un Nombre para el enlace al producto de envoltura de regalo.
   2. En el campo Enlace, selecciona Productos y luego selecciona el producto de envoltura de regalo en el menú desplegable.
   3. Haz clic en Agregar.

7. Haz clic en Guardar menú.

Crear un fragmento de código

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. Asigna a tu fragmento el nombre gift-wrapping y haz clic en Crear fragmento. El archivo de tu fragmento se abrirá en el editor de códigos.
5. En este paso, pegarás un código en tu nuevo archivo del fragmento gift-wrapping. El código que pegas dependerá de cómo desees cobrar a tus clientes por el servicio de envoltura de regalo:

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. Asigna a tu fragmento el nombre gift-wrapping y haz clic en Crear fragmento. El archivo de tu fragmento se abrirá en el editor de códigos.
7. En este paso, pegarás un código en tu nuevo archivo del fragmento gift-wrapping. El código que pegas dependerá de cómo desees cobrar a tus clientes por el servicio de envoltura de regalo:

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. Asigna a tu fragmento el nombre gift-wrapping y haz clic en Crear fragmento. El archivo de tu fragmento se abrirá en el editor de códigos.
7. En este paso, pegarás un código en tu nuevo archivo del fragmento gift-wrapping. El código que pegas dependerá de cómo desees cobrar a tus clientes por el servicio de envoltura de regalo:

Agregar un cargo de tarifa plana para el envoltorio de regalo

Pegar el siguiente código y Guardar:

{% if linklists.gift-wrapping.links.size > 0 and
linklists.gift-wrapping.links.first.type == 'product_link' %}

<div
  id="is-a-gift"
  style="clear: left; margin: 30px 0"
  class="clearfix rte"
>
  <p>
    <input
      id="gift-wrapping"
      type="checkbox"
      name="attributes[gift-wrapping]"
      value="yes"
      {% if cart.attributes.gift-wrapping %}
      checked="checked"
      {% endif %}
      style="float: none"
    />
    <label
      for="gift-wrapping"
      style="display:inline; padding-left: 5px; float: none;"
    >
      For {{ linklists.gift-wrapping.links.first.object.price | money }}
      please wrap the products in this order.
    </label>
  </p>
  <p>
    <label style="display:block" for="gift-note"
      >Gift message (free and optional):</label
    >
    <textarea name="attributes[gift-note]" id="gift-note">
{{ cart.attributes.gift-note }}</textarea
    >
  </p>
</div>

{% assign id = linklists.gift-wrapping.links.first.object.variants.first.id
%} {% assign gift_wraps_in_cart = 0 %} {% for item in cart.items %} {% if
item.id == id %} {% assign gift_wraps_in_cart = item.quantity %} {% endif %}
{% endfor %}

<style>
  #updates_{{ id }} { display: none; }
</style>

<script>

  Shopify.Cart = Shopify.Cart || {};

  Shopify.Cart.GiftWrap = {};

  Shopify.Cart.GiftWrap.set = function() {
    var headers = new Headers({ 'Content-Type': 'application/json' });

    var request = {
      method: 'POST',
      headers: headers,
      body: JSON.stringify({ updates: { {{ id }}: 1 }, attributes: { 'gift-wrapping': true } })
    };
    fetch('/cart/update.js', request)
    .then(function() {
      location.href = '/cart';
    });
  }

  Shopify.Cart.GiftWrap.remove = function() {
    var headers = new Headers({ 'Content-Type': 'application/json' });

    var request = {
      method: 'POST',
      headers: headers,
      body: JSON.stringify({ updates: { {{ id }}: 0 }, attributes: { 'gift-wrapping': '', 'gift-note': '' } })
    };
    fetch('/cart/update.js', request)
    .then(function() {
      location.href = '/cart';
    });
  }

  // If we have nothing but gift-wrap items in the cart.
  {% if cart.items.size == 1 and gift_wraps_in_cart > 0 %}
  document.addEventListener("DOMContentLoaded", function(){
    Shopify.Cart.GiftWrap.remove();
  });
  // If we have more than one gift-wrap item in the cart.
  {% elsif gift_wraps_in_cart > 1 %}
  document.addEventListener("DOMContentLoaded", function(){
    Shopify.Cart.GiftWrap.set();
  });
  // If we have a gift-wrap item in the cart but our gift-wrapping cart attribute has not been set.
  {% elsif gift_wraps_in_cart > 0 and cart.attributes.gift-wrapping == blank %}
  document.addEventListener("DOMContentLoaded", function(){
    Shopify.Cart.GiftWrap.set();
  });
  // If we have no gift-wrap item in the cart but our gift-wrapping cart attribute has been set.
  {% elsif gift_wraps_in_cart == 0 and cart.attributes.gift-wrapping != blank %}
  document.addEventListener("DOMContentLoaded", function(){
    Shopify.Cart.GiftWrap.set();
  });
  {% endif %}

  // When the gift-wrapping checkbox is checked or unchecked.
  document.addEventListener("DOMContentLoaded", function(){
    document.querySelector('[name="attributes[gift-wrapping]"]').addEventListener("change", function(event) {
      if (event.target.checked) {
        Shopify.Cart.GiftWrap.set();
      } else {
        Shopify.Cart.GiftWrap.remove();
      }

    });

    document.querySelector('#gift-note').addEventListener("change", function(evt) {
      var note = evt.target.value;
      var headers = new Headers({ 'Content-Type': 'application/json' });

      var request = {
        method: 'POST',
        headers: headers,
        body: JSON.stringify({ attributes: { 'gift-note': note } })
      };

      fetch('/cart/update.js', request);
    });
  });
</script>

{% else %}

<p style="clear: left; margin: 30px 0" class="rte">
  You attempted to add a gift-wrapping script to your shopping cart, but it
  won't work because you don't have a link list with handle
  <code>gift-wrapping</code> which, in turn, contains a link to your
  gift-wrapping product. Please review the steps outlined
  <a
    href="https://help.shopify.com/manual/online-store/themes/os/customize/add-gift-wrap-option"
    target="_blank"
    rel="noopener noreferrer nofollow"
    >here</a
  >.
</p>

{% endif %}

Agregar un cargo que se multiplique por la cantidad de productos del pedido

Con esta opción, si hay tres productos en el pedido, el cargo de envoltura de regalo se multiplicará por tres. Pega el siguiente código y Guarda:

{% if linklists.gift-wrapping.links.size > 0 and
linklists.gift-wrapping.links.first.type == 'product_link' %}

<div
  id="is-a-gift"
  style="clear: left; margin: 30px 0"
  class="clearfix rte"
>
  <p>
    <input
      id="gift-wrapping"
      type="checkbox"
      name="attributes[gift-wrapping]"
      value="yes"
      {% if cart.attributes.gift-wrapping %}
      checked="checked"
      {% endif %}
      style="float: none"
    />
    <label
      for="gift-wrapping"
      style="display:inline; padding-left: 5px; float: none;"
    >
      For {{ linklists.gift-wrapping.links.first.object.price | money }} per
      item, please wrap the products in this order.
    </label>
  </p>
  <p>
    <label style="display:block" for="gift-note"
      >Gift message (free and optional):</label
    >
    <textarea name="attributes[gift-note]" id="gift-note">
{{ cart.attributes.gift-note }}</textarea
    >
  </p>
</div>

{% assign id = linklists.gift-wrapping.links.first.object.variants.first.id
%} {% assign gift_wraps_in_cart = 0 %} {% for item in cart.items %} {% if
item.id == id %} {% assign gift_wraps_in_cart = item.quantity %} {% endif %}
{% endfor %} {% assign items_in_cart = cart.item_count | minus:
gift_wraps_in_cart %}

<style>
  #updates_{{ id }} { display: none; }
</style>

<script>

  Shopify.Cart = Shopify.Cart || {};

  Shopify.Cart.GiftWrap = {};

  Shopify.Cart.GiftWrap.set = function() {
    var headers = new Headers({ 'Content-Type': 'application/json' });

    var request = {
      method: 'POST',
      headers: headers,
      body: JSON.stringify({ updates: { {{ id }}: {{ items_in_cart }} }, attributes: { 'gift-wrapping': true } })
    };
    fetch('/cart/update.js', request)
    .then(function() {
      location.href = '/cart';
    });
  }

  Shopify.Cart.GiftWrap.remove = function() {
    var headers = new Headers({ 'Content-Type': 'application/json' });

    var request = {
      method: 'POST',
      headers: headers,
      body: JSON.stringify({ updates: { {{ id }}: 0 }, attributes: { 'gift-wrapping': '', 'gift-note': '' } })
    };
    fetch('/cart/update.js', request)
    .then(function() {
      location.href = '/cart';
    });
  }

  // If we have nothing but gift-wrap items in the cart.
  {% if cart.items.size == 1 and gift_wraps_in_cart > 0 %}
  document.addEventListener("DOMContentLoaded", function(){
    Shopify.Cart.GiftWrap.remove();
  });
  // If we don't have the right amount of gift-wrap items in the cart.
  {% elsif gift_wraps_in_cart > 0 and gift_wraps_in_cart != items_in_cart %}
  document.addEventListener("DOMContentLoaded", function(){
    Shopify.Cart.GiftWrap.set();
  });
  // If we have a gift-wrap item in the cart but our gift-wrapping cart attribute has not been set.
  {% elsif gift_wraps_in_cart > 0 and cart.attributes.gift-wrapping == blank %}
  document.addEventListener("DOMContentLoaded", function(){
    Shopify.Cart.GiftWrap.set();
  });
  // If we have no gift-wrap item in the cart but our gift-wrapping cart attribute has been set.
  {% elsif gift_wraps_in_cart == 0 and cart.attributes.gift-wrapping != blank %}
  document.addEventListener("DOMContentLoaded", function(){
    Shopify.Cart.GiftWrap.set();
  });
  {% endif %}

  // When the gift-wrapping checkbox is checked or unchecked.
  document.addEventListener("DOMContentLoaded", function(){
    document.querySelector('[name="attributes[gift-wrapping]"]').addEventListener("change", function(event) {
      if (event.target.checked) {
        Shopify.Cart.GiftWrap.set();
      } else {
        Shopify.Cart.GiftWrap.remove();
      }

    });

    document.querySelector('#gift-note').addEventListener("change", function(evt) {
      var note = evt.target.value;
      var headers = new Headers({ 'Content-Type': 'application/json' });

      var request = {
        method: 'POST',
        headers: headers,
        body: JSON.stringify({ attributes: { 'gift-note': note } })
      };

      fetch('/cart/update.js', request);
    });
  });
</script>

{% else %}

<p style="clear: left; margin: 30px 0" class="rte">
  You attempted to add a gift-wrapping script to your shopping cart, but it
  won't work because you don't have a link list with handle
  <code>gift-wrapping</code> which, in turn, contains a link to your
  gift-wrapping product. Please review the steps outlined
  <a
    href="https://help.shopify.com/manual/online-store/themes/os/customize/add-gift-wrap-option"
    target="_blank"
    rel="noopener noreferrer nofollow"
    >here</a
  >.
</p>

{% endif %}

Incluir el fragmento en la plantilla de tu carrito

Para incluir el fragmento de envoltura de regalo en la plantilla de tu carrito:

1. En el directorio Secciones, haz clic en cart-template.liquid. Si tu tema no tiene un cart-template.liquid, 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 'gift-wrapping' %}

1. Haz clic en Guardar.