Hallo,
ich habe mir die tabs.html.twig nach meinen Vorstellungen angepasst. Das funktioniert soweit gut.
Jetzt habe ich jedoch das Problem, dass die Änderungen nicht im entsprechenden CMS Block angezeigt werden.
Ich habe die Änderungen der Tabs nun auch in die
Storefront/storefront/element/cms-element-product-description-reviews.html.twig
übernommen.
Trotz gelöschtem Cache werden die Änderungen jedoch nicht dargestellt.
Hat jemand eine Idee, was ich nicht berücksichtigt haben könnte?
Kann es sein, dass ich Blöcke und Elemente nicht über die Vererbung in einer Theme beeinflussen kann?
Wenn ich die Dokumentation durch stöbere, dann bekomme ich das Gefühl, dass ich eine App mit einem eigenen Block / Element dafür schreiben muss. Ist dieser Eindruck richtig?
Rein aus dem Theme heraus geht das mit zusätzlichen TABs und dem CMS.
Hier mal meine „Zutatenliste“, wobei ich den TAB-Inhalt dann von meinen details include:
Im CMS und in den Details werden allerdings die Daten unterschiedlich geliefert, muss dann in beiden Version beachtet werden (sw_include with).
{% sw_extends '@Storefront/storefront/element/cms-element-product-description-reviews.html.twig' %}
{% block element_product_desciption_reviews_tabs_navigation_description %}
{{ parent() }}
{% if page.product.translated.customFields.custom_product_meinkuerzel_ingredients %}
<li class="nav-item">
<a class="nav-link product-detail-tab-navigation-link"
id="ingredients-tab"
data-toggle="tab"
data-offcanvas-tabs="true"
href="#ingredients-tab-pane"
role="tab"
aria-controls="ingredients-tab-pane"
aria-selected="true">
<span>{{ "MyFirstThemeSnippet.detail.tabingredients"|trans|sw_sanitize }}</span>
<span class="product-detail-tab-navigation-icon">
{% sw_icon 'arrow-medium-right' style {'pack':'solid'} %}
</span>
</a>
</li>
{% endif %}
{% endblock %}
{% block element_product_desciption_reviews_tabs_content_description %}
{{ parent() }}
{% if page.product.translated.customFields.custom_product_meinkuerzel_ingredients %}
<div class="tab-pane fade show"
id="ingredients-tab-pane"
role="tabpanel"
aria-labelledby="ingredients-tab">
{% sw_include '/storefront/page/product-detail/ingredientstab.html.twig' with {'ingredients': element.data.product.translated.customFields.custom_product_meinkuerzel_ingredients} %}
</div>
{% endif %}
{% endblock %}
Vielen, Vielen Dank für dein Code Beispiel. Das hat mir sehr geholfen.
Ich glaube meinen Fehler gefunden zu haben. Es wird tatsächlich an dem Include liegen, dass ich in der Form nicht berücksichtigt habe.
Hi, ich schaffe es nicht, dass nachzubauen, der Tab wird nie angezeigt - bin aber auch Anfänger in SW6 und verstehe das nur halb.
Magst Du mal daher die tabs.html.twig hier einstellen?
Wo müssen wir dich abholen? -
Hast du schon im Backend unter Einstellungen > System > Zusatzfelder dir ein Set angelegt?
Ich erstelle zum Beispiel pro Tab ein Set. Ein Set besteht bei mir aus der Tab Überschrift und einem Editor Feld für die Inhalte.
So kann man die individuell pro Produkt die Reiternamen individuell festlegen.
Die Überschrift ist der Name des Reiters und die
Wenn das Zusatzfeld die Überschrift nicht ausgefüllt ist, dann wird der Tab im Frontend nicht dargestellt.
Den passenden Code dazu schicke ich hier morgen Mal rein.
In meiner Theme unter storefront/page/product-detail/tabs.html.twig
{% sw_extends '@Storefront/storefront/page/product-detail/tabs.html.twig'%}
{% block page_product_detail_tabs_navigation_description %}
{{ parent() }}
{% if page.product.customFields.ict_add_tab_1_content %}
<li class="nav-item">
<a class="nav-link product-detail-tab-navigation-link"
id="ict-add-tab-1"
data-toggle="tab"
data-offcanvas-tabs="true"
href="#ict-add-tab-pane-1"
role="tab"
aria-controls="description-tab-pane"
aria-selected="false">
<span>{{ page.product.customFields.ict_add_tab_1_title }}</span>
<span class="product-detail-tab-navigation-icon">
{% sw_icon 'arrow-medium-right' style {'pack':'solid'} %}
</span>
</a>
</li>
{% endif %}
{% endblock %}
{% block page_product_detail_tabs_content_description %}
{{ parent() }}
{% if page.product.customFields.ict_add_tab_1_content %}
<div class="tab-pane fade show"
id="ict-add-tab-pane-1"
role="tabpanel"
aria-labelledby="ict-add-tab-1">
{% sw_include '@MeineTheme/MeineTheme/page/product-detail/ict-add-tab-1.html.twig' %}
</div>
{% endif %}
{% endif %}
{% endblock %}
Am Ende siehst du, dass ich für jeden Tab noch eine Datei mit dem eigentlichen Tab-Inhalt inkludiert habe. Diese Dateien liegen bei mir unter meiner Theme unter MeineTheme/page/product-detail/ict-add-tab-1.hmtl.twig
{% sw_extends '@Storefront/storefront/utilities/offcanvas.html.twig' %}
{% block utilities_offcanvas_content %}
{% block page_product_detail_description_container %}
<div class="product-detail-description tab-pane-container">
{% block page_product_detail_description_title %}
<div class="h3 product-detail-description-title">
{{ page.product.customFields.ict_add_tab_1_title }}
</div>
{% endblock %}
{% block page_product_detail_description_content %}
{% block page_product_detail_description_content_text %}
<div class="product-detail-description-text"
itemprop="description">
{{ page.product.customFields.ict_add_tab_1_content | raw }}
</div>
{% endblock %}
{% endblock %}
</div>
{% endblock %}
{% endblock %}
Wenn Du die Felder mehrsprachig hinterlegt hast, dann müsste der Code noch leicht ergänzt werden.
Bei weiteren Tabs musst du das halt die jeweiligen Blöcke vervielfältigen und aus 1 => 2 machen.
Hi, kurze Frage. Seit dem Update auf v6.4.8.1 Stable Version werden meine Additional Tabs, die ich wie oben beschrieben hinzugefügt hatte, nicht mehr angezeigt. Gab es in dem Update Restriktionen, die das Überschreiben verhindern? Ich kann mir das nicht mehr wirklich erklären.