custom/plugins/Tuerschild_2/src/Resources/views/storefront/element/cms-element-product-description-reviews.html.twig line 1

Open in your IDE?
  1. {% block element_product_desciption_reviews %}
  2.     {% set config = element.fieldConfig.elements %}
  3.     {% set product = element.data.product %}
  4.     {% set descriptionTabId = "description-tab-" ~ product.id %}
  5.     {% set descriptionTabHref = "#description-tab-" ~ product.id ~ "-pane" %}
  6.     {% set descriptionTabContent = "description-tab-" ~ product.id ~ "-pane" %}
  7.     {% set reviewTabId = "review-tab-" ~ product.id %}
  8.     {% set reviewTabHref = "#review-tab-" ~ product.id ~ "-pane" %}
  9.     {% set reviewTabContent = "review-tab-" ~ product.id ~ "-pane" %}
  10.     {% set crossSellings  = element.data.product.crossSellings.elements %}
  11.     {% if element.data.product %}
  12.         <div class="cms-element-{{ element.type }}{% if config.alignment.value %} has-vertical-alignment{% endif %}">{% if config.alignment.value %}
  13.             <div class="cms-element-alignment{% if config.alignment.value == "center" %} align-self-center{% elseif config.alignment.value == "flex-end" %} align-self-end{% else %} align-self-start{% endif %}">
  14.                 {% endif %}
  15.                 <div class="card card-tabs">
  16.                     {% block element_product_desciption_reviews_tabs_navigation %}
  17.                         <div class="card-header product-detail-tab-navigation">
  18.                             {% block element_product_desciption_reviews_tabs_navigation_container %}
  19.                                 <ul class="nav nav-tabs product-detail-tab-navigation-list"
  20.                                     id="product-detail-tabs"
  21.                                     role="tablist">
  22.                                     {% block element_product_desciption_reviews_tabs_navigation_description %}
  23.                                         <li class="nav-item">
  24.                                             <a class="nav-link {% if (ratingSuccess != 1) and (ratingSuccess != -1) %}active{% endif %} product-detail-tab-navigation-link"
  25.                                                id="{{ descriptionTabId }}"
  26.                                                data-toggle="tab"
  27.                                                data-offcanvas-tabs="true"
  28.                                                href="{{ descriptionTabHref }}"
  29.                                                role="tab"
  30.                                                aria-controls="{{ descriptionTabContent }}"
  31.                                                aria-selected="true">
  32.                                                 <span>{{ "detail.tabsDescription"|trans|sw_sanitize }}</span>
  33.                                                 <span class="product-detail-tab-navigation-icon">
  34.                                                     {% sw_icon 'arrow-medium-right' style {'pack':'solid'} %}
  35.                                                 </span>
  36.                                                 {% if element.data.product.translated.description|length > 0 %}
  37.                                                     <span class="product-detail-tab-preview">
  38.                                                         {{ page.product.translated.description|raw|striptags|sw_sanitize|u.truncate(125, '…') }}
  40.                                                         {# truncate always cuts down the length to 125 characters.
  41.                                                                So it will only shorten the string if it exceeds 125 chars.
  42.                                                                Therefor, only show the button when the length of the text is
  43.                                                                greater or equal then 126 characters. #}
  44.                                                         {% if element.data.product.translated.description|length >= 126 %}
  45.                                                             <span class="product-detail-tab-preview-more">{{ "detail.tabsPreviewMore"|trans|sw_sanitize }}</span>
  46.                                                         {% endif %}
  47.                                                         </span>
  48.                                                 {% endif %}
  49.                                             </a>
  50.                                         </li>
  51.                                     {% endblock %}
  53.                                     {% block element_product_property_tab %}
  54.                                         {% if page.product.sortedProperties|length > 0 %}
  56.                                             <li class="nav-item">
  57.                                                 <a class="nav-link product-detail-tab-navigation-link"
  58.                                                    id="cs-property-tab"
  59.                                                    data-toggle="tab"
  60.                                                    data-offcanvas-tabs="true"
  61.                                                    href="#cs-property-tab-pane"
  62.                                                    role="tab"
  63.                                                    aria-controls="cs-property-tab-pane"
  64.                                                    aria-selected="true">
  65.                                                     {{ "detail.tabsProperty"|trans|sw_sanitize }}
  66.                                                     <span class="product-detail-tab-navigation-icon">
  67.                                             {% sw_icon 'arrow-medium-right' style {'pack':'solid'} %}
  68.                                         </span>
  69.                                                 </a>
  70.                                             </li>
  71.                                         {% endif %}
  72.                                     {% endblock %}
  74.                                     {% block element_product_desciption_reviews_tabs_navigation_review %}
  75.                                         {% if config('core.listing.showReview') %}
  76.                                             <li class="nav-item">
  77.                                                 <a class="nav-link {% if (ratingSuccess == 1) or (ratingSuccess == -1) %}active{% endif %} product-detail-tab-navigation-link review-tab"
  78.                                                    id="{{ reviewTabId }}"
  79.                                                    data-toggle="tab"
  80.                                                    data-offcanvas-tabs="true"
  81.                                                    href="{{ reviewTabHref }}"
  82.                                                    role="tab"
  83.                                                    aria-controls="{{ reviewTabContent }}"
  84.                                                    aria-selected="true">
  85.                                                     {{ "detail.tabsReview"|trans|sw_sanitize }}
  86.                                                     <span class="product-detail-tab-navigation-icon">
  87.                                                         {% sw_icon 'arrow-medium-right' style {'pack':'solid'} %}
  88.                                                     </span>
  89.                                                 </a>
  90.                                             </li>
  91.                                         {% endif %}
  92.                                     {% endblock %}
  94.                                     {% for item in crossSellings %}
  95.                                         {% set id = item.id %}
  96.                                         {% if item.active %}
  97.                                             <li class="nav-item">
  98.                                                 <a class="nav-link product-detail-tab-navigation-link"
  99.                                                    id="cs-{{ id }}-tab"
  100.                                                    data-toggle="tab"
  101.                                                    data-offcanvas-tabs="true"
  102.                                                    href="#cs-{{ id }}-tab-pane"
  103.                                                    role="tab"
  104.                                                    aria-controls="cs-{{ id }}-tab-pane"
  105.                                                    aria-selected="true">
  106.                                                     {{ item.translated.name }}
  107.                                                     <span class="product-detail-tab-navigation-icon">
  108.                                             {% sw_icon 'arrow-medium-right' style {'pack':'solid'} %}
  109.                                         </span>
  110.                                                 </a>
  111.                                             </li>
  112.                                         {% endif %}
  113.                                     {% endfor %}
  114.                                 </ul>
  115.                             {% endblock %}
  116.                         </div>
  117.                     {% endblock %}
  119.                     {% block element_product_desciption_reviews_tabs_content %}
  120.                         <div class="product-detail-tabs-content card-body">
  121.                             {% block element_product_desciption_reviews_tabs_content_container %}
  122.                                 <div class="tab-content">
  123.                                     {% block element_product_desciption_reviews_tabs_content_description %}
  124.                                         <div class="tab-pane fade show {% if (element.data.ratingSuccess != 1) and (element.data.ratingSuccess != -1) %}active{% endif %}"
  125.                                              id="{{ descriptionTabContent }}"
  126.                                              role="tabpanel"
  127.                                              aria-labelledby="{{ descriptionTabId }}">
  128.                                             {% sw_include '@Storefront/storefront/component/product/description.html.twig' with {
  129.                                                 product: element.data.product
  130.                                             } %}
  131.                                         </div>
  132.                                     {% endblock %}
  134.                                     {% block element_product_desciption_reviews_tabs_content_review %}
  135.                                         {% if config('core.listing.showReview') %}
  136.                                             <div class="tab-pane fade show {% if (element.data.ratingSuccess == 1) or (element.data.ratingSuccess == -1) %}active{% endif %}"
  137.                                                  id="{{ reviewTabContent }}"
  138.                                                  role="tabpanel"
  139.                                                  aria-labelledby="{{ reviewTabId }}">
  140.                                                 {% sw_include '@Storefront/storefront/component/review/review.html.twig' with {
  141.                                                     reviews: element.data.reviews,
  142.                                                     product: element.data.product
  143.                                                 } %}
  144.                                             </div>
  145.                                         {% endif %}
  146.                                     {% endblock %}
  148.                                     {% if page.product.sortedProperties|length > 0 %}
  149.                                         <div class="tab-pane fade show cross-selling-tab"
  150.                                              id="cs-property-tab-pane"
  151.                                              role="tabpanel"
  152.                                              aria-labelledby="cs-property-tab">
  153.                                             <div class="cms-block  pos-0 cms-block-product-three-column">
  154.                                                 <div class="cms-block-container">
  155.                                                     {% sw_include '@Storefront/storefront/page/product-detail/properties.html.twig' %}
  156.                                                 </div>
  157.                                             </div>
  158.                                         </div>
  159.                                     {% endif %}
  161.                                     {% for item in crossSellings %}
  162.                                         {% set id = item.id %}
  163.                                         {% if item.active %}
  164.                                             <div class="tab-pane fade show cross-selling-tab"
  165.                                                  id="cs-{{ id }}-tab-pane"
  166.                                                  role="tabpanel"
  167.                                                  aria-labelledby="cs-{{ id }}-tab">
  168.                                                 {% sw_include '@Storefront/storefront/utilities/offcanvas.html.twig' %}
  170.                                                 <h3>{{ item.translated.name }}</h3>
  171.                                                 <div class="cms-block  pos-0 cms-block-product-three-column">
  172.                                                     <div class="cms-block-container">
  173.                                                         <div class="cms-block-container-row row cms-row ">
  175.                                                             {% for product in item.assignedProducts.elements %}
  176.                                                                 <div class="col-md-6 card-col">
  177.                                                                     {% block element_product_listing_box %}
  178.                                                                         {% sw_include '@Storefront/storefront/component/product/card/box.html.twig' with {
  179.                                                                             'layout': boxLayout,
  180.                                                                             'displayMode': displayMode,
  181.                                                                             'product':product.product
  182.                                                                         } %}
  183.                                                                     {% endblock %}
  184.                                                                 </div>
  185.                                                             {% endfor %}
  186.                                                         </div>
  187.                                                     </div>
  188.                                                 </div>
  189.                                             </div>
  190.                                         {% endif %}
  191.                                     {% endfor %}
  192.                                 </div>
  193.                             {% endblock %}
  194.                         </div>
  195.                     {% endblock %}
  196.                 </div>
  197.             </div>
  198.         </div>
  199.     {% endif %}
  200. {% endblock %}