Edited with my progress:
Noob here. I know just enough javascript to get myself in trouble. Case and point: my webstore has an existing template for a packing list and I'm trying to add the item Size to it.
For each ordered item, the packing list has an element [itemname] which contains the Item + Size. I wrote a function that passes [itemname], breaks out just the size, and returns it. I'd like to display that size on the line item beside quantity, or anywhere on the detail line.
The itemSize tag is only showing on the top detail line. It is not inserting where it should.
Spent way too much time on this issue. Can anyone help?
<!--START: items-->
<div class="row">
<div class="invoice-id">[id]</div>
<div class="invoice-items">
[itemname]<!--START: warehouse_location--><br />
[warehouse_location] [warehouse_aisle] [warehouse_bin] [warehouse_custom]<!--END: warehouse_location-->
</div>
<div id="itemSize"></div>
<div class="invoice-qty">[numitems]<br /> </div>
<div class="clear"></div>
</div>
<hr>
<script language="JavaScript" type="text/javascript" >
function myFunction(txt){
var str = txt.substr( txt.indexOf(";")+1, txt.length - txt.indexOf(";"));
console.log(str);
var newDiv= document.createElement("div");
var newContent = document.createTextNode(str);
newDiv.appendChild(newContent);
var currentDiv = document.getElementById("itemSize");
var nextDiv = document.getElementById("invoice-qty");
currentDiv .insertBefore(newDiv, nextDiv );
}
myFunction("[itemname]");
</script>
<!--END: items-->
Attribute id should be unique. You can generate a dynamic id, something like: id-[index] and then in your JS function target the id that matches each item.
function myFunction(txt, index) {
var str = txt.substr( txt.indexOf(";")+1, txt.length txt.indexOf(";"));
var newDiv= document.createElement("div");
var newContent = document.createTextNode(str);
newDiv.appendChild(newContent);
var currentDiv = document.getElementById(`itemSize-${index}`);
var nextDiv = document.getElementById("invoice-qty");
currentDiv .insertBefore(newDiv, nextDiv );
}