templates/fe/modals/_product_quick_view.html.twig line 1

Open in your IDE?
  1. <div class="l-modal-dialog ui-modal-dialog" data-l-modal="quick-view" data-quick-view-modal="true">
  2. <div class="ui-modal l-modal l-share-product-modal ui-share-product-modal">
  3. <button class="l-share-product-modal-close-btn ui-share-product-modal-close-btn" type="button" data-l-modal-btn="quick-view">
  4. <svg width="18" height="18" viewBox="0 0 18 18" fill="none" xmlns="http://www.w3.org/2000/svg">
  5. <path d="M1.63579 17.0487C1.21272 17.0733 0.796649 16.9326 0.475309 16.6564C-0.158436 16.0189 -0.158436 14.9893 0.475309 14.3517L14.3522 0.474749C15.0114 -0.142041 16.0457 -0.107754 16.6625 0.551397C17.2202 1.14746 17.2528 2.06363 16.7386 2.6977L2.77991 16.6564C2.46272 16.9286 2.05332 17.069 1.63579 17.0487Z" fill="#646464"/>
  6. <path d="M15.4962 17.0487C15.0674 17.0469 14.6565 16.8767 14.352 16.5747L0.475056 2.6977C-0.112075 2.01206 -0.0322518 0.980222 0.653381 0.393036C1.26533 -0.131012 2.16782 -0.131012 2.77972 0.393036L16.7384 14.27C17.3974 14.887 17.4315 15.9213 16.8145 16.5803C16.79 16.6066 16.7646 16.6319 16.7384 16.6564C16.3966 16.9537 15.9468 17.0957 15.4962 17.0487Z" fill="#646464"/>
  7. </svg>
  8. </button>
  9. <div class="ui-share-product-modal-body quick-view-modal" data-quick-view-modal-content="true">
  10. <div class="l-flex-row">
  11. <div class="l-flex-col-lg-12">
  12. <div class="quick-view-modal-header">
  13. <div class="quick-view-modal-img-container">
  14. <img class="quick-view-modal-img" data-img="true" src="data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==" alt=""/>
  15. </div>
  16. <div>
  17. <h3 class="quick-view-modal-title" data-title="true"></h3>
  18. <p class="quick-view-modal-price" data-price="true"></p>
  19. </div>
  20. </div>
  21. </div>
  22. <div class="l-flex-col-lg-12">
  23. <div class="product-variants" data-product-variants-container="true" data-product-variants-id="22"></div>
  24. <template data-product-variants-template="true">
  25. <div class="product-variant" data-product-variant="true">
  26. <div class="header" data-product-variant-header="true">
  27. <div class="details">
  28. <strong data-product-variant-header-title="true"></strong>
  29. <span data-product-variant-header-value="true"></span>
  30. </div>
  31. <div class="icon">
  32. <svg width="14" height="8" viewBox="0 0 14 8" fill="none" xmlns="http://www.w3.org/2000/svg">
  33. <path d="M7.03314 7.45847L12.8404 1.65115C12.9748 1.51684 13.0488 1.33754 13.0488 1.14636C13.0488 0.955172 12.9748 0.775872 12.8404 0.641556L12.4128 0.213887C12.1342 -0.0643996 11.6814 -0.0643996 11.4032 0.213887L6.52664 5.09043L1.64469 0.208476C1.51026 0.0741598 1.33107 -5.12199e-07 1.13999 -5.20552e-07C0.948704 -5.28913e-07 0.769509 0.0741598 0.634981 0.208476L0.207525 0.636144C0.0731029 0.770567 -0.000950855 0.949761 -0.000950863 1.14094C-0.000950872 1.33213 0.0731029 1.51143 0.207525 1.64574L6.02004 7.45847C6.15489 7.59311 6.33493 7.66705 6.52633 7.66663C6.71846 7.66705 6.8984 7.59311 7.03314 7.45847Z" fill="#686868"/>
  34. </svg>
  35. </div>
  36. </div>
  37. <div class="content" data-product-variant-content="true">
  38. </div>
  39. </div>
  40. </template>
  41. </div>
  42. <div class="l-flex-col-lg-6">
  43. <div class="l-product-cart-add-to-cart-box ui-product-cart-add-to-cart-box">
  44. <div class="l-product-cart-qty-box ui-product-cart-qty-box">
  45. <div class="l-dropdown" data-qty-dropdown="true" data-l-dropdown="true">
  46. <button class="l-dropdown-button ui-dropdown-button" data-qty-dropdown-button="true" data-l-dropdown-button="true" data-qty-dropdown-btn="true">
  47. <span class="l-product-cart-qty-text-desktop">{{ "quantity_txt"|trans }}</span>
  48. <span class="l-product-cart-qty-text-mobile">{{ "qty_txt"|trans }}:&nbsp;</span>
  49. <span class="ui-product-cart-qty" data-qty-dropdown-text="true" data-qty="true">1</span>
  50. </button>
  51. <div class="l-dropdown-menu ui-dropdown-menu" data-l-dropdown-menu="true" data-qty-menu="true">
  52. <button class="l-dropdown-menu-item ui-dropdown-menu-item active" data-qty-dropdown-item-value="1" data-qty-dropdown-item="true">1</button>
  53. <button class="l-dropdown-menu-item ui-dropdown-menu-item" data-qty-dropdown-item-value="2" data-qty-dropdown-item="true">2</button>
  54. <button class="l-dropdown-menu-item ui-dropdown-menu-item" data-qty-dropdown-item-value="3" data-qty-dropdown-item="true">3</button>
  55. <button class="l-dropdown-menu-item ui-dropdown-menu-item" data-qty-dropdown-item-value="4" data-qty-dropdown-item="true">4</button>
  56. </div>
  57. </div>
  58. </div>
  59. </div>
  60. </div>
  61. <div class="l-flex-col-lg-6">
  62. <div class="l-product-cart-add-to-cart-box ui-product-cart-add-to-cart-box">
  63. <div class="l-product-cart-qty-box ui-product-cart-qty-box">
  64. <div class="l-product-cart-btn-box ui-product-cart-btn-box">
  65. <!-- IF -->
  66. <button class="l-product-cart-btn ui-product-cart-btn" data-l-modal-btn="quick-view" data-cart-btn="true" data-cart-btn-labels="{{ "add_to_cart_txt"|trans }},{{ "out_of_stock_txt"|trans }}" data-header-cart-sidebar-btn="true" data-header-cart-sidebar-add-product-btn="50926" data-header-cart-sidebar-add-product-btn-qty="1" data-qty-dropdown-cart-btn="true">
  67. {{ "add_to_cart_txt"|trans }}
  68. </button>
  69. <!-- ELSE -->
  70. <!-- <button class="l-product-cart-btn ui-product-cart-btn out-of-stock" data-cart-btn="true" data-cart-btn-labels="Add To Cart,Out of Stock" disabled>
  71. {{ "out_of_stock_txt"|trans }}
  72. </button> -->
  73. <!-- ENDIF -->
  74. </div>
  75. </div>
  76. </div>
  77. </div>
  78. <div class="col-lg-12">
  79. <a href="#" data-url="true" class="btn btn-block quick-view-modal-action">
  80. {{ "see_full_details_txt"|trans }}
  81. <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="#000" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
  82. <line x1="4" y1="12" x2="20" y2="12"/>
  83. <polyline points="14 6 20 12 14 18"/>
  84. </svg>
  85. </a>
  86. </div>
  87. </div>
  88. </div>
  89. </div>
  90. </div>