Stock por sucursal en tablas - Bsale-IO/template-docs GitHub Wiki

Componente por defecto en los templates

Codigo Sucursal > tabla stock 🟢

{% assign showAsAccordion = true %} <!-- Cambiar a false para mostrar solo la tabla -->

{% if product.classification != 1 %}
    {% capture stock %}
        "0": "<span style='color: red;'>Agotado</span>", 
        "full": "{cantidad}",
        "table": true,
        "tableTitle": ["sucursal", "stock"]
    {% endcapture %}

    {% if showAsAccordion %}
        <!-- Acordeón con botón desplegable -->
        <div class="stock-accordion" id="stockAccordion">
            <div class="stock-card">
                <div class="stock-card-header d-flex align-items-center justify-content-between" id="headingStock">
                    <h5 class="mb-0 stock-accordion-title">
                        Stock por Sucursales
                    </h5>
                    <button class="stock-accordion-btn" type="button" data-toggle="collapse" data-target="#collapseStock" aria-expanded="false" aria-controls="collapseStock" onclick="toggleIcon(this)">
                        <span class="stock-toggle-icon">+</span> <!-- Icono de apertura -->
                    </button>
                </div>

                <div id="collapseStock" class="collapse" aria-labelledby="headingStock" data-parent="#stockAccordion">
                    <div class="stock-card-body">
                        <div class="bs-table-sucursal-accordion" data-bs="product.stock.detail" data-info='{ {{stock | replace: "'", '\"'}} }'>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    {% else %}
        <!-- Tabla sin el acordeón -->
        <div class="bs-table-sucursal-static" data-bs="product.stock.detail" data-info='{ {{stock | replace: "'", '\"'}} }'>
        </div>
    {% endif %}
{% endif %}

<script>
function toggleIcon(button) {
    const icon = button.querySelector('.stock-toggle-icon');
    if (icon.textContent === '+') {
        icon.textContent = '-';
    } else {
        icon.textContent = '+';
    }
}
</script>

Codigo CSS Sucursal > tabla stock 🟢

/******************
        Sucursales tabla 
*******************/
/* Estilos para la tabla estática */
.bs-table-sucursal-static table {
    width: 100%;
    max-width: 800px;
    margin: 20px auto;
    border-collapse: separate;
    border-spacing: 0;
    font-size: 14px;
    text-align: left;
    background-color: #ffffff;
    border: 1px solid rgba(0, 0, 0, 0.1); 
    border-radius: 8px;
    overflow: hidden;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
}

/* Estilos para la tabla en el acordeón */
.bs-table-sucursal-accordion table {
    width: 100%;
    margin: 1px auto;
    border-collapse: separate;
    border-spacing: 0;
    font-size: 14px;
    text-align: left;
    background-color: #ffffff;
    border: 1px solid rgb(248 249 250);
    border-radius: 8px;
    overflow: hidden;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

/* Encabezado de la tabla */
.bs-table-sucursal-static thead, .bs-table-sucursal-accordion thead {
    background-color: #f8f9fa; 
    color: #333;
}

.bs-table-sucursal-static th, .bs-table-sucursal-accordion th {
    padding: 6px;
    border-bottom: 1px solid rgba(0, 0, 0, 0.1);
    text-transform: capitalize;
    font-weight: bold;
}

/* Filas de la tabla */
.bs-table-sucursal-static td, .bs-table-sucursal-accordion td {
    padding: 12px;
    border-bottom: 1px solid rgba(0, 0, 0, 0.05); /* Borde sutil */
}

.bs-table-sucursal-static tbody tr:last-child td, .bs-table-sucursal-accordion tbody tr:last-child td {
    border-bottom: none;
}

.bs-table-sucursal-static tbody tr:hover, .bs-table-sucursal-accordion tbody tr:hover {
    background-color: #f5f5f5; /* Efecto hover */
    transition: background-color 0.3s ease;
}

/* Estilos para el acordeón */
.stock-accordion .stock-card {
    border: 1px solid rgba(0, 0, 0, 0.1);
    border-radius: 7px;
    margin: 8px 0;
    width: 70%;
}

.stock-card-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 10px 15px;
    background-color: #f8f9fa;
    border-bottom: 1px solid rgba(0, 0, 0, 0.1);
    font-weight: bold;
    color: #333;
}

.stock-accordion-title {
    margin: 0;
    font-size: 16px;
    font-weight: bold;
}

.stock-accordion-btn {
    background-color: var(--primary-color);
    border: 2px solid var(--primary-color);
    border-radius: 50%;
    color: var(--primary-contrast);
    font-size: 18px;
    cursor: pointer;
    width: 30px;
    height: 30px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.3s ease;
}

.stock-accordion-btn:hover {
    background-color: var(--primary-hover-color);
    border-color: var(--primary-hover-color);
    color: white;
}

.stock-toggle-icon {
    font-size: 18px;
}

.collapse.show + .stock-card-header .stock-accordion-btn .stock-toggle-icon {
    content: "-";
}

.stock-card-body {
    flex: 1 1 auto;
    min-height: 1px;
    padding: 0px;
}

.stock-accordion-body {
    padding: 10px 20px;
    font-size: 14px;
    background-color: #ffffff;
    color: #333;
}

Instrucciones de Uso

El componente Modal esta incorporado en todos los template base, sin embargo para poder activarlo, se deberá modificar la variable configuración del componente del Producto > detalle en el componente

{{'Producto > detalle '| get_component }}

Para a activar dejar en true variable show_sucursal_table

{% assign show_sucursal_table = false %} <!-- Configuración: Cambia a true y muestra tablas de sucursales -->

Instrucciones de su configuración Stock por sucursal en tablas

El componente incluye una variable de configuración que permite definir su presentación. Las opciones disponibles son: mostrarlo como un acordeón o en una tabla estática:

{% assign showAsAccordion = true %} <!-- Cambiar a false para mostrar solo la tabla -->

Important

Si la plantilla usada no tiene la tabla, hay crear el componente Sucursal > tabla stock con su css y editar el componente Producto > detalle