handling page redirector style

blocks/page-redirector/page-redirector.php

@@ -1,14 +1,68 @@
 <?php
-// $dates_seminaire = get_field('dates_seminaire_datas');
 
-$searchPageId = 43;
-$searchPageTitle = get_the_title($searchPageId);
-$searchPageUrl = get_post_permalink($searchPageId);
-$searchPageIcon = get_field('page_icon', $searchPageId) ?? null;
 
+$relatedPageName = get_field('related_page') ?? null;
+$subtitle = get_field('subtitle') ?? "";
+
+if (!function_exists('get_related_page_datas')) {
+	function get_related_page_datas($relatedPageName,)
+	{
+		$currentLanguage = apply_filters('wpml_current_language', null) ?? "nl";
+		$metiersRessourcesFolderPath = get_stylesheet_directory_uri() . '/resources';
+
+		switch_to_blog(1);
+		$relatedPagesChoices = [
+			array(
+				'page' => 'patrimoine',
+				'title' => __('Patrimoine', 'metiers-patrimoine-theme'),
+				'ID_fr' => 2951,
+				'ID_nl' => 4441,
+				'thumbnail_url' => $metiersRessourcesFolderPath . '/img/icons/Homegrade_RVB_patrimoine-S.svg',
+
+			),
+			array(
+				'page' => 'parcours',
+				'title' => __('Parcours rénovateur', 'metiers-patrimoine-theme'),
+				'ID_fr' => 7198,
+				'ID_nl' => 7198,
+				'thumbnail_url' => $metiersRessourcesFolderPath . '/img/icons/homegrade_renover-etape-trouver-entrepreneur.svg',
+			),
+		];
+		$pageDatas = null;
+		foreach ($relatedPagesChoices as $relatedPage) {
+			$pageID = $currentLanguage === "nl" ? $relatedPage['ID_nl'] : $relatedPage['ID_fr'];
+
+			if ($pageID && $relatedPage['page'] === $relatedPageName) {
+				do_action('wpml_switch_language', $currentLanguage);
+
+				$pageDatas = array(
+					"ID" => $pageID,
+					"permalink" => get_the_permalink($pageID),
+					"title" => $relatedPage['title'],
+					"thumbnail_url" => $relatedPage['thumbnail_url'],
+				);
+
+				restore_current_blog(); // Revenir au blog initial
+				return $pageDatas;
+			}
+		}
+		restore_current_blog();
+		return null;
+	}
+}
+
+$relatedPageDatas = get_related_page_datas($relatedPageName);
+if (!$relatedPageDatas) return;
+$relatedPageTitle = $relatedPageDatas['title'];
+$relatedPagePermalink = $relatedPageDatas['permalink'];
+$thumbnail_url = $relatedPageDatas['thumbnail_url'] ?? null;
 ?>
 
-<a class="search-artisan-btn" href="<?php echo $searchPageUrl ?>">
+<div class="page-redirector page-redirector--<?= $relatedPageName ?>" href="<?php echo "" ?>">
-	<img class="search-artisan-btn__page-icon" src="<?php echo $searchPageIcon['sizes']['medium_large'] ?> " alt="">
+	<div class="page-redirector__details-container">
-	<?php echo __("Chercher une entreprise", "metiers-patrimoine-theme") ?>
+		<h3><?php echo $relatedPageTitle ?></h3>
-</a>
+		<p class="subtitle"><?php echo $subtitle ?></p>
+		<a class='cta cta--button' href="<?php echo $relatedPagePermalink ?>"><?php echo __("En savoir plus ", "metiers-patrimoine-theme") ?></a>
+	</div>
+	<img class="page-redirector__thumbnail" src="<?php echo $thumbnail_url ?>" alt="">
+</div>

index.php

@@ -1,5 +1,2 @@
 <?php
-
 echo "Hello World";
-?>
-<h2>salut</h2>x

resources/css/app.css

@@ -25,6 +25,7 @@
 @import './blocks/search-artisan-btn.css';
 @import './blocks/cta-slim.css';
 @import './blocks/content-page-header.css';
+@import './blocks/page-redirector.css';
 
 /* TEMPLATES */
 @import '../../template-components/artisans/card-artisans.css';

resources/css/blocks/page-redirector.css

@@ -0,0 +1,42 @@
+.page-redirector {
+  @apply px-12 py-12 rounded-xl mb-8;
+  @apply flex justify-between items-center;
+  h3 {
+    @apply pt-0 mt-0 !text-base uppercase tracking-widest;
+  }
+
+  .subtitle {
+    @apply !text-3xl font-bold max-w-xl;
+  }
+  &__details-container {
+  }
+  &__thumbnail {
+    @apply max-w-80;
+  }
+
+  &--patrimoine {
+    @apply bg-patrimoine-sante-securite-light py-8;
+
+    h3 {
+      @apply !text-patrimoine-sante-securite;
+    }
+
+    .cta {
+      /* @apply cta--patrimoine; */
+      @apply !bg-patrimoine-sante-securite text-white;
+    }
+  }
+  &--parcours {
+    @apply border-solid border border-neutral-200;
+    h3 {
+      @apply !text-secondary;
+    }
+    .cta {
+      @apply bg-secondary text-white;
+    }
+
+    .page-redirector__thumbnail {
+      @apply max-w-40;
+    }
+  }
+}

resources/img/icons/homegrade_renover-etape-trouver-entrepreneur.svg

