I can print title of my content-type using {{ fields.title.content }}. and it renders like <a href='...'>Title of the content</a>. I have created a View (view mode: field) and showing a list of available products on that page. To customize look and feel of the page I copied views-view-fields.html.twig file from core/themes/stable/template/views under my theme's template directory and customized it the following way.

<div class="col-md-2 col-sm-2 col-xs-12">
    <div class="box-gray-border-only border-radius-5 padd-all-5">
        {{ fields.field_product_image.content }}
<div class="col-md-10 col-sm-10 col-xs-12">
    <h3 class="item-list-title-anchor margin-auto larger">{{ fields.title.content }}</h3>
    <p class="margin-t10 small">{{ fields.field_product_summary.content|striptags|convert_encoding('UTF-8', 'HTML-ENTITIES') }}</p>
<div class="clearfix"></div>
<div class="row">
    <div class="col-md-12 col-sm-12 col-sx-12 text-right">
        <span>{{ fields.field_category.content }}</span>&nbsp;|&nbsp;
        <span><b class="text-red">Price: {{ fields.field_product_price.content }}</b></span>&nbsp;
        <a title="{{ fields.content.title }}" class="btn btn-warning" href="{{ path('entity.node.canonical', { 'node' : node.id}) }}">View &raquo;</a>
    <div class="clearfix"></div>
<div class="margin-t20"></div>
<hr />

The title itself is linked to product's page. But I have an additional View button which I want to link to the product page separately as well. In order to accomplish the same I tried to extract the URL part from the title with {{ path('entity.node.canonical', { 'node' : node.id}) }}. But it gives me the following error message.

Symfony\Component\Routing\Exception\InvalidParameterException: Parameter "node" for route "entity.node.canonical" must match "\d+" ("" given) to generate a corresponding URL. in Drupal\Core\Routing\UrlGenerator->doGenerate() (line 193 of core\lib\Drupal\Core\Routing\UrlGenerator.php).

I am referring to this article: https://chromatichq.com/blog/creating-links-within-twig-templates-using-path-and-url

What I did wrong?

This is what I want to achieve:

enter image description here

I used {{ dump(fields.title.content) }} to see if I the URL could be accessible, but there was nothing like it.

  • Are you using drupal commerce 8.x-2.x-dev or are your products just nodes?
    – Andrew Nim
    Dec 1 '16 at 14:25
  • I am using Drupal 8.2.3. I am on Windows. Downloaded 8.2.3 from Acqiua Dev Desktop software. Dec 1 '16 at 14:30
  • 1
    So try {{ path('entity.node.canonical', { 'node' : row.nid}) }}. Also use kint or devel_dump for twig debug
    – Andrew Nim
    Dec 1 '16 at 14:39
  • Awesome @AndrewNim. +1. You made my night! Dec 1 '16 at 14:41
  • If you don't mind i will add my answer for you to mark as right.
    – Andrew Nim
    Dec 1 '16 at 14:43

Try {{ path('entity.node.canonical', { 'node' : row.nid}) }}. Also it is better to use kint or devel_dump for twig debug.

  • I tried {{ dump(fields.title.content) }} but it did not give me enough information. Only gave this (please note: I have twig debug enabled) object(Drupal\Core\Render\Markup)#1278 (1) { ["string":protected]=> string(366) " <!-- THEME DEBUG --> <!-- THEME HOOK: 'views_view_field' --> <!-- BEGIN OUTPUT from 'core/themes/stable/templates/views/views-view-field.html.twig' --> <a href="/product/lenovo-vibe-k5-plus-3-gb-dark-grey-16-gb" hreflang="en">Lenovo Vibe K5 Plus 3 GB (Dark Grey, 16 GB)</a> <!-- END OUTPUT from 'core/themes/stable/templates/views/views-view-field.html.twig' --> " } Dec 1 '16 at 14:50
  • Thank you once again for your enormous help! I will go through those articles :) Dec 1 '16 at 14:54

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.