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