custom/plugins/zenitPlatformSphere/src/Resources/views/storefront/page/content/detail.html.twig line 1

Open in your IDE?
  1. {% sw_extends '@Storefront/storefront/page/content/detail.html.twig' %}
  3. {% block page_content_sections_inner %}
  4.     <div class="cms-sections">
  5.         {% for section in cmsPage.sections %}
  7.             {% if loop.index is same as (1) and isHeroSection is same as (true) %}
  9.                 {# ... section classes #}
  10.                 {% set sectionClasses = ['cms-section-hero', section.cssClass, 'pos-' ~ section.position, 'cms-section-' ~ section.type] %}
  12.                 {# ... set section bg color #}
  13.                 {% if zenCustomFields.category.zenit_sphere_category_image_color is empty %}
  14.                     {% set sectionBgColor = section.backgroundColor ? section.backgroundColor : 'transparent' %}
  15.                 {% else %}
  16.                     {% set sectionBgColor = zenCustomFields.category.zenit_sphere_category_image_color %}
  17.                 {% endif %}
  19.                 {# ... set section bg image #}
  20.                 {% set sectionBgImg = section.backgroundMedia|sw_encode_media_url %}
  22.                 {# ... category image #}
  23.                 {% set categoryMedia = page.header.navigation.active.media %}
  24.                 {% if hasCategoryImage %}
  25.                     {% if categoryMedia %}
  27.                         {# ... category image style #}
  28.                         {% set sectionBgImg = categoryMedia|sw_encode_media_url %}
  30.                         {# ... category image class #}
  31.                         {% set sectionClasses = ['category-image']|merge(sectionClasses) %}
  33.                     {% elseif sectionBgImg %}
  35.                         {# ... category image class #}
  36.                         {% set sectionClasses = ['category-image']|merge(sectionClasses) %}
  38.                     {% endif %}
  39.                 {% endif %}
  41.                 {# ... category overlay class #}
  42.                 {% if sectionCategoryOverlay %}
  43.                     {% set sectionClasses = ['cms-section-overlay']|merge(sectionClasses) %}
  44.                 {% endif %}
  46.                 {# ... set section bg image mode #}
  47.                 {% if section.backgroundMediaMode %}
  48.                     {% set sectionBgImgMode = section.backgroundMediaMode %}
  49.                 {% else %}
  50.                     {% set sectionBgImgMode = 'cover' %}
  51.                 {% endif %}
  53.                 {# ... set opacity style #}
  54.                 {% set categoryImageOpacity = zenCustomFields.category.zenit_sphere_category_image_opacity|replace({'%': ''}) %}
  55.                 {% if categoryImageOpacity is empty or categoryImageOpacity is same as ('inherit') %}
  56.                     {% set sectionBgOpacity = theme_config("zen-category-image-opacity")|number_format %}
  57.                 {% else %}
  58.                     {% set sectionBgOpacity = categoryImageOpacity|number_format %}
  59.                 {% endif %}
  61.                 {# ... set attachment style #}
  62.                 {% if zenCustomFields.category.zenit_sphere_category_image_attachment is empty or zenCustomFields.category.zenit_sphere_category_image_attachment is same as ('inherit') %}
  63.                     {% set sectionBgAttachment = theme_config("zen-category-image-attachment") %}
  64.                 {% else %}
  65.                     {% set sectionBgAttachment = zenCustomFields.category.zenit_sphere_category_image_attachment %}
  66.                 {% endif %}
  68.                 {# ... set position style #}
  69.                 {% if zenCustomFields.category.zenit_sphere_category_image_position is empty or zenCustomFields.category.zenit_sphere_category_image_position is same as ('inherit') %}
  70.                     {% set sectionBgPosition = theme_config("zen-category-image-position") %}
  71.                 {% else %}
  72.                     {% set sectionBgPosition = zenCustomFields.category.zenit_sphere_category_image_position %}
  73.                 {% endif %}
  75.                 {# ... bg image class #}
  76.                 {% if sectionBgImg %}
  77.                     {% set sectionClasses = ['bg-image']|merge(sectionClasses) %}
  78.                 {% endif %}
  80.                 {# ... bg color class #}
  81.                 {% if sectionBgColor %}
  82.                     {% set sectionClasses = ['bg-color']|merge(sectionClasses) %}
  83.                 {% endif %}
  85.                 {# ... contrast class #}
  86.                 {% if zenCustomFields.category.zenit_sphere_category_image_contrast is empty or zenCustomFields.category.zenit_sphere_category_image_contrast is same as ('inherit') %}
  87.                     {% set sectionClasses = [theme_config("zen-category-image-contrast")]|merge(sectionClasses) %}
  88.                 {% else %}
  89.                     {% set sectionClasses = [zenCustomFields.category.zenit_sphere_category_image_contrast]|merge(sectionClasses) %}
  90.                 {% endif %}
  92.                 {# ... opacity class #}
  93.                 {% if sectionBgOpacity < 100 and sectionBgColor %}
  94.                     {% set sectionClasses = ['has-opacity']|merge(sectionClasses) %}
  95.                 {% endif %}
  97.                 {% set layout = section.sizingMode ? section.sizingMode|replace({"_": "-"}) : "container" %}
  99.                 {% block zen_page_content_section_category_image %}
  100.                     <div class="cms-section {{ layout }} {{ sectionClasses|join(' ') }}"
  101.                          style="{% if sectionBgAttachment %}background-attachment: {{ sectionBgAttachment }};{% endif %}{% if sectionBgPosition %}background-position: {{ sectionBgPosition }};{% endif %}{% if sectionBgColor %}background-color: {{ sectionBgColor }};{% endif %}{% if sectionBgImg %}background-image: url('{{ sectionBgImg }}');background-size: {{ sectionBgImgMode }};{% endif %}">
  103.                         {% if sectionBgOpacity < 100 and sectionBgColor %}
  104.                             <div class="cms-section-bg-color-overlay"
  105.                                  style="background-color: {{ sectionBgColor }}; opacity: {{(100 - sectionBgOpacity|number_format) / 100 }};">
  106.                             </div>
  107.                         {% endif %}
  109.                         {% sw_include "@Storefront/storefront/section/cms-section-" ~ section.type ~ ".html.twig" %}
  110.                     </div>
  111.                 {% endblock %}
  113.                 {# ... add default breadcrumbs, after first sections if it's an hero section  #}
  114.                 {% if defaultBreadcrumbs %}
  115.                     {# ... check if there is any breadcrumb to show #}
  116.                     {% if sw_breadcrumb_full(page.header.navigation.active, context.context) %}
  117.                         <div class="breadcrumb-container">
  118.                             <div class="container">
  119.                                 <div class="breadcrumb-wrap cms-breadcrumb justify-content-{{ theme_config('zen-breadcrumbs-align')|replace({'flex-': ''}) }}">
  120.                                     {% block cms_breadcrumb %}
  121.                                         {% sw_include '@Storefront/storefront/layout/breadcrumb.html.twig' with {
  122.                                             navigationTree: page.header.navigation.tree,
  123.                                             category: page.header.navigation.active
  124.                                         } only %}
  125.                                     {% endblock %}
  126.                                 </div>
  127.                             </div>
  128.                         </div>
  129.                     {% endif %}
  130.                 {% endif %}
  132.             {% else %}
  133.                 {% set sectionBgColor = section.backgroundColor %}
  134.                 {% set sectionBgImg = section.backgroundMedia|sw_encode_media_url %}
  135.                 {% set sectionBgImgMode = section.backgroundMediaMode %}
  137.                 {% set sectionClasses = [section.cssClass, 'pos-' ~ section.position, 'cms-section-' ~ section.type] %}
  139.                 {% if sectionBgImg %}
  140.                     {% set sectionClasses = ['bg-image']|merge(sectionClasses) %}
  141.                 {% endif %}
  143.                 {% if sectionBgColor %}
  144.                     {% set sectionClasses = ['bg-color']|merge(sectionClasses) %}
  145.                 {% endif %}
  147.                 {# ... category overlay class #}
  148.                 {% if loop.index is same as (1) and sectionCategoryOverlay is same as (true) %}
  149.                     {% if sectionCategoryOverlay %}
  150.                         {% set sectionClasses = ['cms-section-overlay']|merge(sectionClasses) %}
  151.                     {% endif %}
  152.                 {% endif %}
  154.                 {% set layout = section.sizingMode ? section.sizingMode|replace({"_": "-"}) : "container" %}
  156.                 {% block page_content_section %}
  157.                     <div class="cms-section {{ layout }} {{ sectionClasses|join(' ') }}"
  158.                          style="{% if sectionBgColor %}background-color: {{ sectionBgColor }};{% endif %}{% if sectionBgImg %}background-image: url('{{ sectionBgImg }}');background-size: {{ section.backgroundMediaMode }};{% endif %}">
  160.                         {% sw_include "@Storefront/storefront/section/cms-section-" ~ section.type ~ ".html.twig" %}
  161.                     </div>
  162.                 {% endblock %}
  163.             {% endif %}
  164.         {% endfor %}
  165.     </div>
  166. {% endblock %}