From dfe6a210211d544d68cc2ae8b7e649def3fdec54 Mon Sep 17 00:00:00 2001
From: Bachir Soussi Chiadmi <bachir@figureslibres.io>
Date: Mon, 4 Jan 2021 14:31:29 +0100
Subject: [PATCH] added product vairations buttons on frontpage

---
 .../custom/materiotheme/assets/dist/main.css  | 14 ++++++++++
 .../materiotheme/assets/styles/main.scss      | 12 ++++++++-
 ...-product-variation-type--summary.html.twig | 27 +++++++++++++++++++
 3 files changed, 52 insertions(+), 1 deletion(-)
 create mode 100644 web/themes/custom/materiotheme/templates/content/commerce-product-variation--materio-product-variation-type--summary.html.twig

diff --git a/web/themes/custom/materiotheme/assets/dist/main.css b/web/themes/custom/materiotheme/assets/dist/main.css
index 069895b..04c5b52 100644
--- a/web/themes/custom/materiotheme/assets/dist/main.css
+++ b/web/themes/custom/materiotheme/assets/dist/main.css
@@ -1731,10 +1731,24 @@ article.node--type-frontpage .node__content > section.home-pricing .field--name-
     color: #fff;
     position: relative;
     height: 18em; }
+    article.node--type-frontpage .node__content > section.home-pricing .field--name-computed-products-reference > .field__item a.btn {
+      display: inline-block;
+      font-size: 0.9em;
+      font-weight: bold;
+      padding: 0.7em 1em;
+      margin-bottom: 0.3em;
+      background-color: #fff;
+      color: #000;
+      border-radius: 5px;
+      background-color: #fff; }
     article.node--type-frontpage .node__content > section.home-pricing .field--name-computed-products-reference > .field__item:nth-child(1) {
       background-color: #69cdcf; }
+      article.node--type-frontpage .node__content > section.home-pricing .field--name-computed-products-reference > .field__item:nth-child(1) a.btn {
+        color: #69cdcf; }
     article.node--type-frontpage .node__content > section.home-pricing .field--name-computed-products-reference > .field__item:nth-child(2) {
       background-color: #ff9f50; }
+      article.node--type-frontpage .node__content > section.home-pricing .field--name-computed-products-reference > .field__item:nth-child(2) a.btn {
+        color: #ff9f50; }
     article.node--type-frontpage .node__content > section.home-pricing .field--name-computed-products-reference > .field__item > div {
       position: absolute;
       top: 50%;
diff --git a/web/themes/custom/materiotheme/assets/styles/main.scss b/web/themes/custom/materiotheme/assets/styles/main.scss
index 6cdebc9..1126f84 100644
--- a/web/themes/custom/materiotheme/assets/styles/main.scss
+++ b/web/themes/custom/materiotheme/assets/styles/main.scss
@@ -849,11 +849,21 @@ article.node--type-frontpage{
             flex:0 0 50%;
             text-align: center;
             padding: 2em 0;
+            a.btn{
+              @include btn;
+              background-color: #fff;
+            }
             &:nth-child(1){
-              background-color: $color-base
+              background-color: $color-base;
+              a.btn{
+                color: $color-base;
+              }
             }
             &:nth-child(2){
               background-color: $color-webshowroom;
+              a.btn{
+                color: $color-webshowroom;
+              }
             }
             color: #fff;
             position: relative;
diff --git a/web/themes/custom/materiotheme/templates/content/commerce-product-variation--materio-product-variation-type--summary.html.twig b/web/themes/custom/materiotheme/templates/content/commerce-product-variation--materio-product-variation-type--summary.html.twig
new file mode 100644
index 0000000..01799b6
--- /dev/null
+++ b/web/themes/custom/materiotheme/templates/content/commerce-product-variation--materio-product-variation-type--summary.html.twig
@@ -0,0 +1,27 @@
+{#
+/**
+ * @file
+ *
+ * Default template for product variations.
+ *
+ * Available variables:
+ * - attributes: HTML attributes for the wrapper.
+ * - product_variation: The rendered product variation fields.
+ *   Use 'product_variation' to print them all, or print a subset such as
+ *   'product_variation.title'. Use the following code to exclude the
+ *   printing of a given field:
+ *   @code
+ *   {{ product_variation|without('title') }}
+ *   @endcode
+ * - product_variation_entity: The product variation entity.
+ * - product_url: The product URL.
+ *
+ * @ingroup themeable
+ */
+#}
+<div{{ attributes }}>
+  {{- product_variation -}}
+  <a href="/pricing" @click.prevent="onClickLink" class="btn">
+    {% trans %}View Option Details{% endtrans %}
+  </a>
+</div>