added links on frontpage field labels

config/sync/block.block.materiosimplenewssubscription.yml

@@ -5,6 +5,7 @@ dependencies:
   module:
     - context
     - materio_simplenews
+    - user
   theme:
     - materiotheme
 id: materiosimplenewssubscription
@@ -33,3 +34,10 @@ visibility:
     pages: ''
     negate: null
     context_mapping: {  }
+  user_role:
+    id: user_role
+    roles:
+      anonymous: anonymous
+    negate: false
+    context_mapping:
+      user: '@user.current_user_context:current_user'

config/sync/core.entity_form_display.node.frontpage.default.yml

@@ -8,6 +8,7 @@ dependencies:
     - field.field.node.frontpage.field_blabla_links
     - field.field.node.frontpage.field_database_links
     - field.field.node.frontpage.field_pricing
+    - field.field.node.frontpage.field_pricing_pitch
     - field.field.node.frontpage.field_showroom_links
     - field.field.node.frontpage.field_showrooms
     - field.field.node.frontpage.field_what_is_materio
@@ -96,6 +97,7 @@ third_party_settings:
     group_pricing:
       children:
         - field_pricing
+        - field_pricing_pitch
       parent_name: group_htabs
       weight: 23
       format_type: tab
@@ -152,6 +154,14 @@ content:
     third_party_settings: {  }
     type: text_textarea
     region: content
+  field_pricing_pitch:
+    weight: 1
+    settings:
+      size: 60
+      placeholder: ''
+    third_party_settings: {  }
+    type: text_textfield
+    region: content
   field_showroom_links:
     weight: 4
     settings:

config/sync/core.entity_view_display.node.frontpage.default.yml

@@ -8,6 +8,7 @@ dependencies:
     - field.field.node.frontpage.field_blabla_links
     - field.field.node.frontpage.field_database_links
     - field.field.node.frontpage.field_pricing
+    - field.field.node.frontpage.field_pricing_pitch
     - field.field.node.frontpage.field_showroom_links
     - field.field.node.frontpage.field_showrooms
     - field.field.node.frontpage.field_what_is_materio
@@ -97,14 +98,14 @@ third_party_settings:
       region: content
     group_pricing:
       children:
+        - field_pricing_pitch
         - field_pricing
         - computed_products_reference
       parent_name: ''
       weight: 4
       format_type: html_element
       format_settings:
-        element: section
-        show_label: false
+        show_label: true
         label_element: h3
         label_element_classes: ''
         attributes: ''
@@ -112,6 +113,7 @@ third_party_settings:
         speed: fast
         id: ''
         classes: home-pricing
+        element: section
       label: pricing
       region: content
     group_db_col_left:
@@ -324,7 +326,14 @@ content:
     region: content
   field_pricing:
     weight: 5
-    label: above
+    label: hidden
+    settings: {  }
+    third_party_settings: {  }
+    type: text_default
+    region: content
+  field_pricing_pitch:
+    weight: 4
+    label: hidden
     settings: {  }
     third_party_settings: {  }
     type: text_default

config/sync/core.entity_view_display.node.frontpage.teaser.yml

@@ -9,6 +9,7 @@ dependencies:
     - field.field.node.frontpage.field_blabla_links
     - field.field.node.frontpage.field_database_links
     - field.field.node.frontpage.field_pricing
+    - field.field.node.frontpage.field_pricing_pitch
     - field.field.node.frontpage.field_showroom_links
     - field.field.node.frontpage.field_showrooms
     - field.field.node.frontpage.field_what_is_materio
@@ -76,6 +77,7 @@ hidden:
   field_blabla_links: true
   field_database_links: true
   field_pricing: true
+  field_pricing_pitch: true
   field_showroom_links: true
   field_showrooms: true
   field_what_is_materio: true

config/sync/field.field.node.frontpage.field_pricing_pitch.yml

@@ -0,0 +1,21 @@
+uuid: 3c7164c6-f8eb-449f-b394-47764bc10ae5
+langcode: en
+status: true
+dependencies:
+  config:
+    - field.storage.node.field_pricing_pitch
+    - node.type.frontpage
+  module:
+    - text
+id: node.frontpage.field_pricing_pitch
+field_name: field_pricing_pitch
+entity_type: node
+bundle: frontpage
+label: 'Pricing pitch'
+description: ''
+required: false
+translatable: true
+default_value: {  }
+default_value_callback: ''
+settings: {  }
+field_type: text

config/sync/field.storage.node.field_pricing_pitch.yml

@@ -0,0 +1,24 @@
+uuid: 7fb3d321-c82e-43d9-8350-eb2821556692
+langcode: en
+status: true
+dependencies:
+  module:
+    - field_permissions
+    - node
+    - text
+third_party_settings:
+  field_permissions:
+    permission_type: public
+id: node.field_pricing_pitch
+field_name: field_pricing_pitch
+entity_type: node
+type: text
+settings:
+  max_length: 255
+module: text
+locked: false
+cardinality: 1
+translatable: true
+indexes: {  }
+persist_with_no_fields: false
+custom_storage: false

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: {