/* ============================================================
VENTACTIVE
RESULTADOS DE BÚSQUEDA
============================================================ */
.vcSearchPage {
position: relative;
width: 100%;
overflow: hidden;
background:
linear-gradient(
180deg,
#f8fafc 0%,
#ffffff 34%,
#ffffff 100%
);
color: #111827;
}
/* ============================================================
HERO
============================================================ */
.vcSearchHero {
position: relative;
overflow: hidden;
padding:
34px
clamp(18px, 4vw, 70px)
52px;
background:
linear-gradient(
135deg,
#071629 0%,
#0b233e 52%,
#123457 100%
);
}
.vcSearchHero::before {
content: "";
position: absolute;
inset: 0;
pointer-events: none;
background:
linear-gradient(
180deg,
rgba(255, 255, 255, 0.03),
rgba(255, 255, 255, 0)
);
}
.vcSearchHeroGlow {
position: absolute;
border-radius: 999px;
filter: blur(8px);
pointer-events: none;
opacity: 0.28;
}
.vcSearchHeroGlowA {
width: 440px;
height: 440px;
top: -240px;
right: 6%;
background:
radial-gradient(
circle,
rgba(30, 188, 255, 0.9) 0%,
rgba(30, 188, 255, 0) 72%
);
}
.vcSearchHeroGlowB {
width: 340px;
height: 340px;
left: -130px;
bottom: -210px;
background:
radial-gradient(
circle,
rgba(88, 101, 242, 0.7) 0%,
rgba(88, 101, 242, 0) 72%
);
}
.vcSearchHeroInner {
position: relative;
z-index: 2;
width: min(1540px, 100%);
margin: 0 auto;
}
/* ============================================================
BREADCRUMB
============================================================ */
.vcSearchBreadcrumb {
display: flex;
align-items: center;
flex-wrap: wrap;
gap: 8px;
margin-bottom: 34px;
color: rgba(255, 255, 255, 0.58);
font-size: 13px;
font-weight: 600;
}
.vcSearchBreadcrumb a {
color: rgba(255, 255, 255, 0.68);
text-decoration: none;
transition:
color 0.2s ease;
}
.vcSearchBreadcrumb a:hover {
color: #ffffff;
}
.vcSearchBreadcrumb span {
display: inline-flex;
align-items: center;
}
.vcSearchBreadcrumb svg {
width: 15px;
height: 15px;
}
/* ============================================================
HERO CONTENT
============================================================ */
.vcSearchHeroContent {
display: grid;
grid-template-columns:
minmax(0, 1fr)
minmax(400px, 0.8fr);
align-items: end;
gap:
clamp(38px, 6vw, 95px);
}
.vcSearchHeroCopy {
max-width: 760px;
}
.vcSearchEyebrow {
display: inline-flex;
align-items: center;
gap: 10px;
margin-bottom: 13px;
color: rgba(255, 255, 255, 0.7);
font-size: 12px;
font-weight: 800;
letter-spacing: 0.13em;
text-transform: uppercase;
}
.vcSearchEyebrow > span {
display: block;
width: 24px;
height: 2px;
border-radius: 999px;
background:
linear-gradient(
90deg,
#38bdf8,
#60a5fa
);
}
.vcSearchHero h1 {
max-width: 860px;
margin: 0;
color: #ffffff;
font-size:
clamp(
34px,
4.4vw,
68px
);
line-height: 0.98;
letter-spacing: -0.045em;
font-weight: 500;
}
.vcSearchHero h1 strong {
display: block;
margin-top: 7px;
font-weight: 800;
background:
linear-gradient(
90deg,
#ffffff,
#7dd3fc
);
-webkit-background-clip: text;
background-clip: text;
color: transparent;
}
.vcSearchHeroCopy > p {
max-width: 670px;
margin:
20px
0
0;
color: rgba(255, 255, 255, 0.68);
font-size:
clamp(
15px,
1.25vw,
18px
);
line-height: 1.65;
}
.vcSearchHeroCopy > p strong {
color: #ffffff;
font-weight: 800;
}
/* ============================================================
SEARCH FORM
============================================================ */
.vcSearchHeroForm {
display: flex;
gap: 10px;
align-items: stretch;
width: 100%;
padding: 7px;
border:
1px
solid
rgba(255, 255, 255, 0.13);
border-radius: 22px;
background:
rgba(255, 255, 255, 0.08);
box-shadow:
0 24px 60px rgba(0, 0, 0, 0.16);
backdrop-filter:
blur(14px);
}
.vcSearchHeroField {
position: relative;
display: flex;
align-items: center;
flex: 1;
min-width: 0;
height: 58px;
padding:
0
52px
0
48px;
border-radius: 16px;
background: #ffffff;
}
.vcSearchHeroField > svg {
position: absolute;
left: 18px;
width: 21px;
height: 21px;
color: #6b7280;
}
.vcSearchHeroField input {
width: 100%;
min-width: 0;
height: 100%;
padding: 0;
border: 0;
outline: 0;
background: transparent;
color: #111827;
font: inherit;
font-size: 15px;
font-weight: 600;
}
.vcSearchHeroField input::placeholder {
color: #9ca3af;
font-weight: 500;
}
.vcSearchHeroField input::-webkit-search-cancel-button {
display: none;
}
.vcSearchClear {
position: absolute;
right: 14px;
display: flex;
align-items: center;
justify-content: center;
width: 32px;
height: 32px;
border-radius: 999px;
background: #f3f4f6;
color: #6b7280;
text-decoration: none;
transition:
background 0.2s ease,
color 0.2s ease,
transform 0.2s ease;
}
.vcSearchClear:hover {
background: #e5e7eb;
color: #111827;
transform: rotate(5deg);
}
.vcSearchClear svg {
width: 16px;
height: 16px;
}
.vcSearchHeroSubmit {
display: inline-flex;
align-items: center;
justify-content: center;
gap: 10px;
min-width: 142px;
padding:
0
22px;
border: 0;
border-radius: 16px;
cursor: pointer;
background:
linear-gradient(
135deg,
#0ea5e9,
#2563eb
);
color: #ffffff;
font: inherit;
font-size: 14px;
font-weight: 800;
box-shadow:
0 14px 30px rgba(37, 99, 235, 0.24);
transition:
transform 0.22s ease,
box-shadow 0.22s ease;
}
.vcSearchHeroSubmit:hover {
transform: translateY(-2px);
box-shadow:
0 18px 35px rgba(37, 99, 235, 0.34);
}
.vcSearchHeroSubmit svg {
width: 18px;
height: 18px;
}
/* ============================================================
RESULTS
============================================================ */
.vcSearchResults {
position: relative;
padding:
clamp(44px, 5vw, 76px)
clamp(18px, 4vw, 70px)
clamp(75px, 8vw, 120px);
}
.vcSearchResultsInner {
width: min(1540px, 100%);
margin: 0 auto;
}
/* ============================================================
TOOLBAR
============================================================ */
.vcSearchToolbar {
display: flex;
align-items: center;
justify-content: space-between;
gap: 24px;
margin-bottom: 28px;
padding-bottom: 20px;
border-bottom:
1px
solid
#e8edf3;
}
.vcSearchMeta {
display: flex;
align-items: center;
flex-wrap: wrap;
gap: 5px;
color: #8a94a3;
font-size: 13px;
font-weight: 600;
}
.vcSearchMeta strong {
color: #111827;
font-weight: 800;
}
.vcSearchOrder {
display: flex;
align-items: center;
gap: 12px;
}
.vcSearchOrder label {
color: #7c8796;
font-size: 13px;
font-weight: 700;
white-space: nowrap;
}
.vcSearchOrder select {
min-width: 190px;
height: 44px;
padding:
0
42px
0
15px;
border:
1px
solid
#dfe5ec;
border-radius: 12px;
outline: 0;
background-color: #ffffff;
color: #111827;
font: inherit;
font-size: 13px;
font-weight: 700;
cursor: pointer;
transition:
border-color 0.2s ease,
box-shadow 0.2s ease;
}
.vcSearchOrder select:hover,
.vcSearchOrder select:focus {
border-color: #b8c3d2;
box-shadow:
0 0 0 4px rgba(15, 23, 42, 0.04);
}
/* ============================================================
PRODUCT GRID
============================================================ */
.vcSearchGrid {
display: grid;
grid-template-columns:
repeat(
4,
minmax(0, 1fr)
);
gap:
clamp(18px, 2vw, 28px);
}
/* ============================================================
PRODUCT CARD
============================================================ */
.vcSearchProductCard {
position: relative;
min-width: 0;
overflow: hidden;
border:
1px
solid
#e8edf3;
border-radius: 22px;
background: #ffffff;
box-shadow:
0 12px 35px rgba(15, 23, 42, 0.045);
transition:
transform 0.26s ease,
box-shadow 0.26s ease,
border-color 0.26s ease;
}
.vcSearchProductCard:hover {
transform: translateY(-5px);
border-color: #d7dee8;
box-shadow:
0 24px 55px rgba(15, 23, 42, 0.095);
}
/* ============================================================
PRODUCT MEDIA
============================================================ */
.vcSearchProductMedia {
position: relative;
display: flex;
align-items: center;
justify-content: center;
aspect-ratio: 1 / 0.84;
overflow: hidden;
background:
linear-gradient(
145deg,
#f9fafb,
#f3f6f9
);
text-decoration: none;
}
.vcSearchProductMedia img {
display: block;
width: 100%;
height: 100%;
object-fit: contain;
padding: 22px;
transition:
transform 0.35s ease;
}
.vcSearchProductCard:hover
.vcSearchProductMedia img {
transform: scale(1.035);
}
.vcSearchProductDiscount {
position: absolute;
z-index: 3;
top: 14px;
left: 14px;
display: inline-flex;
align-items: center;
justify-content: center;
min-height: 30px;
padding:
0
10px;
border-radius: 999px;
background: #111827;
color: #ffffff;
font-size: 11px;
font-weight: 900;
letter-spacing: 0.035em;
box-shadow:
0 8px 18px rgba(15, 23, 42, 0.16);
}
.vcSearchProductNoImage {
display: flex;
align-items: center;
justify-content: center;
width: 82%;
height: 82%;
border:
1px
dashed
#d7dde5;
border-radius: 18px;
color: #a2abb7;
}
.vcSearchProductNoImage span {
font-size: 12px;
font-weight: 900;
letter-spacing: 0.12em;
text-transform: uppercase;
}
/* ============================================================
PRODUCT BODY
============================================================ */
.vcSearchProductBody {
display: flex;
flex-direction: column;
min-height: 278px;
padding: 18px;
}
.vcSearchProductTop {
display: flex;
align-items: center;
justify-content: space-between;
gap: 10px;
margin-bottom: 9px;
}
.vcSearchProductKey {
overflow: hidden;
color: #9aa4b1;
font-size: 10px;
font-weight: 900;
letter-spacing: 0.09em;
text-transform: uppercase;
text-overflow: ellipsis;
white-space: nowrap;
}
/* ============================================================
RATING
============================================================ */
.vcSearchProductRating {
display: flex;
align-items: center;
gap: 5px;
flex-shrink: 0;
}
.vcSearchStars {
position: relative;
display: inline-block;
line-height: 1;
font-size: 11px;
letter-spacing: 1px;
}
.vcSearchStars > span:first-child {
color: #dfe4ea;
}
.vcSearchStars > span:last-child {
position: absolute;
inset:
0
auto
auto
0;
overflow: hidden;
color: #f7b928;
white-space: nowrap;
}
.vcSearchProductRating small {
color: #98a1ad;
font-size: 10px;
font-weight: 700;
white-space: nowrap;
}
/* ============================================================
PRODUCT TITLE
============================================================ */
.vcSearchProductTitle {
display: -webkit-box;
overflow: hidden;
margin-bottom: 8px;
color: #101828;
text-decoration: none;
font-size:
clamp(
15px,
1.1vw,
17px
);
line-height: 1.35;
font-weight: 800;
letter-spacing: -0.018em;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
transition:
color 0.2s ease;
}
.vcSearchProductTitle:hover {
color: #2563eb;
}
.vcSearchProductDescription {
display: -webkit-box;
overflow: hidden;
min-height: 38px;
margin:
0
0
15px;
color: #7b8491;
font-size: 12px;
line-height: 1.55;
font-weight: 500;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
}
/* ============================================================
PRODUCT PRICE
============================================================ */
.vcSearchProductPrice {
display: flex;
align-items: baseline;
flex-wrap: wrap;
gap: 6px;
margin-top: auto;
margin-bottom: 16px;
}
.vcSearchProductOldPrice {
width: 100%;
margin-bottom: -2px;
color: #9ca3af;
font-size: 11px;
font-weight: 600;
text-decoration: line-through;
}
.vcSearchProductPrice strong {
color: #0f172a;
font-size:
clamp(
21px,
1.65vw,
27px
);
line-height: 1;
font-weight: 900;
letter-spacing: -0.035em;
}
.vcSearchProductPrice small {
color: #9aa4b1;
font-size: 9px;
font-weight: 900;
letter-spacing: 0.08em;
}
/* ============================================================
PRODUCT ACTIONS
============================================================ */
.vcSearchProductActions {
display: grid;
grid-template-columns:
minmax(0, 1fr)
44px;
gap: 9px;
}
.vcSearchProductView,
.vcSearchProductAdd {
min-height: 44px;
border-radius: 12px;
}
.vcSearchProductView {
display: inline-flex;
align-items: center;
justify-content: center;
padding:
0
15px;
background: #f4f6f8;
color: #111827;
text-decoration: none;
font-size: 12px;
font-weight: 800;
transition:
background 0.2s ease,
color 0.2s ease;
}
.vcSearchProductView:hover {
background: #111827;
color: #ffffff;
}
.vcSearchProductAdd {
display: flex;
align-items: center;
justify-content: center;
border: 0;
cursor: pointer;
background:
linear-gradient(
135deg,
#0ea5e9,
#2563eb
);
color: #ffffff;
box-shadow:
0 9px 20px rgba(37, 99, 235, 0.18);
transition:
transform 0.2s ease,
box-shadow 0.2s ease;
}
.vcSearchProductAdd:hover {
transform: translateY(-2px);
box-shadow:
0 13px 25px rgba(37, 99, 235, 0.27);
}
.vcSearchProductAdd svg {
width: 19px;
height: 19px;
}
/* ============================================================
EMPTY STATES
============================================================ */
.vcSearchInitialState,
.vcSearchEmptyState {
width: min(820px, 100%);
margin: 10px auto;
padding:
clamp(40px, 6vw, 76px)
clamp(24px, 5vw, 70px);
border:
1px
solid
#e7ebf0;
border-radius: 28px;
background:
linear-gradient(
145deg,
#ffffff,
#f9fbfd
);
box-shadow:
0 24px 70px rgba(15, 23, 42, 0.055);
text-align: center;
}
.vcSearchInitialIcon,
.vcSearchEmptyCircle {
display: flex;
align-items: center;
justify-content: center;
width: 82px;
height: 82px;
margin:
0
auto
22px;
border-radius: 24px;
background:
linear-gradient(
145deg,
#eef8ff,
#e9f1ff
);
color: #2563eb;
box-shadow:
inset 0 0 0 1px rgba(37, 99, 235, 0.06);
}
.vcSearchInitialIcon svg,
.vcSearchEmptyCircle svg {
width: 39px;
height: 39px;
}
.vcSearchInitialState > span,
.vcSearchEmptyCopy > span {
display: inline-block;
margin-bottom: 10px;
color: #2563eb;
font-size: 11px;
font-weight: 900;
letter-spacing: 0.12em;
text-transform: uppercase;
}
.vcSearchInitialState h2,
.vcSearchEmptyCopy h2 {
margin: 0;
color: #0f172a;
font-size:
clamp(
26px,
3vw,
42px
);
line-height: 1.05;
font-weight: 800;
letter-spacing: -0.04em;
}
.vcSearchEmptyCopy h2 strong {
display: block;
margin-top: 6px;
color: #2563eb;
}
.vcSearchInitialState p,
.vcSearchEmptyCopy p {
max-width: 580px;
margin:
17px
auto
26px;
color: #7c8794;
font-size: 14px;
line-height: 1.7;
}
.vcSearchEmptyState {
display: grid;
grid-template-columns:
150px
minmax(0, 1fr);
align-items: center;
gap: 35px;
text-align: left;
}
.vcSearchEmptyCircle {
margin: 0;
width: 128px;
height: 128px;
border-radius: 35px;
}
.vcSearchEmptyCircle svg {
width: 56px;
height: 56px;
}
.vcSearchEmptyCopy p {
margin:
17px
0
26px;
}
.vcSearchExploreButton,
.vcSearchSecondaryButton {
display: inline-flex;
align-items: center;
justify-content: center;
gap: 10px;
min-height: 48px;
padding:
0
20px;
border-radius: 13px;
text-decoration: none;
font-size: 12px;
font-weight: 800;
transition:
transform 0.2s ease,
box-shadow 0.2s ease,
background 0.2s ease;
}
.vcSearchExploreButton {
background: #111827;
color: #ffffff;
box-shadow:
0 12px 26px rgba(15, 23, 42, 0.13);
}
.vcSearchExploreButton:hover {
transform: translateY(-2px);
box-shadow:
0 16px 32px rgba(15, 23, 42, 0.19);
}
.vcSearchExploreButton svg {
width: 17px;
height: 17px;
}
.vcSearchSecondaryButton {
border:
1px
solid
#dfe5ec;
background: #ffffff;
color: #111827;
}
.vcSearchSecondaryButton:hover {
background: #f5f7fa;
}
.vcSearchEmptyActions {
display: flex;
align-items: center;
flex-wrap: wrap;
gap: 10px;
}
/* ============================================================
PAGINATION
============================================================ */
.vcSearchPagination {
display: flex;
align-items: center;
justify-content: center;
gap: 10px;
margin-top:
clamp(
40px,
5vw,
70px
);
}
.vcSearchPaginationPages {
display: flex;
align-items: center;
gap: 7px;
}
.vcSearchPagination a,
.vcSearchPaginationPages span {
display: flex;
align-items: center;
justify-content: center;
min-width: 40px;
height: 40px;
border-radius: 11px;
color: #687384;
text-decoration: none;
font-size: 12px;
font-weight: 800;
}
.vcSearchPagination a {
border:
1px
solid
#e3e8ee;
background: #ffffff;
transition:
border-color 0.2s ease,
background 0.2s ease,
color 0.2s ease,
transform 0.2s ease;
}
.vcSearchPagination a:hover {
transform: translateY(-2px);
border-color: #cbd5e1;
color: #111827;
}
.vcSearchPagination a.is-active {
border-color: #111827;
background: #111827;
color: #ffffff;
box-shadow:
0 10px 22px rgba(15, 23, 42, 0.13);
}
.vcSearchPaginationArrow svg {
width: 17px;
height: 17px;
}
/* ============================================================
RESPONSIVE
============================================================ */
@media (
max-width: 1280px
) {
.vcSearchGrid {
grid-template-columns:
repeat(
3,
minmax(0, 1fr)
);
}
}
@media (
max-width: 1050px
) {
.vcSearchHeroContent {
grid-template-columns:
1fr;
gap: 30px;
}
.vcSearchHeroForm {
max-width: 720px;
}
}
@media (
max-width: 900px
) {
.vcSearchGrid {
grid-template-columns:
repeat(
2,
minmax(0, 1fr)
);
}
.vcSearchToolbar {
align-items: flex-start;
flex-direction: column;
}
.vcSearchOrder {
width: 100%;
justify-content: space-between;
}
.vcSearchOrder select {
flex: 1;
max-width: 260px;
}
}
@media (
max-width: 720px
) {
.vcSearchHero {
padding:
26px
18px
38px;
}
.vcSearchBreadcrumb {
margin-bottom: 24px;
}
.vcSearchHero h1 {
font-size:
clamp(
32px,
9vw,
48px
);
}
.vcSearchHeroForm {
display: grid;
grid-template-columns: 1fr;
gap: 8px;
padding: 6px;
border-radius: 19px;
}
.vcSearchHeroField {
height: 54px;
border-radius: 14px;
}
.vcSearchHeroSubmit {
min-height: 50px;
border-radius: 14px;
}
.vcSearchResults {
padding:
38px
18px
72px;
}
.vcSearchEmptyState {
grid-template-columns: 1fr;
gap: 20px;
text-align: center;
}
.vcSearchEmptyCircle {
width: 94px;
height: 94px;
margin: 0 auto;
border-radius: 28px;
}
.vcSearchEmptyCircle svg {
width: 44px;
height: 44px;
}
.vcSearchEmptyCopy p {
margin:
16px
auto
24px;
}
.vcSearchEmptyActions {
justify-content: center;
}
}
@media (
max-width: 580px
) {
.vcSearchGrid {
grid-template-columns: 1fr;
gap: 16px;
}
.vcSearchToolbar {
margin-bottom: 20px;
}
.vcSearchOrder {
display: grid;
grid-template-columns:
auto
minmax(0, 1fr);
}
.vcSearchOrder select {
width: 100%;
max-width: none;
min-width: 0;
}
.vcSearchProductCard {
display: grid;
grid-template-columns:
130px
minmax(0, 1fr);
border-radius: 18px;
}
.vcSearchProductMedia {
height: 100%;
min-height: 210px;
aspect-ratio: auto;
}
.vcSearchProductMedia img {
padding: 14px;
}
.vcSearchProductDiscount {
top: 9px;
left: 9px;
min-height: 27px;
padding:
0
8px;
font-size: 9px;
}
.vcSearchProductBody {
min-height: 210px;
padding: 14px;
}
.vcSearchProductTop {
margin-bottom: 6px;
}
.vcSearchProductRating {
display: none;
}
.vcSearchProductTitle {
font-size: 14px;
}
.vcSearchProductDescription {
min-height: 34px;
margin-bottom: 10px;
font-size: 11px;
}
.vcSearchProductPrice {
margin-bottom: 12px;
}
.vcSearchProductPrice strong {
font-size: 20px;
}
.vcSearchProductActions {
grid-template-columns:
minmax(0, 1fr)
40px;
}
.vcSearchProductView,
.vcSearchProductAdd {
min-height: 40px;
}
.vcSearchProductView {
font-size: 11px;
}
.vcSearchInitialState,
.vcSearchEmptyState {
padding:
36px
20px;
border-radius: 22px;
}
.vcSearchPagination {
gap: 6px;
}
.vcSearchPaginationPages {
gap: 5px;
}
.vcSearchPagination a,
.vcSearchPaginationPages span {
min-width: 34px;
height: 36px;
border-radius: 9px;
font-size: 11px;
}
}
@media (
max-width: 410px
) {
.vcSearchProductCard {
grid-template-columns:
112px
minmax(0, 1fr);
}
.vcSearchProductMedia {
min-height: 195px;
}
.vcSearchProductBody {
min-height: 195px;
padding: 12px;
}
.vcSearchProductDescription {
display: none;
}
.vcSearchProductPrice {
margin-top: auto;
}
.vcSearchProductView {
padding:
0
10px;
}
.vcSearchEmptyActions {
flex-direction: column;
}
.vcSearchExploreButton,
.vcSearchSecondaryButton {
width: 100%;
}
}
/* ============================================================
VENTACTIVE
RESULTADOS DE BÚSQUEDA
============================================================ */
(function () {
"use strict";
/* =========================================================
READY
========================================================= */
document.addEventListener(
"DOMContentLoaded",
function () {
vcSearchInit();
}
);
/* =========================================================
INIT
========================================================= */
function vcSearchInit() {
vcSearchInitAddToCart();
vcSearchInitSearchForm();
vcSearchInitOrder();
vcSearchInitPagination();
}
/* =========================================================
ADD TO CART
========================================================= */
function vcSearchInitAddToCart() {
document.addEventListener(
"click",
function (event) {
const button =
event.target.closest(
"[data-vc-search-add-cart]"
);
if (!button) {
return;
}
event.preventDefault();
if (
button.disabled ||
button.classList.contains(
"is-loading"
)
) {
return;
}
const productId =
parseInt(
button.dataset.productId || "0",
10
);
if (!productId) {
vcSearchNotice(
"No fue posible identificar el producto.",
"error"
);
return;
}
vcSearchAddToCart(
productId,
button
);
}
);
}
/* =========================================================
ADD PRODUCT
========================================================= */
async function vcSearchAddToCart(
productId,
button
) {
const originalHTML =
button.innerHTML;
button.disabled =
true;
button.classList.add(
"is-loading"
);
button.innerHTML = `
`;
try {
/*
|--------------------------------------------------------------------------
| ADD TO CART
|--------------------------------------------------------------------------
|
| Si tu endpoint ya tiene otra ruta,
| cambia ÚNICAMENTE esta URL.
|
*/
const formData =
new FormData();
formData.append(
"producto",
productId
);
formData.append(
"cantidad",
1
);
const response =
await fetch(
"ajax/add-to-cart.php",
{
method:
"POST",
body:
formData,
credentials:
"same-origin",
headers: {
"X-Requested-With":
"XMLHttpRequest"
}
}
);
if (!response.ok) {
throw new Error(
"HTTP " +
response.status
);
}
const data =
await vcSearchReadResponse(
response
);
/* =================================================
ERROR RETURNED BY PHP
================================================= */
if (
data &&
typeof data ===
"object" &&
data.success ===
false
) {
throw new Error(
data.message ||
"No fue posible agregar el producto."
);
}
/* =================================================
SUCCESS
================================================= */
button.classList.remove(
"is-loading"
);
button.classList.add(
"is-success"
);
button.innerHTML = `
`;
/*
|--------------------------------------------------------------------------
| Actualizar carrito
|--------------------------------------------------------------------------
*/
await vcSearchRefreshCart();
/*
|--------------------------------------------------------------------------
| Abrir drawer
|--------------------------------------------------------------------------
*/
vcSearchOpenCartDrawer();
/*
|--------------------------------------------------------------------------
| Restaurar botón
|--------------------------------------------------------------------------
*/
window.setTimeout(
function () {
button.classList.remove(
"is-success"
);
button.innerHTML =
originalHTML;
button.disabled =
false;
},
1200
);
} catch (error) {
console.error(
"Ventactive search add cart:",
error
);
button.classList.remove(
"is-loading"
);
button.classList.add(
"is-error"
);
button.innerHTML = `
`;
vcSearchNotice(
error.message ||
"No fue posible agregar el producto al carrito.",
"error"
);
window.setTimeout(
function () {
button.classList.remove(
"is-error"
);
button.innerHTML =
originalHTML;
button.disabled =
false;
},
1300
);
}
}
/* =========================================================
READ FETCH RESPONSE
========================================================= */
async function vcSearchReadResponse(
response
) {
const text =
await response.text();
if (!text) {
return {
success:
true
};
}
try {
return JSON.parse(
text
);
} catch (error) {
/*
|--------------------------------------------------------------------------
| Algunos endpoints antiguos de Ventactive pueden devolver
| simplemente 1, success, HTML, etc.
|--------------------------------------------------------------------------
*/
const clean =
text
.trim()
.toLowerCase();
if (
clean === "1" ||
clean === "success" ||
clean === "ok"
) {
return {
success:
true
};
}
return {
success:
true,
raw:
text
};
}
}
/* =========================================================
REFRESH CART
========================================================= */
async function vcSearchRefreshCart() {
/*
|--------------------------------------------------------------------------
| PRIMERO
|--------------------------------------------------------------------------
|
| Si header.js ya expone una función para actualizar carrito,
| la reutilizamos.
|
*/
const globalFunctions = [
"vcRefreshCart",
"vcLoadCartDrawer",
"vcUpdateCart",
"loadCartDrawer",
"updateCartDrawer",
"refreshCartDrawer"
];
for (
const functionName
of globalFunctions
) {
if (
typeof window[
functionName
] ===
"function"
) {
try {
await window[
functionName
]();
return;
} catch (error) {
console.warn(
functionName +
" falló:",
error
);
}
}
}
/*
|--------------------------------------------------------------------------
| FALLBACK
|--------------------------------------------------------------------------
|
| Si no existe función global, intentamos obtener
| nuevamente el drawer mediante AJAX.
|
*/
try {
const response =
await fetch(
"ajax/cart-drawer.php",
{
method:
"GET",
credentials:
"same-origin",
headers: {
"X-Requested-With":
"XMLHttpRequest"
}
}
);
if (!response.ok) {
return;
}
const html =
await response.text();
if (!html.trim()) {
return;
}
vcSearchReplaceCartDrawer(
html
);
} catch (error) {
console.warn(
"No se pudo refrescar el drawer:",
error
);
}
}
/* =========================================================
REPLACE DRAWER HTML
========================================================= */
function vcSearchReplaceCartDrawer(
html
) {
/*
|--------------------------------------------------------------------------
| Busca distintos posibles contenedores del carrito.
|--------------------------------------------------------------------------
*/
const selectors = [
"#vcCartDrawerContent",
".vcCartDrawerContent",
"[data-vc-cart-drawer-content]",
"#cartDrawerContent",
".cart-drawer-content"
];
for (
const selector
of selectors
) {
const container =
document.querySelector(
selector
);
if (!container) {
continue;
}
/*
|--------------------------------------------------------------------------
| Si el endpoint devuelve TODO el drawer, intentamos tomar
| únicamente el contenido equivalente.
|--------------------------------------------------------------------------
*/
const temporary =
document.createElement(
"div"
);
temporary.innerHTML =
html;
const incoming =
temporary.querySelector(
selector
);
if (incoming) {
container.innerHTML =
incoming.innerHTML;
} else {
container.innerHTML =
html;
}
document.dispatchEvent(
new CustomEvent(
"vc:cartUpdated"
)
);
return;
}
/*
|--------------------------------------------------------------------------
| El header puede escuchar este evento y actualizarse solo.
|--------------------------------------------------------------------------
*/
document.dispatchEvent(
new CustomEvent(
"vc:cartUpdated",
{
detail: {
html:
html
}
}
)
);
}
/* =========================================================
OPEN CART DRAWER
========================================================= */
function vcSearchOpenCartDrawer() {
/*
|--------------------------------------------------------------------------
| Si header.js tiene función pública
|--------------------------------------------------------------------------
*/
const globalFunctions = [
"vcOpenCart",
"vcOpenCartDrawer",
"openCartDrawer",
"showCartDrawer"
];
for (
const functionName
of globalFunctions
) {
if (
typeof window[
functionName
] ===
"function"
) {
window[
functionName
]();
return;
}
}
/*
|--------------------------------------------------------------------------
| Si no, hacemos click programático sobre el botón del carrito
|--------------------------------------------------------------------------
*/
const triggers = [
"[data-vc-cart-open]",
"[data-cart-open]",
"#vcCartButton",
".vcHeaderCart",
".vcCartTrigger",
".vcHeaderCartButton",
"[aria-controls='vcCartDrawer']"
];
for (
const selector
of triggers
) {
const trigger =
document.querySelector(
selector
);
if (trigger) {
trigger.click();
return;
}
}
/*
|--------------------------------------------------------------------------
| Último fallback:
| intentar abrir el drawer directamente por clase.
|--------------------------------------------------------------------------
*/
const drawer =
document.querySelector(
"#vcCartDrawer, .vcCartDrawer, [data-vc-cart-drawer]"
);
if (drawer) {
drawer.classList.add(
"is-open"
);
drawer.setAttribute(
"aria-hidden",
"false"
);
document.body.classList.add(
"vcCartOpen"
);
}
}
/* =========================================================
SEARCH FORM
========================================================= */
function vcSearchInitSearchForm() {
const forms =
document.querySelectorAll(
".vcSearchHeroForm"
);
forms.forEach(
function (form) {
form.addEventListener(
"submit",
function (event) {
const input =
form.querySelector(
'input[name="b"]'
);
if (!input) {
return;
}
const value =
input.value.trim();
/*
|--------------------------------------------------------------------------
| No mandar búsquedas vacías
|--------------------------------------------------------------------------
*/
if (!value) {
event.preventDefault();
input.focus();
vcSearchShake(
input.closest(
".vcSearchHeroField"
)
);
return;
}
input.value =
value;
}
);
}
);
}
/* =========================================================
ORDER SELECT
========================================================= */
function vcSearchInitOrder() {
const select =
document.querySelector(
"#vcSearchOrderSelect"
);
if (!select) {
return;
}
select.addEventListener(
"change",
function () {
const form =
select.closest(
"form"
);
if (!form) {
return;
}
select.disabled =
true;
form.classList.add(
"is-loading"
);
form.submit();
}
);
}
/* =========================================================
PAGINATION
========================================================= */
function vcSearchInitPagination() {
const pagination =
document.querySelector(
".vcSearchPagination"
);
if (!pagination) {
return;
}
pagination.addEventListener(
"click",
function (event) {
const link =
event.target.closest(
"a"
);
if (!link) {
return;
}
if (
link.classList.contains(
"is-active"
)
) {
event.preventDefault();
return;
}
/*
|--------------------------------------------------------------------------
| Evita doble clic durante navegación
|--------------------------------------------------------------------------
*/
pagination.classList.add(
"is-loading"
);
}
);
}
/* =========================================================
SHAKE
========================================================= */
function vcSearchShake(
element
) {
if (!element) {
return;
}
element.classList.remove(
"vcSearchShake"
);
void element.offsetWidth;
element.classList.add(
"vcSearchShake"
);
window.setTimeout(
function () {
element.classList.remove(
"vcSearchShake"
);
},
450
);
}
/* =========================================================
NOTICE
========================================================= */
function vcSearchNotice(
message,
type
) {
/*
|--------------------------------------------------------------------------
| Si ya existe el sistema global de avisos de Ventactive
|--------------------------------------------------------------------------
*/
if (
typeof window.vcProductNotice ===
"function"
) {
window.vcProductNotice(
message,
type
);
return;
}
if (
typeof window.vcNotice ===
"function"
) {
window.vcNotice(
message,
type
);
return;
}
/*
|--------------------------------------------------------------------------
| NOTICE LOCAL
|--------------------------------------------------------------------------
*/
let container =
document.querySelector(
".vcSearchNoticeContainer"
);
if (!container) {
container =
document.createElement(
"div"
);
container.className =
"vcSearchNoticeContainer";
document.body.appendChild(
container
);
}
const notice =
document.createElement(
"div"
);
notice.className =
"vcSearchNotice " +
(
type === "error"
? "is-error"
: "is-success"
);
notice.innerHTML = `
${
type === "error"
? `
`
: `
`
}
${vcSearchEscapeHtml(
message
)}
`;
container.appendChild(
notice
);
requestAnimationFrame(
function () {
notice.classList.add(
"is-visible"
);
}
);
window.setTimeout(
function () {
notice.classList.remove(
"is-visible"
);
window.setTimeout(
function () {
notice.remove();
},
280
);
},
3200
);
}
/* =========================================================
ESCAPE HTML
========================================================= */
function vcSearchEscapeHtml(
value
) {
return String(
value || ""
)
.replace(
/&/g,
"&"
)
.replace(
//g,
">"
)
.replace(
/"/g,
"""
)
.replace(
/'/g,
"'"
);
}
})();