custom/apps/AtlKatanaTheme/Resources/views/storefront/page/product-detail/tabs.html.twig line 1

Open in your IDE?
  1. {% sw_extends "@Storefront/storefront/page/product-detail/tabs.html.twig" %}
  3. {% block page_product_detail_tabs_inner %}
  4.     {% set tabDescription = page.product.translated.customFields.atl_katana_theme_tab_description %}
  5.     {% set tabContent = page.product.translated.customFields.atl_katana_theme_tab_content %}
  7.     {% set hasDataSheet = page.product.translated.customFields.atl_katana_theme_data_sheet_one or
  8.         page.product.translated.customFields.atl_katana_theme_data_sheet_two or
  9.         page.product.translated.customFields.atl_katana_theme_data_sheet_three or
  10.         page.product.translated.customFields.atl_katana_theme_data_sheet_four
  11.     %}
  13.     {{ parent() }}
  14. {% endblock %}
  16. {% block page_product_detail_tabs_navigation_description %}
  17.     <li class="nav-item">
  18.         <a class="nav-link {% if (ratingSuccess != 1) and (ratingSuccess != -1) %}active{% endif %} product-detail-tab-navigation-link"
  19.            id="description-tab"
  20.            {{ dataBsToggleAttr }}="tab"
  21.            data-offcanvas-tabs="true"
  22.            href="#description-tab-pane"
  23.            role="tab"
  24.            aria-controls="description-tab-pane"
  25.            aria-selected="true">
  26.             <span>
  27.                 {% if theme_config('atl-product-detail-show-tab-icons') == 'true' %}
  28.                     {% sw_icon 'align-left' style {
  29.                         'namespace': 'AtlKatanaTheme',
  30.                         'pack':  theme_config('atl-icon-set'),
  31.                         'class': ' mr-1',
  32.                         'color': 'text-color',
  33.                         'size': 'xs'
  34.                     } %}
  35.                 {% endif %}
  37.                 {{ "detail.tabsDescription"|trans|sw_sanitize }}
  38.             </span>
  40.             <span class="product-detail-tab-navigation-icon">
  41.                 {% sw_icon 'arrow-head-right' style {
  42.                     'namespace': 'AtlKatanaTheme',
  43.                     'pack':  theme_config('atl-icon-set'),
  44.                     'class': ' pl-1',
  45.                     'color': 'text-color',
  46.                     'size': 'xs'
  47.                 } %}
  48.             </span>
  50.             {% if page.product.translated.description|length > 0 %}
  51.                 <span class="product-detail-tab-preview">
  52.                     {{ page.product.translated.description|raw|striptags|sw_sanitize|u.truncate(125, '…') }}
  54.                     {# truncate always cuts down the length to 125 characters.
  55.                        So it will only shorten the string if it exceeds 125 chars.
  56.                        Therefor, only show the button when the length of the text is
  57.                        greater or equal then 126 characters. #}
  58.                     {% if page.product.translated.description|length >= 126 %}
  59.                         <span class="product-detail-tab-preview-more">{{ "detail.tabsPreviewMore"|trans|sw_sanitize }}</span>
  60.                     {% endif %}
  61.                 </span>
  62.             {% endif %}
  63.         </a>
  64.     </li>
  65. {% endblock %}
  67. {% block page_product_detail_tabs_navigation_review %}
  68.     {% if config('core.listing.showReview') %}
  69.         <li class="nav-item">
  70.             <a class="nav-link {% if (ratingSuccess == 1) or (ratingSuccess == -1) %}active{% endif %} product-detail-tab-navigation-link"
  71.                id="review-tab"
  72.                {{ dataBsToggleAttr }}="tab"
  73.                data-offcanvas-tabs="true"
  74.                href="#review-tab-pane"
  75.                role="tab"
  76.                aria-controls="review-tab-pane"
  77.                aria-selected="true">
  78.                 <span>
  79.                     {% if theme_config('atl-product-detail-show-tab-icons') == 'true' %}
  80.                         {% sw_icon 'star' style {
  81.                             'namespace': 'AtlKatanaTheme',
  82.                             'pack':  theme_config('atl-icon-set'),
  83.                             'class': ' mr-1',
  84.                             'color': 'text-color',
  85.                             'size': 'xs'
  86.                         } %}
  87.                     {% endif %}
  89.                     {{ "detail.tabsReview"|trans|sw_sanitize }}
  90.                 </span>
  92.                 <span class="product-detail-tab-navigation-icon">
  93.                     {% sw_icon 'arrow-head-right' style {
  94.                         'namespace': 'AtlKatanaTheme',
  95.                         'pack':  theme_config('atl-icon-set'),
  96.                         'class': ' pl-1',
  97.                         'color': 'text-color',
  98.                         'size': 'xs'
  99.                     } %}
  100.                 </span>
  101.             </a>
  102.         </li>
  103.     {% endif %}
  105.     {% block page_product_detail_tabs_navigation_tab %}
  106.         {% if tabDescription and tabContent %}
  107.             <li class="nav-item">
  108.                 <a class="nav-link product-detail-tab-navigation-link"
  109.                    id="tab-tab"
  110.                    {{ dataBsToggleAttr }}="tab"
  111.                    data-offcanvas-tabs="true"
  112.                    href="#tab-tab-pane"
  113.                    role="tab"
  114.                    aria-controls="tab-tab-pane"
  115.                    aria-selected="true">
  116.                     <span>
  117.                         {% if theme_config('atl-product-detail-show-tab-icons') == 'true' %}
  118.                             {% sw_include '@Storefront/storefront/utilities/icon.html.twig' with {
  119.                                 'name': theme_config('atl-product-detail-tab-icon'),
  120.                                 'namespace': 'AtlKatanaTheme',
  121.                                 'pack':  theme_config('atl-icon-set'),
  122.                                 'class': ' mr-1',
  123.                                 'color': 'text-color',
  124.                                 'size': 'xs'
  125.                             } %}
  126.                         {% endif %}
  128.                         {{ tabDescription|trans|sw_sanitize }}
  129.                     </span>
  131.                     <span class="product-detail-tab-navigation-icon">
  132.                         {% sw_icon 'arrow-head-right' style {
  133.                             'namespace': 'AtlKatanaTheme',
  134.                             'pack':  theme_config('atl-icon-set'),
  135.                             'class': ' pl-1',
  136.                             'color': 'text-color',
  137.                             'size': 'xs'
  138.                         } %}
  139.                     </span>
  140.                 </a>
  141.             </li>
  142.         {% endif %}
  143.     {% endblock %}
  145.     {% block page_product_detail_tabs_navigation_data_sheet %}
  146.         {% if hasDataSheet %}
  147.             <li class="nav-item">
  148.                 <a class="nav-link product-detail-tab-navigation-link"
  149.                    id="data-sheet-tab"
  150.                    {{ dataBsToggleAttr }}="tab"
  151.                    data-offcanvas-tabs="true"
  152.                    href="#data-sheet-tab-pane"
  153.                    role="tab"
  154.                    aria-controls="data-sheet-tab-pane"
  155.                    aria-selected="true">
  156.                     <span>
  157.                         {% if theme_config('atl-product-detail-show-tab-icons') == 'true' %}
  158.                             {% sw_icon 'file' style {
  159.                                 'namespace': 'AtlKatanaTheme',
  160.                                 'pack':  theme_config('atl-icon-set'),
  161.                                 'class': ' mr-1',
  162.                                 'color': 'text-color',
  163.                                 'size': 'xs'
  164.                             } %}
  165.                         {% endif %}
  167.                         {{ "atl-katana-theme.detail.tabsDataSheet"|trans|sw_sanitize }}
  168.                     </span>
  170.                     <span class="product-detail-tab-navigation-icon">
  171.                         {% sw_icon 'arrow-head-right' style {
  172.                             'namespace': 'AtlKatanaTheme',
  173.                             'pack':  theme_config('atl-icon-set'),
  174.                             'class': ' pl-1',
  175.                             'color': 'text-color',
  176.                             'size': 'xs'
  177.                         } %}
  178.                     </span>
  179.                 </a>
  180.             </li>
  181.         {% endif %}
  182.     {% endblock %}
  184.     {% block page_product_detail_tabs_navigation_payment_shipping %}
  185.         {% if theme_config('atl-product-detail-show-payment-shipping-tab') == 'true' %}
  186.             <li class="nav-item">
  187.                 <a class="nav-link product-detail-tab-navigation-link"
  188.                    id="payment-shipping-tab"
  189.                    {{ dataBsToggleAttr }}="tab"
  190.                    data-offcanvas-tabs="true"
  191.                    href="#payment-shipping-tab-pane"
  192.                    role="tab"
  193.                    aria-controls="payment-shipping-tab-pane"
  194.                    aria-selected="true">
  195.                     <span>
  196.                         {% if theme_config('atl-product-detail-show-tab-icons') == 'true' %}
  197.                             {% sw_icon 'box' style {
  198.                                 'namespace': 'AtlKatanaTheme',
  199.                                 'pack':  theme_config('atl-icon-set'),
  200.                                 'class': ' mr-1',
  201.                                 'color': 'text-color',
  202.                                 'size': 'xs'
  203.                             } %}
  204.                         {% endif %}
  206.                         {{ "atl-katana-theme.detail.tabsPaymentAndShipping"|trans|sw_sanitize }}
  207.                     </span>
  209.                     <span class="product-detail-tab-navigation-icon">
  210.                         {% sw_icon 'arrow-head-right' style {
  211.                             'namespace': 'AtlKatanaTheme',
  212.                             'pack':  theme_config('atl-icon-set'),
  213.                             'class': ' pl-1',
  214.                             'color': 'text-color',
  215.                             'size': 'xs'
  216.                         } %}
  217.                     </span>
  218.                 </a>
  219.             </li>
  220.         {% endif %}
  221.     {% endblock %}
  222. {% endblock %}
  224. {% block page_product_detail_tabs_content_review %}
  225.     {{ parent() }}
  227.     {% block page_product_detail_tabs_content_tab %}
  228.         {% if tabDescription and tabContent %}
  229.             <div class="tab-pane fade show"
  230.                  id="tab-tab-pane"
  231.                  role="tabpanel"
  232.                  aria-labelledby="tab-tab">
  233.                 {% sw_include '@Storefront/storefront/skin/global/component/product/tab/tab.html.twig' with { 'content': tabContent } %}
  234.             </div>
  235.         {% endif %}
  236.     {% endblock %}
  238.     {% block page_product_detail_tabs_content_data_sheet %}
  239.         {% if hasDataSheet %}
  240.             <div class="tab-pane fade show"
  241.                  id="data-sheet-tab-pane"
  242.                  role="tabpanel"
  243.                  aria-labelledby="data-sheet-tab">
  244.                 {% sw_include '@Storefront/storefront/skin/global/component/product/tab/data-sheets.html.twig' with { 'product': page.product } %}
  245.             </div>
  246.         {% endif %}
  247.     {% endblock %}
  249.     {% block page_product_detail_tabs_content_payment_shipping %}
  250.         {% if theme_config('atl-product-detail-show-payment-shipping-tab') == 'true' %}
  251.             <div class="tab-pane fade show"
  252.                  id="payment-shipping-tab-pane"
  253.                  role="tabpanel"
  254.                  aria-labelledby="payment-shipping-tab">
  255.                 {% sw_include '@Storefront/storefront/skin/global/component/product/tab/payment-shipping.html.twig' %}
  256.             </div>
  257.         {% endif %}
  258.     {% endblock %}
  259. {% endblock %}