Metaobject product variant field get variant properties (product url)

[dannyelo]

Hello,

I created a metaobject for reviews and in one of the fields I put a product variant.

When I loop the metaobject the review.product_variant property returns the gid of the variant.

<p>{{ review.product_variant }}</p>

// --> this returns the ID of each variant:
gid://shopify/ProductVariant/xxxxxxxxxxxxxx

I was able to extract the image of the variant with this code.

<img src="{{ review.product_variant | image_url: width: '400px' }}">

What I can't do is get the product url so that the user can click and take him to that product.

I'm looking for something like this:

<a href="{{ review.product_variant.url }}">Go to product</a>

Is there a filter that transform the gid to the product url? Or any other solution?

Metaobject screenshot

Any help is appreciated.

Thanks!

Here is the complete code.

<section class="reviews-section">
  <div id="reviews-wrapper">
    {% for review in shop.metaobjects.reviews.values %}
      <div id="reviews-card-num{{ forloop.index }}" class="reviews-card reviews-card-num{{ forloop.index }}">
        <p class="reviews-description">
          {{ review.description }}
        </p>
        <h4 class="reviews-customer-name">{{ review.customer_name }}</h4>
        <div class="reviews-image-wrapper">
          <img src="{{ review.product_variant | image_url: width: '400px' }}" alt="" class="reviews-image">
        </div>

        <p>{{ review.product_variant }}</p>

      </div>
    {% endfor %}
  </div>
</section>

[_backend]

I had the same dilemma and finally found the answer!

Here are the product variant properties: https://shopify.dev/docs/api/admin-rest/2023-07/resources/product-variant

To get the product variant url:

<a href="http://yourdomain.co{{ review.product_variant.value.url }}">

yourdomain.co{{ review.product_variant.value.url }}

</a>