I am using magento and am trying to customize the shopping cart. Basically i have a table and i am trying to change the inner html for the table rows. I am currently selected all the classname by "item-options" and then changing hte inner html. HOWEVER the issue i got is they all change to the same value and not there distince product value.
full code.
<?php foreach($this->getItems() as $_item): ?>
<?php echo $this->getItemHtml($_item) ?>
<?php $_product= Mage::getSingleton('catalog/product')->load($_item->getProductId()) ?>
<script>
var elements = document.getElementsByClassName('item-options');
for (var i = 0; i < elements.length; i++) {
elements[i].innerHTML = "No Of Devices: <?php echo $_product->getResource()->getAttribute('number_of_devices')->getFrontend()->getValue($_product); ?> || License Period: <?php echo $_product->getResource()->getAttribute('licence_period')->getFrontend()->getValue($_product)." !"; ?> ";
}
</script>
<?php endforeach ?>
To state again i am changing the inner html for the elements with the classname item-options. However the issue i have is they will all change to the last value fot he product. for example lets say we have three products 1,2 and 3. If i use the script all three values should change to 1,2 and 3 however they are all chanigng to 3. I am trying to figure out why this is happning. and how i can solve it.
your script updates values in ALL 'item-options'
elements, try to make it without loop (and update only last value):
var elements = document.getElementsByClassName('item-options'),
last = elements.lenght - 1;
elements[last].innerHTML = "No Of Devices: <?php echo $_product->getResource()->getAttribute('number_of_devices')->getFrontend()->getValue($_product); ?> || License Period: <?php echo $_product->getResource()->getAttribute('licence_period')->getFrontend()->getValue($_product)." !"; ?> ";
p.s. I'm not sure, that your innerHTML is correct. And also this method of setting HTML (in php
code with JS
) - is not a good idea.
The thing you are doing is : you parse all items in php, and for each item found, you force ERASE ALL the elements item-options one by one to set to the value found in php. With that, you will change n times ( for n items) the options and you will have only the last one displayed for all your options.
The thing you have to do, is match the item-option in your for with the product you had in php ( for example with the product_id that you added before in your DOM), and if it is the good one, you use your InnerHTML only on this one. Note that a loop in js isnt necessary anymore if you identify well your item-option by its product_id directly.