1.7 Cambiar el texto del botón "Añadir al Carrito" por "Reservar" y mostrar disponibilidad de los productos en el resumen del carrito

[Arethusa]

En mi tienda tengo bastantes productos en los que permito pedidos aunque no haya stock. Y aunque se avisa en la descripción corta de que son productos que no están en stock, que el pedido tardará unos días en poderse preparar e incluyo una etiqueta de disponibilidad indicando el plazo... muchos clientes lo pasaban por alto.

Por lo que he implementado el cambio del texto del botón "añadir al carrito" por el de "reservar ahora" para intentar que quede aún más claro. Y además muestro la disponibilidad de cada producto añadido al carrito en el resumen del carrito y en el resumen final antes de completar el pago. Esto último también pone solución al problema que se da cuando uno o varios productos del carrito ya no tienen el stock suficiente, muestra mensaje de alerta indicando el producto pero no indica que combinación (color/modelo/talla) es la afectada.

El botón "añadir al carrito" cambia a "Reservar ahora" cuando:

• el producto seleccionado no tiene stock, pero se permiten pedidos
• las unidades que se quieren añadir al carrito son superiores a las que hay en stock, pero se permiten pedidos.

Además, muestra un cuadro informativo bajo la etiqueta de disponibilidad, informando de que se puede reservar el producto de la siguiente reposición que recibamos.

En el resumen del carrito se muestra la disponibilidad de la siguiente manera:

• En stock: Cuando el producto está disponible y las unidades que se quieren comprar son inferiores a las que hay en stock en el almacén.
• Queda "X": Cuando se quieren comprar más unidades de las que hay disponibles y donde "X" es el número de unidades disponibles.
• Reservar: Cuando no hay stock del producto pero se permiten pedidos.
• Queda "X" - Reservar "Y": Cuando no hay todas las unidades que se quieren comprar y se permiten pedidos. Donde "X" es el número de unidades disponibles e "Y" es el número de unidades que no hay en stock y que quedarían reservadas para cuando haya stock.

Espero que os resulte útil. Está implementado en el Theme classic de pretashop 1.7.5.1

Primeramente vamos a modificar el botón de los productos para que cambie a "Reservar Ahora". En themes / classic / templates / catalog / _partials / product-add-to-cart.tpl busca el código:

<div class="add">
          <button
            class="btn btn-primary add-to-cart"
            data-button-action="add-to-cart"
            type="submit"
            {if !$product.add_to_cart_url}
              disabled
            {/if}
          >
            <i class="material-icons shopping-cart">&#xE547;</i>

y añade a continuación:

{if $product.availability == 'available' && $product.quantity >= $product.quantity_wanted}
	{l s='Add to cart' d='Shop.Theme.Actions'}
{else}
	{l s='RESERVAR AHORA' d='Shop.Theme.Actions'}
{/if}

En el mismo archivo, busca el código:

{block name='product_availability'}
      <span id="product-availability">
        {if $product.show_availability && $product.availability_message}
          {if $product.availability == 'available'}
            <i class="material-icons rtl-no-flip product-available">&#xE5CA;</i>
          {elseif $product.availability == 'last_remaining_items'}
            <i class="material-icons product-last-items">&#xE002;</i>
          {else}
            <i class="material-icons product-unavailable">&#xE14B;</i>
          {/if}
          {$product.availability_message}

y añade después:

{if $product.availability == 'available' && $product.quantity < $product.quantity_wanted}
	<div class="info_preorder">
		Ahora mismo no disponemos de todo el stock que necesitas en el color/modelo seleccionado, pero lo puedes reservar de la próxima reposición.
	</div>
{/if}

puedes utilizar la clase .info_preorder para darle el aspecto que quieras al cuadro informativo en el archivo themes / classic / assets / css / custom.css

Por ejemplo:

.info_preorder{
	color: #ff007f;
	background: #fff;
	padding: 20px;
	margin-bottom: 10px;
}

Ahora, vamos a mostrar la disponibilidad en el resumen del carrito. En el archivo themes / classic / templates / checkout / _partials / cart-detailed-product-line.tpl

Busca el código:

{foreach from=$product.attributes key="attribute" item="value"}
    <div class="product-line-info">
        <span class="label">{$attribute}:</span>
        <span class="value">{$value}</span>
	</div>  
{/foreach}

y añade después:

<span id="product-availability">
	{if $product.show_availability && $product.availability_message}
	  	{if $product.allow_oosp && $product.availability && $product.stock_quantity > 0 && $product.quantity > $product.stock_quantity}
			<i class="material-icons product-last-items"></i>
			Queda {$product.stock_quantity} - Reservar {$product.quantity - $product.stock_quantity}
		{elseif $product.allow_oosp && $product.availability && $product.stock_quantity <= 0 && $product.quantity > $product.stock_quantity}
			<i class="material-icons product-last-items"></i>
			Reservar
		{elseif $product.quantity > $product.stock_quantity}
            <i class="material-icons product-unavailable"></i>
			Queda {$product.stock_quantity}
		{else}
			<i class="material-icons rtl-no-flip product-available"></i>
			En Stock
		{/if}
	{/if}
</span>

Ahora vamos a mostrar la disponibilidad en el resumen final antes de confirmar el pago. En el archivo themes / classic / templates / checkout / _partials / order-confirmation-table.tpl

Busca el código:

		{/foreach}
            {/if}
            {hook h='displayProductPriceBlock' product=$product type="unit_price"}
          </div>
          <div class="col-sm-6 col-xs-12 qty">

y añade a continuación:

<span id="product-availability">
  {if $product.show_availability && $product.availability_message}
	{if $product.allow_oosp && $product.availability && $product.stock_quantity > 0 && $product.quantity > $product.stock_quantity}
		<i class="material-icons product-last-items"></i>
		Queda {$product.stock_quantity} - Reservar {$product.quantity - $product.stock_quantity}
	{elseif $product.allow_oosp && $product.availability && $product.stock_quantity <= 0 && $product.quantity > $product.stock_quantity}
		<i class="material-icons product-last-items"></i>
		Reservar
	{elseif $product.quantity > $product.stock_quantity}
        <i class="material-icons product-unavailable"></i>
		Queda {$product.stock_quantity}
	{else}
		<i class="material-icons rtl-no-flip product-available"></i>
		En Stock
	{/if}
  {/if}
</span>

 

[QElemento]

Espectacular, muchisimas gracias. Siempre es bueno dar el maximo de informacion a los posibles clientes.

Queria preguntarte una cosilla. Si tienes la tienda con varios lenguajes, hay alguna forma de que el texto que se añade, se traduzca automaticamente?

Aparece en algun apartado de las traducciones o habria que añadir lineas de codigo en algun archivo?

Muchas gracias.

Javi

[Roger SA]

Buenas y muchas gracias por el documento Arethusa. 

He llegado a este post buscando como hacer visible la fecha de disponibilidad de productos o combinaciones sin stock. Desde el backoffice tengo la fecha de disponibilidad, y quiero que el producto pueda comprarse, pero que cuando no hay stock, se muestre la fecha de disponibilidad. Alguna idea por aquí?

Gracias!

[Mimobella]

Hola! excelente post. En mi caso tengo en la misma tienda productos y servicios, de modo tal que para productos esta bien que diga añadir al carrito, pero para los servicios debe decir Reservar, ¿como puedo hacer esto? 

Agradecida por anticipado