All my blog pages are using custom HTML/CSS/JS. I am not using the drag and drop design manager. My blog posts template is simply called single HTML.
I am needing certain sections of my blog post to have content that can be input by a non-coder on the blog post edit page by simply filling out some fields. In Wordpress this would be the equivalent of metaboxes/custom fields, using a plugin like Advanced Custom Fields.
For instance, I might have a section called "You Might Also Like" which will offer a variable number of our products to blog readers. Each product would have an image, a link to the product page, and a product name/title.
I want team members to be able to create a new blog post, and then input raw data into some "custom" fields that will store that info on a post by post basis.
I want to then be able to write custom queries in the blog post template to place those products on the page, but looping through the data and inserting the values for the custom fields. For instance:
{% for product in products %}
<div class="box">
<img src="{{ get the product image url }}" />
<a href="{{ get_the_product_page_url}}">
<div>{{ get_the_product_name }}</div>
</a>
</div>
{% endfor %}
I am thinking may be I need to build a custom module, and that is might require something like a "repeater" filed as I would need to be able to loop through it.
How can I achieve this? Any help would be greatly appreciated!
7. back in the sidebar, click copy under the repeater group and select "copy snippet"
8. paste the code in a text file or somewhere for reference.
9. from your pasted code, select the {% for item in ... %} and place above the item in your html and add the endfor below the closing div of your item. will look something like this
<div class="repeater-container">
{% for item in module.test_repeater_group %}
<div class="repeater-item">
<img>
<p></p>
</div>
{% endfor %}
</div>
10. now, wherever you have editable values, you will insert the field values. so you will find the value for your image and the all of your text and place the values from the code you have copied. using my example, it will look like this:
7. back in the sidebar, click copy under the repeater group and select "copy snippet"
8. paste the code in a text file or somewhere for reference.
9. from your pasted code, select the {% for item in ... %} and place above the item in your html and add the endfor below the closing div of your item. will look something like this
<div class="repeater-container">
{% for item in module.test_repeater_group %}
<div class="repeater-item">
<img>
<p></p>
</div>
{% endfor %}
</div>
10. now, wherever you have editable values, you will insert the field values. so you will find the value for your image and the all of your text and place the values from the code you have copied. using my example, it will look like this: