.twig - built-in product variation title/label should be exposed to .twig templates [#2912956]

The following two built in - product variation - field names work in .twig ...

However, neither of the following two - product variation field - names work, and there isn't any documentation available about what would work, or if the field names have been exposed to the .twig template:

So, what is the .twig variable name for the built-in product variation title/label field?

(example .twig template used for testing the above)


{#
/**
 * @file
 *
 * product entity template.
 *
 * Available variables:
 * - attributes: HTML attributes for the wrapper.
 * - product: The rendered product fields.
 *   Use 'product' to print them all, or print a subset such as
 *   'product.title'. Use the following code to exclude the
 *   printing of a given field:
 *   @code
 *   {{ product|without('title') }}
 *   @endcode
 * - product_entity: The product entity.
 * - product_url: The product URL.
 *
 *
 * @ingroup themeable
 */
#}

<article{{ attributes }}>
  <div class="dc-intro-description">
    {{ product.body }}
  </div>
  <div class="row">
    {# the following div and CSS bootstrap classes setup the first of two columns #}  
    <div class="col-md-6">
      <div class="dc-product--images">
        {{ product.variation_field_product_variation_image }}
      </div>
    </div>  
    {# the following div and CSS bootstrap classes setup the second of two columns, displaying product detail fields #}  
    <div class="col-md-6">
      <div class="dc-product--details">
        {# the following product.title variable works #}  
        <h3 class="dc-product-title">{{ product.title }}</h3>        
        {# the following product.variation_title does not work #}  
        <h4 class="dc-product-variation-title">{{ product.variation_title }}</h4>        
        {# the following product.variation_label does not work #}  
        <h4 class="dc-product-variation-title">{{ product.variation_label }}</h4>        
        {{ product.field_brand }}
        {{ product.variation_field_product_variation_body }}
        {{ product.variation_sku }}
        {{ product.variation_price }}
        {{ product.variations }}
      </div>
    </div>  
  </div>
  {# large text field with bootstrap tabs to display product spec details #}  
  <div class="dc-product-specifications">
    {{ product.field_specifications }}
  </div>  
</article>

(posting bug reports to help make DC 2.x the best that it might be)

Comments

Comment #1

30 September 2017 at 15:09

DrupalWebsiteBuilder created an issue. See original summary.

Comment #2

mglaman

English

WI, USA

commented 30 September 2017 at 18:22

Component:	Product	» Documentation
Assigned:	Unassigned	» mglaman

Fields displayed are managed by commerce_product.variation_field_renderer. Inside of \Drupal\commerce_product\ProductViewBuilder::alterBuild we inject the fields.

When you enable Twig debugging it should show the field templates available, still, for overriding and adjusting the Twig output.

That is supposed to be documented in https://docs.drupalcommerce.org/commerce2/developer-guide/products/theme..., but it is not (yet.)

Going to assign to me as documentation for the flight home in a few days. Let me know if there is more detail needed beyond clarifying how they are injected, and that using `twig.debug: true`.

Comment #3

websiteworkspace commented 1 October 2017 at 14:34

1. So, your comment describes where in the code it injects the relevant variable names into the .twig template, so thanks for that.

2. For expediency, as I go looking, after enabling .twig debugging, what is the name of the variation title/label, if not the following:

product.variation_title
product.variation_label

since it seems like one of the two above would have been logical given the naming conventions used to generate:

product.variation_sku
product.variation_price

which I have working along with other variation field .twig variables??

3. Regarding the future documentation for this at:

https://docs.drupalcommerce.org/commerce2/developer-guide/products/theme...

It seems like the theming use case is to use - commerce-product.html.twig - for most details, and not so much the page .twig template.

I suspect many people are looking forward to the documentation above and throughout that site. For the theming section, it seems like detailed reference lists of the .twig variables available within each .twig template would be an essential component of that documentation.

I'll keep checking back to the docs to see what the updates like look.
Are docs comments/suggestions welcome?

Comment #4

websiteworkspace commented 1 October 2017 at 15:06

So in:

modules\commerce\modules\product\src\ProductVariationFieldRenderer.php

the code lists the built-in fields:


protected function getAllowedBaseFields() {
    return ['title', 'sku', 'price'];
  }

Given the above, why isn't - product.variation_title - working within the .twig template?

Also, the code in:

modules\commerce\modules\product\src\ProductViewBuilder.php


protected function alterBuild(array &$build, EntityInterface $entity, EntityViewDisplayInterface $display, $view_mode) {
    $product_type_storage = $this->entityManager->getStorage('commerce_product_type');
    /** @var \Drupal\commerce_product\ProductVariationStorageInterface $variation_storage */
    $variation_storage = $this->entityManager->getStorage('commerce_product_variation');
    /** @var \Drupal\commerce_product\Entity\ProductTypeInterface $product_type */
    $product_type = $product_type_storage->load($entity->bundle());
    if ($product_type->shouldInjectVariationFields() && $entity->getDefaultVariation()) {
      $variation = $variation_storage->loadFromContext($entity);
      $attribute_field_names = $variation->getAttributeFieldNames();
      $rendered_fields = $this->variationFieldRenderer->renderFields($variation, $view_mode);
      foreach ($rendered_fields as $field_name => $rendered_field) {
        // Group attribute fields to allow them to be excluded together.
        if (in_array($field_name, $attribute_field_names)) {
          $build['variation_attributes']['variation_' . $field_name] = $rendered_field;
        }
        else {
          $build['variation_' . $field_name] = $rendered_field;
        }
      }
    }
  }

}

Is some what abstract because, although it documents the convention of - product.variation_{somefieldname} - it iterates through the fields, but at the code level above isn't explicit about them.