templates/layout/includes/quickview-popup.html.twig line 1

Open in your IDE?
  1. <div class="loadingBox"><div class="an-spin"><i class="icon an an-spinner4"></i></div></div>
  2. <div id="quickView-modal" class="mfp-with-anim mfp-hide">
  3.     <button title="Close (Esc)" type="button" class="mfp-close">×</button>
  4.     <div class="row">
  5.         <div class="col-12 col-sm-6 col-md-6 col-lg-6 mb-3 mb-md-0">
  6.             {# Model thumbnail  #}
  7.             <div id="quickView" class="carousel slide">
  8.                 {#  Image Slide carousel items  #}
  9.                 <div class="carousel-inner">
  10.                     <div class="item carousel-item active" data-bs-slide-number="0">
  11.                         <img class="blur-up lazyload" data-src="/assets/images/products/product-1.jpg" src="/assets/images/products/product-1.jpg" alt="image" title="" />
  12.                     </div>
  13.                     <div class="item carousel-item" data-bs-slide-number="1">
  14.                         <img class="blur-up lazyload" data-src="/assets/images/products/product-1-1.jpg" src="/assets/images/products/product-1-1.jpg" alt="image" title="" />
  15.                     </div>
  16.                     <div class="item carousel-item" data-bs-slide-number="2">
  17.                         <img class="blur-up lazyload" data-src="/assets/images/products/product-1-1.jpg" src="/assets/images/products/product-1-1.jpg" alt="image" title="" />
  18.                     </div>
  19.                     <div class="item carousel-item" data-bs-slide-number="3">
  20.                         <img class="blur-up lazyload" data-src="/assets/images/products/product-1-1.jpg" src="/assets/images/products/product-1-1.jpg" alt="image" title="" />
  21.                     </div>
  22.                     <div class="item carousel-item" data-bs-slide-number="4">
  23.                         <img class="blur-up lazyload" data-src="/assets/images/products/product-1-1.jpg" src="/assets/images/products/product-1-1.jpg" alt="image" title="" />
  24.                     </div>
  25.                 </div>
  26.                 {#  End Image Slide carousel items  #}
  27.                 {#  Thumbnail image  #}
  28.                 <div class="model-thumbnail-img">
  29.                     {#  Thumbnail slide  #}
  30.                     <div class="carousel-indicators list-inline">
  31.                         <div class="list-inline-item active" id="carousel-selector-0" data-bs-slide-to="0" data-bs-target="#quickView">
  32.                             <img class="blur-up lazyload" data-src="/assets/images/products/product-1.jpg" src="/assets/images/products/product-1.jpg" alt="image" title="" />
  33.                         </div>
  34.                         <div class="list-inline-item" id="carousel-selector-1" data-bs-slide-to="1" data-bs-target="#quickView">
  35.                             <img class="blur-up lazyload" data-src="/assets/images/products/product-1-1.jpg" src="/assets/images/products/product-1-1.jpg" alt="image" title="" />
  36.                         </div>
  37.                         <div class="list-inline-item" id="carousel-selector-2" data-bs-slide-to="2" data-bs-target="#quickView">
  38.                             <img class="blur-up lazyload" data-src="/assets/images/products/product-1-1.jpg" src="/assets/images/products/product-1-1.jpg" alt="image" title="" />
  39.                         </div>
  40.                         <div class="list-inline-item" id="carousel-selector-3" data-bs-slide-to="3" data-bs-target="#quickView">
  41.                             <img class="blur-up lazyload" data-src="/assets/images/products/product-1-1.jpg" src="/assets/images/products/product-1-1.jpg" alt="image" title="" />
  42.                         </div>
  43.                         <div class="list-inline-item" id="carousel-selector-4" data-bs-slide-to="4" data-bs-target="#quickView">
  44.                             <img class="blur-up lazyload" data-src="/assets/images/products/product-1-1.jpg" src="/assets/images/products/product-1-1.jpg" alt="image" title="" />
  45.                         </div>
  46.                     </div>
  47.                     {#  End Thumbnail slide  #}
  48.                     {#  Carousel arrow button  #}
  49.                     <a class="carousel-control-prev carousel-arrow" href="#quickView" data-bs-target="#quickView" data-bs-slide="prev"><i class="icon an-3x an an-angle-left"></i><span class="visually-hidden">Previous</span></a>
  50.                     <a class="carousel-control-next carousel-arrow" href="#quickView" data-bs-target="#quickView" data-bs-slide="next"><i class="icon an-3x an an-angle-right"></i><span class="visually-hidden">Next</span></a>
  51.                     {#  End Carousel arrow button  #}
  52.                 </div>
  53.                 {#  End Thumbnail image  #}
  54.             </div>
  55.             {# End Model thumbnail  #}
  56.             <div class="text-center mt-3"><a href="product-layout1.html">{{ "VIEW MORE DETAILS" | trans }}</a></div>
  57.         </div>
  58.         <div class="col-12 col-sm-6 col-md-6 col-lg-6">
  59.             <h2 class="product-title">{{ "Product Quick View Popup" | trans }}</h2>
  60.             <div class="product-review d-flex-center mb-2">
  61.                 <div class="rating"><i class="icon an an-star"></i><i class="icon an an-star"></i><i class="icon an an-star"></i><i class="icon an an-star"></i><i class="icon an an-star-o"></i></div>
  62.                 <div class="reviews ms-2"><a href="#">5 {{ "Reviews" | trans }}</a></div>
  63.             </div>
  64.             <div class="product-info">
  65.                 <p class="product-vendor">Vendor:  <span class="fw-normal"><a href="#" class="fw-normal">Optimal</a></span></p>
  66.                 <p class="product-type">Product Type: <span class="fw-normal">Tops</span></p>
  67.                 <p class="product-sku">SKU:  <span class="fw-normal">50-ABC</span></p>
  68.             </div>
  69.             <div class="pro-stockLbl my-2">
  70.                 <span class="d-flex-center stockLbl instock"><i class="icon an an-check-cil"></i><span> In stock</span></span>
  71.                 <span class="d-flex-center stockLbl preorder d-none"><i class="icon an an-clock-r"></i><span> Pre-order Now</span></span>
  72.                 <span class="d-flex-center stockLbl outstock d-none"><i class="icon an an-times-cil"></i> <span>Sold out</span></span>
  73.                 <span class="d-flex-center stockLbl lowstock d-none" data-qty="15"><i class="icon an an-exclamation-cir"></i><span> Order now, Only  <span class="items">10</span>  left!</span></span>
  74.             </div>
  75.             <div class="pricebox">
  76.                 <span class="price old-price">$400.00</span><span class="price product-price__sale">$300.00</span>
  77.             </div>
  78.             <div class="sort-description">Optimal Multipurpose Bootstrap 5 Html Template that will give you and your customers a smooth shopping experience which can be used for various kinds of stores such as fashion.. </div>
  79.             <form method="post" action="#" id="product_form--option" class="product-form">
  80.                 <div class="product-options d-flex-wrap">
  81.                     <div class="swatch clearfix swatch-0 option1">
  82.                         <div class="product-form__item">
  83.                             <label class="label d-flex">Color:<span class="required d-none">*</span> <span class="slVariant ms-1 fw-bold">Black</span></label>
  84.                             <ul class="swatches-image swatches d-flex-wrap list-unstyled clearfix">
  85.                                 <li data-value="Black" class="swatch-element color available active">
  86.                                     <label class="rounded-0 swatchLbl small color black" title="Black"></label>
  87.                                     <span class="tooltip-label top">Black</span>
  88.                                 </li>
  89.                                 <li data-value="Green" class="swatch-element color available">
  90.                                     <label class="rounded-0 swatchLbl small color green" title="Green"></label>
  91.                                     <span class="tooltip-label top">Green</span>
  92.                                 </li>
  93.                                 <li data-value="Orange" class="swatch-element color available">
  94.                                     <label class="rounded-0 swatchLbl small color orange" title="Orange"></label>
  95.                                     <span class="tooltip-label top">Orange</span>
  96.                                 </li>
  97.                                 <li data-value="Blue" class="swatch-element color available">
  98.                                     <label class="rounded-0 swatchLbl small color blue" title="Blue"></label>
  99.                                     <span class="tooltip-label top">Blue</span>
  100.                                 </li>
  101.                                 <li data-value="Red" class="swatch-element color available">
  102.                                     <label class="rounded-0 swatchLbl small color red" title="Red"></label>
  103.                                     <span class="tooltip-label top">Red</span>
  104.                                 </li>
  105.                             </ul>
  106.                         </div>
  107.                     </div>
  108.                     <div class="swatch clearfix swatch-1 option2">
  109.                         <div class="product-form__item">
  110.                             <label class="label">Size:<span class="required d-none">*</span> <span class="slVariant ms-1 fw-bold">XS</span></label>
  111.                             <ul class="swatches-size d-flex-center list-unstyled clearfix swatch-1 option2">
  112.                                 <li data-value="XS" class="swatch-element xs available active">
  113.                                     <label class="swatchLbl rounded-0 medium" title="XS">XS</label>
  114.                                     <span class="tooltip-label">XS</span>
  115.                                 </li>
  116.                                 <li data-value="S" class="swatch-element s available">
  117.                                     <label class="swatchLbl rounded-0 medium" title="S">S</label>
  118.                                     <span class="tooltip-label">S</span>
  119.                                 </li>
  120.                                 <li data-value="M" class="swatch-element m available">
  121.                                     <label class="swatchLbl rounded-0 medium" title="M">M</label>
  122.                                     <span class="tooltip-label">M</span>
  123.                                 </li>
  124.                                 <li data-value="L" class="swatch-element l available">
  125.                                     <label class="swatchLbl rounded-0 medium" title="L">L</label>
  126.                                     <span class="tooltip-label">L</span>
  127.                                 </li>
  128.                                 <li data-value="XL" class="swatch-element xl available">
  129.                                     <label class="swatchLbl rounded-0 medium" title="XL">XL</label>
  130.                                     <span class="tooltip-label">XL</span>
  131.                                 </li>
  132.                             </ul>
  133.                         </div>
  134.                     </div>
  135.                     <div class="product-action d-flex-wrap w-100 mb-3 clearfix">
  136.                         <div class="quantity">
  137.                             <div class="qtyField rounded">
  138.                                 <a class="qtyBtn minus" href="#" onclick="event.preventDefault()"><i class="icon an an-minus-r" aria-hidden="true"></i></a>
  139.                                 <input type="text" name="quantity" value="1" class="product-form__input qty rounded-0">
  140.                                 <a class="qtyBtn plus" href="#" onclick="event.preventDefault()"><i class="icon an an-plus-l" aria-hidden="true"></i></a>
  141.                             </div>
  142.                         </div>
  143.                         <div class="add-to-cart ms-3 fl-1">
  144.                             <button type="button" class="btn button-cart rounded-0"><span>Add to cart</span></button>
  145.                         </div>
  146.                     </div>
  147.                 </div>
  148.             </form>
  149.             <div class="wishlist-btn d-flex-center">
  150.                 <a class="add-wishlist d-flex-center text-uppercase me-3" href="my-wishlist.html" title="Add to Wishlist"><i class="icon an an-heart-l me-1"></i> <span>Add to Wishlist</span></a>
  151.                 <a class="add-compare d-flex-center text-uppercase" href="compare-style1.html" title="Add to Compare"><i class="icon an an-random-r me-2"></i> <span>Add to Compare</span></a>
  152.             </div>
  153.             {#  Social Sharing  #}
  154.             <div class="social-sharing share-icon d-flex-center mx-0 mt-3">
  155.                 <span class="sharing-lbl me-2">Share :</span>
  156.                 <a href="#" class="d-flex-center btn btn-link btn--share share-facebook" data-bs-toggle="tooltip" data-bs-placement="top" title="Share on Facebook"><i class="icon an an-facebook mx-1"></i><span class="share-title d-none">Facebook</span></a>
  157.                 <a href="#" class="d-flex-center btn btn-link btn--share share-twitter" data-bs-toggle="tooltip" data-bs-placement="top" title="Tweet on Twitter"><i class="icon an an-twitter mx-1"></i><span class="share-title d-none">Tweet</span></a>
  158.                 <a href="#" class="d-flex-center btn btn-link btn--share share-pinterest" data-bs-toggle="tooltip" data-bs-placement="top" title="Pin on Pinterest"><i class="icon an an-pinterest-p mx-1"></i> <span class="share-title d-none">Pin it</span></a>
  159.                 <a href="#" class="d-flex-center btn btn-link btn--share share-linkedin" data-bs-toggle="tooltip" data-bs-placement="top" title="Share on Instagram"><i class="icon an an-instagram mx-1"></i><span class="share-title d-none">Instagram</span></a>
  160.                 <a href="#" class="d-flex-center btn btn-link btn--share share-whatsapp" data-bs-toggle="tooltip" data-bs-placement="top" title="Share on WhatsApp"><i class="icon an an-whatsapp mx-1"></i><span class="share-title d-none">WhatsApp</span></a>
  161.                 <a href="#" class="d-flex-center btn btn-link btn--share share-email" data-bs-toggle="tooltip" data-bs-placement="top" title="Share by Email"><i class="icon an an-envelope-l mx-1"></i><span class="share-title d-none">Email</span></a>
  162.             </div>
  163.             {#  End Social Sharing  #}
  164.         </div>
  165.     </div>
  166. </div>