custom/plugins/dupp_sync4_api/src/Resources/views/storefront/visual-order/visual-order.html.twig line 1

Open in your IDE?
  1. {% block sync4_content_visual_order %}
  2.     {% set absoluteBaseUrl = app.request.attributes.get('sw-sales-channel-absolute-base-url') %}
  3.     {% set baseUrl = app.request.attributes.get('sw-sales-channel-base-url') %}
  4.     {% set fullUrl = absoluteBaseUrl ~ baseUrl %}
  6.     <div class="visual-order is-{{ config('Sync4ApiExport.config.visualOrderLayout') }}">
  7.         {% set visualOrder = context.context.extensions.Sync4ApiExport.visualOrder %}
  8.         {% set explosionimages = visualOrder.explosionimages %}
  10.         {% for element in explosionimages %}
  11.             <div class="visual-order-element{% if visualOrder.hover is same as (true) %} is-hover{% endif %}">
  12.                 {% block sync4_content_visual_order_styles %}
  13.                     <style>
  14.                         {% for marker in element.markings %}
  15.                         #marker-{{ marker.id }} {
  16.                             top: {{ marker.top ~'%' }};
  17.                             left: {{ marker.left ~'%' }};
  18.                             height: {{ marker.height ~'%' }};
  19.                             width: {{ marker.width ~'%' }};
  20.                         }
  21.                         {% endfor %}
  22.                     </style>
  23.                 {% endblock %}
  25.                 {% block sync4_content_visual_order_image %}
  26.                     <div class="visual-order-image">
  27.                         {% set mediaId = element.source %}
  28.                         {% set mediaCollection = searchMedia([mediaId], context.context) %}
  29.                         {% set media = mediaCollection.get(mediaId) %}
  31.                         {% sw_thumbnails 'my-thumbnails' with {
  32.                             media: media,
  33.                             attributes: {
  34.                                 'title': "#{element.imagename}",
  35.                                 'alt': "#{element.imagename}"
  36.                             }
  37.                         } %}
  38.                     </div>
  39.                 {% endblock %}
  41.                 {% block sync4_content_visual_order_mapping %}
  42.                     <div class="visual-order-mapping">
  43.                         <ul class="mapping-list">
  44.                             {% for marker in element.markings %}
  45.                                 <li id="marker-{{ marker.id }}" class="marker">
  46.                                     {% if marker.type is same as ('Category') %}
  47.                                         {% set url = fullUrl ~ '/navigation/' ~ marker.link|join %}
  48.                                     {% elseif marker.type is same as ('Product') %}
  49.                                         {% if marker.link|length > 1 %}
  50.                                             {% set url = fullUrl ~ '/search?search=' ~ marker.link|join(',') %}
  51.                                         {% else %}
  52.                                             {% set url = seoUrl('frontend.detail.page', { 'productId': marker.link|join }) %}
  53.                                         {% endif %}
  54.                                     {% elseif marker.type is same as ('Url') %}
  55.                                         {% if marker.link|join starts with 'http' %}
  56.                                             {% set target = '_blank' %}
  57.                                             {% set url = marker.link|join %}
  58.                                         {% else %}
  59.                                             {% set url = fullUrl ~ marker.link|join %}
  60.                                         {% endif %}
  62.                                     {% endif %}
  64.                                     <a href="{{ url }}" class="marker-link"{% if target %} target="{{ target }}"{% endif %}></a>
  65.                                 </li>
  66.                             {% endfor %}
  67.                         </ul>
  68.                     </div>
  69.                 {% endblock %}
  70.             </div>
  71.         {% endfor %}
  72.     </div>
  73. {% endblock %}