Help with Macros

Question

I have tried to setup the following Macro to reuse code for product teasers across my site. The macros looks like this;

{% macro teaser(imgSize, className) %}
    <div class="product-teaser{% if className %} // {{ className }}{% endif %}">
        {% import '_macros/_img' as m_img %}
        {% set thumbAsset = product.productImage.first() %}
        <a href="{{ product.url }}">
            {{ m_img.fixedSize(thumbAsset, imgSize, {alt: product.title, class: 'product-teaser__img' }) }}
        </a>
        <h3 class="product-teaser__title{% if className %} // {{ className }}__title{% endif %}">{{ product.title }}</h3>
        <p class="product-teaser__price{% if className %} // {{ className }}__price{% endif %}">{{ product.defaultPrice|currency(cart.currency) }}</p>

        <p>
            <a href="{{ product.url }}" class="btn // btn--sub">View Product</a>
            {# <a href="" class="btn // btn--base">Canine Range</a> #}
        </p>
    </div>
{% endmacro %}

and an example to call it like this:

{% set products = craft.commerce.products.relatedTo(category)%}
{% for product in products %}
    {% import '_macros/_product' as product %}
    {{ product.teaser(300, "product-teaser--in-list") }}
{% endfor %}

However, the error I get back is

Variable "product" does not exist

Any idea what I am doing wrong?

EDIT: just to add a bit more feedback. The full error is:

Answer 1

product is not defined inside your macro. As the twig macro documentation says:

as with PHP functions, macros don't have access to the current template variables.

So you will need to pass this one in:

{% macro teaser(product, imgSize, className) %}

And when you call it:

{{ m_product.teaser(product, 300, "product-teaser--in-list") }}

I would also add sensible defaults (if there are any that are sensible) for the macro arguments:

{% macro teaser(product, imgSize=300, className='product-teaser--in-list') %}

Answer 2

Yes! You have two things called product:

{% for product in products %}

and

{% import '_macros/_product' as product %}

What I would do is

{% import '_macros/_product' as m_product %}
{{ m_product.teaser(300, "product-teaser--in-list") }}