vendor/crehler/mojebambino-catalog/src/Resources/views/storefront/page/catalog/detail.html.twig line 1

Open in your IDE?
  1. {% sw_extends '@Storefront/storefront/base.html.twig' %}
  3. {% block base_head %}
  4.     {{ parent() }}
  5.     <style>
  6.         .cr-catalog-pre-loader {
  7.             position: fixed;
  8.             top: 0;
  9.             left: 0;
  10.             width: 100vw;
  11.             height: 100vh;
  12.             background: #FFFFFF;
  13.             display: -ms-flexbox;
  14.             display: -webkit-flex;
  15.             display: flex;
  16.             -ms-flex-line-pack: center;
  17.             align-content: center;
  18.             -ms-flex-align: center;
  19.             align-items: center;
  20.             -ms-flex-pack: center;
  21.             justify-content: center;
  22.             z-index: 10000;
  23.         }
  25.         .cr-catalog-pre-loader .page-loader__content {
  26.             display: -ms-flexbox;
  27.             display: -webkit-flex;
  28.             display: flex;
  29.             -ms-flex-direction: column;
  30.             flex-direction: column;
  31.             -ms-flex-align: center;
  32.             align-items: center;
  33.         }
  35.         .cr-catalog-pre-loader .page-loader__content .catalog-name {
  36.             font: normal normal normal 24px/26px "Ubuntu-Bold";
  37.             -ms-flex-wrap: wrap;
  38.             flex-wrap: wrap;
  39.             margin-bottom: 30px;
  40.         }
  42.         .lds-roller {
  43.             display: inline-block;
  44.             position: relative;
  45.             width: 80px;
  46.             height: 80px;
  47.         }
  48.         .lds-roller div {
  49.             animation: lds-roller 1.2s cubic-bezier(0.5, 0, 0.5, 1) infinite;
  50.             transform-origin: 40px 40px;
  51.         }
  52.         .lds-roller div:after {
  53.             content: " ";
  54.             display: block;
  55.             position: absolute;
  56.             width: 7px;
  57.             height: 7px;
  58.             border-radius: 50%;
  59.             background: #164493;
  60.             margin: -4px 0 0 -4px;
  61.         }
  62.         .lds-roller div:nth-child(1) {
  63.             animation-delay: -0.036s;
  64.         }
  65.         .lds-roller div:nth-child(1):after {
  66.             top: 63px;
  67.             left: 63px;
  68.         }
  69.         .lds-roller div:nth-child(2) {
  70.             animation-delay: -0.072s;
  71.         }
  72.         .lds-roller div:nth-child(2):after {
  73.             top: 68px;
  74.             left: 56px;
  75.         }
  76.         .lds-roller div:nth-child(3) {
  77.             animation-delay: -0.108s;
  78.         }
  79.         .lds-roller div:nth-child(3):after {
  80.             top: 71px;
  81.             left: 48px;
  82.         }
  83.         .lds-roller div:nth-child(4) {
  84.             animation-delay: -0.144s;
  85.         }
  86.         .lds-roller div:nth-child(4):after {
  87.             top: 72px;
  88.             left: 40px;
  89.         }
  90.         .lds-roller div:nth-child(5) {
  91.             animation-delay: -0.18s;
  92.         }
  93.         .lds-roller div:nth-child(5):after {
  94.             top: 71px;
  95.             left: 32px;
  96.         }
  97.         .lds-roller div:nth-child(6) {
  98.             animation-delay: -0.216s;
  99.         }
  100.         .lds-roller div:nth-child(6):after {
  101.             top: 68px;
  102.             left: 24px;
  103.         }
  104.         .lds-roller div:nth-child(7) {
  105.             animation-delay: -0.252s;
  106.         }
  107.         .lds-roller div:nth-child(7):after {
  108.             top: 63px;
  109.             left: 17px;
  110.         }
  111.         .lds-roller div:nth-child(8) {
  112.             animation-delay: -0.288s;
  113.         }
  114.         .lds-roller div:nth-child(8):after {
  115.             top: 56px;
  116.             left: 12px;
  117.         }
  118.         @keyframes lds-roller {
  119.             0% {
  120.                 transform: rotate(0deg);
  121.             }
  122.             100% {
  123.                 transform: rotate(360deg);
  124.             }
  125.         }
  128.         #test-webp-image,
  129.         #test-avif-image {
  130.             visibility: hidden;
  131.         }
  132.     </style>
  133. {% endblock %}
  135. {% block base_body_inner %}
  136.     {% set appSnippets = {
  137.         tutorialHeader: 'cr-catalog.tutorial.header'|trans|sw_sanitize,
  138.         tutorialCancelBtn: 'cr-catalog.tutorial.cancelBtn'|trans|sw_sanitize,
  139.         tutorialExitBtn: 'cr-catalog.tutorial.exitBtn'|trans|sw_sanitize,
  140.         tutorialShowBtn: 'cr-catalog.tutorial.showBtn'|trans|sw_sanitize,
  141.         tutorialNextBtn: 'cr-catalog.tutorial.nextBtn'|trans|sw_sanitize,
  142.         tutorialSkipBtn: 'cr-catalog.tutorial.skipBtn'|trans|sw_sanitize,
  143.         tutorialPrevBtn: 'cr-catalog.tutorial.prevBtn'|trans|sw_sanitize,
  144.         tutorialDesktopStep1Title: 'cr-catalog.tutorial.desktop.step1.title'|trans|sw_sanitize,
  145.         tutorialDesktopStep1Content: 'cr-catalog.tutorial.desktop.step1.content'|trans|sw_sanitize,
  146.         tutorialDesktopStep2Title: 'cr-catalog.tutorial.desktop.step2.title'|trans|sw_sanitize,
  147.         tutorialDesktopStep2Content: 'cr-catalog.tutorial.desktop.step2.content'|trans|sw_sanitize,
  148.         tutorialDesktopStep3Title: 'cr-catalog.tutorial.desktop.step3.title'|trans|sw_sanitize,
  149.         tutorialDesktopStep3Content: 'cr-catalog.tutorial.desktop.step3.content'|trans|sw_sanitize,
  150.         tutorialDesktopStep4Title: 'cr-catalog.tutorial.desktop.step4.title'|trans|sw_sanitize,
  151.         tutorialDesktopStep4Content: 'cr-catalog.tutorial.desktop.step4.content'|trans|sw_sanitize,
  152.         tutorialDesktopStep5Title: 'cr-catalog.tutorial.desktop.step5.title'|trans|sw_sanitize,
  153.         tutorialDesktopStep5Content: 'cr-catalog.tutorial.desktop.step5.content'|trans|sw_sanitize,
  154.         tutorialDesktopStep6Title: 'cr-catalog.tutorial.desktop.step6.title'|trans|sw_sanitize,
  155.         tutorialDesktopStep6Content: 'cr-catalog.tutorial.desktop.step6.content'|trans|sw_sanitize
  157.     } %}
  158.     <div id="catalog-app" data-snippets='{{ appSnippets|json_encode }}' data-catalog="{{ page.catalog.id }}" data-page="{{ page.catalogPageEntity.id }}" data-name="{{ page.catalog.name }}">
  159.         <div class="page-loader cr-catalog-pre-loader">
  160.             <div class="page-loader__content">
  161.                 <h1 class="catalog-name">{{ page.catalog.name }}</h1>
  162.                 <div class="lds-roller"><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div></div>
  163.             </div>
  164.         </div>
  165.         <picture>
  166.             {% if apiRequestedPage.mediaEntity.extensions.mediaBoosters %}
  167.                 {% if apiRequestedPage.mediaEntity.extensions.mediaBoosters.avifMedia %}
  168.                     <source srcset="{{ apiRequestedPage.mediaEntity.extensions.mediaBoosters.avifMedia.generatedPath }}"
  169.                             type="image/avif">
  170.                 {% endif %}
  171.                 {% if apiRequestedPage.mediaEntity.extensions.mediaBoosters.webpMedia %}
  172.                     <source srcset="{{ apiRequestedPage.mediaEntity.extensions.mediaBoosters.webpMedia.generatedPath }}"
  173.                             type="image/webp">
  174.                 {% endif %}
  175.             {% endif %}
  176.             <source srcset="{{ apiRequestedPage.mediaEntity.url }}" type="image/png">
  177.             <img src="{{ apiRequestedPage.mediaEntity.url }}" alt="{{ apiRequestedPage.page.content | escape }}"/>
  178.         </picture>
  179.     </div>
  181. {% endblock %}
  183. {% block base_script_router %}
  184.     {{ parent() }}
  185.     <script>
  186.         window.catalogRouter = {
  187.             'basic': '{{ path('store-api.catalog.basic') }}',
  188.             'flat': '{{ path('store-api.catalog.flat') }}',
  189.             'page': '{{ path('store-api.catalog.page') }}',
  190.             'tableOfContents': '{{ path('store-api.catalog.table-of-contents') }}',
  191.             'bookmark': '{{ path('store-api.catalog.bookmark') }}',
  192.             'products': '{{ path('store-api.catalog.products') }}',
  193.             'shopwareProducts': '{{ path('store-api.product.search') }}',
  194.             'shopwareProduct': '{{ path('store-api.product.detail', {'productId': '$' }) }}',
  195.             'pageDetail': '{{ path('store-api.catalog.page-detail') }}',
  196.             'combinationFinder': '{{ path('store-api.product.switch', { 'productId': '$' }) }}',
  197.             'cart': '{{ path('store-api.checkout.cart.read') }}',
  198.             'cartLineItem': '{{ path('store-api.checkout.cart.update-lineitem') }}',
  199.             'storefrontCart': '{{ path('frontend.checkout.cart.page') }}',
  200.             'storefrontConfirm': '{{ path('frontend.checkout.confirm.page') }}',
  201.             'index': '{{ path('frontend.home.page') }}',
  202.             'search': '{{ path('store-api.catalog.search') }}',
  203.             'file': '{{ path('store-api.catalog.file') }}',
  204.             'print': '{{ path('frontend.catalog.print', {catalogId: page.catalog.id}) }}',
  205.             'printPage': '{{ path('frontend.catalog.print-page', {pdfId: '_pdfId_'}) }}',
  206.             'printMergePrepare': '{{ path('store-api.catalog.print-merge-prepare', {leftPdfId: '_leftPdfId_', rightPdfId: '_rightPdfId_'}) }}',
  207.             'printMerge': '{{ path('frontend.catalog.print-merge', {leftPdfId: '_leftPdfId_', rightPdfId: '_rightPdfId_'}) }}',
  208.             'shoppingListStorefrontIndex': '{{ path('frontend.shopping-list.page') }}',
  209.             'shoppingListInfo': '{{ path('frontend.shopping-list.json') }}',
  210.             'shoppingListCreate': '{{ path('frontend.shopping-list.page.create') }}',
  211.             'shoppingListDeleteItem': '{{ path('frontend.shopping-list.page.deleteItem') }}',
  212.             'shoppingListAdd': '{{ path('frontend.shopping-list.page.addItem') }}',
  213.             'shoppingListWidget': '{{ path('widgets.shopping-list-product.add', { 'productId': '_productId_' }) }}'
  214.         };
  215.         window.appSnippets = '{{ appSnippets|json_encode|escape('js') }}';
  216.         window.currencySettings = '{{ currencySettings|json_encode|escape('js') }}';
  217.         window.shoppingListAddToken = '{{ sw_csrf('frontend.shopping-list.page.addItem', {"mode": "token"}) }}';
  218.         window.shoppingListCreateToken = '{{ sw_csrf('frontend.shopping-list.page.create', {"mode": "token"}) }}';
  219.         window.shoppingListDeleteItemToken = '{{ sw_csrf('frontend.shopping-list.page.deleteItem', {"mode": "token"}) }}';
  222.         window.router['frontend.shopping-list.page.addItem'] = '{{ path('frontend.shopping-list.page.addItem') }}';
  223.         window.router['frontend.shopping-list.page.create'] = '{{ path('frontend.shopping-list.page.create') }}';
  224.         window.router['frontend.shopping-list.info'] = '{{ path('frontend.shopping-list.info') }}';
  225.     </script>
  226. {% endblock %}