introduce new Dine360 theme with custom styling, quick view functionality, and page layouts.
This commit is contained in:
Alaguraj0361
parent
e8fd113f54
commit
06bc61de9c
@ -16,6 +16,7 @@
|
||||
'web.assets_frontend': [
|
||||
'theme_clicks2cart/static/src/scss/primary_variables.scss',
|
||||
'theme_clicks2cart/static/src/scss/theme.scss',
|
||||
'theme_clicks2cart/static/src/js/quickview.js',
|
||||
],
|
||||
},
|
||||
'images': [
|
||||
|
||||
71
addons/theme_clicks2cart/static/src/js/quickview.js
Normal file
71
addons/theme_clicks2cart/static/src/js/quickview.js
Normal file
@ -0,0 +1,71 @@
|
||||
/** @odoo-module **/
|
||||
|
||||
import publicWidget from "@web/legacy/js/public/public_widget";
|
||||
|
||||
publicWidget.registry.QuickView = publicWidget.Widget.extend({
|
||||
selector: '#wrap',
|
||||
events: {
|
||||
'click .quick-view': '_onQuickViewClick',
|
||||
'click .s_quickview_close, .s_quickview_overlay': '_onCloseClick',
|
||||
'click .thumb': '_onThumbClick',
|
||||
'click .qty_btn': '_onQtyClick',
|
||||
},
|
||||
|
||||
_onQuickViewClick: function (ev) {
|
||||
ev.preventDefault();
|
||||
const $btn = $(ev.currentTarget);
|
||||
const name = $btn.data('name');
|
||||
const price = $btn.data('price');
|
||||
const img = $btn.data('img');
|
||||
const desc = $btn.data('desc');
|
||||
|
||||
// Update Modal Content
|
||||
const $modal = $('#s_quickview_modal');
|
||||
$modal.find('.s_qv_prod_name').text(name);
|
||||
$modal.find('.s_qv_prod_desc').text(desc);
|
||||
$modal.find('#qv_main_image').attr('src', img);
|
||||
|
||||
// Update price (handle both numbers and formatted strings)
|
||||
let displayPrice = price;
|
||||
if (typeof price === 'number') {
|
||||
displayPrice = '$' + price.toFixed(2);
|
||||
}
|
||||
$modal.find('.current_price, .footer_price').text(displayPrice);
|
||||
|
||||
// Update thumbnails (first thumb is the main image)
|
||||
$modal.find('.thumb').removeClass('active');
|
||||
$modal.find('.thumb:first-child img').attr('src', img);
|
||||
$modal.find('.thumb:first-child').addClass('active');
|
||||
|
||||
// Reset Qty
|
||||
$modal.find('.qty_input').val('01');
|
||||
|
||||
$modal.addClass('active');
|
||||
$('body').css('overflow', 'hidden');
|
||||
},
|
||||
|
||||
_onCloseClick: function (ev) {
|
||||
$('#s_quickview_modal').removeClass('active');
|
||||
$('body').css('overflow', '');
|
||||
},
|
||||
|
||||
_onThumbClick: function (ev) {
|
||||
const $thumb = $(ev.currentTarget);
|
||||
const newSrc = $thumb.find('img').attr('src');
|
||||
$('#qv_main_image').attr('src', newSrc);
|
||||
$('.thumb').removeClass('active');
|
||||
$thumb.addClass('active');
|
||||
},
|
||||
|
||||
_onQtyClick: function (ev) {
|
||||
const $btn = $(ev.currentTarget);
|
||||
const $input = $btn.siblings('.qty_input');
|
||||
let val = parseInt($input.val());
|
||||
if ($btn.text() === '+') {
|
||||
val++;
|
||||
} else if (val > 1) {
|
||||
val--;
|
||||
}
|
||||
$input.val(val < 10 ? '0' + val : val);
|
||||
}
|
||||
});
|
||||
@ -288,7 +288,7 @@ header#top {
|
||||
// =========================================
|
||||
.s_collections {
|
||||
background-color: #fff;
|
||||
padding: 100px 0;
|
||||
padding: 60px 0;
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
|
||||
@ -1328,7 +1328,7 @@ footer#bottom.o_footer {
|
||||
// Latest Blogs Section
|
||||
// =========================================
|
||||
.s_blogs_section {
|
||||
padding: 120px 0;
|
||||
// padding: 120px 0;
|
||||
position: relative;
|
||||
background-color: #fff;
|
||||
overflow: hidden;
|
||||
@ -1437,4 +1437,299 @@ footer#bottom.o_footer {
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// =========================================
|
||||
// Quick View Modal Styles
|
||||
// =========================================
|
||||
.s_quickview_modal {
|
||||
position: fixed;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
z-index: 10000;
|
||||
display: none; // Hidden by default
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
|
||||
&.active {
|
||||
display: flex;
|
||||
}
|
||||
|
||||
.s_quickview_overlay {
|
||||
position: absolute;
|
||||
inset: 0;
|
||||
background: rgba(0, 0, 0, 0.4);
|
||||
backdrop-filter: blur(2px);
|
||||
}
|
||||
|
||||
.s_quickview_container {
|
||||
position: relative;
|
||||
width: 90%;
|
||||
max-width: 1000px;
|
||||
height: 650px;
|
||||
background: #fff;
|
||||
z-index: 10001;
|
||||
box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
|
||||
border-radius: 4px;
|
||||
overflow: hidden;
|
||||
animation: qvPopIn 0.4s cubic-bezier(0.165, 0.84, 0.44, 1);
|
||||
}
|
||||
|
||||
.s_quickview_close {
|
||||
position: absolute;
|
||||
top: 15px;
|
||||
right: 15px;
|
||||
background: none;
|
||||
border: none;
|
||||
font-size: 1.8rem;
|
||||
color: #000;
|
||||
cursor: pointer;
|
||||
z-index: 100;
|
||||
transition: transform 0.3s ease;
|
||||
padding: 0;
|
||||
line-height: 1;
|
||||
|
||||
&:hover {
|
||||
transform: rotate(90deg);
|
||||
color: #e6b3a3;
|
||||
}
|
||||
}
|
||||
|
||||
.s_qv_images_col {
|
||||
background: #fdfdfd;
|
||||
padding: 40px;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: space-between;
|
||||
border-right: 1px solid #efefef;
|
||||
|
||||
.s_qv_top_label {
|
||||
font-family: 'Outfit', sans-serif;
|
||||
font-weight: 700;
|
||||
font-size: 0.9rem;
|
||||
letter-spacing: 1px;
|
||||
color: #000;
|
||||
border-bottom: 2px solid #000;
|
||||
display: inline-block;
|
||||
width: fit-content;
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
|
||||
.s_qv_main_img {
|
||||
flex-grow: 1;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
margin-bottom: 20px;
|
||||
|
||||
img {
|
||||
max-width: 100%;
|
||||
max-height: 400px;
|
||||
object-fit: contain;
|
||||
}
|
||||
}
|
||||
|
||||
.s_qv_thumbnails {
|
||||
display: flex;
|
||||
gap: 15px;
|
||||
justify-content: center;
|
||||
|
||||
.thumb {
|
||||
width: 80px;
|
||||
height: 80px;
|
||||
border: 1px solid #eee;
|
||||
padding: 10px;
|
||||
cursor: pointer;
|
||||
transition: border-color 0.3s;
|
||||
|
||||
img {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
object-fit: contain;
|
||||
}
|
||||
|
||||
&:hover,
|
||||
&.active {
|
||||
border-color: #e6b3a3;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.s_qv_content_col {
|
||||
padding: 40px;
|
||||
overflow-y: auto;
|
||||
|
||||
.s_qv_prod_name {
|
||||
font-family: 'Playfair Display', serif;
|
||||
font-size: 1.8rem;
|
||||
font-weight: 700;
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
|
||||
.s_qv_prod_desc {
|
||||
font-family: 'Outfit', sans-serif;
|
||||
font-size: 0.95rem;
|
||||
color: #888;
|
||||
line-height: 1.6;
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
|
||||
.s_qv_rating {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 10px;
|
||||
margin-bottom: 20px;
|
||||
|
||||
.stars {
|
||||
color: #e6b3a3;
|
||||
font-size: 0.9rem;
|
||||
}
|
||||
|
||||
.rating_count {
|
||||
font-family: 'Outfit', sans-serif;
|
||||
font-size: 0.85rem;
|
||||
color: #999;
|
||||
}
|
||||
}
|
||||
|
||||
.s_qv_price {
|
||||
display: flex;
|
||||
align-items: baseline;
|
||||
gap: 15px;
|
||||
margin-bottom: 20px;
|
||||
|
||||
.current_price {
|
||||
font-family: 'Outfit', sans-serif;
|
||||
font-size: 2rem;
|
||||
font-weight: 700;
|
||||
color: #000;
|
||||
}
|
||||
|
||||
.old_price {
|
||||
font-family: 'Outfit', sans-serif;
|
||||
font-size: 1.1rem;
|
||||
color: #ccc;
|
||||
text-decoration: line-through;
|
||||
}
|
||||
}
|
||||
|
||||
.opt_title {
|
||||
font-family: 'Playfair Display', serif;
|
||||
font-weight: 700;
|
||||
font-size: 1.4rem;
|
||||
margin-bottom: 20px;
|
||||
border-bottom: 2px solid #000;
|
||||
display: inline-block;
|
||||
}
|
||||
|
||||
.custom-select {
|
||||
border-radius: 0;
|
||||
border-color: #eee;
|
||||
font-family: 'Outfit', sans-serif;
|
||||
padding: 10px;
|
||||
|
||||
&:focus {
|
||||
border-color: #e6b3a3;
|
||||
box-shadow: none;
|
||||
}
|
||||
}
|
||||
|
||||
.color_circles {
|
||||
display: flex;
|
||||
gap: 10px;
|
||||
|
||||
.circle {
|
||||
width: 30px;
|
||||
height: 30px;
|
||||
border-radius: 50%;
|
||||
cursor: pointer;
|
||||
transition: transform 0.2s;
|
||||
|
||||
&:hover {
|
||||
transform: scale(1.1);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.qty_controls {
|
||||
display: flex;
|
||||
border: 1px solid #eee;
|
||||
|
||||
.qty_btn {
|
||||
width: 35px;
|
||||
height: 40px;
|
||||
background: none;
|
||||
border: none;
|
||||
font-size: 1.2rem;
|
||||
color: #888;
|
||||
|
||||
&:hover {
|
||||
color: #000;
|
||||
}
|
||||
}
|
||||
|
||||
.qty_input {
|
||||
width: 50px;
|
||||
height: 40px;
|
||||
border: none !important;
|
||||
border-left: 1px solid #eee !important;
|
||||
border-right: 1px solid #eee !important;
|
||||
text-align: center;
|
||||
font-family: 'Outfit', sans-serif;
|
||||
font-weight: 700;
|
||||
outline: none;
|
||||
}
|
||||
}
|
||||
|
||||
.btn_add_cart {
|
||||
background: #000;
|
||||
color: #fff;
|
||||
border: none;
|
||||
padding: 15px 40px;
|
||||
font-family: 'Playfair Display', serif;
|
||||
font-size: 1.2rem;
|
||||
font-weight: 700;
|
||||
transition: all 0.3s;
|
||||
flex-grow: 1;
|
||||
|
||||
&:hover {
|
||||
background: #e6b3a3;
|
||||
color: #fff;
|
||||
}
|
||||
}
|
||||
|
||||
.btn_icon_round {
|
||||
width: 50px;
|
||||
height: 50px;
|
||||
border-radius: 50%;
|
||||
background: #f5f5f5;
|
||||
border: none;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
color: #888;
|
||||
font-size: 1.2rem;
|
||||
transition: all 0.3s;
|
||||
|
||||
&:hover {
|
||||
background: #e6b3a3;
|
||||
color: #fff;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes qvPopIn {
|
||||
from {
|
||||
opacity: 0;
|
||||
transform: scale(0.85);
|
||||
}
|
||||
|
||||
to {
|
||||
opacity: 1;
|
||||
transform: scale(1);
|
||||
}
|
||||
}
|
||||
@ -161,7 +161,11 @@
|
||||
<img t-att-src="website.image_url(product, 'image_512')" t-att-alt="product.name" loading="lazy"/>
|
||||
</a>
|
||||
<div class="s_product_actions">
|
||||
<a href="#" class="action-btn quick-view"><i class="fa fa-eye"></i></a>
|
||||
<a href="#" class="action-btn quick-view"
|
||||
t-att-data-name="product.name"
|
||||
t-att-data-price="product.list_price"
|
||||
t-att-data-img="website.image_url(product, 'image_512')"
|
||||
t-att-data-desc="product.description_sale or 'Premium quality floral arrangement for your special moments.'"><i class="fa fa-eye"></i></a>
|
||||
<a t-attf-href="/shop/cart/update_short?product_id=#{product.product_variant_id.id}" class="action-btn add-to-cart"><i class="fa fa-shopping-cart"></i></a>
|
||||
<a href="#" class="action-btn wishlist"><i class="fa fa-heart-o"></i></a>
|
||||
</div>
|
||||
@ -186,7 +190,11 @@
|
||||
<div class="s_col_product_img position-relative overflow-hidden">
|
||||
<img src="/theme_clicks2cart/static/src/img/flora_col.png" alt="Flora"/>
|
||||
<div class="s_product_actions">
|
||||
<a href="#" class="action-btn quick-view"><i class="fa fa-eye"></i></a>
|
||||
<a href="#" class="action-btn quick-view"
|
||||
data-name="Flora Bouquet"
|
||||
data-price="$120.00"
|
||||
data-img="/theme_clicks2cart/static/src/img/flora_col.png"
|
||||
data-desc="Elegantly arranged fresh flora bouquet for your special moments."><i class="fa fa-eye"></i></a>
|
||||
<a href="#" class="action-btn add-to-cart"><i class="fa fa-shopping-cart"></i></a>
|
||||
<a href="#" class="action-btn wishlist"><i class="fa fa-heart-o"></i></a>
|
||||
</div>
|
||||
@ -205,7 +213,11 @@
|
||||
<div class="s_col_product_img position-relative overflow-hidden">
|
||||
<img src="/theme_clicks2cart/static/src/img/wedding_col.png" alt="Wedding"/>
|
||||
<div class="s_product_actions">
|
||||
<a href="#" class="action-btn quick-view"><i class="fa fa-eye"></i></a>
|
||||
<a href="#" class="action-btn quick-view"
|
||||
data-name="Wedding Roses"
|
||||
data-price="$115.40"
|
||||
data-img="/theme_clicks2cart/static/src/img/wedding_col.png"
|
||||
data-desc="Timeless wedding roses that capture the essence of purity."><i class="fa fa-eye"></i></a>
|
||||
<a href="#" class="action-btn add-to-cart"><i class="fa fa-shopping-cart"></i></a>
|
||||
<a href="#" class="action-btn wishlist"><i class="fa fa-heart-o"></i></a>
|
||||
</div>
|
||||
@ -224,7 +236,11 @@
|
||||
<div class="s_col_product_img position-relative overflow-hidden">
|
||||
<img src="/theme_clicks2cart/static/src/img/holiday_col.png" alt="Holiday"/>
|
||||
<div class="s_product_actions">
|
||||
<a href="#" class="action-btn quick-view"><i class="fa fa-eye"></i></a>
|
||||
<a href="#" class="action-btn quick-view"
|
||||
data-name="Holiday Bloom"
|
||||
data-price="$250.60"
|
||||
data-img="/theme_clicks2cart/static/src/img/holiday_col.png"
|
||||
data-desc="Vibrant holiday blooms to celebrate festive occasions."><i class="fa fa-eye"></i></a>
|
||||
<a href="#" class="action-btn add-to-cart"><i class="fa fa-shopping-cart"></i></a>
|
||||
<a href="#" class="action-btn wishlist"><i class="fa fa-heart-o"></i></a>
|
||||
</div>
|
||||
@ -244,7 +260,11 @@
|
||||
<div class="s_col_product_img position-relative overflow-hidden">
|
||||
<img src="/theme_clicks2cart/static/src/img/hero_bg.png" alt="Sale"/>
|
||||
<div class="s_product_actions">
|
||||
<a href="#" class="action-btn quick-view"><i class="fa fa-eye"></i></a>
|
||||
<a href="#" class="action-btn quick-view"
|
||||
data-name="Rose Bouquet"
|
||||
data-price="$100.90"
|
||||
data-img="/theme_clicks2cart/static/src/img/hero_bg.png"
|
||||
data-desc="Elegantly arranged fresh rose bouquet for your loved ones."><i class="fa fa-eye"></i></a>
|
||||
<a href="#" class="action-btn add-to-cart"><i class="fa fa-shopping-cart"></i></a>
|
||||
<a href="#" class="action-btn wishlist"><i class="fa fa-heart-o"></i></a>
|
||||
</div>
|
||||
@ -311,7 +331,11 @@
|
||||
<img t-att-src="website.image_url(product, 'image_512')" t-att-alt="product.name" loading="lazy"/>
|
||||
</a>
|
||||
<div class="s_product_actions">
|
||||
<a href="#" class="action-btn quick-view"><i class="fa fa-eye"></i></a>
|
||||
<a href="#" class="action-btn quick-view"
|
||||
t-att-data-name="product.name"
|
||||
t-att-data-price="product.list_price"
|
||||
t-att-data-img="website.image_url(product, 'image_512')"
|
||||
t-att-data-desc="product.description_sale or 'Premium quality floral arrangement for your special moments.'"><i class="fa fa-eye"></i></a>
|
||||
<a t-attf-href="/shop/cart/update_short?product_id=#{product.product_variant_id.id}" class="action-btn add-to-cart"><i class="fa fa-shopping-cart"></i></a>
|
||||
<a href="#" class="action-btn wishlist"><i class="fa fa-heart-o"></i></a>
|
||||
</div>
|
||||
@ -347,7 +371,11 @@
|
||||
<div class="s_wedding_card_img_wrap position-relative">
|
||||
<img src="/theme_clicks2cart/static/src/img/wedding_col.png" alt="Product"/>
|
||||
<div class="s_product_actions">
|
||||
<a href="#" class="action-btn quick-view"><i class="fa fa-eye"></i></a>
|
||||
<a href="#" class="action-btn quick-view"
|
||||
t-att-data-name="item[0]"
|
||||
t-att-data-price="'$' + str(item[1])"
|
||||
data-img="/theme_clicks2cart/static/src/img/wedding_col.png"
|
||||
t-att-data-desc="'Premium ' + item[0] + ' arrangement for your special wedding day.'"><i class="fa fa-eye"></i></a>
|
||||
<a href="#" class="action-btn add-to-cart"><i class="fa fa-shopping-cart"></i></a>
|
||||
<a href="#" class="action-btn wishlist"><i class="fa fa-heart-o"></i></a>
|
||||
</div>
|
||||
@ -407,7 +435,11 @@
|
||||
<img t-att-src="website.image_url(product, 'image_512')" t-att-alt="product.name" loading="lazy"/>
|
||||
</a>
|
||||
<div class="s_product_actions">
|
||||
<a href="#" class="action-btn quick-view"><i class="fa fa-eye"></i></a>
|
||||
<a href="#" class="action-btn quick-view"
|
||||
t-att-data-name="product.name"
|
||||
t-att-data-price="product.list_price"
|
||||
t-att-data-img="website.image_url(product, 'image_512')"
|
||||
t-att-data-desc="product.description_sale or 'Premium quality floral arrangement for your special moments.'"><i class="fa fa-eye"></i></a>
|
||||
<a t-attf-href="/shop/cart/update_short?product_id=#{product.product_variant_id.id}" class="action-btn add-to-cart"><i class="fa fa-shopping-cart"></i></a>
|
||||
<a href="#" class="action-btn wishlist"><i class="fa fa-heart-o"></i></a>
|
||||
</div>
|
||||
@ -432,7 +464,11 @@
|
||||
<span class="s_cat_badge badge-hot">HOT</span>
|
||||
<img src="/theme_clicks2cart/static/src/img/holiday_prod_1.png" alt="Fun & Flirty"/>
|
||||
<div class="s_product_actions">
|
||||
<a href="#" class="action-btn quick-view"><i class="fa fa-eye"></i></a>
|
||||
<a href="#" class="action-btn quick-view"
|
||||
data-name="Fun & Flirty By Bl.."
|
||||
data-price="$200.2"
|
||||
data-img="/theme_clicks2cart/static/src/img/holiday_prod_1.png"
|
||||
data-desc="Fun and flirty floral arrangement by Bloom."><i class="fa fa-eye"></i></a>
|
||||
<a href="#" class="action-btn add-to-cart"><i class="fa fa-shopping-cart"></i></a>
|
||||
<a href="#" class="action-btn wishlist"><i class="fa fa-heart-o"></i></a>
|
||||
</div>
|
||||
@ -451,7 +487,11 @@
|
||||
<div class="s_cat_img_wrap position-relative overflow-hidden">
|
||||
<img src="/theme_clicks2cart/static/src/img/holiday_prod_2.png" alt="Winter White"/>
|
||||
<div class="s_product_actions">
|
||||
<a href="#" class="action-btn quick-view"><i class="fa fa-eye"></i></a>
|
||||
<a href="#" class="action-btn quick-view"
|
||||
data-name="Winter White Bo.."
|
||||
data-price="$240.2"
|
||||
data-img="/theme_clicks2cart/static/src/img/holiday_prod_2.png"
|
||||
data-desc="Pure and elegant winter white floral bouquet."><i class="fa fa-eye"></i></a>
|
||||
<a href="#" class="action-btn add-to-cart"><i class="fa fa-shopping-cart"></i></a>
|
||||
<a href="#" class="action-btn wishlist"><i class="fa fa-heart-o"></i></a>
|
||||
</div>
|
||||
@ -470,17 +510,21 @@
|
||||
<div class="s_cat_img_wrap position-relative overflow-hidden">
|
||||
<img src="/theme_clicks2cart/static/src/img/holiday_prod_3.png" alt="Tulipa Floriade"/>
|
||||
<div class="s_product_actions">
|
||||
<a href="#" class="action-btn quick-view"><i class="fa fa-eye"></i></a>
|
||||
<a href="#" class="action-btn quick-view"
|
||||
data-name="Tulipa Floriade"
|
||||
data-price="$190.5"
|
||||
data-img="/theme_clicks2cart/static/src/img/holiday_prod_3.png"
|
||||
data-desc="Vibrant Tulipa Floriade selection for holiday cheer."><i class="fa fa-eye"></i></a>
|
||||
<a href="#" class="action-btn add-to-cart"><i class="fa fa-shopping-cart"></i></a>
|
||||
<a href="#" class="action-btn wishlist"><i class="fa fa-heart-o"></i></a>
|
||||
</div>
|
||||
</div>
|
||||
<div class="s_cat_info">
|
||||
<h6 class="s_cat_prod_name">Tulipa Floriade -..</h6>
|
||||
<h6 class="s_cat_prod_name">Tulipa Floriade..</h6>
|
||||
<div class="s_cat_stars mb-1" style="color: #e6b3a3; font-size: 0.8rem;">
|
||||
<i class="fa fa-star"/><i class="fa fa-star"/><i class="fa fa-star-o"/><i class="fa fa-star-o"/><i class="fa fa-star-o"/>
|
||||
<i class="fa fa-star"/><i class="fa fa-star"/><i class="fa fa-star"/><i class="fa fa-star-half-o"/><i class="fa fa-star-o"/>
|
||||
</div>
|
||||
<div class="s_cat_prod_price fw-bold">$105.7</div>
|
||||
<div class="s_cat_prod_price fw-bold">$190.5</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@ -490,17 +534,21 @@
|
||||
<span class="s_cat_badge badge-sale">SALE</span>
|
||||
<img src="/theme_clicks2cart/static/src/img/holiday_prod_4.png" alt="Sweet Sorbet"/>
|
||||
<div class="s_product_actions">
|
||||
<a href="#" class="action-btn quick-view"><i class="fa fa-eye"></i></a>
|
||||
<a href="#" class="action-btn quick-view"
|
||||
data-name="Sweet Sorbet"
|
||||
data-price="$210.3"
|
||||
data-img="/theme_clicks2cart/static/src/img/holiday_prod_4.png"
|
||||
data-desc="Sweet sorbet colored flowers for a fresh summer look."><i class="fa fa-eye"></i></a>
|
||||
<a href="#" class="action-btn add-to-cart"><i class="fa fa-shopping-cart"></i></a>
|
||||
<a href="#" class="action-btn wishlist"><i class="fa fa-heart-o"></i></a>
|
||||
</div>
|
||||
</div>
|
||||
<div class="s_cat_info">
|
||||
<h6 class="s_cat_prod_name">Sweet Sorbet..</h6>
|
||||
<h6 class="s_cat_prod_name">Sweet Sorbet</h6>
|
||||
<div class="s_cat_stars mb-1" style="color: #e6b3a3; font-size: 0.8rem;">
|
||||
<i class="fa fa-star"/><i class="fa fa-star"/><i class="fa fa-star"/><i class="fa fa-star"/><i class="fa fa-star-o"/>
|
||||
<i class="fa fa-star"/><i class="fa fa-star"/><i class="fa fa-star-half-o"/><i class="fa fa-star-o"/><i class="fa fa-star-o"/>
|
||||
</div>
|
||||
<div class="s_cat_prod_price fw-bold">$215.2</div>
|
||||
<div class="s_cat_prod_price fw-bold">$210.3</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@ -700,6 +748,93 @@
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- Quick View Modal -->
|
||||
<div class="s_quickview_modal" id="s_quickview_modal">
|
||||
<div class="s_quickview_overlay"></div>
|
||||
<div class="s_quickview_container">
|
||||
<button class="s_quickview_close"><i class="fa fa-times-circle-o"></i></button>
|
||||
<div class="row g-0 h-100">
|
||||
<!-- Left: Images -->
|
||||
<div class="col-md-6 s_qv_images_col">
|
||||
<div class="s_qv_top_label">QUICK VIEW</div>
|
||||
<div class="s_qv_main_img">
|
||||
<img src="/theme_clicks2cart/static/src/img/wedding_col.png" alt="Product" id="qv_main_image"/>
|
||||
</div>
|
||||
<div class="s_qv_thumbnails">
|
||||
<div class="thumb active"><img src="/theme_clicks2cart/static/src/img/flora_col.png"/></div>
|
||||
<div class="thumb"><img src="/theme_clicks2cart/static/src/img/wedding_col.png"/></div>
|
||||
<div class="thumb"><img src="/theme_clicks2cart/static/src/img/holiday_col.png"/></div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- Right: Details -->
|
||||
<div class="col-md-6 s_qv_content_col">
|
||||
<div class="s_details_wrapper">
|
||||
<h3 class="s_qv_prod_name">Queen Rose - Pink</h3>
|
||||
<p class="s_qv_prod_desc">It is a long established fact that a reader will be distracted by the readable content of a page when looking at its layout.</p>
|
||||
|
||||
<div class="s_qv_rating">
|
||||
<div class="stars">
|
||||
<i class="fa fa-star"></i><i class="fa fa-star"></i><i class="fa fa-star"></i><i class="fa fa-star"></i><i class="fa fa-star"></i>
|
||||
</div>
|
||||
<span class="rating_count">10 Rating(s) | Add Your Rating</span>
|
||||
</div>
|
||||
|
||||
<div class="s_qv_price">
|
||||
<span class="current_price">$250.9</span>
|
||||
<span class="old_price">$300.02</span>
|
||||
</div>
|
||||
|
||||
<hr class="my-4" style="opacity: 0.1;"/>
|
||||
|
||||
<div class="s_qv_options">
|
||||
<h5 class="opt_title">Option</h5>
|
||||
<div class="row mt-3">
|
||||
<div class="col-6">
|
||||
<label class="d-block mb-2">Size <span class="text-danger">*</span></label>
|
||||
<select class="form-select custom-select">
|
||||
<option>S</option>
|
||||
<option>M</option>
|
||||
<option>L</option>
|
||||
</select>
|
||||
</div>
|
||||
<div class="col-6">
|
||||
<label class="d-block mb-2">Color <span class="text-danger">*</span></label>
|
||||
<div class="color_circles">
|
||||
<span class="circle" style="background: #e6b3a3;"></span>
|
||||
<span class="circle" style="background: #f1c40f;"></span>
|
||||
<span class="circle" style="background: #fff; border: 1px solid #ddd;"></span>
|
||||
<span class="circle" style="background: #c0392b;"></span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<p class="text-danger small mt-3">Required Fields *</p>
|
||||
</div>
|
||||
|
||||
<hr class="my-4" style="opacity: 0.1;"/>
|
||||
|
||||
<div class="s_qv_footer d-flex align-items-center justify-content-between">
|
||||
<div class="qty_wrap d-flex align-items-center gap-3">
|
||||
<span class="fw-bold">Quanty:</span>
|
||||
<div class="qty_controls">
|
||||
<button class="qty_btn">-</button>
|
||||
<input type="text" value="01" class="qty_input"/>
|
||||
<button class="qty_btn">+</button>
|
||||
</div>
|
||||
</div>
|
||||
<div class="footer_price h4 fw-bold m-0">$ 250.9</div>
|
||||
</div>
|
||||
|
||||
<div class="s_qv_actions d-flex align-items-center gap-3 mt-4">
|
||||
<button class="btn_add_cart">Add to cart</button>
|
||||
<button class="btn_icon_round"><i class="fa fa-eye"></i></button>
|
||||
<button class="btn_icon_round"><i class="fa fa-heart-o"></i></button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</xpath>
|
||||
</field>
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user