custom/plugins/XioniXconfig/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_head %}
  4. {{ parent() }}
  5. <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
  6. <link href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.8/themes/base/jquery-ui.css" rel="stylesheet" type="text/css"/>    
  7. <link type="text/css" media="screen, projection" rel="stylesheet" href="https://xconfig003.com/mvc_structure2/assets/css/shop-frontend.css"/> 
  8. <link type="text/css" media="screen, projection" rel="stylesheet" href="https://xconfig003.com/mvc_structure2/assets/css/pse-template.css"/> 
  9. <link type="text/css" media="screen, projection" rel="stylesheet" href="https://xconfig003.com/mvc_structure2/assets/css/pse-template-new.css"/> 
  10. <style>
  11. .visible {
  12.   border-radius: 3px;
  13.   animation: highlight 1000ms ease-out;
  14. }
  15. @keyframes highlight {
  16.   0% {
  17.     background-color: #3aa41c;
  18.   }
  19.   100% {
  20.     background-color: white;
  21.   }
  22. }
  25. .ProvenExpert_widget_container {
  26.     display:none;
  27. }
  29. #xconfig_start_description {
  30.     border-right: 1px solid #9b9999;
  31. }
  33. #x_info_click {
  34.   text-decoration: none !important;
  35. }
  37. .icon-info {
  38.     color: #878787;
  39. }
  41. .icon-info:hover {
  42.     color: #3aa41c;
  43. }
  45. .config--has-summary {
  46.     border-top: 1px solid #9b9999;
  47. }
  49. .icon-shoppingcart {
  50.     width:35px!important;
  51.     height:35px!important;
  52. }
  54. .icon-shoppingcart-small {
  55.     width:18px!important;
  56.     height:18px!important;
  57. }
  59. #tab-info, #tab-manufacturer {
  60.   display:none;
  61. }
  63. .breadcrumb-main {
  64.    display:none;
  65. }
  67. //.product-media-append {
  68. //   display:none;
  69. //}
  71. .x-product-detail-tabs {
  72.     width:100%;
  73.     text-align: center;
  74. }
  76. .x-product-detail-tab {
  77.     display: inline-block;
  78.     float:left;
  79.     padding-right: 2%;
  80.     width:33.3%;
  81.     margin-bottom: 20px;
  82. }
  83. .x-product-detail-tab:last-child {
  84.     padding-right: 0%;
  85. }
  87. .tab-button {
  88.     font-size: 1.4em;
  89.     color:#9b9999;
  90.     box-shadow: none;
  91.     border: 0;
  92.     border-radius: 0px;
  93.     border-bottom: 3px solid #9b9999;
  94.     background-color:#ffffff;
  95.     width:100%;
  96.     outline:none;
  97. }
  99. .tab-button:hover, .tab-active{
  100.     color:#3aa41c;
  101.     border-bottom: 3px solid #3aa41c;
  102. }
  104. .tab-button:focus {
  105.    outline:none;
  106. }
  108. #xconfig{
  109.     border-top: 1px solid #9b9999;
  110. }
  112. .xactive, .xaccordion:hover {
  113.   background-color: #ccc;
  114. }
  116. .xaccordion {
  117.   background-color: #eee;
  118.   color: #444;
  119.   cursor: pointer;
  120.   padding: 18px;
  121.   width: 100%;
  122.   text-align: left;
  123.   border: none;
  124.   outline: none!important;
  125.   transition: 0.4s;
  126. }
  128. .xpanel {
  129.   padding: 0 18px;
  130.   background-color: white;
  131.   max-height: 0;
  132.   overflow: hidden;
  133.   transition: max-height 0.2s ease-out;
  134.   outline:none!important;
  135.   border: none;  
  136. }
  138. .xaccordion:after {
  139.   content: '\02795'; /* Unicode character for "plus" sign (+) */
  140.   font-size: 13px;
  141.   color: #777;
  142.   float: right;
  143.   margin-left: 5px;
  144. }
  146. .xactive:after {
  147.   content: "\2796"; /* Unicode character for "minus" sign (-) */
  148. }
  150. .acc_info_txt {
  151.     display: none;
  152.     border:1px solid #000;
  153.     height:30px;
  154.     width:290px;
  155.     margin-left:10px;
  156. }
  158. .acc_info_img_heart {
  159.     width:30px;
  160. }
  162. .acc_info_img:hover + .acc_info_txt {
  163.     display: block;
  164. }
  166. .x-modal-dialog {
  167.     position: fixed;
  168.     font-family: Arial, Helvetica, sans-serif;
  169.     top: 0;
  170.     right: 0;
  171.     bottom: 0;
  172.     left: 0;
  173.     background: rgba(0,0,0,0.3);
  174.     z-index: 99999;
  175.     opacity:0;
  176.     color: black;
  177.     -webkit-transition: opacity 100ms ease-in;
  178.     -moz-transition: opacity 100ms ease-in;
  179.     transition: opacity 100ms ease-in;
  180.     pointer-events: none;
  181. }
  183. .x-modal-dialog.show{
  184.     opacity:1;
  185.     pointer-events: auto;
  186. }
  188. .x-modal-dialog:target {
  189.     opacity:1;
  190.     pointer-events: auto;
  191. }
  193. .x-modal-dialog div {
  194.     width: 400px;
  195.     position: relative;
  196.     margin: 10% auto;
  197.     padding: 16px 20px 21px 20px;
  198.     border-radius: 4px;
  199.     background: #fff;
  200.     border: 2px white solid;
  201. }
  203. .x-modal-dialog p {
  204.     color: black;
  205.     text-shadow: none;
  206.     text-transform: none;
  207.     font-size: 14px;
  208. }
  209. .x-dialog-close {
  210.     background: white;
  211.     color: #878787;
  212.     line-height: 24px;
  213.     position: absolute;
  214.     right: -12px;
  215.     text-align: center;
  216.     top: -10px;
  217.     width: 26px;
  218.     text-decoration: none;
  219.     font-weight: bold;
  220.     border: 1px solid #666;
  221.     border-radius: 12px;
  222.     text-decoration: none !important;
  223. }
  225. .close:hover { background: #aaa; }
  226. </style>
  227. {% endblock %}
  229. {% block page_product_detail_main %}
  230.     {% block page_product_detail_name_container %}
  231.         <div class="col product-detail-name-container">
  232.             {% block page_product_detail_name %}
  233.                 <h1 class="product-detail-name"
  234.                     itemprop="name">
  235.                     {{ page.product.translated.name }}
  236.                 </h1>
  237.             {% endblock %}
  238.         </div>
  239.     {% endblock %}
  240.     <div class="row product-detail-main">
  241.         {% block page_product_detail_media %}
  242.             <div class="col-lg-7 product-detail-media">
  243.                 {% if page.product.media %}
  244.                     {% sw_include '@Storefront/storefront/element/cms-element-image-gallery.html.twig' with {
  245.                         'mediaItems': mediaItems,
  246.                         'zoom': true,
  247.                         'zoomModal': true,
  248.                         'displayMode': 'contain',
  249.                         'gutter': 5,
  250.                         'minHeight': '430px',
  251.                         'navigationArrows': 'inside',
  252.                         'navigationDots': 'inside',
  253.                         'galleryPosition': 'left',
  254.                         'isProduct': true,
  255.                         'fallbackImageTitle': page.product.translated.name,
  256.                         'startIndexThumbnails': page.product.cover.position + 1,
  257.                         'startIndexSlider': page.product.cover.position + 1,
  258.                         'keepAspectRatioOnZoom': false
  259.                     } %}
  260.                 {% endif %}
  261.             </div>
  262.         {% endblock %}
  264.         {% block page_product_detail_buy %}
  265.             <div class="col-lg-5 product-detail-buy">
  266.                 {% sw_include '@Storefront/storefront/page/product-detail/buy-widget.html.twig' %}
  267.             </div>
  268.         {% endblock %}
  269.     </div>
  270. {% endblock %}