@@ -0,0 +1,75 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg id="renover-etape-trouver-entrepreneur" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 80.38 80.38">
+  <defs>
+    <style>
+      .cls-1 {
+        isolation: isolate;
+      }
+
+      .cls-2 {
+        fill: url(#Dégradé_sans_nom_2-2);
+      }
+
+      .cls-2, .cls-3 {
+        stroke-width: 0px;
+      }
+
+      .cls-3 {
+        fill: url(#Dégradé_sans_nom_2);
+      }
+
+      .cls-4 {
+        fill: none;
+      }
+
+      .cls-4, .cls-5 {
+        stroke: #000;
+        stroke-linecap: round;
+        stroke-linejoin: round;
+      }
+
+      .cls-5 {
+        fill: #fff;
+      }
+    </style>
+    <linearGradient id="Dégradé_sans_nom_2" data-name="Dégradé sans nom 2" x1=".62" y1=".62" x2="79.76" y2="79.76" gradientUnits="userSpaceOnUse">
+      <stop offset="0" stop-color="#f3281d"/>
+      <stop offset="1" stop-color="#fe766f"/>
+    </linearGradient>
+    <linearGradient id="Dégradé_sans_nom_2-2" data-name="Dégradé sans nom 2" x1="42.49" y1="24.51" x2="48.15" y2="24.51" xlink:href="#Dégradé_sans_nom_2"/>
+  </defs>
+  <rect class="cls-3" width="80.38" height="80.38" rx="2.11" ry="2.11"/>
+  <g>
+    <g>
+      <g>
+        <g class="cls-1">
+          <polygon class="cls-5" points="56.4 43.14 64.57 59.42 61.42 63.58 53.53 47.38 56.4 43.14"/>
+          <polygon class="cls-5" points="61.42 63.58 56.91 63.24 49.02 47.05 53.53 47.38 61.42 63.58"/>
+          <polygon class="cls-5" points="53.53 47.38 49.02 47.05 51.89 42.81 56.4 43.14 53.53 47.38"/>
+        </g>
+        <g class="cls-1">
+          <polygon class="cls-5" points="49.06 26.27 56.4 43.14 53.53 47.38 45.13 32.07 49.06 26.27"/>
+          <polygon class="cls-5" points="53.53 47.38 49.02 47.05 40.62 31.74 45.13 32.07 53.53 47.38"/>
+          <polygon class="cls-5" points="45.13 32.07 40.62 31.74 44.55 25.93 49.06 26.27 45.13 32.07"/>
+        </g>
+      </g>
+      <g class="cls-1">
+        <path class="cls-5" d="M48.46,20.16l7.52.56c1.35.1,2.35.33,2.45.35l-7.52-.56c-.1-.02-1.1-.25-2.45-.35Z"/>
+        <path class="cls-5" d="M43.21,14.1l7.52.56c-2.9-.22-5.23,1.33-5.45,1.47l-7.52-.56c.22-.14,2.55-1.69,5.45-1.47Z"/>
+        <polygon class="cls-5" points="45.58 33.8 38.06 33.24 36.57 30.18 44.08 30.74 45.58 33.8"/>
+        <polygon class="cls-5" points="40.43 23.28 32.92 22.72 37.76 15.57 45.27 16.13 40.43 23.28"/>
+        <path class="cls-5" d="M45.27,16.13c.41-.27,8.11-5.36,13.15,4.94-.18-.04-3.68-.83-6.6-.06-.41.11-.77.41-1.06.84-.81,1.19-1.06,3.34-.34,4.8l-4.84,7.15-1.5-3.06c-.09,0-1.82.18-3.3,2.36-.74,1.09-1.39,2.69-1.69,5.01l-3.65-7.46c1.37-.13,2.38-1,3.12-2.09,1.48-2.19,1.85-5.13,1.87-5.29l4.84-7.15Z"/>
+        <polygon class="cls-5" points="39.09 38.12 31.57 37.56 27.92 30.09 35.44 30.65 39.09 38.12"/>
+        <path class="cls-5" d="M35.44,30.65l-7.52-.56c1.37-.13,2.38-1,3.12-2.09,1.48-2.19,1.85-5.13,1.87-5.29l7.52.56c-.02.16-.39,3.1-1.87,5.29-.74,1.09-1.75,1.96-3.12,2.09Z"/>
+      </g>
+      <g class="cls-1">
+        <path class="cls-5" d="M24.65,34.46l2.92-4.34c.6-.9,1.8-1.39,3.45-1.27l-2.92,4.34c-1.64-.12-2.84.38-3.45,1.27Z"/>
+        <path class="cls-5" d="M39.58,38.21l-2.92,4.34c.6-.89.61-2.16-.09-3.62-1.42-2.94-5.21-5.51-8.48-5.74l2.92-4.34c3.26.23,7.06,2.81,8.48,5.74.7,1.46.69,2.74.09,3.62Z"/>
+        <path class="cls-5" d="M28.09,33.19c3.26.23,7.06,2.81,8.48,5.74,1.42,2.94-.09,5.13-3.35,4.89-3.27-.23-7.07-2.81-8.48-5.74-1.42-2.94.09-5.13,3.35-4.89Z"/>
+      </g>
+    </g>
+    <path class="cls-4" d="M25.86,54c-.89,2.08-1.81,4.91-2.13,8.34-.13,1.44-.14,2.77-.08,3.97"/>
+    <path class="cls-4" d="M22.11,46.05c-1.89,3.13-4,7.45-5.28,12.87-.54,2.28-.85,4.41-1.02,6.33"/>
+    <polygon class="cls-2" points="42.49 26.27 46.54 20.62 48.15 23.28 44.24 28.4 42.49 26.27"/>
+  </g>
+</svg>