Looping Javascript within Liquid Loop

New Member
8 0 0

Hey guys, I am having some issues with using a javascript section nested within a liquid product loop, and I am looking for some assistance. I will admit right here and now that I have been teaching myself front end for a few months now and my website has been a long personal project for me to learn with.

Essentially, I currently have a setup where a certain collection is listed with data being pulled for each product. The purpose of this is to display user uploaded products (which interact with Shopify's API via AWS Lambda), and give the option to edit them. To do this I edited a tag system I put together in the hopes of working off of that to display all the tags that are attached to the product in the same format they are uploaded as. The code for this tag system can be found here, and the number strings I have in the editor within that link are just placeholders for {{product.id}}, as the editor doesnt like it.

The issue I am running into is some sort of conflict when looping like this:

{% for product in collections.test-artist.products %}
<div class="grid-product">
<div style="text-align:center; margin-top:auto; margin-bottom:auto;">
<a href="{{ product.url }}"><img src="{{ product.featured_image | product_img_url: 'medium' }}" alt="{{ product.title | escape }}" /> </a>
<input style="margin-bottom: 15px; text-align: center; font-weight:bold; border: none; background: transparent; outline: none;" name="title" type="text" value = "{{product.title}}">
<textarea style="margin-bottom: 15px;" name="desc" type="text">{{product.description}}</textarea>


Exact copy of file linked above with {{product.id}} placed here (rather large, so keeping it over there)

<input style="margin-bottom: 15px;" type="submit" value="Confirm Changes">
{% endfor %}

To roughly describe what happens in the javascript, a variable is set to equal the product.id to prevent any ID conflicts within the html, and then each iteration of the loop is supposed to use the new product.id in order to create a list of separated, editable html forms that all use the tag system I have set up.

Unfortunately, when attempting to use this script, a few issues arise. First and foremost is that it simply does not run while using the {{product.id}} in place of the integer string I have put in for testing. I am going to be frank, I do not know what causes this, or how to best iterate this javascript loop several times while keeping each loop isolated as far as variables are concerned (so there are no conflicts).

Here is an image showing what the loops currently produce iterationexample.png

Under the mess that is currently the description, I am looking to replace that with my code, which currently produces this if not looped.


Again, the code I created for the above image can be found at https://www.w3schools.com/code/tryit.asp?filename=GMBBTGU2VO8H


I have had a lot of trouble with this, and any help is appreciated. To be frank, I am actually at the point where, if necessary, I am willing to hire someone to figure this out... because I have no clue and definitely took a bite that is way too large for me to chew with this entire project. That being said, I would hate to throw 5 months of work down the drain.