<p>You can eager-load elements that were already loaded (like an Entry or Product that Craft set up for you &quot;outside&quot; a template) like this:</p>
<pre><code>{% do craft.app.elements.eagerLoadElements(
  className(product),
  [product],
  [
    ['variants.variantImage', { withTransforms: ['thumbnail'] }],
  ]
) %}
</code></pre>
<p>This will load + set any downstream elements, just as though you'd chained an equivalent <code>.with()</code> on the original query.</p>
<p>A couple notes:</p>
<ul>
<li><code>className()</code> is used to capture the fully-qualified name of the Element class. It's required to let Craft know what kind of eager-loadable properties the specific Element Type has;</li>
<li><code>[product]</code> is an array, because eager-loading is always done in &quot;bulk,&quot; even for a single source element;</li>
</ul>
<p>You can do a similar thing directly on the Variants, if you've got a reference to them, already:</p>
<pre><code>{% set variants = product.variants %}
{% do craft.app.elements.eagerLoadElements(
  className(variants | first),
  variants,
  [
    ['variantImage', { withTransforms: ['thumbnail'] }],
  ]
) %}
</code></pre>

CC BY-SA 4.0
2022-02-11T19:43:54.537Z
2022-02-13T05:13:14.870Z
2022-02-13T05:13:14.870Z
August Miller
<p>In a commerce store that I'm trying out, my product variants have a variant image field.</p>
<p>I need to get an array of all the variant images in my product template.</p>
<p>I know I can do something like</p>
<p><code>{% set variantImages = product.variants|map(variant =&gt; variant.variantImage.one() )}</code></p>
<p>but I believe this will execute a query for each variant.</p>
<p>I am aware of <a href="https://craftcms.com/docs/3.x/dev/eager-loading-elements.html" rel="nofollow noreferrer">eager loading in craft</a>, but I am not sure how to use it in this case, as I am not writing a query to get the product or variants - craft auto-injects those into the product template.</p>
<p>How would I eager load the assets of a variant from within the product template?</p>

<eager-loading><variants>
Eager loading of variant images
# Eager loading of variant images

(Asked by: username_0 on 2022-02-11)

In a commerce store that I'm trying out, my product variants have a variant image field.

I need to get an array of all the variant images in my product template.

I know I can do something like

`{% set variantImages = product.variants|map(variant => variant.variantImage.one() )}`

but I believe this will execute a query for each variant.

I am aware of [eager loading in craft](https://craftcms.com/docs/3.x/dev/eager-loading-elements.html), but I am not sure how to use it in this case, as I am not writing a query to get the product or variants - craft auto-injects those into the product template.

How would I eager load the assets of a variant from within the product template?

**Tags:** eager-loading, variants


---

## 1 answers

### Answer by username_1 on 2022-02-11. Score: 4 | Accepted answer

You can eager-load elements that were already loaded (like an Entry or Product that Craft set up for you "outside" a template) like this:
{% do craft.app.elements.eagerLoadElements(
  className(product),
  [product],
  [
    ['variants.variantImage', { withTransforms: ['thumbnail'] }],
  ]
) %}

This will load + set any downstream elements, just as though you'd chained an equivalent .with() on the original query.
A couple notes:

className() is used to capture the fully-qualified name of the Element class. It's required to let Craft know what kind of eager-loadable properties the specific Element Type has;
[product] is an array, because eager-loading is always done in "bulk," even for a single source element;

You can do a similar thing directly on the Variants, if you've got a reference to them, already:
{% set variants = product.variants %}
{% do craft.app.elements.eagerLoadElements(
  className(variants | first),
  variants,
  [
    ['variantImage', { withTransforms: ['thumbnail'] }],
  ]
) %}


---

