admin_products_extra.tpl 4.57 KB
<style>
    #multiEAN {
        font-family: Arial, sans-serif;
        width: 50%;
    }
    
    #multiEAN h3, #multiEAN h4 {
        color: #333;
        border-bottom: 2px solid #ddd;
        padding-bottom: 10px;
        margin-bottom: 15px;
    }
    
    #multiEAN p {
        color: #555;
        margin-bottom: 10px;
    }
    
    #multiEAN ul {
        list-style-type: none;
        padding: 0;
    }
    
    #multiEAN li {
        margin: 10px 0;
        background: #f9f9f9;
        padding: 10px;
        border-radius: 5px;
        position: relative;
    }
    
    #multiEAN .borrarEAN {
        color: #f44336;
        cursor: pointer;
        position: absolute;
        top: 50%;
        right: 10px;
        transform: translateY(-50%);
        text-decoration: none;
        font-size: 0.9em;
    }
    
    #multiEAN button {
        background-color: #4CAF50;
        color: white;
        padding: 10px 20px;
        border: none;
        border-radius: 5px;
        cursor: pointer;
        transition: background-color 0.2s;
        display: block; 
        margin: 10px 0;
    }
    
    #multiEAN button:hover {
        background-color: #45a049;
    }
    
    #multiEAN input[type="text"] {
        padding: 10px;
        border: 1px solid #ddd;
        border-radius: 5px;
        width: 100%;
        box-sizing: border-box;
        margin-bottom: 10px;
    }

</style>

<div id="multiEAN">
    <h3>Producto: {$product_name}</h3>
    <p>EANs:</p>
    <ul id="product_eans_list">
        {foreach $product_eans as $ean}
            <li>{$ean.ean13} <span class="borrarEAN" data-ean13='{$ean.ean13}'>[Eliminar]</span></li>
        {/foreach}
    </ul>
    <input type="text" id="new_product_ean" placeholder="Introduce el nuevo EAN" />
    <button class="guardarEAN">Agregar EAN al producto</button>

{foreach $combinations_details as $combination}
    <h4>Combinación: {$combination.attribute_name}</h4>
    <p>EANs:</p>
    <ul id="combination_{$combination.id}_eans_list">
        {foreach $combination.eans as $ean}
            <li>{$ean.ean13} <span class="borrarEAN" data-ean13='{$ean.ean13}'  data-id_combinacion='{$combination.id}'>[Eliminar]</span></li>
        {/foreach}
    </ul>
    <input type="text" id="new_combination_{$combination.id}_ean" placeholder="Introduce el nuevo EAN para esta combinación" />
    <button class="guardarEAN" data-id_combinacion='{$combination.id}'>Agregar EAN a la combinación</button>
{/foreach}
</div>

<script>
$(function(){
    $('.guardarEAN').click(function(){
        let data = {
            accion: 'storeEAN',
            productId: "{$product_id}",
        };

        let combinationId = $(this).data('id_combinacion');
        let eanInput = combinationId ? $('#new_combination_' + combinationId + '_ean') : $('#new_product_ean');
        data.ean = eanInput.val();

        if (combinationId) {
            data.combinationId = combinationId;
        }

        $.getJSON('//{$urlBase}/imaxmultiean_ajax.php?callback=?', data, function (respuesta) {
            if (respuesta.ok) {
                showSuccessMessage('EAN almacenado con éxito.');

                let eanList = combinationId ? $('#combination_' + combinationId + '_eans_list') : $('#product_eans_list');
                let eanItem = $('<li>').text(data.ean).append($('<span>').addClass('borrarEAN').attr('data-ean13', data.ean).text('[Eliminar]'));
                eanList.append(eanItem);
                
                eanInput.val(''); // Limpiar el campo de entrada

            } else {
                showErrorMessage('Hubo un error al almacenar el EAN.');
            }
        });
    });

    // En este bloque, usaremos la delegación de eventos para asegurarnos de que también funcione para los elementos EAN recién agregados.
    $(document).on('click', '.borrarEAN', function(){
        let data = {
            accion: 'deleteEAN',
            productId: "{$product_id}",
            ean: $(this).data('ean13'),
        };

        let combinationId = $(this).data('id_combinacion');
        if (combinationId) {
            data.combinationId = combinationId;
        }

        let eanItem = $(this).closest('li'); // Referencia al elemento <li> que contiene el EAN

        $.getJSON('//{$urlBase}/imaxmultiean_ajax.php?callback=?', data, function (respuesta) {
            if (respuesta.ok) {
                showSuccessMessage('EAN eliminado con éxito.');
                
                eanItem.remove(); // Remover el elemento <li> del DOM

            } else {
                showErrorMessage('Hubo un error al eliminar el EAN.');
            }
        });
    });
});

    
</script>