custom/plugins/Confi/src/Resources/views/storefront/page/product-detail/index.html.twig line 1

Open in your IDE?
  1. {% sw_extends '@Storefront/storefront/page/product-detail/index.html.twig' %}
  3. {% block base_content %}
  4.     {% block page_product_detail %}
  5.         {% if page.confi is defined %}
  6. {#        <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/css/bootstrap.min.css"#}
  7. {#              integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u"#}
  8. {#              crossorigin="anonymous">#}
  9.         <style>
  10.             /*.cf .row {*/
  11.             /*    display: block;*/
  12.             /*}*/
  14.             /*.cf .hidden {*/
  15.             /*    display: none;*/
  16.             /*}*/
  18.             /*confiapp, .cf, .cf #cf-body {*/
  19.             /*    min-height: 2000px;*/
  20.             /*}*/
  22.             /*.cf #cf-preview {*/
  23.             /*    float: left;*/
  24.             /*}*/
  25.             .modal-backdrop.modal-backdrop-open{
  26.                 opacity: 0.6;
  27.             }
  28.             .fade {
  29.                 opacity: initial;
  30.             }
  31.         </style>
  32.         <div>
  33.             {{ page.confi.css|raw }}
  34.             {{ page.confi.js|raw }}
  35.             {{ page.confi.body|raw }}
  36.             <form
  37.                     id="productDetailPageBuyProductForm"
  38.                     action="{% block page_product_detail_buy_form_action %}{{ path('frontend.checkout.line-item.add') }}{% endblock %}"
  39.                     method="post"
  40.                     class="buy-widget"
  41.                     data-add-to-cart="true">
  43.                 {% block page_product_detail_buy_form_inner_csrf %}
  44.                     {{ sw_csrf('frontend.checkout.line-item.add') }}
  45.                 {% endblock %}
  47. {#                {% set buyable = product.available and product.childCount <= 0 and product.calculatedMaxPurchase > 0 %}#}
  48. {#                {% block page_product_detail_buy_container %}#}
  49. {#                    {% if buyable %}#}
  50. {#                        <div class="{{ formRowClass }} buy-widget-container">#}
  51. {#                            {% block page_product_detail_buy_quantity_container %}#}
  52. {#                                <div class="col-4">#}
  53. {#                                    {% block page_product_detail_buy_quantity %}#}
  54. {#                                        <select name="lineItems[{{ product.id }}][quantity]"#}
  55. {#                                                class="{{ formSelectClass }} product-detail-quantity-select">#}
  56. {#                                            {% for quantity in range(product.minPurchase, product.calculatedMaxPurchase, product.purchaseSteps) %}#}
  57. {#                                                <option value="{{ quantity }}">#}
  58. {#                                                    {{ quantity }}#}
  59. {#                                                    {% if quantity == 1 %}#}
  60. {#                                                        {% if product.translated.packUnit %} {{ product.translated.packUnit }}{% endif %}#}
  61. {#                                                    {% else %}#}
  62. {#                                                        {% if product.translated.packUnitPlural %}#}
  63. {#                                                            {{ product.translated.packUnitPlural }}#}
  64. {#                                                        {% elseif product.translated.packUnit %}#}
  65. {#                                                            {{ product.translated.packUnit }}#}
  66. {#                                                        {% endif %}#}
  67. {#                                                    {% endif %}#}
  68. {#                                                </option>#}
  69. {#                                            {% endfor %}#}
  70. {#                                        </select>#}
  71. {#                                    {% endblock %}#}
  72. {#                                </div>#}
  73. {#                            {% endblock %}#}
  75. {#                            {% block page_product_detail_buy_redirect_input %}#}
  76. {#                                #}{# fallback redirect back to detail page is deactivated via js #}
  77. {#                                <input type="hidden"#}
  78. {#                                       name="redirectTo"#}
  79. {#                                       value="frontend.detail.page">#}
  81. {#                                <input type="hidden"#}
  82. {#                                       name="redirectParameters"#}
  83. {#                                       data-redirect-parameters="true"#}
  84. {#                                       value='{"productId": "{{ product.id }}"}'>#}
  85. {#                            {% endblock %}#}
  87. {#                            {% block page_product_detail_buy_product_buy_info %}#}
  88. {#                                <input type="hidden"#}
  89. {#                                       name="lineItems[{{ product.id }}][id]"#}
  90. {#                                       value="{{ product.id }}">#}
  91. {#                                <input type="hidden"#}
  92. {#                                       name="lineItems[{{ product.id }}][type]"#}
  93. {#                                       value="product">#}
  94. {#                                <input type="hidden"#}
  95. {#                                       name="lineItems[{{ product.id }}][referencedId]"#}
  96. {#                                       value="{{ product.id }}">#}
  97. {#                                <input type="hidden"#}
  98. {#                                       name="lineItems[{{ product.id }}][stackable]"#}
  99. {#                                       value="1">#}
  100. {#                                <input type="hidden"#}
  101. {#                                       name="lineItems[{{ product.id }}][removable]"#}
  102. {#                                       value="1">#}
  103. {#                            {% endblock %}#}
  105. {#                            {% block page_product_detail_product_buy_meta %}#}
  106. {#                                <input type="hidden"#}
  107. {#                                       name="product-name"#}
  108. {#                                       value="{{ product.translated.name }}">#}
  109. {#                                <input type="hidden"#}
  110. {#                                       name="brand-name"#}
  111. {#                                       value="{{ product.manufacturer.getName() }}">#}
  112. {#                            {% endblock %}#}
  114. {#                            {% block page_product_detail_buy_button_container %}#}
  115. {#                                <div class="col-8">#}
  116. {#                                    {% block page_product_detail_buy_button %}#}
  117. {#                                        #}{# @deprecated tag:v6.5.0 - Bootstrap v5 removes `btn-block` class, use `d-grid` wrapper instead #}
  118. {#                                        {% if feature('v6.5.0.0') %}#}
  119. {#                                            <div class="d-grid">#}
  120. {#                                                <button class="btn btn-primary btn-buy"#}
  121. {#                                                        title="{{ "detail.addProduct"|trans|striptags }}"#}
  122. {#                                                        aria-label="{{ "detail.addProduct"|trans|striptags }}">#}
  123. {#                                                    {{ "detail.addProduct"|trans|sw_sanitize }}#}
  124. {#                                                </button>#}
  125. {#                                            </div>#}
  126. {#                                        {% else %}#}
  127. {#                                            <button class="btn btn-primary btn-block btn-buy"#}
  128. {#                                                    title="{{ "detail.addProduct"|trans|striptags }}"#}
  129. {#                                                    aria-label="{{ "detail.addProduct"|trans|striptags }}">#}
  130. {#                                                {{ "detail.addProduct"|trans|sw_sanitize }}#}
  131. {#                                            </button>#}
  132. {#                                        {% endif %}#}
  133. {#                                    {% endblock %}#}
  134. {#                                </div>#}
  135. {#                            {% endblock %}#}
  136. {#                        </div>#}
  137. {#                    {% endif %}#}
  138. {#                {% endblock %}#}
  139.             </form>
  140.         </div>
  141.         <script>
  142.             function is(className, object) {
  143.                 return Object.prototype.toString.call(object) === '[object '+ className +']';
  144.             }
  146.             const DataEncoder = function() {
  147.                 this.levels = [];
  148.                 this.actualKey = null;
  150.             }
  152.             DataEncoder.prototype.__dataEncoding = function(data) {
  153.                 let uriPart = '';
  154.                 const levelsSize = this.levels.length;
  155.                 if (levelsSize) {
  156.                     uriPart = this.levels[0];
  157.                     for(let c = 1; c < levelsSize; c++) {
  158.                         uriPart += '[' + this.levels[c] + ']';
  159.                     }
  160.                 }
  161.                 let finalString = '';
  162.                 if (is('Object', data)) {
  163.                     const keys = Object.keys(data);
  164.                     const l = keys.length;
  165.                     for(let a = 0; a < l; a++) {
  166.                         const key = keys[a];
  167.                         let value = data[key];
  168.                         this.actualKey = key;
  169.                         this.levels.push(this.actualKey);
  170.                         finalString += this.__dataEncoding(value);
  171.                     }
  172.                 } else if (is('Array', data)) {
  173.                     if (!this.actualKey) throw new Error("Directly passed array does not work")
  174.                     const aSize = data.length;
  175.                     for (let b = 0; b < aSize; b++) {
  176.                         let aVal = data[b];
  177.                         this.levels.push(b);
  178.                         finalString += this.__dataEncoding(aVal);
  179.                     }
  180.                 } else {
  181.                     finalString += uriPart + '=' + encodeURIComponent(data) + '&';
  182.                 }
  183.                 this.levels.pop();
  184.                 return finalString;
  185.             }
  187.             DataEncoder.prototype.encode = function(data) {
  188.                 if (!is('Object', data) || !Object.keys(data).length) return null;
  189.                 return this.__dataEncoding(data).slice(0, -1);
  190.             }
  193.             window.addEventListener('DOMContentLoaded', (event) => {
  194.                 confi = {
  195.                     addToCart: function (config, thumbnail) {
  196.                         // var loading = '<div id="loading" style="z-index: 999; position: absolute; top: 0; left: 0; right: 0; bottom: 0; background: rgba(255,255,255,0.7);"><img src="" style="position: fixed; width: 40px; height: 40px; margin-top: -20px; margin-left: -20px; top: 50%; left: 50%;"/></div>';
  197.                         // $('.content-main').append(loading);
  198.                         var configurated = JSON.parse(config);
  199.                         var quantity = configurated.configurator.qty;
  201.                         var myData = {
  202.                             '_csrf_token': '{{ sw_csrf('frontend.confi.addtocart.controller', {"mode": "token"}) }}',
  203.                             'config': configurated,
  204.                             'thumbnail': thumbnail,
  205.                             'id': '{{ page.product.id }}',
  206.                             'quantity': quantity
  207.                         };
  209.                         const encoder = new DataEncoder();
  210.                         var uri = encoder.encode(myData);
  212.                         var request = new XMLHttpRequest();
  214.                         request.open('POST', '/addtocart', true);
  215.                         request.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded;');
  216.                         request.onload = function () {
  217.                             if (this.status >= 200 && this.status < 400) {
  218.                                 const plugin = window.PluginManager.getPluginInstanceFromElement(document.querySelector('[data-add-to-cart]'), 'AddToCart');
  219.                                 plugin._openOffCanvasCarts('/checkout/offcanvas', '');
  220.                                 plugin.$emitter.publish('openOffCanvasCart');
  221.                             } else {
  222.                                 console.log(this.response);
  223.                             }
  224.                         };
  225.                         request.onerror = function() {
  226.                             // Connection error
  227.                         };
  228.                         request.send(uri);
  230.                         {#$.ajax({#}
  231.                         {#    type: "POST",#}
  232.                         {#    cache: false,#}
  233.                         {#    url: '/addtocart',#}
  234.                         {#    async: true,#}
  235.                         {#    data: {#}
  236.                         {#        '_csrf_token': '{{ sw_csrf('frontend.confi.addtocart.controller', {"mode": "token"}) }}',#}
  237.                         {#        'config': configurated,#}
  238.                         {#        'thumbnail': thumbnail,#}
  239.                         {#        'id': '{{ page.product.id }}',#}
  240.                         {#        'quantity': quantity#}
  241.                         {#    },#}
  242.                         {#    success: function (data) {#}
  243.                         {#        console.log(document.querySelector('[data-add-to-cart]'));#}
  244.                         {#        const plugin = window.PluginManager.getPluginInstanceFromElement(document.querySelector('[data-add-to-cart]'), 'AddToCart');#}
  245.                         {#        plugin._openOffCanvasCarts('/checkout/offcanvas', '');#}
  246.                         {#        plugin.$emitter.publish('openOffCanvasCart');#}
  247.                         {#    }, error: function (xhr, ajaxOptions, thrownError) {#}
  248.                         {#        console.log(thrownError);#}
  249.                         {#    }#}
  250.                         {#});#}
  251.                     }
  252.                 };
  253.             });
  254.         </script>
  255.         {% endif %}
  256.         <div class="product-detail"
  257.              itemscope
  258.              itemtype="https://schema.org/Product">
  259.             {% block page_product_detail_inner %}
  260.                 {% block page_product_detail_content %}
  261.                     <div class="product-detail-content">
  262.                         {% block page_product_detail_headline %}
  263. {#                            {% if page.confi is not defined %}#}
  264.                             <div class="row align-items-center product-detail-headline">
  265.                                 {% sw_include '@Storefront/storefront/page/product-detail/headline.html.twig' %}
  266.                             </div>
  267. {#                            {% endif %}#}
  268.                         {% endblock %}
  270.                         {% set mediaItems = page.product.media.media %}
  272.                         {% block page_product_detail_main %}
  273.                             {% if page.confi is not defined %}
  274.                             <div class="row product-detail-main">
  275.                                 {% block page_product_detail_media %}
  277.                                     <div class="col-lg-7 product-detail-media">
  278.                                         {% if page.product.media %}
  279.                                             {% sw_include '@Storefront/storefront/element/cms-element-image-gallery.html.twig' with {
  280.                                                 'mediaItems': mediaItems,
  281.                                                 'zoom': true,
  282.                                                 'zoomModal': true,
  283.                                                 'displayMode': 'contain',
  284.                                                 'gutter': 5,
  285.                                                 'minHeight': '430px',
  286.                                                 'navigationArrows': 'inside',
  287.                                                 'navigationDots': 'inside',
  288.                                                 'galleryPosition': 'left',
  289.                                                 'isProduct': true,
  290.                                                 'fallbackImageTitle': page.product.translated.name,
  291.                                                 'startIndexThumbnails': 1,
  292.                                                 'startIndexSlider': 1,
  293.                                                 'keepAspectRatioOnZoom': false
  294.                                             } %}
  295.                                         {% endif %}
  296.                                     </div>
  298.                                 {% endblock %}
  300.                                 {% block page_product_detail_buy %}
  301.                                     <div class="col-lg-5 product-detail-buy">
  302.                                         {% sw_include '@Storefront/storefront/page/product-detail/buy-widget.html.twig' %}
  303.                                     </div>
  304.                                 {% endblock %}
  305.                             </div>
  306.                             {% endif %}
  307.                         {% endblock %}
  308.                     </div>
  309.                 {% endblock %}
  311.                 {% block page_product_detail_tabs %}
  312.                     <div class="product-detail-tabs">
  313.                         {% sw_include '@Storefront/storefront/page/product-detail/tabs.html.twig' %}
  314.                     </div>
  315.                 {% endblock %}
  317.                 {% block page_product_detail_cross_selling %}
  318.                     {% if page.crossSellings.elements is defined and page.crossSellings.elements|filter(item => item.total > 0)|length > 0 %}
  319.                         <div class="product-detail-tabs product-detail-cross-selling">
  320.                             {% sw_include '@Storefront/storefront/page/product-detail/cross-selling/tabs.html.twig' with {
  321.                                 crossSellings: page.crossSellings
  322.                             } %}
  323.                         </div>
  324.                     {% endif %}
  325.                 {% endblock %}
  326.             {% endblock %}
  327.         </div>
  329.     {% endblock %}
  330. {% endblock %}