From 06bc61de9cf476fbbfa2be4bfeec65e1a1a3e20d Mon Sep 17 00:00:00 2001 From: Alaguraj0361 Date: Wed, 11 Mar 2026 17:25:56 +0530 Subject: [PATCH] introduce new Dine360 theme with custom styling, quick view functionality, and page layouts. --- addons/theme_clicks2cart/__manifest__.py | 1 + .../static/src/js/quickview.js | 71 +++++ .../static/src/scss/theme.scss | 299 +++++++++++++++++- addons/theme_clicks2cart/views/pages.xml | 171 ++++++++-- 4 files changed, 522 insertions(+), 20 deletions(-) create mode 100644 addons/theme_clicks2cart/static/src/js/quickview.js diff --git a/addons/theme_clicks2cart/__manifest__.py b/addons/theme_clicks2cart/__manifest__.py index 9d1f4ed..3e98f58 100644 --- a/addons/theme_clicks2cart/__manifest__.py +++ b/addons/theme_clicks2cart/__manifest__.py @@ -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': [ diff --git a/addons/theme_clicks2cart/static/src/js/quickview.js b/addons/theme_clicks2cart/static/src/js/quickview.js new file mode 100644 index 0000000..8fa0416 --- /dev/null +++ b/addons/theme_clicks2cart/static/src/js/quickview.js @@ -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); + } +}); diff --git a/addons/theme_clicks2cart/static/src/scss/theme.scss b/addons/theme_clicks2cart/static/src/scss/theme.scss index 654e323..4b41f5f 100644 --- a/addons/theme_clicks2cart/static/src/scss/theme.scss +++ b/addons/theme_clicks2cart/static/src/scss/theme.scss @@ -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); + } } \ No newline at end of file diff --git a/addons/theme_clicks2cart/views/pages.xml b/addons/theme_clicks2cart/views/pages.xml index 87bfebe..9ce4021 100644 --- a/addons/theme_clicks2cart/views/pages.xml +++ b/addons/theme_clicks2cart/views/pages.xml @@ -161,7 +161,11 @@
- +
@@ -186,7 +190,11 @@
Flora
- +
@@ -205,7 +213,11 @@
Wedding
- +
@@ -224,7 +236,11 @@
Holiday
- +
@@ -244,7 +260,11 @@
Sale
- +
@@ -311,7 +331,11 @@
- +
@@ -347,7 +371,11 @@
Product
- +
@@ -407,7 +435,11 @@
- +
@@ -432,7 +464,11 @@ HOT Fun & Flirty
- +
@@ -451,7 +487,11 @@
Winter White
- +
@@ -470,17 +510,21 @@
Tulipa Floriade
- +
-
Tulipa Floriade -..
+
Tulipa Floriade..
- +
-
$105.7
+
$190.5
@@ -490,17 +534,21 @@ SALE Sweet Sorbet
- +
-
Sweet Sorbet..
+
Sweet Sorbet
- +
-
$215.2
+
$210.3
@@ -700,6 +748,93 @@
+ + +
+
+
+ +
+ +
+
QUICK VIEW
+
+ Product +
+
+
+
+
+
+
+ +
+
+

Queen Rose - Pink

+

It is a long established fact that a reader will be distracted by the readable content of a page when looking at its layout.

+ +
+
+ +
+ 10 Rating(s) | Add Your Rating +
+ +
+ $250.9 + $300.02 +
+ +
+ +
+
Option
+
+
+ + +
+
+ +
+ + + + +
+
+
+

Required Fields *

+
+ +
+ +
+
+ Quanty: +
+ + + +
+
+
$ 250.9
+
+ +
+ + + +
+
+
+
+
+