如何根据库存值更改opencart中的“购买”按钮颜色？

Question

What is the best way to change button color in a product based on the stock status?

I have successfully done it with javascript by "reading" the innerHTML and if it is i.e out-of-stock, i make the button background green, else blue...

But if there are 5 statuses and 3 translations this results in a big and "ugly" if clause.

My problem is that the store is multilanguage and i am wondering how could i do it without reading innerHTML with js but only read the status value (from model or controller...)?

The previous "dummy" solution is this:

$(document).ready(function() {
    var stck = $('#stocktxt').html();
    if(stck.indexOf("5-") != -1){
        $("#button-cart").css("background-color","#f59525");
    }
});

Answer 1

How is the site being generated? I'm guessing PHP! The best would be for the server to apply a style to the button dynamically based on the stock status. Applying style client side is inefficient unless the stock is being updated in real time. Obviously the stock data lives in a database somewhere, you should be getting the data from that, not innerHTML.

<?php
//get stock value for your items
$someItemStock = 3;

function stockstyle($stock)
{
    if($stock > 5)
    {
        echo "highStock"
    }
    else if($stock < 5 && $stock > 2)
    {
        echo "medStock"
    }
    else if($stock < 2 && $stock > 0)
    {
        echo "lowStock"
    }
    else
    {
    echo "noStock"
    }
}

?>

and then in your HTML for the item:

<button id="whatever this item" class="<?php stockstyle($someItemStock) ?>">