Intento agregar varios operadores IF () para verificar si existe una imagen y si un precio es mayor que otro, pero no estoy seguro de la sintaxis correcta cuando trabajo con literales de plantilla.
Aquí hay una función que recorre cada producto y muestra el título, la imagen y el precio, pero no estoy seguro de cómo usar los operadores ternarios aquí.
if(products.length > 0) { products.forEach(function(product, index) { const productRow = ` <div class="col-md-3 col-lg-3 col-sm-6 col-xs-6 init"> <div class="product-item mb-0 wow fadeIn" data-wow-offset="10" data-wow-duration="1s" data-wow-delay="500ms"> <div class="product-thumb"> <div class="reveal img-fluid"> <a href="${product.url}"><img class="img-fluid" src="${product.images[0]}" /></a> </div> </div> <div class="product-content py-2"> <h3><a href="${product.url}">${product.title}</a></h3> <p class="home-price-inline mb-0"> <span class="js-price" data-default-price="{{ current_variant.price | money }}">${Currency.formatMoney(product.price_min)}</span> <s class="ml-0">${Currency.formatMoney(product.compare_at_price)}</s> </p> </div> </div> </div>`; productRecomendationBody.insertAdjacentHTML('afterbegin', productRow);//afterbegin is the first element directly after the parent element }); }Si desea renderizar una imagen solo cuando esté disponible, puede hacer algo como esto.
Consulte esta sección
<a href="${product.url}">${product.images[0] ? '<img class="img-fluid" src='${product.images[0]}' />' : ""}</a> if (products.length > 0) { products.forEach(function(product, index) { const productRow = ` <div class="col-md-3 col-lg-3 col-sm-6 col-xs-6 init"> <div class="product-item mb-0 wow fadeIn" data-wow-offset="10" data-wow-duration="1s" data-wow-delay="500ms"> <div class="product-thumb"> <div class="reveal img-fluid"> <a href="${product.url}">${product.images[0] ? '<img class="img-fluid" src='${product.images[0]}' />' : ""}</a> </div> </div> <div class="product-content py-2"> <h3><a href="${product.url}">${product.title}</a></h3> <p class="home-price-inline mb-0"> <span class="js-price" data-default-price="{{ current_variant.price | money }}">${Currency.formatMoney(product.price_min)}</span> <s class="ml-0">${Currency.formatMoney(product.compare_at_price)}</s> </p> </div> </div> </div>`; productRecomendationBody.insertAdjacentHTML('afterbegin', productRow); //afterbegin is the first element directly after the parent element }); }Estoy tratando de agregar varios operadores
if()...
simplemente no estoy seguro de cómo usar operadores ternarios.
Con un if divides la cadena.
var i = 2; var row = `${i} second`; if (i!==1) row+='s'; row += " to go"; console.log(row)con un ternario también puede dividir la cadena y mantenerla en línea (aquí, repartida en varias líneas para mayor claridad, pero podría ser una sola línea)
var i = 2; const row = `${i} second` + (i!==1?"s":"") + ` to go`; console.log(row) o puedes poner el ternario en un reemplazo, usando ${}
var i = 2; const row = `${i} second${i!==1?"s":""} to go`; console.log(row)