Solved

Meta field list of files - wrap code around each item

LloydSpencer
Shopify Partner
19 0 0

Good afternoon,

 

I am new to using meta fields and could really do with some guidance. I have created a meta field that displays a list of files, however, I need to be able to wrap the file URL in the same code each time to make it display in a specific format.

 

This is the code and how it currently displays.

 

 

 

{{ product.metafields.custom.data_sheets | file_url }}

 

 

Screenshot 2022-09-01 at 13.34.43.png

 

This is the code I'd like to wrap around each file URL that has been uploaded 

 

 

<a target="_blank" download="guide" href="{{ product.metafields.custom.data_sheets | file_url }}">
    <img src="#">
    <span>Download</span>
<a>

 

 

 

Accepted Solution (1)
Niki_K
Shopify Partner
448 46 125

This is an accepted solution.

Hey @LloydSpencer,

 

I looked at it and would make a few changes. Please, see the piece of code below plus a screenshot of how the Download guide links would render. Let me know if this is what you asked for! 🙂

 

P.S. You might need to add your classes.

 

 

 

<ul>
  {% for file in product.metafields.custom.file.value %}
    <li>
      <a href="{{ file.url }}" target="_blank">Download Guide</a>
    </li>
  {%- endfor -%}
</ul>

 

 

 

Snímek obrazovky 2022-09-06 v 15.58.10.png

Send me a link to your store to niki@ecommercepot.com and I'll help you out.
For more info what I do, visit my agency website ecommercepot.com or my personal website nikikozak.me.

View solution in original post

Replies 8 (8)

Nyshawn
Shopify Partner
91 3 3

If you're using Liquid, you can use the "capture" tag to store the contents of a variable: {% capture file_url %}{{ product.metafields.files }}{% endcapture %} Then you can output the contents of that variable anywhere in your template, wrapped in the code you need: {{ file_url | wrap: 'code here' }}

banned
LloydSpencer
Shopify Partner
19 0 0

Hi @Nyshawn 

 

Thank you for your response.

 

I have tried following the instructions that you have sent above, but I am still having no luck.

 

You can see below that I have implemented the new code, however, it hasn't seemed to wrap each file URL in a div.

 

Screenshot 2022-09-05 at 16.11.13.png

Screenshot 2022-09-05 at 16.12.27.png

LloydSpencer
Shopify Partner
19 0 0

Hi @Niki_K,

 

Is there any chance you would be able to help me with this?

Niki_K
Shopify Partner
448 46 125

Hey @LloydSpencer,

 

If I understand this correctly, you want to render a list of files and each file should be available under "Download" – basically, you want this:

 

Download (link to first file)

Download (link to second file)

Download (link to third file)

.....

 

Right? If yes, you will need to loop through all of the files, i.e. using Iteration.

If it is not clear, write me PM. Thanks!

Send me a link to your store to niki@ecommercepot.com and I'll help you out.
For more info what I do, visit my agency website ecommercepot.com or my personal website nikikozak.me.
LloydSpencer
Shopify Partner
19 0 0

Hi @Niki_K,

 

Thanks for getting back to me, I appreciate it.

 

Yes, exactly that. However, I'd like to wrap each item (file url) in the list in the same code so it would repeat and look like the following.

<a class="download-guide" target="_blank" download="guide" href="{{ product.metafields.custom.data_sheets | file_url }}">
  <img src="#">
  <span>Download Guide</span>
<a>

 

Niki_K
Shopify Partner
448 46 125

This is an accepted solution.

Hey @LloydSpencer,

 

I looked at it and would make a few changes. Please, see the piece of code below plus a screenshot of how the Download guide links would render. Let me know if this is what you asked for! 🙂

 

P.S. You might need to add your classes.

 

 

 

<ul>
  {% for file in product.metafields.custom.file.value %}
    <li>
      <a href="{{ file.url }}" target="_blank">Download Guide</a>
    </li>
  {%- endfor -%}
</ul>

 

 

 

Snímek obrazovky 2022-09-06 v 15.58.10.png

Send me a link to your store to niki@ecommercepot.com and I'll help you out.
For more info what I do, visit my agency website ecommercepot.com or my personal website nikikozak.me.
LloydSpencer
Shopify Partner
19 0 0

Thank you, the code you sent has worked perfectly 😁

Niki_K
Shopify Partner
448 46 125

Great! Happy to hear that!

Send me a link to your store to niki@ecommercepot.com and I'll help you out.
For more info what I do, visit my agency website ecommercepot.com or my personal website nikikozak.me.