vendor/store.shopware.com/netzppowerpack6/src/Resources/views/storefront/element/cms-element-netzp-powerpack6-card.html.twig line 1

Open in your IDE?
  1. {% block netzp_powerpack6_card %}
  2.     {% set cardType = element.config.type.value %}
  3.     {% set isTwoSided = cardType == 'flip' or cardType == 'reveal' %}
  4.     {% set isPopup = cardType == 'popup' %}
  5.     {% set isStatic = cardType == 'static' %}
  6.     {% set isBlur = cardType == 'blur' %}
  7.     {% set blurText = isBlur and element.config.blurText.value %}
  8.     {% set hasUrl = element.config.url.value %}
  9.     {% set hasUrlText = element.data.urlText != "" %}
  10.     {% set hasIcon = element.config.icon.value != "" %}
  11.     {% set styleHeight = "height: " ~ element.config.height.value ~ "rem; width: 100%;" %}
  12.     {% set styleIcon = "color: " ~ element.config.color1.value ~ ';' %}
  13.     {% set styleFront = "background-color: " ~ element.config.backgroundColor1.value ~ "; color: " ~ element.config.color1.value ~ ';' %}
  14.     {% set styleBack = "background-color: " ~ element.config.backgroundColor2.value ~ "; color: " ~ element.config.color2.value ~ ';' %}
  15.     {% set classImageFront = element.config.imageCover1.value ? 'cover' : 'contain' %}
  16.     {% set classImageBack = element.config.imageCover2.value ? 'cover' : 'contain' %}
  17.     {% set styleImageFront = 'opacity: ' ~ element.config.imageOpacity1.value ~ '%;' %}
  18.     {% set styleImageBack = 'opacity: ' ~ element.config.imageOpacity2.value ~ '%;' %}
  20.     <div class="netzp-powerpack6-card-element"
  21.          id="card_{{ element.id }}"
  22.          style="{{ styleHeight }}">
  24.         {% if hasUrl and (not hasUrlText and not isPopup) or isStatic %}
  25.         <a class="link" href="{{ element.config.url.value }}" {% if element.config.urlNewWindow.value %}target="_blank"{% endif %}>
  26.             {% endif %}
  27.             {% block netzp_powerpack6_card_inner %}
  28.                 <div class="card-inner card-{{ cardType }}">
  29.                     {% block netzp_powerpack6_card_front %}
  30.                         <div class="card-front" style="{{ styleFront }}" {% if isPopup %}data-toggle="modal" data-target="#popup_{{ element.id }}"{% endif %}>
  31.                             {% if element.data.image1.media %}
  32.                                 {% block netzp_powerpack6_card_front_image %}
  33.                                     {% sw_thumbnails 'pp_card_thumbnail1' with {
  34.                                         media: element.data.image1.media,
  35.                                         sizes: {
  36.                                             'xs': '501px',
  37.                                             'sm': '315px',
  38.                                             'md': '427px',
  39.                                             'lg': '333px',
  40.                                             'xl': '284px'
  41.                                         },
  42.                                         attributes: {
  43.                                             'class': classImageFront ~ (isBlur ? ' blur-effect'),
  44.                                             'style': styleImageFront,
  45.                                             'alt':   element.data.image1.media.translated.alt ?: '',
  46.                                             'title': element.data.image1.media.translated.title ?: ''
  47.                                         }
  48.                                     } %}
  50.                                 {% endblock %}
  51.                             {% endif %}
  53.                             {% block netzp_powerpack6_card_front_text %}
  54.                                 <div class="card-text {% if blurText %}blur-effect{% endif %}">
  55.                                     {{ element.data.text1|raw }}
  56.                                 </div>
  57.                             {% endblock %}
  59.                             {% if hasUrl and hasUrlText and not isTwoSided and not isPopup %}
  60.                                 {% block netzp_powerpack6_card_front_link %}
  61.                                     <div class="card-link {% if blurText %}blur-effect{% endif %}">
  62.                                         <a href="{{ element.config.url.value }}" {% if element.config.urlNewWindow.value %}target="_blank"{% endif %}
  63.                                            class="btn btn-primary">
  64.                                             {{ element.data.urlText }}
  65.                                         </a>
  66.                                     </div>
  67.                                 {% endblock %}
  68.                             {% endif %}
  70.                             {% if hasIcon %}
  71.                                 {% block netzp_powerpack6_card_front_icon %}
  72.                                     <span class="card-icon" style="{{ styleIcon }}">
  73.                                         <i class="fa {{ element.config.icon.value }}"></i>
  74.                                     </span>
  75.                                 {% endblock %}
  76.                             {% endif %}
  77.                         </div>
  78.                     {% endblock %}
  80.                     {% if isTwoSided %}
  81.                         {% block netzp_powerpack6_card_back %}
  82.                             <div class="card-back" style="{{ styleBack }}">
  83.                                 {% if element.data.image2.media %}
  84.                                     {% block netzp_powerpack6_card_back_image %}
  85.                                         {% sw_thumbnails 'pp_card_thumbnail2' with {
  86.                                             media: element.data.image2.media,
  87.                                             sizes: {
  88.                                                 'xs': '501px',
  89.                                                 'sm': '315px',
  90.                                                 'md': '427px',
  91.                                                 'lg': '333px',
  92.                                                 'xl': '284px'
  93.                                             },
  94.                                             attributes: {
  95.                                                 'class': classImageBack,
  96.                                                 'style': styleImageBack,
  97.                                                 'alt':   element.data.image2.media.translated.alt ?: '',
  98.                                                 'title': element.data.image2.media.translated.title ?: ''
  99.                                             }
  100.                                         } %}
  101.                                     {% endblock %}
  102.                                 {% endif %}
  104.                                 {% block netzp_powerpack6_card_back_text %}
  105.                                     <div class="card-text">
  106.                                         {{ element.data.text2|raw }}
  107.                                     </div>
  108.                                 {% endblock %}
  110.                                 {% if hasUrl and hasUrlText %}
  111.                                     {% block netzp_powerpack6_card_back_link %}
  112.                                         <div class="card-link">
  113.                                             <a href="{{ element.config.url.value }}" {% if element.config.urlNewWindow.value %}target="_blank"{% endif %}
  114.                                                class="btn btn-primary">
  115.                                                 {{ element.data.urlText }}
  116.                                             </a>
  117.                                         </div>
  118.                                     {% endblock %}
  119.                                 {% endif %}
  120.                             </div>
  121.                         {% endblock %}
  122.                     {% endif %}
  123.                 </div>
  124.             {% endblock %}
  125.             {% if hasUrl and (not hasUrlText and not isPopup) or isStatic %}
  126.         </a>
  127.         {% endif %}
  128.     </div>
  130.     {% if isPopup %}
  131.         {% block netzp_powerpack6_card_popup %}
  132.             <div class="modal fade" id="popup_{{ element.id }}"
  133.                  role="dialog" aria-hidden="true">
  134.                 <div class="modal-dialog modal-dialog-centered" role="document">
  135.                     <div class="modal-content netzp-powerpack6-card-element">
  136.                         <div class="modal-body" style="height: 50vh">
  137.                             {% block netzp_powerpack6_card_popup_inner %}
  138.                                 <div class="card-inner card-{{ cardType }}">
  139.                                     <div class="card-back" style="{{ styleBack }}">
  140.                                         {% if hasUrl and not hasUrlText %}
  141.                                         <a class="link" href="{{ element.config.url.value }}" {% if element.config.urlNewWindow.value %}target="_blank"{% endif %}>
  142.                                             {% endif %}
  143.                                             {% if element.data.image2.media %}
  144.                                                 {% block netzp_powerpack6_card_popup_image %}
  145.                                                     {% sw_thumbnails 'pp_card_popup_thumbnail' with {
  146.                                                         media: element.data.image2.media,
  147.                                                         sizes: {
  148.                                                             'xs': '501px',
  149.                                                             'sm': '315px',
  150.                                                             'md': '427px',
  151.                                                             'lg': '333px',
  152.                                                             'xl': '284px'
  153.                                                         },
  154.                                                         attributes: {
  155.                                                             'class': classImageBack,
  156.                                                             'style': styleImageBack,
  157.                                                             'alt':   element.data.image2.media.translated.alt ?: '',
  158.                                                             'title': element.data.image2.media.translated.title ?: ''
  159.                                                         }
  160.                                                     } %}
  161.                                                 {% endblock %}
  162.                                             {% endif %}
  164.                                             {% block netzp_powerpack6_card_popup_text %}
  165.                                                 <div class="card-text">
  166.                                                     {{ element.data.text2|raw }}
  167.                                                 </div>
  168.                                             {% endblock %}
  170.                                             {% if hasUrl and not hasUrlText %}
  171.                                         </a>
  172.                                         {% endif %}
  173.                                     </div>
  174.                                 </div>
  175.                             {% endblock %}
  176.                         </div>
  178.                         {% block netzp_powerpack6_card_popup_footer %}
  179.                             <div class="modal-footer">
  180.                                 {% if hasUrl and hasUrlText %}
  181.                                     {% block netzp_powerpack6_card_popup_footer_link %}
  182.                                         <a href="{{ element.config.url.value }}" {% if element.config.urlNewWindow.value %}target="_blank"{% endif %}
  183.                                            class="btn btn-primary mr-auto">
  184.                                             {{ element.data.urlText }}
  185.                                         </a>
  186.                                     {% endblock %}
  187.                                 {% endif %}
  189.                                 {% block netzp_powerpack6_card_popup_footer_close %}
  190.                                     <button type="button" class="btn" data-dismiss="modal">
  191.                                         {% sw_icon 'x-circle' %}
  192.                                     </button>
  193.                                 {% endblock %}
  194.                             </div>
  195.                         {% endblock %}
  196.                     </div>
  197.                 </div>
  198.             </div>
  199.         {% endblock %}
  200.     {% endif %}
  201. {% endblock %}