added links on frontpage field labels

web/themes/custom/materiotheme/assets/dist/main.css

@@ -1497,7 +1497,7 @@ aside.messages {
         #content-left .flag-collection > ul > li article.card.minicard > nav.tools .mdi.unflag {
           cursor: pointer; }
 
-article.node--type-frontpage .node__content > section.home-intro > div:nth-child(1) .field__label, article.node--type-frontpage .node__content > section.home-pricing > div:nth-child(1) .field__label, article.node--type-frontpage .node__content > section.home-database > div:nth-child(1) .field__label, article.node--type-frontpage .node__content > section.home-showrooms > div:nth-child(1) .field__label, article.node--type-frontpage .node__content > section.home-blabla > div:nth-child(1) .field__label, article.node--type-frontpage .node__content > section.home-pricing .field--name-computed-products-reference > .field__item .field--name-title {
+article.node--type-frontpage .node__content > section.home-intro > div:nth-child(1) .field__label, article.node--type-frontpage .node__content > section.home-pricing > div:nth-child(1) .field__label, article.node--type-frontpage .node__content > section.home-database > div:nth-child(1) .field__label, article.node--type-frontpage .node__content > section.home-showrooms > div:nth-child(1) .field__label, article.node--type-frontpage .node__content > section.home-blabla > div:nth-child(1) .field__label, article.node--type-frontpage .node__content > section.home-pricing > h3, article.node--type-frontpage .node__content > section.home-pricing .field--name-computed-products-reference > .field__item .field--name-title {
   font-size: 3.5em;
   line-height: 1; }
 
@@ -1530,8 +1530,18 @@ article.node--type-frontpage .node__content > section.home-database, article.nod
 article.node--type-frontpage > h2 {
   display: none; }
 
+article.node--type-frontpage .node__content > section.home-intro .field__item {
+  display: flex;
+  flex-flow: row nowrap;
+  justify-content: center; }
+  article.node--type-frontpage .node__content > section.home-intro .field__item p {
+    flex: 0 0 410px;
+    padding: 1em; }
+
 article.node--type-frontpage .node__content > section.home-database {
   background-color: #69cdcf; }
+  article.node--type-frontpage .node__content > section.home-database .field--name-field-a-database .field__label {
+    cursor: pointer; }
   article.node--type-frontpage .node__content > section.home-database .field--name-field-database-links .field__item {
     display: inline-block; }
     article.node--type-frontpage .node__content > section.home-database .field--name-field-database-links .field__item a {
@@ -1690,8 +1700,26 @@ article.node--type-frontpage .node__content > section.home-blabla {
             font-size: 0.756em;
             line-height: 0.9; }
 
+article.node--type-frontpage .node__content > section.home-pricing > h3 {
+  text-align: center;
+  text-transform: capitalize;
+  padding: 0.7em 0 0.3em 0; }
+
+article.node--type-frontpage .node__content > section.home-pricing .field--name-field-pricing-pitch {
+  text-align: center; }
+  article.node--type-frontpage .node__content > section.home-pricing .field--name-field-pricing-pitch p {
+    margin: 0; }
+
 article.node--type-frontpage .node__content > section.home-pricing .field--name-field-pricing {
-  padding: 2em 0; }
+  display: flex;
+  flex-flow: row nowrap;
+  justify-content: center;
+  padding-bottom: 1em; }
+  article.node--type-frontpage .node__content > section.home-pricing .field--name-field-pricing p {
+    flex: 0 0 410px;
+    padding: 1em;
+    margin: 0;
+    text-align: center; }
 
 article.node--type-frontpage .node__content > section.home-pricing .field--name-computed-products-reference {
   display: flex;

web/themes/custom/materiotheme/assets/styles/main.scss

@@ -573,11 +573,23 @@ article.node--type-frontpage{
     &>section{
       &.home-intro{
         @extend %part-centered-layout;
+        .field__item{
+          display: flex;
+          flex-flow: row nowrap;
+          justify-content: center;
+          p{
+            flex: 0 0 $column_width * 2;
+            padding:1em;
+          }
+        }
       }
       &.home-database{
         background-color: $color-base;
         @extend %part-columned-layout;
         .field--name-field-a-database{
+          .field__label{
+            cursor: pointer;
+          }
         }
         .field--name-field-database-links{
           .field__item{
@@ -806,8 +818,28 @@ article.node--type-frontpage{
       }
       &.home-pricing{
         @extend %part-centered-layout;
+        >h3{
+          @extend %front-col-field__label;
+          text-align: center;
+          text-transform: capitalize;
+          padding: 0.7em 0 0.3em 0;
+        }
+        .field--name-field-pricing-pitch{
+          text-align: center;
+          p{ margin:0;}
+        }
         .field--name-field-pricing{
-          padding:2em 0;
+          // padding:2em 0;
+          display: flex;
+          flex-flow: row nowrap;
+          justify-content: center;
+          padding-bottom: 1em;
+          p{
+            flex: 0 0 $column_width * 2;
+            padding: 1em;
+            margin: 0;
+            text-align: center;
+          }
         }
         .field--name-computed-products-reference{
           display: flex;

web/themes/custom/materiotheme/materiotheme.theme

@@ -150,3 +150,24 @@ function materiotheme_theme_suggestions_taxonomy_term_alter(&$suggestions, &$var
 
   // dsm($suggestions);
 }
+
+function materiotheme_theme_suggestions_field_alter(&$suggestions, &$vars){
+  if($vars['element']["#entity_type"] === "commerce_product_variation"
+    && $vars['element']["#bundle"] === "materio_product_variation_type"
+    && $vars['element']["#field_name"] === "title"){
+    $test = 'test';
+    $original = $vars['theme_hook_original'];
+    $entity_type = $vars['element']["#entity_type"];
+    $bundle = $vars['element']["#bundle"];
+    $field_name = $vars['element']["#field_name"];
+    $viewmode = $vars['element']['#view_mode'];
+    $suggestions[] = $original.'__'.$entity_type.'__'.$bundle.'__'.$field_name.'__'.$viewmode;
+  }
+}
+
+/**
+ * Implements hook_theme_suggestions_commerce_product_variation().
+ */
+// function materiotheme_theme_suggestions_commerce_product_variation_later(&$suggestions, &$vars) {
+//   $test = 'test';
+// }

web/themes/custom/materiotheme/templates/content/field--commerce-product-variation--materio-product-variation-type--title--summary.html.twig

@@ -0,0 +1,87 @@
+{#
+/**
+ * @file
+ * Theme override for a field.
+ *
+ * To override output, copy the "field.html.twig" from the templates directory
+ * to your theme's directory and customize it, just like customizing other
+ * Drupal templates such as page.html.twig or node.html.twig.
+ *
+ * Instead of overriding the theming for all fields, you can also just override
+ * theming for a subset of fields using
+ * @link themeable Theme hook suggestions. @endlink For example,
+ * here are some theme hook suggestions that can be used for a field_foo field
+ * on an article node type:
+ * - field--node--field-foo--article.html.twig
+ * - field--node--field-foo.html.twig
+ * - field--node--article.html.twig
+ * - field--field-foo.html.twig
+ * - field--text-with-summary.html.twig
+ * - field.html.twig
+ *
+ * Available variables:
+ * - attributes: HTML attributes for the containing element.
+ * - label_hidden: Whether to show the field label or not.
+ * - title_attributes: HTML attributes for the title.
+ * - label: The label for the field.
+ * - multiple: TRUE if a field can contain multiple items.
+ * - items: List of all the field items. Each item contains:
+ *   - attributes: List of HTML attributes for each item.
+ *   - content: The field item's content.
+ * - entity_type: The entity type to which the field belongs.
+ * - field_name: The name of the field.
+ * - field_type: The type of the field.
+ * - label_display: The display settings for the label.
+ *
+ *
+ * @see template_preprocess_field()
+ */
+#}
+{%
+  set classes = [
+    'field',
+    'field--name-' ~ field_name|clean_class,
+    'field--type-' ~ field_type|clean_class,
+    'field--label-' ~ label_display,
+    label_display == 'inline' ? 'clearfix',
+  ]
+%}
+{%
+  set title_classes = [
+    'field__label',
+    label_display == 'visually_hidden' ? 'visually-hidden',
+  ]
+%}
+
+{% if label_hidden %}
+  {% if multiple %}
+    <div{{ attributes.addClass(classes, 'field__items') }}>
+      {% for item in items %}
+        <div{{ item.attributes.addClass('field__item') }}>{{ item.content }}</div>
+      {% endfor %}
+    </div>
+  {% else %}
+    {% for item in items %}
+      <div{{ attributes.addClass(classes, 'field__item') }}>
+        <a href="/pricing" @click.prevent="onClickLink">
+          {{ item.content }}
+        </a>
+      </div>
+    {% endfor %}
+  {% endif %}
+{% else %}
+  <div{{ attributes.addClass(classes) }}>
+    <div{{ title_attributes.addClass(title_classes) }}>
+      {{ label }}
+    </div>
+    {% if multiple %}
+      <div class="field__items">
+    {% endif %}
+    {% for item in items %}
+      <div{{ item.attributes.addClass('field__item') }}>{{ item.content }}</div>
+    {% endfor %}
+    {% if multiple %}
+      </div>
+    {% endif %}
+  </div>
+{% endif %}

web/themes/custom/materiotheme/templates/content/field--node--field-a-database--frontpage.html.twig

@@ -0,0 +1,81 @@
+{#
+/**
+ * @file
+ * Theme override for a field.
+ *
+ * To override output, copy the "field.html.twig" from the templates directory
+ * to your theme's directory and customize it, just like customizing other
+ * Drupal templates such as page.html.twig or node.html.twig.
+ *
+ * Instead of overriding the theming for all fields, you can also just override
+ * theming for a subset of fields using
+ * @link themeable Theme hook suggestions. @endlink For example,
+ * here are some theme hook suggestions that can be used for a field_foo field
+ * on an article node type:
+ * - field--node--field-foo--article.html.twig
+ * - field--node--field-foo.html.twig
+ * - field--node--article.html.twig
+ * - field--field-foo.html.twig
+ * - field--text-with-summary.html.twig
+ * - field.html.twig
+ *
+ * Available variables:
+ * - attributes: HTML attributes for the containing element.
+ * - label_hidden: Whether to show the field label or not.
+ * - title_attributes: HTML attributes for the title.
+ * - label: The label for the field.
+ * - multiple: TRUE if a field can contain multiple items.
+ * - items: List of all the field items. Each item contains:
+ *   - attributes: List of HTML attributes for each item.
+ *   - content: The field item's content.
+ * - entity_type: The entity type to which the field belongs.
+ * - field_name: The name of the field.
+ * - field_type: The type of the field.
+ * - label_display: The display settings for the label.
+ *
+ *
+ * @see template_preprocess_field()
+ */
+#}
+{%
+  set classes = [
+    'field',
+    'field--name-' ~ field_name|clean_class,
+    'field--type-' ~ field_type|clean_class,
+    'field--label-' ~ label_display,
+    label_display == 'inline' ? 'clearfix',
+  ]
+%}
+{%
+  set title_classes = [
+    'field__label',
+    label_display == 'visually_hidden' ? 'visually-hidden',
+  ]
+%}
+
+{% if label_hidden %}
+  {% if multiple %}
+    <div{{ attributes.addClass(classes, 'field__items') }}>
+      {% for item in items %}
+        <div{{ item.attributes.addClass('field__item') }}>{{ item.content }}</div>
+      {% endfor %}
+    </div>
+  {% else %}
+    {% for item in items %}
+      <div{{ attributes.addClass(classes, 'field__item') }}>{{ item.content }}</div>
+    {% endfor %}
+  {% endif %}
+{% else %}
+  <div{{ attributes.addClass(classes) }}>
+    <div{{ title_attributes.addClass(title_classes) }} @click.prevent="onClickFieldLabel($event, 'database')">{{ label }}</div>
+    {% if multiple %}
+      <div class="field__items">
+    {% endif %}
+    {% for item in items %}
+      <div{{ item.attributes.addClass('field__item') }}>{{ item.content }}</div>
+    {% endfor %}
+    {% if multiple %}
+      </div>
+    {% endif %}
+  </div>
+{% endif %}

web/themes/custom/materiotheme/templates/content/field--node--field-blabla--frontpage.html.twig

@@ -0,0 +1,84 @@
+{#
+/**
+ * @file
+ * Theme override for a field.
+ *
+ * To override output, copy the "field.html.twig" from the templates directory
+ * to your theme's directory and customize it, just like customizing other
+ * Drupal templates such as page.html.twig or node.html.twig.
+ *
+ * Instead of overriding the theming for all fields, you can also just override
+ * theming for a subset of fields using
+ * @link themeable Theme hook suggestions. @endlink For example,
+ * here are some theme hook suggestions that can be used for a field_foo field
+ * on an article node type:
+ * - field--node--field-foo--article.html.twig
+ * - field--node--field-foo.html.twig
+ * - field--node--article.html.twig
+ * - field--field-foo.html.twig
+ * - field--text-with-summary.html.twig
+ * - field.html.twig
+ *
+ * Available variables:
+ * - attributes: HTML attributes for the containing element.
+ * - label_hidden: Whether to show the field label or not.
+ * - title_attributes: HTML attributes for the title.
+ * - label: The label for the field.
+ * - multiple: TRUE if a field can contain multiple items.
+ * - items: List of all the field items. Each item contains:
+ *   - attributes: List of HTML attributes for each item.
+ *   - content: The field item's content.
+ * - entity_type: The entity type to which the field belongs.
+ * - field_name: The name of the field.
+ * - field_type: The type of the field.
+ * - label_display: The display settings for the label.
+ *
+ *
+ * @see template_preprocess_field()
+ */
+#}
+{%
+  set classes = [
+    'field',
+    'field--name-' ~ field_name|clean_class,
+    'field--type-' ~ field_type|clean_class,
+    'field--label-' ~ label_display,
+    label_display == 'inline' ? 'clearfix',
+  ]
+%}
+{%
+  set title_classes = [
+    'field__label',
+    label_display == 'visually_hidden' ? 'visually-hidden',
+  ]
+%}
+
+{% if label_hidden %}
+  {% if multiple %}
+    <div{{ attributes.addClass(classes, 'field__items') }}>
+      {% for item in items %}
+        <div{{ item.attributes.addClass('field__item') }}>{{ item.content }}</div>
+      {% endfor %}
+    </div>
+  {% else %}
+    {% for item in items %}
+      <div{{ attributes.addClass(classes, 'field__item') }}>{{ item.content }}</div>
+    {% endfor %}
+  {% endif %}
+{% else %}
+  <div{{ attributes.addClass(classes) }}>
+    <div{{ title_attributes.addClass(title_classes) }}>
+      <a href="/blabla" @click.prevent="onClickLink">
+        {{ label }}</div>
+      </a>
+    {% if multiple %}
+      <div class="field__items">
+    {% endif %}
+    {% for item in items %}
+      <div{{ item.attributes.addClass('field__item') }}>{{ item.content }}</div>
+    {% endfor %}
+    {% if multiple %}
+      </div>
+    {% endif %}
+  </div>
+{% endif %}

web/themes/custom/materiotheme/templates/content/field--node--field-showrooms--frontpage.html.twig

@@ -0,0 +1,84 @@
+{#
+/**
+ * @file
+ * Theme override for a field.
+ *
+ * To override output, copy the "field.html.twig" from the templates directory
+ * to your theme's directory and customize it, just like customizing other
+ * Drupal templates such as page.html.twig or node.html.twig.
+ *
+ * Instead of overriding the theming for all fields, you can also just override
+ * theming for a subset of fields using
+ * @link themeable Theme hook suggestions. @endlink For example,
+ * here are some theme hook suggestions that can be used for a field_foo field
+ * on an article node type:
+ * - field--node--field-foo--article.html.twig
+ * - field--node--field-foo.html.twig
+ * - field--node--article.html.twig
+ * - field--field-foo.html.twig
+ * - field--text-with-summary.html.twig
+ * - field.html.twig
+ *
+ * Available variables:
+ * - attributes: HTML attributes for the containing element.
+ * - label_hidden: Whether to show the field label or not.
+ * - title_attributes: HTML attributes for the title.
+ * - label: The label for the field.
+ * - multiple: TRUE if a field can contain multiple items.
+ * - items: List of all the field items. Each item contains:
+ *   - attributes: List of HTML attributes for each item.
+ *   - content: The field item's content.
+ * - entity_type: The entity type to which the field belongs.
+ * - field_name: The name of the field.
+ * - field_type: The type of the field.
+ * - label_display: The display settings for the label.
+ *
+ *
+ * @see template_preprocess_field()
+ */
+#}
+{%
+  set classes = [
+    'field',
+    'field--name-' ~ field_name|clean_class,
+    'field--type-' ~ field_type|clean_class,
+    'field--label-' ~ label_display,
+    label_display == 'inline' ? 'clearfix',
+  ]
+%}
+{%
+  set title_classes = [
+    'field__label',
+    label_display == 'visually_hidden' ? 'visually-hidden',
+  ]
+%}
+
+{% if label_hidden %}
+  {% if multiple %}
+    <div{{ attributes.addClass(classes, 'field__items') }}>
+      {% for item in items %}
+        <div{{ item.attributes.addClass('field__item') }}>{{ item.content }}</div>
+      {% endfor %}
+    </div>
+  {% else %}
+    {% for item in items %}
+      <div{{ attributes.addClass(classes, 'field__item') }}>{{ item.content }}</div>
+    {% endfor %}
+  {% endif %}
+{% else %}
+  <div{{ attributes.addClass(classes) }}>
+    <div{{ title_attributes.addClass(title_classes) }}>
+      <a href="/showrooms" @click.prevent="onClickLink">
+        {{ label }}</div>
+      </a>
+    {% if multiple %}
+      <div class="field__items">
+    {% endif %}
+    {% for item in items %}
+      <div{{ item.attributes.addClass('field__item') }}>{{ item.content }}</div>
+    {% endfor %}
+    {% if multiple %}
+      </div>
+    {% endif %}
+  </div>
+{% endif %}

web/themes/custom/materiotheme/templates/content/field-group-html-element--node--frontpage--group-pricing.html.twig

@@ -0,0 +1,34 @@
+{#
+/**
+ * @file
+ * Default theme implementation for a fieldgroup html element.
+ *
+ * Available variables:
+ * - title: Title of the group.
+ * - title_element: Element to wrap the title.
+ * - children: The children of the group.
+ * - wrapper_element: The html element to use
+ * - attributes: A list of HTML attributes for the group wrapper.
+ *
+ * @see template_preprocess_field_group_html_element()
+ *
+ * @ingroup themeable
+ */
+#}
+
+<{{ wrapper_element }} {{ attributes }}>
+  {% if title %}
+  <{{ title_element }}{{ title_attributes }}>
+    <a href="/pricing" @click.prevent="onClickLink">
+      {{ title }}
+    </a>
+  </{{ title_element }}>
+  {% endif %}
+  {% if collapsible %}
+  <div class="field-group-wrapper">
+  {% endif %}
+  {{children}}
+  {% if collapsible %}
+  </div>
+  {% endif %}
+</{{ wrapper_element }}>

web/themes/custom/materiotheme/vuejs/components/Pages/Home.vue

@@ -134,6 +134,9 @@ export default {
           path: path
         })
       }
+    },
+    onClickFieldLabel(e){
+      console.log("onClickFieldLabel", e, this.$router, this.$route);
     }
   },
   watch: {