Adding HTML to Javascript IF function

Question

I'm trying to edit a script so that I can format the output using HTML but unsure how to properly format it. At the moment the script is as below, but what I would like to achieve is as per the second script below. I know that the second script doesn't make sense but I'm just trying to show what I'd basically like to achieve, but not sure how to go about achieving it. If anyone could help I'd appreciate it.

Original script:

var selectCallback = function(variant, selector) {
timber.productPage({
  money_format: "{{ shop.money_format }}",
  variant: variant,
  selector: selector
});
if (variant) {
    if (variant.inventory_management == "shopify" && variant.inventory_policy != "continue") {
    if (variant.inventory_quantity > 0) {
    jQuery('#variant-inventory').text('We have ' + variant.inventory_quantity + ' in stock.');
    } else {
    jQuery('#variant-inventory').text("This product is sold out");
    }
    } else {
    jQuery('#variant-inventory').text("In stock - order now");
    }
    } else {
    jQuery('#variant-inventory').text("");
    }
};

What I'm trying to achieve:

var selectCallback = function(variant, selector) {
timber.productPage({
  money_format: "{{ shop.money_format }}",
  variant: variant,
  selector: selector
});
if (variant) {
    if (variant.inventory_management == "shopify" && variant.inventory_policy != "continue") {
    if (variant.inventory_quantity > 0) {
    jQuery('#variant-inventory').text('<div class="stock">We have ' + variant.inventory_quantity + ' in stock.</div>');
    } else {
    jQuery('#variant-inventory').text("<div class="sold-out">This product is sold out</div> - <a href="link">contact us</a>");
    }
    } else {
    jQuery('#variant-inventory').text("<div class="in-stock">In stock</div> - order now");
    }
    } else {
    jQuery('#variant-inventory').text("");
    }
};

notice the syntax highlighting and how it starts breaking around the quotes you're attempting to use in strings. You need to escape quotes within strings. — zzzzBov
– zzzzBov, Commented May 10, 2016 at 18:29

Roko C. Buljan · Accepted Answer · 2016-05-10 18:56:40Z

4

Instead of using .text() use .html()

jQuery('#variant-inventory').html('<div class="stock">We have ' + variant.inventory_quantity + ' in stock.</div>');

.text() is just a simpler way to do Element.textContent||Element.innerText||...etc = which alters the complete content with a (nodeType3) string, "printing" tag-characters literally > < .
.html() on the other hand is a jQuery method that uses JS's Element.innerHTML which actually inserts HTML-like strings making them actual DOM nodes.

Watch out for quotes!!! This is incorrect:

"<div class="sold-out">This product is sold out</div> - <a href="link">contact us</a>"

should be:

'<div class="sold-out">This product is sold out</div> - <a href="link">contact us</a>'

just like you did a couple of lines above...

_{Tip-of-the-day:}

Take care of your fingers! Don't write all over the place jQuery, instead wrap it into a shorthand DOM ready which encapsulates the $ alias securely:

jQuery(function( $ ) {                          // DOM ready and $ alias secured in scope

  // Your DOM ready code here.
  // Now you're free to use the $ alias and save some bites and finger nails
  $('#variant-inventory').html("YEY!!");

});

edited May 10, 2016 at 18:56

answered May 10, 2016 at 18:29

Roko C. Buljan

209k41 gold badges335 silver badges346 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Justin B Over a year ago

Thank you very much Roko. Things like this seem straightforward once they're explained, but trying to remember them in the first place is a big learning curve for me! Thanks for all the information, I appreciate it.

amal · Accepted Answer · 2016-05-10 18:30:05Z

0

Use jQuery.html() instead of jQuery.text()

answered May 10, 2016 at 18:30

amal

1,3698 silver badges15 bronze badges

Collectives™ on Stack Overflow

Adding HTML to Javascript IF function

2 Answers 2

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related