How to name twig files by the region they are in? - html

Question

I am using Drupal with the Commerce Module to build a webshop. I am using the Commerce Cart Block to display a cart icon with the amount of items in the cart, in the navigation bar.
Now I would also like to display the Cart Block on the Cart page, but with a different template than being used in the navigation bar.
I am using the debug mode, which let me see what I could call the file names to use them like I would like to. But above both Cart Blocks it says the same file name, so I can't output two different templates. I tried putting primary_menu-- before the navigation cart block and content-- (the region the cart block is going to be in), but they don't work.
<!-- THEME DEBUG -->
<!-- THEME HOOK: 'commerce_cart_block' -->
<!-- BEGIN OUTPUT from 'themes/custom/verdamigo/templates/commerce-cart-block.html.twig' -->
This is shown above both cart blocks (which are on the same page). So how can I use two different templates for both blocks.
primary_menu--commerce-cart-block.html.twig
is not working.
I would like to be able to edit both the block in the primary_menu and the block in the content-region. But both carts get output with the same template.

Answer 1

In an effort to decouple Blocks from Displays, Drupal 8 renders a block independently of which display it's in and what region/weight it has in that display (see Twig Template naming conventions) :
Region-specific block templates are not available in Drupal 8.
This removes the ability to override block.tpl.php by region, and for hook_preprocess_block() to adjust variables based on it. Instead, core developers recommend to manage block template overrides with CSS or using additional blocks.
But you can still work around this by implementing hook_theme_suggestions_HOOK_alter() :
function SOME_theme_suggestions_block_alter(array &$suggestions, array $variables) {
if (!empty($variables['elements']['#id'])) {
$block_id = $variables['elements']['#id'];
$block = Drupal\block\Entity\Block::load(block_id);
$region = $block->getRegion();
// Allow per-region block templating.
$suggestions[] = 'block__' . $region . '__' . $block_id;
}
return $suggestions;
}
Note : the template name should begin with "block" since you override a block template, so in your case the override file should be named block--primary_menu--commerce-cart-block.html.twig.