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">¡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>