Creating a product page with a template file

Question

I am using Drupal 8.3.2 with the Commerce 2 module. I am trying to theme a product page; I enabled Twig debugging and created a commerce-product.html.twig template file to overwrite the default one.

I want to be able to insert the different fields in the HTML markup using Twig, as I have done for custom content types. I created a view and a block; in the block, I added the following markup.

<div class="header">
  <h5>{{ fields.field_header.content}}</h5>
</div>
<div class="body">
  {{ fields.body.content}}
</div>

I am unsure what is the correct way to proceed with product pages.
Should I create a view for a product page, or can I use code similar to the previous one, where I instead use {{ product.field_product_image.content}}?

Answer 1

You should start off with copying the template from the Commerce module /modules/contrib/commerce/modules/product/templates/commerce-product.html.twig:

{#
/**
 * @file
 *
 * Default product 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 }}>
  {{- product|without('variation_attributes') -}}
</article>

You can then adjust the display according to your custom fields, so something like:

<article{{ attributes.addClass('product') }}>
  {{ product.field_header }}

  <div class="body">
      {{ product.body }}
  <div>
  {{- product|without('field_header','body') -}}
</article>