Product Variant Detail Page

Question

I guess this is no big issue, but I'm pretty new to Craft Commerce :) I'm trying to code a dynamic template for the product variants page.

This is the scenario: In the shop overview you see every product and all there variants. If you click on a variant image a detail page opens, showing you detailed information about this variant.

How can I access data of the variant (like title, description, asset) dynamically? Based on what the user clicked on?

I've already tried these two answers:

How do I select a specific product variant by element/field/entry?

Display image asset of a variant

The thing is, I can't use lineItem because the variant is not added to the cart yet. And I didn't manage to get the specific variant over getSegment and the url.

Answer 1

If I understand correctly you can check for available variants, then output whatever detail you need for the items. Something like this should get you started:

{# Check there are variants #}
{% if product.variants|length %}

  {# Loop through the variants #}
  {%- for purchasable in product.variants -%}

    {# Check the variant is available #}
    {% if purchasable.stock <= 0 and purchasable.unlimitedStock == false %}

      {{ purchasable.description }}
      {{ purchasable.salePrice|commerceCurrency(cart.currency) }}

    {% endif %}
  {%- endfor -%}

  {% else %}
    {{ "Out of Stock"|t }}
  {% endif %}

{% endif %}

If you want to target only a specific variant you can refer to it directly using either its title (slug) or its variant ID, e.g.:

{% set variants = craft.commerce.variants.id(8376).first() %}

You can find more detail in the docs for the Variant Model and the docs for Craft Commerce Variants.