the twig compiling can now be used for the headline and the content, …

…for example to display the manufacturer name or description in a own manufacturer tab
sschreier · Dec 15, 2024 · 729e845 · 729e845
1 parent dbab035
commit 729e845
Show file tree

Hide file tree

Showing 8 changed files with 298 additions and 38 deletions.
diff --git a/README.md b/README.md
@@ -7,19 +7,29 @@ A extension for _tabs for the product detail page_, which can be _displayed befo
  - set the number of characters from which the preview text in smaller resolutions should be truncated
  - select, if tab 1 should be filled via a snippet
  - set the headline of tab 1 via snippet
+ - select, if the headline of tab 1 use twig compiling
  - set the content of tab 1 via snippet
+ - select, if the content of tab 1 use twig compiling
  - select, if tab 2 should be filled via a snippet
  - set the headline of tab 2 via snippet
+ - select, if the headline of tab 2 use twig compiling
  - set the content of tab 2 via snippet
+ - select, if the content of tab 2 use twig compiling
  - select, if tab 3 should be filled via a snippet
  - set the headline of tab 3 via snippet
+ - select, if the headline of tab 3 use twig compiling
  - set the content of tab 3 via snippet
+ - select, if the content of tab 3 use twig compiling
  - select, if tab 4 should be filled via a snippet
  - set the headline of tab 4 via snippet
+ - select, if the headline of tab 4 use twig compiling
  - set the content of tab 4 via snippet
+ - select, if the content of tab 4 use twig compiling
  - select, if tab 5 should be filled via a snippet
  - set the headline of tab 5 via snippet
+ - select, if the headline of tab 5 use twig compiling
  - set the content of tab 5 via snippet
+ - select, if the content of tab 5 use twig compiling
 
 ## Available snippets
  - tabHeadlineFillViaSnippet
@@ -37,6 +47,23 @@ A extension for _tabs for the product detail page_, which can be _displayed befo
  - tab5ContentFillViaSnippet
  - tabContent
 
+## How to create a manufacturer tab or something similar
+1. Switch to the extension configuration
+2. Activate the switch _fill via a snippet_
+3. Activate the switch _use twig compiling for the headline_
+4. Insert the following content into the field _headline from the snippet_:
+
+```
+{{ page.product.manufacturer.translated.name }}
+```
+
+5. Activate the switch _use twig compiling for the content_
+6. Insert the following content into the field _content from the snippet_:
+
+```
+{{ page.product.manufacturer.translated.description }}
+```
+
 ## How to install the extension
 ### via console (recommended)
 1. Download the latest _SschreierTabProductDetailPage-master.zip_.

