Home Marcas - Bsale-IO/template-docs GitHub Wiki

Este componente está diseñado para mostrar un listado y una grilla de marcas en una página web, organizadas alfabéticamente y con soporte para imágenes y enlaces.

{% if brand_list.size > 0 %}

    {% capture style %}
        --cols-xl: 10;
        --cols-lg: 8;
        --cols-md: 6;
        --cols-sm: 4;
        --cols: 3;
    {% endcapture %}

    <div class="container">
        <h2 class="bs-title-home pt-4">Todas las Marcas</h2>
        <div class="accordion" id="brandAccordion">
            {% assign sorted_brands = brand_list | sort: "br_name" %}
            {% assign current_letter = "" %} <!-- Variable para la letra actual -->
            
            <div class="card">
                <div class="card-header d-flex justify-content-between align-items-center" id="headingBrands">
                    <h2 class="mb-0">
                        <button class="btn btn-link text-left" type="button" data-toggle="collapse" data-target="#collapseBrands" aria-expanded="false" aria-controls="collapseBrands">
                            Listado de Marcas (A-Z)
                        </button>
                    </h2>
                    <button class="btn btn-sm btn-outline-primary" type="button" data-toggle="collapse" data-target="#collapseBrands" aria-expanded="false" aria-controls="collapseBrands">
                        +
                    </button>
                </div>
                <div id="collapseBrands" class="collapse" aria-labelledby="headingBrands" data-parent="#brandAccordion">
                    <div class="card-body">
                        <div class="container">
                            <div class="row">
                                {% for brand in sorted_brands %}
                                    {% if brand.br_count > 0 %}
                                        {% assign first_letter = brand.br_name | slice: 0, 1 | upcase %}
                                        {% if first_letter != current_letter %}
                                            <!-- Nueva letra -->
                                            <div class="col-12">
                                                <h3 class="brand-letter">{{ first_letter }}</h3>
                                            </div>
                                            {% assign current_letter = first_letter %}
                                        {% endif %}
                                        <div class="col-6 col-sm-4 col-md-3 col-lg-2 mb-2">
                                            <a href="{{ brand.link }}" class="brand-name listado" title="{{ brand.br_name }}">
                                                - {{ brand.br_name | capitalize }}
                                            </a>
                                        </div>
                                    {% endif %}
                                {% endfor %}
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        
        <!-- Grilla con imágenes -->
        <div class="grid" style='{{ style }}'>
            {% for brand in sorted_brands %}
                {% if brand.br_count > 0 and brand.br_url_logo %}
                    <a class="bs-brands__item grilla p-2 mt-2" href="{{ brand.link }}" title="{{ brand.br_name }}">
                        <div class="bs-img-square brand-home">
                            <picture>
                                <img 
                                    {{ brand.br_url_logo | img_tag_attributes: 'S' }}
                                    alt="{{ brand.br_name }}" 
                                    title="{{ brand.br_name }}"
                                    loading="lazy">
                            </picture>
                        </div>
                    </a>
                {% endif %}
            {% endfor %}
        </div>
    </div>
{% endif %}

<script>
document.addEventListener("DOMContentLoaded", function () {
    const toggleButtons = document.querySelectorAll('.btn-outline-primary[data-toggle="collapse"]');
    
    toggleButtons.forEach(button => {
        button.addEventListener("click", function () {
            const isExpanded = this.getAttribute("aria-expanded") === "true";
            this.textContent = isExpanded ? "+" : "-";
        });
    });
});
</script>
css - style-marcas.css 
/********** Marcas Inicio ******************/

/* Estilos para el contenedor de las marcas */
.bs-brands.grilla {
    display: grid;
    gap: 16px; /* Ajustar el espaciado general */
    place-items: center;
    grid-template-columns: repeat(auto-fit, minmax(100px, 0.2fr));
    justify-content: center;
}

/* Estilos para cada item de marca */
.bs-brands__item.grilla {
    background: var(--element-bg);
    display: block;
    padding: 12px; /* Ajustar el padding interno */
    border-radius: var(--default-border-radius);
    position: relative;
    overflow: hidden;
    transition: transform 0.3s ease;
}

/* Efecto hover para cada item */
.bs-brands__item.grilla:hover {
    transform: scale(1.05);
}

/* Efecto de superposición en hover */
.bs-brands__item.grilla::after {
    content: "";
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    background: rgba(0, 0, 0, 0.125);
    opacity: 0;
    transition: all 0.25s ease;
}

.bs-brands__item.grilla:hover::after {
    opacity: 1;
}

/* Estilos para la imagen dentro del item */
.bs-img-square.brand {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100px;
    width: 100px;
}

/* Estilos para dispositivos móviles */
@media (max-width: 768px) {
    .bs-brands.grilla {
        gap: 12px; /* Espaciado más pequeño en móviles */
        grid-template-columns: repeat(auto-fit, minmax(100px, 1fr)); /* Más adaptativo */
    }

    .bs-brands__item.grilla {
        padding: 8px; /* Reducir padding en pantallas pequeñas */
    }
}
@media screen and (min-width:992px) {
.bs-brands.grilla {
    grid-template-columns: repeat(auto-fit, minmax(100px, 0.2fr));
}
}
@media screen and (min-width:1200px) {
.bs-brands.grilla {
    grid-template-columns: repeat(auto-fit, minmax(100px, 0.15fr));
}
}

/********** Home Marcas (hoja)******************/
.listado {
    color: var(--body-txt-default-color);
}
.listado:hover {
color:var(--primary-color);
}
.accordion>.card>.card-header {
    background-color: white;
}
.btn-outline-primary,
.btn-outline-primary:not(:disabled):not(.disabled):active{
    background: var(--primary-color);
    color: var(--primary-contrast);
    border-color:var(--primary-color);
    border-radius:100px;
    padding: var(--btn-padding , 0.375rem 0.75rem )
}
.btn-outline-primary:hover,
.btn-outline-primary:not(:disabled):not(.disabled):active {
    background: var(--primary-hover-color);
    color: var(--primary-hover-contrast);
    border-color:var(--primary-hover-color);
}
.bs-img-square.brand-home {
    display: flex;
    justify-content: center;
    align-items: center;
    height: auto;
    width: auto;
}

Important

En el caso que la plantilla es antigua se deberá agregar a la hoja de estilo style-grid.css

⚠️ **GitHub.com Fallback** ⚠️