custom/plugins/WynTheme/src/Resources/views/storefront/component/buy-widget/buy-widget.html.twig line 1

Open in your IDE?
  1. {% sw_extends '@Storefront/storefront/component/buy-widget/buy-widget.html.twig' %}
  3. {% block buy_widget %}
  4.   <div class="product-detail-buy-box-container product-detail-buy{% if elementId %}-{{ elementId }}{% endif %} js-magnifier-zoom-image-container">
  5.     {% block buy_widget_rich_snippets %}
  6.       {{ parent() }}
  7.     {% endblock %}
  9.     {% if not feature('FEATURE_NEXT_16992') %}
  10.       {# @deprecated tag:v6.5.0 tag:)(FEATURE_NEXT_16992) - Block will be removed in v6.5.0 #}
  11.       {% block buy_widget_not_available %}
  12.       {% endblock %}
  13.     {% endif %}
  15.     <div class="product-first-row">
  16.       <div class="chip">
  17.         {{ product.seoCategory.translated.name }}
  18.       </div>
  19.     </div>
  21.     <div class="product-first-row-buttons">
  22. {#      TODO class="btn btn-icon btn-icon--light btn-icon--small btn-icon--with-shadow js-add-product-to-comparison js-tooltip"#}
  23.       <wyn-button
  24.         variant="secondary"
  25.         size="small"
  26.         icon-button
  27.         class="js-add-product-to-comparison js-tooltip"
  28.         data-product-id="{{ product.id }}"
  29.         data-product-name="{{ product.translated.name }}"
  30.         title="{{ "Vergleichen"|trans|striptags }}"
  31.       >
  32.         {% sw_icon 'compare' style { 'slotAttr': 'icon' } %}
  33.       </wyn-button>
  34.       {% sw_include '@Storefront/storefront/component/product/card/wishlist.html.twig' with {
  35.         showText: false,
  36.         size: 'md',
  37.         productId: product.id
  38.       } %}
  39.     </div>
  41.     <h1 class="product-detail-name" itemprop="name">
  42.       {{ product.translated.name|raw }}
  43.     </h1>
  45.     {% block buy_widget_buy_container %}
  46.       <div
  47.         class="product-detail-buy-box-content"
  48.         itemprop="offers"
  49.         itemscope
  50.         itemtype="{% if product.calculatedPrices|length > 1 %}http://schema.org/AggregateOffer{% else %}http://schema.org/Offer{% endif %}"
  51.       >
  52.         {% block buy_widget_data %}
  53.           {% block buy_widget_data_rich_snippet_url %}
  54.             {{ parent() }}
  55.           {% endblock %}
  57.           {% block buy_widget_data_rich_snippet_price_range %}
  58.             {{ parent() }}
  59.           {% endblock %}
  61.           {% block buy_widget_data_rich_snippet_price_currency %}
  62.             {{ parent() }}
  63.           {% endblock %}
  65.           {# Product number #}
  66.           {% block buy_widget_ordernumber_container %}
  67.             {% if product.productNumber %}
  68.               <div class="product-detail-ordernumber-container">
  69.                 {% block buy_widget_ordernumber_label %}
  70.                   <span class="product-detail-ordernumber-label">
  71.                     {{ "detail.productNumberLabel"|trans|sw_sanitize }}
  72.                   </span>
  73.                 {% endblock %}
  74.                 {% block buy_widget_ordernumber %}
  75.                   <meta
  76.                     itemprop="productID"
  77.                     content="{{ product.id }}"
  78.                   />
  79.                   <span
  80.                     class="product-detail-ordernumber"
  81.                     itemprop="sku"
  82.                   >
  83.                     {{ product.productNumber }}
  84.                   </span>
  85.                 {% endblock %}
  86.               </div>
  87.             {% endif %}
  88.           {% endblock %}
  90.           {# Review info #}
  91.           {% set remoteClickOptions = {
  92.             selector: "#review-tab-" ~ product.id,
  93.             scrollToElement: true
  94.           } %}
  95.           {% set reviewTabHref = "#review-tab-" ~ product.id ~ "-pane" %}
  96.           {% block buy_widget_reviews %}
  97.             {% if product.ratingAverage > 0 and totalReviews > 0 and config('core.listing.showReview') %}
  98.               <div class="product-detail-reviews">
  99.                 {% sw_include '@Storefront/storefront/component/review/rating.html.twig' with {
  100.                   points: product.ratingAverage,
  101.                   style: 'text-primary'
  102.                 } %}
  103.                 <a
  104.                   data-toggle="tab"
  105.                   class="product-detail-reviews-link"
  106.                   data-offcanvas-tabs="true"
  107.                   data-remote-click="true"
  108.                   data-remote-click-options='{{ remoteClickOptions|json_encode }}'
  109.                   href="{{ reviewTabHref }}"
  110.                   aria-controls="review-tab-pane"
  111.                 >
  112.                   ({{ totalReviews }})
  113.                 </a>
  114.               </div>
  115.             {% endif %}
  116.           {% endblock %}
  117.         {% endblock %}
  119.         <div class="product-properties">
  120.           {% for property in product.sortedProperties.elements %}
  121.             <div class="product-properties__label">
  122.               {{ property.translated.name }}:
  123.             </div>
  124.             {% for option in property.options.elements %}
  125.               {% if loop.index > 1 %}
  126.                 <div></div>
  127.               {% endif %}
  128.               {% if option.colorHexCode %}
  129.                 <div
  130.                   class="product-properties__value {% if option.colorHexCode == '#ffffffff' %}product-properties__value--white{% endif %}"
  131.                   style="color: {{ option.colorHexCode }};"
  132.                 >
  133.                   <div class="product-properties__color-icon"></div>
  134.                   {{ option.translated.name }}
  135.                 </div>
  136.               {% else %}
  137.                 <div class="product-properties__value">
  138.                   {{ option.translated.name }}
  139.                 </div>
  140.               {% endif %}
  141.             {% endfor %}
  142.           {% endfor %}
  144.           {% if product.purchaseUnit %}
  145.             <div class="product-properties__label">
  146.               {{ 'detail.amount'|trans }}:
  147.             </div>
  148.             <div class="product-properties__value">
  149.               {{ product.purchaseUnit }}
  150.               {{ product.unit.translated.name }}
  151.             </div>
  152.           {% endif %}
  153.         </div>
  155.         {% block buy_widget_configurator_include %}
  156.           {% if product.parentId and configuratorSettings|length > 0 %}
  157.             <div class="product-detail-configurator-container">
  158.               {% sw_include '@Storefront/storefront/component/buy-widget/configurator.html.twig' %}
  159.             </div>
  160.           {% endif %}
  161.         {% endblock %}
  163.         {% block buy_widget_price %}
  164.           <div class="product-detail-price-container">
  165.             {% sw_include '@Storefront/storefront/component/buy-widget/buy-widget-price.html.twig' %}
  166.           </div>
  167.         {% endblock %}
  169.         {% block buy_widget_tax %}
  170.           <div class="product-detail-tax-container">
  171.             {% if context.taxState == "gross" %}
  172.               {% set taxText = "general.grossTaxInformation"|trans|sw_sanitize %}
  173.             {% else %}
  174.               {% set taxText = "general.netTaxInformation"|trans|sw_sanitize %}
  175.             {% endif %}
  177.             <p class="product-detail-tax">
  178.               {% block buy_widget_tax_link %}
  179.                 <a
  180.                   class="product-detail-tax-link"
  181.                   href="{{ path('frontend.cms.page',{ id: config('core.basicInformation.shippingPaymentInfoPage') }) }}"
  182.                   title="{{ taxText }}"
  183.                   data-toggle="modal"
  184.                   data-url="{{ path('frontend.cms.page',{ id: config('core.basicInformation.shippingPaymentInfoPage') }) }}"
  185.                 >
  186.                   * {{ taxText }}
  187.                 </a>
  188.               {% endblock %}
  189.             </p>
  190.           </div>
  191.         {% endblock %}
  193.         {% block buy_widget_buy_form %}
  194.           {% if product.active %}
  195.             <div class="product-detail-form-container">
  196.               {% sw_include '@Storefront/storefront/component/buy-widget/buy-widget-form.html.twig' %}
  197.             </div>
  198.           {% endif %}
  199.         {% endblock %}
  201.         {% block buy_widget_delivery_informations %}
  202.           <div class="product-detail-delivery-information">
  203.             {% sw_include '@Storefront/storefront/component/delivery-information.html.twig' %}
  204.           </div>
  205.         {% endblock %}
  206.       </div>
  207.     {% endblock %}
  209.     {% if config('core.cart.wishlistEnabled') %}
  210.       {% block buy_widget_wishlist %}
  211.         {# No wishlist button here #}
  212.       {% endblock %}
  213.     {% endif %}
  215.     {% block buy_widget_share_buttons %}
  216.       {% if product.customFields.wyn_products_socialmedia_share_|length > 0 %}
  217.         <div class="share-links">
  218.           <div class="share-links__text">
  219.             {{ 'detail.shareProduct'|trans }}
  220.           </div>
  221.           <ul class="share-links__list">
  222.             {% for socialmedia_share in product.customFields.wyn_products_socialmedia_share_ %}
  223.               {% if socialmedia_share == 'whatsapp' %}
  224.                 {% set name = 'WhatsApp' %}
  225.               {% elseif socialmedia_share == 'twitter' %}
  226.                 {% set name = 'Twitter' %}
  227.               {% elseif socialmedia_share == 'instagram' %}
  228.                 {% set name = 'Instagram' %}
  229.               {% elseif socialmedia_share == 'facebook' %}
  230.                 {% set name = 'Facebook' %}
  231.               {% elseif socialmedia_share == 'reddit' %}
  232.                 {% set name = 'Reddit' %}
  233.               {% elseif socialmedia_share == 'linkedin' %}
  234.                 {% set name = 'LinkedIn' %}
  235.               {% else %}
  236.                 {% set name = '' %}
  237.               {% endif %}
  238.               <li class="share-links__item">
  239.                 <wyn-button
  240.                   variant="secondary"
  241.                   icon-button
  242.                   class="js-share js-tooltip"
  243.                   title="{{ name }}"
  244.                   data-social-site="{{ socialmedia_share }}"
  245.                   data-social-text="{{ product.translated.name|raw }}"
  246.                 >
  247.                   {% sw_include "@Storefront/storefront/utilities/icon.html.twig" with { 'name': socialmedia_share, 'slotAttr': 'icon' } %}
  248.                 </wyn-button>
  249.               </li>
  250.             {% endfor %}
  251.           </ul>
  252.         </div>
  253.       {% endif %}
  254.     {% endblock %}
  255.   </div>
  256. {% endblock %}