diff --git a/composer.json b/composer.json
@@ -1,7 +1,7 @@
 {
     "name": "sschreier/sschreiertabproductdetailpage",
     "description": "Tabs for the product detail page",
-    "version": "1.2.0",
+    "version": "1.2.1",
     "type": "shopware-platform-plugin",
     "license": "proprietary",
     "authors": [

diff --git a/src/Resources/config/config.xml b/src/Resources/config/config.xml
@@ -40,6 +40,13 @@
             <helpText lang="de-DE">Klicke auf den Globus, um die Übersetzung zu bearbeiten</helpText>
         </component>
 
+        <input-field type="bool">
+            <name>UseTwigInTabHeadline</name>
+            <label>use twig compiling for the headline</label>
+            <label lang="de-DE">Twig-Kompilierung bei der Überschrift nutzen</label>
+            <defaultValue>true</defaultValue>
+        </input-field>
+
         <component name="sw-snippet-field">
             <name>FillTabContentViaSnippet</name>
             <label>content from the snippet</label>
@@ -48,6 +55,13 @@
             <helpText>click on the globe to edit the translations</helpText>
             <helpText lang="de-DE">Klicke auf den Globus, um die Übersetzung zu bearbeiten</helpText>
         </component>
+
+        <input-field type="bool">
+            <name>UseTwigInTabContent</name>
+            <label>use twig compiling for the content</label>
+            <label lang="de-DE">Twig-Kompilierung beim Inhalt nutzen</label>
+            <defaultValue>true</defaultValue>
+        </input-field>
     </card>
 
     <card>
@@ -70,6 +84,13 @@
             <helpText lang="de-DE">Klicke auf den Globus, um die Übersetzung zu bearbeiten</helpText>
         </component>
 
+        <input-field type="bool">
+            <name>UseTwigInTab2Headline</name>
+            <label>use twig compiling for the headline</label>
+            <label lang="de-DE">Twig-Kompilierung bei der Überschrift nutzen</label>
+            <defaultValue>true</defaultValue>
+        </input-field>
+
         <component name="sw-snippet-field">
             <name>FillTab2ContentViaSnippet</name>
             <label>content from the snippet</label>
@@ -78,6 +99,13 @@
             <helpText>click on the globe to edit the translations</helpText>
             <helpText lang="de-DE">Klicke auf den Globus, um die Übersetzung zu bearbeiten</helpText>
         </component>
+
+        <input-field type="bool">
+            <name>UseTwigInTab2Content</name>
+            <label>use twig compiling for the content</label>
+            <label lang="de-DE">Twig-Kompilierung beim Inhalt nutzen</label>
+            <defaultValue>true</defaultValue>
+        </input-field>
     </card>
 
     <card>
@@ -100,6 +128,13 @@
             <helpText lang="de-DE">Klicke auf den Globus, um die Übersetzung zu bearbeiten</helpText>
         </component>
 
+        <input-field type="bool">
+            <name>UseTwigInTab3Headline</name>
+            <label>use twig compiling for the headline</label>
+            <label lang="de-DE">Twig-Kompilierung bei der Überschrift nutzen</label>
+            <defaultValue>true</defaultValue>
+        </input-field>
+
         <component name="sw-snippet-field">
             <name>FillTab3ContentViaSnippet</name>
             <label>content from the snippet</label>
@@ -108,6 +143,13 @@
             <helpText>click on the globe to edit the translations</helpText>
             <helpText lang="de-DE">Klicke auf den Globus, um die Übersetzung zu bearbeiten</helpText>
         </component>
+
+        <input-field type="bool">
+            <name>UseTwigInTab3Content</name>
+            <label>use twig compiling for the content</label>
+            <label lang="de-DE">Twig-Kompilierung beim Inhalt nutzen</label>
+            <defaultValue>true</defaultValue>
+        </input-field>
     </card>
 
     <card>
@@ -130,6 +172,13 @@
             <helpText lang="de-DE">Klicke auf den Globus, um die Übersetzung zu bearbeiten</helpText>
         </component>
 
+        <input-field type="bool">
+            <name>UseTwigInTab4Headline</name>
+            <label>use twig compiling for the headline</label>
+            <label lang="de-DE">Twig-Kompilierung bei der Überschrift nutzen</label>
+            <defaultValue>true</defaultValue>
+        </input-field>
+
         <component name="sw-snippet-field">
             <name>FillTab4ContentViaSnippet</name>
             <label>content from the snippet</label>
@@ -138,6 +187,13 @@
             <helpText>click on the globe to edit the translations</helpText>
             <helpText lang="de-DE">Klicke auf den Globus, um die Übersetzung zu bearbeiten</helpText>
         </component>
+
+         <input-field type="bool">
+            <name>UseTwigInTab4Content</name>
+            <label>use twig compiling for the content</label>
+            <label lang="de-DE">Twig-Kompilierung beim Inhalt nutzen</label>
+            <defaultValue>true</defaultValue>
+        </input-field>
     </card>
 
     <card>
@@ -160,6 +216,13 @@
             <helpText lang="de-DE">Klicke auf den Globus, um die Übersetzung zu bearbeiten</helpText>
         </component>
 
+        <input-field type="bool">
+            <name>UseTwigInTab5Headline</name>
+            <label>use twig compiling for the headline</label>
+            <label lang="de-DE">Twig-Kompilierung bei der Überschrift nutzen</label>
+            <defaultValue>true</defaultValue>
+        </input-field>
+
         <component name="sw-snippet-field">
             <name>FillTab5ContentViaSnippet</name>
             <label>content from the snippet</label>
@@ -168,5 +231,12 @@
             <helpText>click on the globe to edit the translations</helpText>
             <helpText lang="de-DE">Klicke auf den Globus, um die Übersetzung zu bearbeiten</helpText>
         </component>
+
+        <input-field type="bool">
+            <name>UseTwigInTab5Content</name>
+            <label>use twig compiling for the content</label>
+            <label lang="de-DE">Twig-Kompilierung beim Inhalt nutzen</label>
+            <defaultValue>true</defaultValue>
+        </input-field>
     </card>
 </config>
diff --git a/src/Resources/config/plugin.png b/src/Resources/config/plugin.png
diff --git a/src/Resources/config/services.xml b/src/Resources/config/services.xml
@@ -7,5 +7,9 @@
         <service id="Sschreier\TabProductDetailPage\Storefront\Subscriber\FrontendSubscriber">
             <tag name="kernel.event_subscriber"/>
         </service>
+
+        <service id="Twig\Extension\StringLoaderExtension">
+            <tag name="twig.extension"/>
+        </service>
     </services>
 </container>
diff --git a/src/Resources/views/storefront/element/cms-element-product-description-reviews.html.twig b/src/Resources/views/storefront/element/cms-element-product-description-reviews.html.twig
@@ -1,6 +1,8 @@
 {% sw_extends '@Storefront/storefront/element/cms-element-product-description-reviews.html.twig' %}
 
 {% block element_product_description_reviews_tabs_navigation_review %}
+    {% block element_product_description_reviews_tabs_navigation_review_before %}{% endblock %}
+
     {% set product = element.data.product %}
     {% set extension = product.extensions %}
     {% set customFields = product.translated.customFields %}
@@ -12,7 +14,7 @@
 
     {% for numberTabs in 1..numberTabsValue %}
         {% set customTabHeadlineValue = 'sschreier_tabs_tab' ~ numberTabs ~ '_headline' %}
-        {% set customTabConentValue = 'sschreier_tabs_tab' ~ numberTabs ~ '_content' %}
+        {% set customTabContentValue = 'sschreier_tabs_tab' ~ numberTabs ~ '_content' %}
         {% set customTabId = 'custom-tab' ~ numberTabs ~ '-' ~ product.id  %}
         {% set customTabHref = '#custom-tab' ~ numberTabs ~ '-' ~ product.id ~ '-pane' %}
         {% set customTabContent = 'custom-tab' ~ numberTabs ~ '-' ~ product.id ~ '-pane' %}
@@ -23,27 +25,41 @@
 
             {% if (numberTabs == 1) %}
                 {% set fillTabViaSnippet = config('SschreierTabProductDetailPage.config.FillTabViaSnippet') %}
+                {% set useTwigInTabHeadline = config('SschreierTabProductDetailPage.config.UseTwigInTabHeadline') %}
+                {% set useTwigInTabContent = config('SschreierTabProductDetailPage.config.UseTwigInTabContent') %}
             {% elseif (numberTabs == 2) %}
                 {% set fillTabViaSnippet = config('SschreierTabProductDetailPage.config.FillTab2ViaSnippet') %}
+                {% set useTwigInTabHeadline = config('SschreierTabProductDetailPage.config.UseTwigInTab2Headline') %}
+                {% set useTwigInTabContent = config('SschreierTabProductDetailPage.config.UseTwigInTab2Content') %}
             {% elseif (numberTabs == 3) %}
                 {% set fillTabViaSnippet = config('SschreierTabProductDetailPage.config.FillTab3ViaSnippet') %}
+                {% set useTwigInTabHeadline = config('SschreierTabProductDetailPage.config.UseTwigInTab3Headline') %}
+                {% set useTwigInTabContent = config('SschreierTabProductDetailPage.config.UseTwigInTab3Content') %}
             {% elseif (numberTabs == 4) %}
                 {% set fillTabViaSnippet = config('SschreierTabProductDetailPage.config.FillTab4ViaSnippet') %}
+                {% set useTwigInTabHeadline = config('SschreierTabProductDetailPage.config.UseTwigInTab4Headline') %}
+                {% set useTwigInTabContent = config('SschreierTabProductDetailPage.config.UseTwigInTab4Content') %}
             {% elseif (numberTabs == 5) %}
                 {% set fillTabViaSnippet = config('SschreierTabProductDetailPage.config.FillTab5ViaSnippet') %}
+                {% set useTwigInTabHeadline = config('SschreierTabProductDetailPage.config.UseTwigInTab5Headline') %}
+                {% set useTwigInTabContent = config('SschreierTabProductDetailPage.config.UseTwigInTab5Content') %}
             {% else %}
                 {% block element_product_description_reviews_tabs_navigation_review_inner_default %}
                     {% set fillTabViaSnippet = config('SschreierTabProductDetailPage.config.FillTabViaSnippet') %}
+                    {% set useTwigInTabHeadline = config('SschreierTabProductDetailPage.config.UseTwigInTabHeadline') %}
+                    {% set useTwigInTabContent = config('SschreierTabProductDetailPage.config.UseTwigInTabContent') %}
                 {% endblock %}
             {% endif %}
 
-            {% if fillTabViaSnippet or (fillTabViaSnippet == false and customFields[customTabConentValue]) %}
+            {% if fillTabViaSnippet or (fillTabViaSnippet == false and customFields[customTabContentValue]) %}
                 {% set showTab = true %}
             {% endif %}
 
             {% if showTab %}
                 {% sw_include '@SschreierTabProductDetailPage/storefront/element/tab-headline.html.twig' with {
                     fillTabViaSnippet: fillTabViaSnippet,
+                    useTwigInTabHeadline: useTwigInTabHeadline,
+                    useTwigInTabContent: useTwigInTabContent,
                     numberTabs: numberTabs
                 } %}
             {% endif %}
@@ -53,9 +69,13 @@
     {% if config('SschreierTabProductDetailPage.config.ShowTabBeforeRatingTab') %}
         {{ parent() }}
     {% endif %}
+
+    {% block element_product_description_reviews_tabs_navigation_review_after %}{% endblock %}
 {% endblock %}
 
 {% block element_product_description_reviews_tabs_content_review %}
+    {% block element_product_description_reviews_tabs_content_review_before %}{% endblock %}
+
     {% set product = element.data.product %}
     {% set extension = product.extensions %}
     {% set customFields = product.translated.customFields %}
@@ -66,7 +86,7 @@
     {% endif %}
 
     {% for numberTabs in 1..numberTabsValue %}
-        {% set customTabConentValue = 'sschreier_tabs_tab' ~ numberTabs ~ '_content' %}
+        {% set customTabContentValue = 'sschreier_tabs_tab' ~ numberTabs ~ '_content' %}
         {% set customTabId = 'custom-tab' ~ numberTabs ~ '-' ~ product.id  %}
         {% set customTabContent = 'custom-tab' ~ numberTabs ~ '-' ~ product.id ~ '-pane' %}
 
@@ -75,21 +95,27 @@
 
             {% if (numberTabs == 1) %}
                 {% set fillTabViaSnippet = config('SschreierTabProductDetailPage.config.FillTabViaSnippet') %}
+                {% set useTwigInTabContent = config('SschreierTabProductDetailPage.config.UseTwigInTabContent') %}
             {% elseif (numberTabs == 2) %}
                 {% set fillTabViaSnippet = config('SschreierTabProductDetailPage.config.FillTab2ViaSnippet') %}
+                {% set useTwigInTabContent = config('SschreierTabProductDetailPage.config.UseTwigInTab2Content') %}
             {% elseif (numberTabs == 3) %}
                 {% set fillTabViaSnippet = config('SschreierTabProductDetailPage.config.FillTab3ViaSnippet') %}
+                {% set useTwigInTabContent = config('SschreierTabProductDetailPage.config.UseTwigInTab3Content') %}
             {% elseif (numberTabs == 4) %}
                 {% set fillTabViaSnippet = config('SschreierTabProductDetailPage.config.FillTab4ViaSnippet') %}
+                {% set useTwigInTabContent = config('SschreierTabProductDetailPage.config.UseTwigInTab4Content') %}
             {% elseif (numberTabs == 5) %}
                 {% set fillTabViaSnippet = config('SschreierTabProductDetailPage.config.FillTab5ViaSnippet') %}
+                {% set useTwigInTabContent = config('SschreierTabProductDetailPage.config.UseTwigInTab5Content') %}
             {% else %}
                 {% block element_product_description_reviews_tabs_content_review_inner_default %}
                     {% set fillTabViaSnippet = config('SschreierTabProductDetailPage.config.FillTabViaSnippet') %}
+                    {% set useTwigInTabContent = config('SschreierTabProductDetailPage.config.UseTwigInTabContent') %}
                 {% endblock %}
             {% endif %}
 
-            {% if fillTabViaSnippet or (fillTabViaSnippet == false and customFields[customTabConentValue]) %}
+            {% if fillTabViaSnippet or (fillTabViaSnippet == false and customFields[customTabContentValue]) %}
                 {% set showTab = true %}
             {% endif %}
 
@@ -100,6 +126,7 @@
                      aria-labelledby="{{ customTabId }}">
                     {% sw_include '@SschreierTabProductDetailPage/storefront/element/tab-content.html.twig' with {
                         fillTabViaSnippet: fillTabViaSnippet,
+                        useTwigInTabContent: useTwigInTabContent,
                         numberTabs: numberTabs
                     } %}
                 </div>
@@ -110,4 +137,6 @@
     {% if config('SschreierTabProductDetailPage.config.ShowTabBeforeRatingTab') %}
         {{ parent() }}
     {% endif %}
+
+    {% block element_product_description_reviews_tabs_content_review_after %}{% endblock %}
 {% endblock %}