soheilkhaledabadi/sodino
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat(upsell): apply real cart discounts and track performance

Browse Source
This commit is contained in:
soheil khaledabadi
2026-05-08 19:16:01 +03:30
parent 8345e94a1b
commit fd9d29a0ee
19 changed files with 747 additions and 206 deletions
Download Patch File Download Diff File Expand all files Collapse all files

213
public/css/upsell-frontend.css Normal file
View File

@@ -0,0 +1,213 @@
.sodino-upsell-panel {
direction: rtl;
margin: 0 0 28px;
padding: 22px;
color: #172033;
background: #ffffff;
border: 1px solid rgba(15, 23, 42, 0.12);
border-radius: 18px;
box-shadow: 0 18px 42px rgba(15, 23, 42, 0.08);
}
.sodino-upsell-panel *,
.sodino-upsell-panel *::before,
.sodino-upsell-panel *::after {
box-sizing: border-box;
}
.sodino-upsell-header {
display: flex;
align-items: flex-start;
justify-content: space-between;
gap: 16px;
margin-bottom: 20px;
}
.sodino-upsell-eyebrow {
margin: 0 0 6px;
color: #2563eb;
font-size: 13px;
font-weight: 700;
}
.sodino-upsell-header h2 {
margin: 0;
color: #111827;
font-size: 22px;
line-height: 1.45;
font-weight: 800;
}
.sodino-upsell-count {
flex: 0 0 auto;
display: inline-flex;
align-items: center;
min-height: 32px;
padding: 6px 12px;
color: #1d4ed8;
background: #eff6ff;
border-radius: 999px;
font-size: 13px;
font-weight: 700;
}
.sodino-upsell-grid {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 14px;
}
.sodino-upsell-card {
display: grid;
grid-template-columns: 96px minmax(0, 1fr);
gap: 16px;
min-height: 168px;
padding: 16px;
background: #f8fafc;
border: 1px solid rgba(15, 23, 42, 0.1);
border-radius: 16px;
}
.sodino-upsell-media {
width: 96px;
height: 96px;
overflow: hidden;
background: #ffffff;
border-radius: 14px;
}
.sodino-upsell-image {
display: block;
width: 100%;
height: 100%;
object-fit: cover;
}
.sodino-upsell-body {
min-width: 0;
}
.sodino-upsell-meta {
display: flex;
flex-wrap: wrap;
gap: 8px;
margin-bottom: 10px;
}
.sodino-upsell-meta span {
display: inline-flex;
align-items: center;
min-height: 26px;
padding: 4px 9px;
color: #047857;
background: #ecfdf5;
border-radius: 999px;
font-size: 12px;
font-weight: 700;
}
.sodino-upsell-meta span + span {
color: #475569;
background: #e2e8f0;
}
.sodino-upsell-title {
margin: 0 0 4px;
color: #475569;
font-size: 13px;
font-weight: 700;
}
.sodino-upsell-card h3 {
margin: 0;
color: #111827;
font-size: 17px;
line-height: 1.45;
font-weight: 800;
}
.sodino-upsell-footer {
display: flex;
align-items: flex-end;
justify-content: space-between;
gap: 12px;
margin-top: 16px;
}
.sodino-upsell-price {
display: grid;
gap: 4px;
color: #111827;
font-size: 17px;
font-weight: 800;
}
.sodino-upsell-price del {
margin-right: 8px;
color: #94a3b8;
font-size: 13px;
font-weight: 600;
}
.sodino-upsell-price small {
color: #047857;
font-size: 12px;
font-weight: 700;
}
.sodino-upsell-button {
flex: 0 0 auto;
display: inline-flex;
align-items: center;
justify-content: center;
min-height: 42px;
padding: 10px 16px;
color: #ffffff !important;
background: #2563eb;
border-radius: 999px;
font-size: 13px;
font-weight: 800;
text-decoration: none !important;
transition: background-color 160ms ease, transform 160ms ease;
}
.sodino-upsell-button:hover,
.sodino-upsell-button:focus {
color: #ffffff !important;
background: #1d4ed8;
transform: translateY(-1px);
}
@media (max-width: 900px) {
.sodino-upsell-grid {
grid-template-columns: 1fr;
}
}
@media (max-width: 560px) {
.sodino-upsell-panel {
padding: 16px;
border-radius: 14px;
}
.sodino-upsell-header,
.sodino-upsell-footer {
flex-direction: column;
align-items: stretch;
}
.sodino-upsell-card {
grid-template-columns: 76px minmax(0, 1fr);
gap: 12px;
padding: 12px;
}
.sodino-upsell-media {
width: 76px;
height: 76px;
}
.sodino-upsell-button {
width: 100%;
}
}