1

Tengo un pequeño problema, estoy creando una vitrina de forma dinámica con un archivo JS, este extrae data de un servicio y lo coloca dentro de un div donde debería cargar owl carousel, el problema es que cuando el JS empieza a incrustar el contenido owl carousel deja de funcionar y no crea los divs y clases necesarios para que owl carousel funcione.

Cuando llega el momento de crear esto, pues no lo crea:

<div class="owl-wrapper-outer autoHeight" style="height: 500px;">
<div class="owl-wrapper" style="width: 14000px; left: 0px; display: block; transition: all 0ms ease 0s; transform: translate3d(-4200px, 0px, 0px); transform-origin: 4900px center 0px; perspective-origin: 4900px center;">
<div class="owl-item" style="width: 1400px;">

<!-- CONTENIDO DE ITEM -->

</div>
</div>
</div>

Aquí mi código:

JS:

function drawVit(data) {
    letbox = '';

    for (var i = 0; i < 6; i++) {
        if (data[i].published == true ) {

            let nombreProductoVit = data[i].name.replace('"'," ");

            let nombreShortProductoVit = nombreProductoVit.split(" ");
            if (nombreShortProductoVit.length > 5){
                nombreShortProductoVit = nombreShortProductoVit.slice(0,5).join(" ");
            } else {
                nombreShortProductoVit = nombreShortProductoVit.join(" ");
            }

            let idProductoVit = data[i].productId;

            let precioProd = 0;
            if (data[i].MASBAJO != undefined) {
                precioProd = data[i].MASBAJO.toFixed().replace(/(\d)(?=(\d{3})+(,|$))/g, '$1.');
                precioIcon = '<img src="/static/Homy/html/home/images/cmr-icon.svg" width="60" style="display:none;">';
            } else if (data[i].CMR != undefined){
                precioProd = data[i].CMR.toFixed().replace(/(\d)(?=(\d{3})+(,|$))/g, '$1.');
                precioIcon = '<img src="/static/Homy/html/home/images/cmr-icon.svg" style="width:46px!important; margin:5px; display:initial;">';
            } else {
                precioProd = data[i].NORMAL.toFixed().replace(/(\d)(?=(\d{3})+(,|$))/g, '$1.');
                precioIcon = '<img src="/static/Homy/html/home/images/cmr-icon.svg" width="60" style="display:none;">';
            }

            let precioNormal = data[i].NORMAL.toFixed().replace(/(\d)(?=(\d{3})+(,|$))/g, '$1.');
            if (Number(precioNormal) === Number(precioProd)) {
                precioNormal = '<small style="display:none;">Normal '+ '$ ' +precioNormal+'</small>';
            } else {
                precioNormal = '<small>Normal '+ '$ ' +precioNormal+'</small>';
            }
            letbox += '<div class="owl-item">';
            letbox += '<div class="item">'; //<-- Slide
            letbox += '<div class="prod-vitrina">'; // <-- SKUinfo
            letbox += '<div>'; // <-- SKUname
            letbox += '<h3 class="nombre-prod">'+nombreShortProductoVit+'</h3>';
            letbox += '</div>'; // <-- EndSKUname
            letbox += '<div class="precio">'; //<--- Precio
            letbox += '<p class="price-prod">$ ' +precioProd+'</p>';
            letbox += precioNormal;
            letbox += precioIcon;
            letbox += '</div>'; //<--- EndPrecio
            letbox += '<div class="relative">';
            letbox += '<a href="http://www.sodimac.cl/sodimac-homy/product/'+idProductoVit+'/'+getMark(init_ProductVitrina)+'" class="loquiero">&iexcl;LO QUIERO!</a>';
            letbox += '</div>';
            letbox += '</div>'; // <-- EndSKUinfo
            //<img src="http://sodimac.scene7.com/is/image/SodimacCL/des-'+productsVitrina[i].productId+'" style="width:100%"></a>';
            letbox += '<a href="http://www.sodimac.cl/sodimac-homy/category/'+init_ProductVitrina[2]+'/'+init_ProductVitrina[3]+'/'+init_ProductVitrina[4]+'" class="hidden-xs hidden-sm"><img src="http://via.placeholder.com/1400x500"></a>';
            letbox += '<a href="http://www.sodimac.cl/sodimac-homy/category/'+init_ProductVitrina[2]+'/'+init_ProductVitrina[3]+'/'+init_ProductVitrina[4]+'" class="hidden-md hidden-lg"><img src="http://via.placeholder.com/500x500"></a>';
            letbox += '</div>'; //<-- EndSlide
            letbox += '</div>';
        }
    }

    $('#owl-demo').append(letbox);

}

HTML:

<link rel="stylesheet" type="text/css" href="/static/Homy/html/css/owl.carousel.min.css"/>
<link rel="stylesheet" type="text/css" href="/static/Homy/html/css/owl.theme.min.css"/>
<link rel="stylesheet" type="text/css" href="/static/Homy/html/css/vitrina.css"/>
<link rel="stylesheet" type="text/css" href="/static/Homy/html/css/home-style.css"/>
<link href="https://fonts.googleapis.com/css?family=Open+Sans:300,600,700" rel="stylesheet">

<div id="vtnHome">
    <div id="owl-demo" class="owl-carousel vitrinaHome"></div>
</div>

<!-- librerias vitrina -->
<script type="text/javascript" src="/static/Homy/html/hprev-h1/js/json-new.js"></script>
<script type="text/javascript" src="/static/Homy/html/js/vtnHome.min.js"></script>
<script type="text/javascript" src="/static/Homy/html/js/owl.carousel.min.js"></script>

1 respuesta 1

0

No estoy muy seguro pero creo que el problema esta en esta línea

$('#owl-demo').append(letbox);

Deberia ser asi:

$(letbox).append('#owl-demo');

Entonces básicamente estarías diciendo que el contenido de la variable letbox debería ir Dentro de el id owl-demo, también recuerda ejecutar la función para que se muestre.

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.