1<!-- SEO Meta Content --> 2 3<!DOCTYPE html> 4 5<html 6 lang="es" 7 dir="ltr" 8> 9 <head> 10 11 12 13 <title>Tienda | Mis Momentos Digitales</title> 14 15 <meta charset="UTF-8"> 16 17 <meta 18 http-equiv="X-UA-Compatible" 19 content="IE=edge" 20 > 21 <meta 22 http-equiv="content-language" 23 content="es" 24 > 25 26 <meta 27 name="viewport" 28 content="width=device-width, initial-scale=1" 29 > 30 <meta 31 name="base-url" 32 content="https://mismomentosdigitales.com" 33 > 34 <meta 35 name="currency" 36 content="{"id":1,"code":"MXN","name":"Peso Mexicano","symbol":"$","decimal":2,"group_separator":",","decimal_separator":".","currency_position":null,"created_at":null,"updated_at":null}" 37 > 38 39 <meta 40 name="title" 41 content="Tienda | Mis Momentos Digitales" 42 /> 43 44 <meta 45 name="description" 46 content="Tienda | Mis Momentos Digitales" 47 /> 48 49 <meta 50 name="keywords" 51 content="Tienda | Mis Momentos Digitales" 52 /> 53 54 <link 55 rel="icon" 56 sizes="16x16" 57 href="https://mismomentosdigitales.com/storage/channel/1/dL56CZgo7906Q0Is5S2tUm8ACNxMNa5RginnR5Xz.ico" 58 /> 59 60 <link rel="preload" as="style" href="https://mismomentosdigitales.com/themes/shop/default/build/assets/app-F65DyJd8.css" /><link rel="preload" as="style" href="https://mismomentosdigitales.com/themes/shop/default/build/assets/app-DsP8OK1c.css" /><link rel="modulepreload" href="https://mismomentosdigitales.com/themes/shop/default/build/assets/app-COK2BsHi.js" /><link rel="stylesheet" href="https://mismomentosdigitales.com/themes/shop/default/build/assets/app-F65DyJd8.css" /><link rel="stylesheet" href="https://mismomentosdigitales.com/themes/shop/default/build/assets/app-DsP8OK1c.css" />
60<script type="module" src="https://mismomentosdigitales.com/themes/shop/default/build/assets/app-COK2BsHi.js"></script>
60 61 <link 62 rel="preload" 63 href="https://fonts.googleapis.com/css2?family=Poppins:wght@400;500;600;700;800&display=swap" 64 as="style" 65 > 66 <link 67 rel="stylesheet" 68 href="https://fonts.googleapis.com/css2?family=Poppins:wght@400;500;600;700;800&display=swap" 69 > 70 71 <link 72 rel="preload" 73 href="https://fonts.googleapis.com/css2?family=DM+Serif+Display&display=swap" 74 as="style" 75 > 76 <link 77 rel="stylesheet" 78 href="https://fonts.googleapis.com/css2?family=DM+Serif+Display&display=swap" 79 > 80 81 <link rel="manifest" href="/manifest.json"> 82 <meta name="theme-color" content="#ff4b6e"> 83 84 85 <style> 86 .home-offer h1 {display: block;font-weight: 500;text-align: center;font-size: 22px;font-family: DM Serif Display;background-color: #E8EDFE;padding-top: 20px;padding-bottom: 20px;}@media (max-width:768px){.home-offer h1 {font-size:18px;padding-top: 10px;padding-bottom: 10px;}@media (max-width:525px) {.home-offer h1 {font-size:14px;padding-top: 6px;padding-bottom: 6px;}} 87 </style> 88 <style> 89 .top-collection-container {overflow: hidden;}.top-collection-header {padding-left: 15px;padding-right: 15px;text-align: center;font-size: 70px;line-height: 90px;color: #060C3B;margin-top: 80px;}.top-collection-header h2 {max-width: 595px;margin-left: auto;margin-right: auto;font-family: DM Serif Display;}.top-collection-grid {display: flex;flex-wrap: wrap;gap: 32px;justify-content: center;margin-top: 60px;width: 100%;margin-right: auto;margin-left: auto;padding-right: 90px;padding-left: 90px;}.top-collection-card {position: relative;background: #f9fafb;overflow:hidden;border-radius:20px;}.top-collection-card img {border-radius: 16px;max-width: 100%;text-indent:-9999px;transition: transform 300ms ease;transform: scale(1);}.top-collection-card:hover img {transform: scale(1.05);transition: all 300ms ease;}.top-collection-card h3 {color: #060C3B;font-size: 30px;font-family: DM Serif Display;transform: translateX(-50%);width: max-content;left: 50%;bottom: 30px;position: absolute;margin: 0;font-weight: inherit;}@media not all and (min-width: 525px) {.top-collection-header {margin-top: 28px;font-size: 20px;line-height: 1.5;}.top-collection-grid {gap: 10px}}@media not all and (min-width: 768px) {.top-collection-header {margin-top: 30px;font-size: 28px;line-height: 3;}.top-collection-header h2 {line-height:2; margin-bottom:20px;} .top-collection-grid {gap: 14px}} @media not all and (min-width: 1024px) {.top-collection-grid {padding-left: 30px;padding-right: 30px;}}@media (max-width: 768px) {.top-collection-grid { row-gap:15px; column-gap:0px;justify-content: space-between;margin-top: 0px;} .top-collection-card{width:48%} .top-collection-card img {width:100%;} .top-collection-card h3 {font-size:24px; bottom: 16px;}}@media (max-width:520px) { .top-collection-grid{padding-left: 15px;padding-right: 15px;} .top-collection-card h3 {font-size:18px; bottom: 10px;}}
89 90 </style> 91 <style> 92 .section-gap{margin-top:80px}.direction-ltr{direction:ltr}.direction-rtl{direction:rtl}.inline-col-wrapper{display:grid;grid-template-columns:auto 1fr;grid-gap:60px;align-items:center}.inline-col-wrapper .inline-col-image-wrapper{overflow:hidden}.inline-col-wrapper .inline-col-image-wrapper img{max-width:100%;height:auto;border-radius:16px;text-indent:-9999px}.inline-col-wrapper .inline-col-content-wrapper{display:flex;flex-wrap:wrap;gap:20px;max-width:464px}.inline-col-wrapper .inline-col-content-wrapper .inline-col-title{max-width:442px;font-size:60px;font-weight:400;color:#060c3b;line-height:70px;font-family:DM Serif Display;margin:0}.inline-col-wrapper .inline-col-content-wrapper .inline-col-description{margin:0;font-size:18px;color:#6e6e6e;font-family:Poppins}@media (max-width:991px){.inline-col-wrapper{grid-template-columns:1fr;grid-gap:16px}.inline-col-wrapper .inline-col-content-wrapper{gap:10px}} @media (max-width:768px){.inline-col-wrapper .inline-col-image-wrapper img {width:100%;} .inline-col-wrapper .inline-col-content-wrapper .inline-col-title{font-size:28px !important;line-height:normal !important}} @media (max-width:525px){.inline-col-wrapper .inline-col-content-wrapper .inline-col-title{font-size:20px !important;} .inline-col-description{font-size:16px} .inline-col-wrapper{grid-gap:10px}} 93 </style> 94 <style> 95 .section-game {overflow: hidden;}.section-title,.section-title h2{font-weight:400;font-family:DM Serif Display}.section-title{margin-top:80px;padding-left:15px;padding-right:15px;text-align:center;line-height:90px}.section-title h2{font-size:70px;color:#060c3b;max-width:595px;margin:auto}.collection-card-wrapper{display:flex;flex-wrap:wrap;justify-content:center;gap:30px}.collection-card-wrapper .single-collection-card{position:relative}.collection-card-wrapper .single-collection-card img{border-radius:16px;background-color:#f5f5f5;max-width:100%;height:auto;text-indent:-9999px}.collection-card-wrapper .single-collection-card .overlay-text{font-size:50px;font-weight:400;max-width:234px;font-style:italic;color:#060c3b;font-family:DM Serif Display;position:absolute;bottom:30px;left:30px;margin:0}@media (max-width:1024px){.section-title{padding:0 30px}}@media (max-width:991px){.collection-card-wrapper{flex-wrap:wrap}}@media (max-width:768px) {.collection-card-wrapper .single-collection-card .overlay-text{font-size:32px; bottom:20px}.section-title{margin-top:32px}.section-title h2{font-size:28px;line-height:normal}} @media (max-width:525px){.collection-card-wrapper .single-collection-card .overlay-text{font-size:18px; bottom:10px} .section-title{margin-top:28px}.section-title h2{font-size:20px;} .collection-card-wrapper{gap:10px; 15px; row-gap:15px; column-gap:0px;justify-content: space-between;margin-top: 15px;} .collection-card-wrapper .single-collection-card {width:48%;}} 96 </style> 97 <style> 98 .section-gap{margin-top:80px}.direction-ltr{direction:ltr}.direction-rtl{direction:rtl}.inline-col-wrapper{display:grid;grid-template-columns:auto 1fr;grid-gap:60px;align-items:center}.inline-col-wrapper .inline-col-image-wrapper{overflow:hidden}.inline-col-wrapper .inline-col-image-wrapper img{max-width:100%;height:auto;border-radius:16px;text-indent:-9999px}.inline-col-wrapper .inline-col-content-wrapper{display:flex;flex-wrap:wrap;gap:20px;max-width:464px}.inline-col-wrapper .inline-col-content-wrapper .inline-col-title{max-width:442px;font-size:60px;font-weight:400;color:#060c3b;line-height:70px;font-family:DM Serif Display;margin:0}.inline-col-wrapper .inline-col-content-wrapper .inline-col-description{margin:0;font-size:18px;color:#6e6e6e;font-family:Poppins}@media (max-width:991px){.inline-col-wrapper{grid-template-columns:1fr;grid-gap:16px}.inline-col-wrapper .inline-col-content-wrapper{gap:10px}}@media (max-width:768px) {.inline-col-wrapper .inline-col-image-wrapper img {max-width:100%;}.inline-col-wrapper .inline-col-content-wrapper{max-width:100%;justify-content:center; text-align:center} .section-gap{padding:0 30px; gap:20px;margin-top:24px} .bold-collections{margin-top:32px;}} @media (max-width:525px){.inline-col-wrapper .inline-col-content-wrapper{gap:10px} .inline-col-wrapper .inline-col-content-wrapper .inline-col-title{font-size:20px;line-height:normal} .section-gap{padding:0 15px; gap:15px;margin-top:10px} .bold-collections{margin-top:28px;} .inline-col-description{font-size:16px !important} .inline-col-wrapper{grid-gap:15px} 99 </style> 100 101 <style> 102 103 </style> 104 105
105<script type="speculationrules"> 106 {"prerender":[{"source":"document","where":{"and":[{"href_matches":"/*"},{"not":{"href_matches":"account"}},{"not":{"href_matches":"checkout"}},{"not":{"href_matches":"onepage"}},{"not":{"href_matches":"cart"}}]},"eagerness":"moderate"}]} </script>
106 107 108 109 110 </head> 111 112 <body> 113 114 115 <a 116 href="#main" 117 class="skip-to-main-content-link" 118 > 119 Skip to main content 120 </a> 121 122 <div id="app"> 123 <!-- Flash Message Blade Component --> 124 <v-flash-group ref='flashes'></v-flash-group> 125 126 127 <!-- Confirm Modal Blade Component --> 128 <v-modal-confirm ref="confirmModal"></v-modal-confirm> 129 130 131 <!-- Page Header Blade Component --> 132 <div class="max-lg:hidden"> 133 <v-topbar> 134 <!-- Shimmer Effect --> 135 <div class="flex items-center justify-between border border-b border-l-0 border-r-0 border-t-0 px-16"> 136 <!-- Currencies --> 137 <div class="flex w-20 items-center justify-between gap-2.5 py-3"> 138 <div 139 class="shimmer h-6 w-12 rounded" 140 role="presentation" 141 > 142 </div> 143 144 <div 145 class="shimmer h-6 w-6 rounded" 146 role="presentation" 147 > 148 </div> 149 </div> 150 151 <!-- Offers --> 152 <div 153 class="shimmer h-6 w-72 rounded py-3" 154 role="presentation" 155 > 156 </div> 157 158 <!-- Locales --> 159 <div class="flex w-32 items-center justify-between gap-2.5 py-3"> 160 <div 161 class="shimmer h-6 w-6" 162 role="presentation" 163 > 164 </div> 165 166 <div 167 class="shimmer h-6 w-14 rounded" 168 role="presentation" 169 > 170 </div> 171 172 <div 173 class="shimmer h-6 w-6" 174 role="presentation" 175 > 176 </div> 177 </div> 178 </div> 179</v-topbar> 180 181 182 183 </div> 184 185<header class="shadow-gray sticky top-0 z-10 bg-white shadow-sm max-lg:shadow-none"> 186 <div class="flex flex-wrap max-lg:hidden"> 187 <div class="flex min-h-[78px] w-full justify-between border border-b border-l-0 border-r-0 border-t-0 px-[60px] max-1180:px-8"> 188 <!-- 189 This section will provide categories for the first, second, and third levels. If 190 additional levels are required, users can customize them according to their needs. 191 --> 192 <!-- Left Nagivation Section --> 193 <div class="flex items-center gap-x-10 max-[1180px]:gap-x-5"> 194 195 196 <a 197 href="https://mismomentosdigitales.com" 198 aria-label="Bagisto" 199 > 200 <img 201 src="https://mismomentosdigitales.com/storage/channel/1/LjkF6X4lat0B4tSpZ51CAs51dDDJOhSQhsWZRTDx.png" 202 width="131" 203 height="29" 204 alt="Mis Momentos Digitales" 205 > 206 </a> 207 208 209 210 211 212 <v-desktop-category> 213 <div class="flex items-center gap-5"> 214 <span 215 class="shimmer h-6 w-20 rounded" 216 role="presentation" 217 ></span> 218 219 <span 220 class="shimmer h-6 w-20 rounded" 221 role="presentation" 222 ></span> 223 224 <span 225 class="shimmer h-6 w-20 rounded" 226 role="presentation" 227 ></span> 228 </div> 229 </v-desktop-category> 230 231 232 </div> 233 234 <!-- Right Nagivation Section --> 235 <div class="flex items-center gap-x-9 max-[1100px]:gap-x-6 max-lg:gap-x-8"> 236 237 238 239 <!-- Search Bar Container --> 240 <div class="relative w-full"> 241 <form 242 action="https://mismomentosdigitales.com/search" 243 class="flex max-w-[445px] items-center" 244 role="search" 245 > 246 <label 247 for="organic-search" 248 class="sr-only" 249 > 250 Buscar </label> 251 252 <div class="icon-search pointer-events-none absolute top-2.5 flex items-center text-xl ltr:left-3 rtl:right-3"></div> 253 254 <input 255 type="text" 256 name="query" 257 value="" 258 class="block w-full rounded-lg border border-transparent bg-zinc-100 px-11 py-3 text-xs font-medium text-gray-900 transition-all hover:border-gray-400 focus:border-gray-400" 259 minlength="0" 260 maxlength="1000" 261 placeholder="Buscar productos aquÃ" 262 aria-label="Buscar productos aquÃ" 263 aria-required="true" 264 pattern="[^\\]+" 265 required 266 > 267 268 <button 269 type="submit" 270 class="hidden" 271 aria-label="Enviar" 272 > 273 </button> 274 275 <v-image-search> 276 <button 277 type="button" 278 class="icon-camera absolute top-3 flex items-center text-xl max-sm:top-2.5 ltr:right-3 ltr:pr-3 max-md:ltr:right-1.5 rtl:left-3 rtl:pl-3 max-md:rtl:left-1.5" 279 aria-label="Buscar" 280 > 281 </button> 282</v-image-search> 283 284 </form> 285 </div> 286 287 288 289 <!-- Right Navigation Links --> 290 <div class="mt-1.5 flex gap-x-8 max-[1100px]:gap-x-6 max-lg:gap-x-8"> 291 292 293 294 <!-- Compare --> 295 <a 296 href="https://mismomentosdigitales.com/compare" 297 aria-label="Comparar" 298 >
299 <span 300 class="icon-compare inline-block cursor-pointer text-2xl" 301 role="presentation" 302 ></span> 303 </a> 304 305 306 307 308 309 <!-- Mini cart --> 310 <!-- Mini Cart Vue Component --> 311<v-mini-cart> 312 <span 313 class="icon-cart cursor-pointer text-2xl" 314 role="button" 315 aria-label="Carrito de Compras" 316 ></span> 317</v-mini-cart> 318 319 320 321 322 323 324 <!-- user profile --> 325 <v-dropdown position="bottom-right" class="relative"> 326 <span 327 class="icon-users inline-block cursor-pointer text-2xl" 328 role="button" 329 aria-label="Perfil" 330 tabindex="0" 331 ></span> 332 333 <template v-slot:toggle> 334 <span 335 class="icon-users inline-block cursor-pointer text-2xl" 336 role="button" 337 aria-label="Perfil" 338 tabindex="0" 339 ></span> 340 </template> 341 342 <template v-slot:content> 343 <div class="p-5"> 344 <div class="grid gap-2.5"> 345 <p class="font-dmserif text-xl"> 346 Bienvenido Invitado </p> 347 348 <p class="text-sm"> 349 Gestionar carrito, pedidos y lista de deseos </p> 350 </div> 351 352 <p class="mt-3 w-full border border-zinc-200"></p> 353 354 355 356 <div class="mt-6 flex gap-4"> 357 358 359 <a 360 href="https://mismomentosdigitales.com/customer/login" 361 class="primary-button m-0 mx-auto block w-max rounded-2xl px-7 text-center text-base max-md:rounded-lg ltr:ml-0 rtl:mr-0" 362 > 363 Iniciar sesión </a> 364 365 <a 366 href="https://mismomentosdigitales.com/customer/register" 367 class="secondary-button m-0 mx-auto block w-max rounded-2xl border-2 px-7 text-center text-base max-md:rounded-lg max-md:py-3 ltr:ml-0 rtl:mr-0" 368 > 369 Registrarse </a> 370 371 372 </div> 373 </div> 374 </template> 375 376 </v-dropdown> 377 378 379 380 </div> 381 </div> 382</div> 383 384 385</div> 386 387 <!-- 388 This code needs to be refactored to reduce the amount of PHP in the Blade 389 template as much as possible. 390--> 391 392<div class="flex flex-wrap gap-4 px-4 pb-4 pt-6 shadow-sm lg:hidden"> 393 <div class="flex w-full items-center justify-between"> 394 <!-- Left Navigation --> 395 <div class="flex items-center gap-x-1.5"> 396 397 398 <!-- Drawer --> 399 <v-mobile-drawer></v-mobile-drawer> 400 401 402 403 404 405 <a 406 href="https://mismomentosdigitales.com" 407 class="max-h-[30px]" 408 aria-label="Bagisto" 409 > 410 <img 411 src="https://mismomentosdigitales.com/storage/channel/1/LjkF6X4lat0B4tSpZ51CAs51dDDJOhSQhsWZRTDx.png" 412 alt="Mis Momentos Digitales" 413 width="131" 414 height="29" 415 > 416 </a> 417 418 419 </div> 420 421 <!-- Right Navigation --> 422 <div> 423 <div class="flex items-center gap-x-5 max-md:gap-x-4"> 424 425 426 <a 427 href="https://mismomentosdigitales.com/compare" 428 aria-label="Comparar" 429 > 430 <span class="icon-compare cursor-pointer text-2xl"></span> 431 </a> 432 433 434 435 436 437 <!-- Mini Cart Vue Component --> 438<v-mini-cart> 439 <span 440 class="icon-cart cursor-pointer text-2xl" 441 role="button" 442 aria-label="Carrito de Compras" 443 ></span> 444</v-mini-cart> 445 446 447 448 449 <!-- For Large screens --> 450 <div class="max-md:hidden"> 451 <v-dropdown position="bottom-right" class="relative">
452 <span class="icon-users cursor-pointer text-2xl"></span> 453 454 <template v-slot:toggle> 455 <span class="icon-users cursor-pointer text-2xl"></span> 456 </template> 457 458 <template v-slot:content> 459 <div class="p-5"> 460 <div class="grid gap-2.5"> 461 <p class="font-dmserif text-xl"> 462 Bienvenido Invitado </p> 463 464 <p class="text-sm"> 465 Gestionar carrito, pedidos y lista de deseos </p> 466 </div> 467 468 <p class="mt-3 w-full border border-zinc-200"></p> 469 470 471 472 <div class="mt-6 flex gap-4"> 473 474 475 <a 476 href="https://mismomentosdigitales.com/customer/login" 477 class="m-0 mx-auto block w-max cursor-pointer rounded-2xl bg-navyBlue px-7 py-4 text-center text-base font-medium text-white ltr:ml-0 rtl:mr-0" 478 > 479 Iniciar sesión </a> 480 481 <a 482 href="https://mismomentosdigitales.com/customer/register" 483 class="m-0 mx-auto block w-max cursor-pointer rounded-2xl border-2 border-navyBlue bg-white px-7 py-3.5 text-center text-base font-medium text-navyBlue ltr:ml-0 rtl:mr-0" 484 > 485 Registrarse </a> 486 487 488 </div> 489 </div> 490 </template> 491 492 </v-dropdown> 493 494 </div> 495 496 <!-- For Medium and small screen --> 497 <div class="md:hidden"> 498 <a 499 href="https://mismomentosdigitales.com/customer/login" 500 aria-label="Cuenta" 501 > 502 <span class="icon-users cursor-pointer text-2xl"></span> 503 </a> 504 505 <!-- Customers Dropdown --> 506 </div> 507 </div> 508 </div> 509 </div> 510 511 512 513 <!-- Serach Catalog Form --> 514 <form action="https://mismomentosdigitales.com/search" class="flex w-full items-center"> 515 <label 516 for="organic-search" 517 class="sr-only" 518 > 519 Buscar </label> 520 521 <div class="relative w-full"> 522 <div class="icon-search pointer-events-none absolute top-3 flex items-center text-2xl max-md:text-xl max-sm:top-2.5 ltr:left-3 rtl:right-3"></div> 523 524 <input 525 type="text" 526 class="block w-full rounded-xl border border-['#E3E3E3'] px-11 py-3.5 text-sm font-medium text-gray-900 max-md:rounded-lg max-md:px-10 max-md:py-3 max-md:font-normal max-sm:text-xs" 527 name="query" 528 value="" 529 placeholder="Buscar productos aquÃ" 530 required 531 > 532 533 <v-image-search> 534 <button 535 type="button" 536 class="icon-camera absolute top-3 flex items-center text-xl max-sm:top-2.5 ltr:right-3 ltr:pr-3 max-md:ltr:right-1.5 rtl:left-3 rtl:pl-3 max-md:rtl:left-1.5" 537 aria-label="Buscar" 538 > 539 </button> 540</v-image-search> 541 542 </div> 543 </form> 544 545 546</div> 547 548</header> 549 550 551 552 553 554 555 <!-- Page Content Blade Component --> 556 <main id="main" class="bg-white"> 557 <!-- Page Title --> 558 559 <!-- Loop over the theme customization --> 560 561 <!-- Static content --> 562 <!-- Image Carousel --> 563 <v-carousel :images="[{"link":"","image":"storage\/theme\/1\/V3D2MAAQUQaSeflrHVyatXZeHKohYyoJbzq0OF8G.webp","title":"NUEVO PAQUETE DE INVITACIONES"},{"link":"","image":"storage\/theme\/1\/mYY6S2yLyhGv0n9BIg6qBeDXNw0IBxZoJTbDsKgc.webp","title":"CUADROS CON BEJUCO"},{"link":"","image":"
563storage\/theme\/1\/O29isP8uH1pEFylSolfjR4nvyjD9xXntZa8eXqcT.webp","title":"TAZAS PERSONALIZADAS"},{"link":"","image":"storage\/theme\/1\/Di44yBwj31ZrL3PbeWF6jogrhvO5PSMZifBFS5CZ.webp","title":"CALENDARIOS PERSONALIZADOS"}]"> 564 <div class="overflow-hidden"> 565 <div class="shimmer aspect-[2.743/1] max-h-screen w-screen"></div> 566 </div> 567</v-carousel> 568 569 570 571 <!-- Static content --> 572 <!-- push style --> 573 574 <!-- render html --> 575 <div class="home-offer"> 576 <h1>¡15% OFF EN TODA LA TIENDA COMPRA AHORA!</h1> 577 578</div> 579 580 581 <!-- Static content --> 582 <!-- Categories carousel --> 583 <v-categories-carousel 584 src="https://mismomentosdigitales.com/api/categories?sort=asc&limit=10&parent_id=1" 585 title="" 586 navigation-link="https://mismomentosdigitales.com" 587> 588 <div class="container mt-14 max-lg:px-8 max-md:mt-7 max-md:!px-0 max-sm:mt-5"> 589 <div class="relative"> 590 <div class="scrollbar-hide flex gap-10 overflow-auto max-lg:gap-4"> 591 <div class="grid min-w-[120px] grid-cols-1 justify-items-center gap-4 max-md:min-w-20 max-md:gap-2.5 max-md:first:ml-4 max-sm:min-w-[60px] max-sm:max-w-[60px] max-sm:gap-1.5"> 592 <div class="shimmer relative h-[110px] w-[110px] overflow-hidden rounded-full max-md:h-20 max-md:w-20 max-sm:h-[60px] max-sm:w-[60px]"> 593 <img class="rounded-sm bg-zinc-100"> 594 </div> 595 596 <p class="shimmer h-[27px] w-[90px] rounded-2xl max-sm:h-5 max-sm:w-[70px]"></p> 597 </div> 598 <div class="grid min-w-[120px] grid-cols-1 justify-items-center gap-4 max-md:min-w-20 max-md:gap-2.5 max-md:first:ml-4 max-sm:min-w-[60px] max-sm:max-w-[60px] max-sm:gap-1.5"> 599 <div class="shimmer relative h-[110px] w-[110px] overflow-hidden rounded-full max-md:h-20 max-md:w-20 max-sm:h-[60px] max-sm:w-[60px]"> 600 <img class="rounded-sm bg-zinc-100"> 601 </div> 602 603 <p class="shimmer h-[27px] w-[90px] rounded-2xl max-sm:h-5 max-sm:w-[70px]"></p> 604 </div> 605 <div class="grid min-w-[120px] grid-cols-1 justify-items-center gap-4 max-md:min-w-20 max-md:gap-2.5 max-md:first:ml-4 max-sm:min-w-[60px] max-sm:max-w-[60px] max-sm:gap-1.5"> 606 <div class="shimmer relative h-[110px] w-[110px] overflow-hidden rounded-full max-md:h-20 max-md:w-20 max-sm:h-[60px] max-sm:w-[60px]"> 607 <img class="rounded-sm bg-zinc-100"> 608 </div> 609 610 <p class="shimmer h-[27px] w-[90px] rounded-2xl max-sm:h-5 max-sm:w-[70px]"></p> 611 </div> 612 <div class="grid min-w-[120px] grid-cols-1 justify-items-center gap-4 max-md:min-w-20 max-md:gap-2.5 max-md:first:ml-4 max-sm:min-w-[60px] max-sm:max-w-[60px] max-sm:gap-1.5"> 613 <div class="shimmer relative h-[110px] w-[110px] overflow-hidden rounded-full max-md:h-20 max-md:w-20 max-sm:h-[60px] max-sm:w-[60px]"> 614 <img class="rounded-sm bg-zinc-100"> 615 </div> 616 617 <p class="shimmer h-[27px] w-[90px] rounded-2xl max-sm:h-5 max-sm:w-[70px]"></p> 618 </div> 619 <div class="grid min-w-[120px] grid-cols-1 justify-items-center gap-4 max-md:min-w-20 max-md:gap-2.5 max-md:first:ml-4 max-sm:min-w-[60px] max-sm:max-w-[60px] max-sm:gap-1.5"> 620 <div class="shimmer relative h-[110px] w-[110px] overflow-hidden rounded-full max-md:h-20 max-md:w-20 max-sm:h-[60px] max-sm:w-[60px]"> 621 <img class="rounded-sm bg-zinc-100"> 622 </div> 623 624 <p class="shimmer h-[27px] w-[90px] rounded-2xl max-sm:h-5 max-sm:w-[70px]"></p> 625 </div> 626 <div class="grid min-w-[120px] grid-cols-1 justify-items-center gap-4 max-md:min-w-20 max-md:gap-2.5 max-md:first:ml-4 max-sm:min-w-[60px] max-sm:max-w-[60px] max-sm:gap-1.5"> 627 <div class="shimmer relative h-[110px] w-[110px] overflow-hidden rounded-full max-md:h-20 max-md:w-20 max-sm:h-[60px] max-sm:w-[60px]"> 628 <img class="rounded-sm bg-zinc-100"> 629 </div> 630 631 <p class="shimmer h-[27px] w-[90px] rounded-2xl max-sm:h-5 max-sm:w-[70px]"></p> 632 </div> 633 <div class="grid min-w-[120px] grid-cols-1 justify-items-center gap-4 max-md:min-w-20 max-md:gap-2.5 max-md:first:ml-4 max-sm:min-w-[60px] max-sm:max-w-[60px] max-sm:gap-1.5"> 634 <div class="shimmer relative h-[110px] w-[110px] overflow-hidden rounded-full max-md:h-20 max-md:w-20 max-sm:h-[60px] max-sm:w-[60px]"> 635 <img class="rounded-sm bg-zinc-100"> 636 </div> 637 638 <p class="shimmer h-[27px] w-[90px] rounded-2xl max-sm:h-5 max-sm:w-[70px]"></p> 639 </div> 640 <div class="grid min-w-[120px] grid-cols-1 justify-items-center gap-4 max-md:min-w-20 max-md:gap-2.5 max-md:first:ml-4 max-sm:min-w-[60px] max-sm:max-w-[60px] max-sm:gap-1.5"> 641 <div class="shimmer relative h-[110px] w-[110px] overflow-hidden rounded-full max-md:h-20 max-md:w-20 max-sm:h-[60px] max-sm:w-[60px]"> 642 <img class="rounded-sm bg-zinc-100"> 643 </div> 644 645 <p class="shimmer h-[27px] w-[90px] rounded-2xl max-sm:h-5 max-sm:w-[70px]"></p> 646 </div> 647 </div> 648
649 <span 650 class="shimmer absolute -left-10 top-9 flex h-[50px] w-[50px] rounded-full max-sm:hidden" 651 role="presentation" 652 ></span> 653 654 <span 655 class="shimmer absolute -right-6 top-9 flex h-[50px] w-[50px] rounded-full max-sm:hidden" 656 role="presentation" 657 ></span> 658 </div> 659</div> 660</v-categories-carousel> 661 662 663 664 <!-- Static content --> 665 <!-- Product Carousel --> 666 <v-products-carousel 667 src="https://mismomentosdigitales.com/api/products?new=1&sort=name-asc&limit=12" 668 title="Nuevos Productos" 669 navigation-link="https://mismomentosdigitales.com/search?new=1&sort=name-asc&limit=12" 670> 671 <div class="container mt-20 max-lg:px-8 max-md:mt-8 max-sm:mt-7 max-sm:!px-4"> 672 <div class="flex items-center justify-between"> 673 <h3 class="shimmer h-8 w-[200px] max-sm:h-7"></h3> 674 675 <div class="flex items-center justify-between gap-8 max-lg:hidden"> 676 <span 677 class="shimmer inline-block h-6 w-6" 678 role="presentation" 679 ></span> 680 681 <span 682 class="shimmer inline-block h-6 w-6 max-sm:hidden" 683 role="presentation" 684 ></span> 685 </div> 686 687 <div class="shimmer h-7 w-24 max-sm:h-5 max-sm:w-[68px] lg:hidden"></div> 688 </div> 689 690 <div class="scrollbar-hide mt-10 flex gap-8 overflow-auto pb-2.5 max-md:mt-5 max-sm:gap-4"> 691 <div class="grid gap-2.5 relative w-full max-w-[291px] max-sm:grid-cols-1 min-w-[291px] max-md:h-fit max-md:min-w-56 max-sm:min-w-[192px]"> 692 <div class="shimmer relative w-full rounded max-sm:!rounded-lg"> 693 <div class="after:content-[' '] relative after:block after:pb-[calc(100%+9px)]"></div> 694 </div> 695 696 <div class="grid content-start gap-2.5 max-sm:gap-1"> 697 <p class="shimmer h-4 w-3/4"></p> 698 <p class="shimmer h-4 w-[55%]"></p> 699 700 <!-- Needs to implement that in future --> 701 <div class="mt-3 flex hidden gap-4"> 702 <span class="shimmer block h-[30px] w-[30px] rounded-full"></span> 703 <span class="shimmer block h-[30px] w-[30px] rounded-full"></span> 704 </div> 705 </div> 706 </div> 707 <div class="grid gap-2.5 relative w-full max-w-[291px] max-sm:grid-cols-1 min-w-[291px] max-md:h-fit max-md:min-w-56 max-sm:min-w-[192px]"> 708 <div class="shimmer relative w-full rounded max-sm:!rounded-lg"> 709 <div class="after:content-[' '] relative after:block after:pb-[calc(100%+9px)]"></div> 710 </div> 711 712 <div class="grid content-start gap-2.5 max-sm:gap-1"> 713 <p class="shimmer h-4 w-3/4"></p> 714 <p class="shimmer h-4 w-[55%]"></p> 715 716 <!-- Needs to implement that in future --> 717 <div class="mt-3 flex hidden gap-4"> 718 <span class="shimmer block h-[30px] w-[30px] rounded-full"></span> 719 <span class="shimmer block h-[30px] w-[30px] rounded-full"></span> 720 </div> 721 </div> 722 </div> 723 <div class="grid gap-2.5 relative w-full max-w-[291px] max-sm:grid-cols-1 min-w-[291px] max-md:h-fit max-md:min-w-56 max-sm:min-w-[192px]"> 724 <div class="shimmer relative w-full rounded max-sm:!rounded-lg"> 725 <div class="after:content-[' '] relative after:block after:pb-[calc(100%+9px)]"></div> 726 </div> 727 728 <div class="grid content-start gap-2.5 max-sm:gap-1"> 729 <p class="shimmer h-4 w-3/4"></p> 730 <p class="shimmer h-4 w-[55%]"></p> 731 732 <!-- Needs to implement that in future --> 733 <div class="mt-3 flex hidden gap-4"> 734 <span class="shimmer block h-[30px] w-[30px] rounded-full"></span> 735 <span class="shimmer block h-[30px] w-[30px] rounded-full"></span> 736 </div> 737 </div> 738 </div> 739 <div class="grid gap-2.5 relative w-full max-w-[291px] max-sm:grid-cols-1 min-w-[291px] max-md:h-fit max-md:min-w-56 max-sm:min-w-[192px]"> 740 <div class="shimmer relative w-full rounded max-sm:!rounded-lg"> 741 <div class="after:content-[' '] relative after:block after:pb-[calc(100%+9px)]"></div> 742 </div> 743 744 <div class="grid content-start gap-2.5 max-sm:gap-1"> 745 <p class="shimmer h-4 w-3/4"></p>
746 <p class="shimmer h-4 w-[55%]"></p> 747 748 <!-- Needs to implement that in future --> 749 <div class="mt-3 flex hidden gap-4"> 750 <span class="shimmer block h-[30px] w-[30px] rounded-full"></span> 751 <span class="shimmer block h-[30px] w-[30px] rounded-full"></span> 752 </div> 753 </div> 754 </div> 755 </div> 756 757 <a 758 class="shimmer mx-auto mt-16 block h-12 w-[150.172px] rounded-2xl max-md:hidden" 759 role="button" 760 aria-label="Show more products" 761 ></a> 762 </div> 763</v-products-carousel> 764 765 766 767 <!-- Static content --> 768 <!-- push style --> 769 770 <!-- render html --> 771 <div class="top-collection-container"> 772 <div class="top-collection-header"> 773 <h2>¡Descubre toda nuestra colección!</h2> 774 775 </div> 776 <div class="top-collection-grid container"> 777 <div class="top-collection-card"> 778 <img src="" data-src="https://mismomentosdigitales.com/storage/theme/5/Bjuv8RNaAhH6uMrB2Bp9qZVOjs49selIRLuBi3uv.webp" class="lazy" width="396" height="396" alt="Collection1"> 779 <h3>Invitaciones</h3> 780 </div> 781 <div class="top-collection-card"> 782 <img src="" data-src="https://mismomentosdigitales.com/storage/theme/5/nlqgmBSF4GQctBsGJYvHekS3DW5LQILEVvP38fk2.webp" class="lazy" width="396" height="396" alt="Collection2"> 783 <h3>Decoración natural</h3> 784 </div> 785 <div class="top-collection-card"> 786 <img src="" data-src="https://mismomentosdigitales.com/storage/theme/5/eaJCYlBQ0TQ0XkBY9LmgtXRj6bpfwsfCAwFzqzYt.webp" class="lazy" width="396" height="396" alt="Collection3"> 787 <h3>Regalos personalizados</h3> 788 </div> 789 <div class="top-collection-card"> 790 <img src="" data-src="https://mismomentosdigitales.com/storage/theme/5/FkQIuOxDoLQgKPSPABdeAcmKpSFA3rrOSTn5KC5e.webp" class="lazy" width="396" height="396" alt="Collection4"> 791 <h3>Artesania</h3> 792 </div> 793 <div class="top-collection-card"> 794 <img src="" data-src="https://mismomentosdigitales.com/storage/theme/5/hnCXmUBKZpDPiRpxfejIl5LYMLfOX6hqfD7oAO5Q.webp" class="lazy" width="396" height="396" alt="Collection5"> 795 <h3>Tarjetas</h3> 796 </div> 797 <div class="top-collection-card"> 798 <img src="" data-src="https://mismomentosdigitales.com/storage/theme/5/zAfIPT2N020Kgg0ntbKhmLaSEpjYbo4yLmCBo3HN.webp" class="lazy" width="396" height="396" alt="Collection6"> 799 <h3>Calendarios</h3> 800 </div> 801 </div> 802</div> 803 804 805 <!-- Static content --> 806 <!-- push style --> 807 808 <!-- render html --> 809 <div class="section-gap bold-collections container"> 810 <div class="inline-col-wrapper"> 811 <div class="inline-col-image-wrapper"> 812 <img src="" data-src="https://mismomentosdigitales.com/storage/theme/6/XfX7cXcj7vtJfZFXLadhEEXOfFr1k9Ljq2eqJhhw.webp" class="lazy" width="632" height="510" alt="¡Invitaciones digitales, CVs, menús, etc!"> 813 </div> 814 <div class="inline-col-content-wrapper"> 815 <h2 class="inline-col-title"> ¡Lo nuevo esta iniciando! </h2> 816 <p class="inline-col-description">¡Porque lo digital nunca acaba y lo fÃsico es un recuerdo!</p> <a href="https://mismomentosdigitales.com/i/demo" target="_blank"><button class="primary-button max-md:rounded-lg max-md:px-4 max-md:py-2.5 max-md:text-sm">Ver Demo</button></a> 817 818 </div> 819 </div> 820</div> 821 822 823 <!-- Static content --> 824 <!-- Product Carousel --> 825 <v-products-carousel 826 src="https://mismomentosdigitales.com/api/products?sort=name-desc&limit=12&featured=1" 827 title="Productos Destacados" 828 navigation-link="https://mismomentosdigitales.com/search?sort=name-desc&limit=12&featured=1" 829> 830 <div class="container mt-20 max-lg:px-8 max-md:mt-8 max-sm:mt-7 max-sm:!px-4"> 831 <div class="flex items-center justify-between"> 832 <h3 class="shimmer h-8 w-[200px] max-sm:h-7"></h3> 833 834 <div class="flex items-center justify-between gap-8 max-lg:hidden">
835 <span 836 class="shimmer inline-block h-6 w-6" 837 role="presentation" 838 ></span> 839 840 <span 841 class="shimmer inline-block h-6 w-6 max-sm:hidden" 842 role="presentation" 843 ></span> 844 </div> 845 846 <div class="shimmer h-7 w-24 max-sm:h-5 max-sm:w-[68px] lg:hidden"></div> 847 </div> 848 849 <div class="scrollbar-hide mt-10 flex gap-8 overflow-auto pb-2.5 max-md:mt-5 max-sm:gap-4"> 850 <div class="grid gap-2.5 relative w-full max-w-[291px] max-sm:grid-cols-1 min-w-[291px] max-md:h-fit max-md:min-w-56 max-sm:min-w-[192px]"> 851 <div class="shimmer relative w-full rounded max-sm:!rounded-lg"> 852 <div class="after:content-[' '] relative after:block after:pb-[calc(100%+9px)]"></div> 853 </div> 854 855 <div class="grid content-start gap-2.5 max-sm:gap-1"> 856 <p class="shimmer h-4 w-3/4"></p> 857 <p class="shimmer h-4 w-[55%]"></p> 858 859 <!-- Needs to implement that in future --> 860 <div class="mt-3 flex hidden gap-4"> 861 <span class="shimmer block h-[30px] w-[30px] rounded-full"></span> 862 <span class="shimmer block h-[30px] w-[30px] rounded-full"></span> 863 </div> 864 </div> 865 </div> 866 <div class="grid gap-2.5 relative w-full max-w-[291px] max-sm:grid-cols-1 min-w-[291px] max-md:h-fit max-md:min-w-56 max-sm:min-w-[192px]"> 867 <div class="shimmer relative w-full rounded max-sm:!rounded-lg"> 868 <div class="after:content-[' '] relative after:block after:pb-[calc(100%+9px)]"></div> 869 </div> 870 871 <div class="grid content-start gap-2.5 max-sm:gap-1"> 872 <p class="shimmer h-4 w-3/4"></p> 873 <p class="shimmer h-4 w-[55%]"></p> 874 875 <!-- Needs to implement that in future --> 876 <div class="mt-3 flex hidden gap-4"> 877 <span class="shimmer block h-[30px] w-[30px] rounded-full"></span> 878 <span class="shimmer block h-[30px] w-[30px] rounded-full"></span> 879 </div> 880 </div> 881 </div> 882 <div class="grid gap-2.5 relative w-full max-w-[291px] max-sm:grid-cols-1 min-w-[291px] max-md:h-fit max-md:min-w-56 max-sm:min-w-[192px]"> 883 <div class="shimmer relative w-full rounded max-sm:!rounded-lg"> 884 <div class="after:content-[' '] relative after:block after:pb-[calc(100%+9px)]"></div> 885 </div> 886 887 <div class="grid content-start gap-2.5 max-sm:gap-1"> 888 <p class="shimmer h-4 w-3/4"></p> 889 <p class="shimmer h-4 w-[55%]"></p> 890 891 <!-- Needs to implement that in future --> 892 <div class="mt-3 flex hidden gap-4"> 893 <span class="shimmer block h-[30px] w-[30px] rounded-full"></span> 894 <span class="shimmer block h-[30px] w-[30px] rounded-full"></span> 895 </div> 896 </div> 897 </div> 898 <div class="grid gap-2.5 relative w-full max-w-[291px] max-sm:grid-cols-1 min-w-[291px] max-md:h-fit max-md:min-w-56 max-sm:min-w-[192px]"> 899 <div class="shimmer relative w-full rounded max-sm:!rounded-lg"> 900 <div class="after:content-[' '] relative after:block after:pb-[calc(100%+9px)]"></div> 901 </div> 902 903 <div class="grid content-start gap-2.5 max-sm:gap-1"> 904 <p class="shimmer h-4 w-3/4"></p> 905 <p class="shimmer h-4 w-[55%]"></p> 906 907 <!-- Needs to implement that in future --> 908 <div class="mt-3 flex hidden gap-4"> 909 <span class="shimmer block h-[30px] w-[30px] rounded-full"></span> 910 <span class="shimmer block h-[30px] w-[30px] rounded-full"></span> 911 </div> 912 </div> 913 </div> 914 </div> 915 916 <a 917 class="shimmer mx-auto mt-16 block h-12 w-[150.172px] rounded-2xl max-md:hidden" 918 role="button" 919 aria-label="Show more products" 920 ></a> 921 </div> 922</v-products-carousel> 923 924 925 926 <!-- Static content --> 927 <!-- push style --> 928 929 <!-- render html --> 930 <div class="section-game"> 931 <div class="section-title"> 932 <h2>¡Recordar es volver a vivir!</h2> 933 </div> 934 <div class="section-gap container"> 935 <div class="collection-card-wrapper"> 936 <div class="single-collection-card"> 937 <img src="" data-src="https://mismomentosdigitales.com/storage/theme/8/z4cfCkq5mKHoPEraH4b1Y15mgrcSYL4dmnO1uMnN.webp" class="lazy" width="615" height="600" alt="Artesania1"> 938 <h3 class="overlay-text">Nuestras Colecciones</h3> 939 </div> 940 <div class="single-collection-card"> 941 <img src="" data-src="https://mismomentosdigitales.com/storage/theme/8/jKvSCituRgOLgx3TOc1eQXbMXDhJHYXBBXQ0o3iX.webp" class="lazy" width="615" height="600" alt="Artesania2"> 942 <h3 class="overlay-text"> Nuestras Colecciones </h3> 943 </div> 944 </div> 945 </div> 946</div> 947 948 949 <!-- Static content --> 950 <!-- Product Carousel --> 951 <v-products-carousel 952 src="https://mismomentosdigitales.com/api/products?sort=name-desc&limit=12" 953 title="Todos los Productos" 954 navigation-link="https://mismomentosdigitales.com/search?sort=name-desc&limit=12" 955> 956 <div class="container mt-20 max-lg:px-8 max-md:mt-8 max-sm:mt-7 max-sm:!px-4"> 957 <div class="flex items-center justify-between"> 958 <h3 class="shimmer h-8 w-[200px] max-sm:h-7"></h3> 959 960 <div class="flex items-center justify-between gap-8 max-lg:hidden">
961 <span 962 class="shimmer inline-block h-6 w-6" 963 role="presentation" 964 ></span> 965 966 <span 967 class="shimmer inline-block h-6 w-6 max-sm:hidden" 968 role="presentation" 969 ></span> 970 </div> 971 972 <div class="shimmer h-7 w-24 max-sm:h-5 max-sm:w-[68px] lg:hidden"></div> 973 </div> 974 975 <div class="scrollbar-hide mt-10 flex gap-8 overflow-auto pb-2.5 max-md:mt-5 max-sm:gap-4"> 976 <div class="grid gap-2.5 relative w-full max-w-[291px] max-sm:grid-cols-1 min-w-[291px] max-md:h-fit max-md:min-w-56 max-sm:min-w-[192px]"> 977 <div class="shimmer relative w-full rounded max-sm:!rounded-lg"> 978 <div class="after:content-[' '] relative after:block after:pb-[calc(100%+9px)]"></div> 979 </div> 980 981 <div class="grid content-start gap-2.5 max-sm:gap-1"> 982 <p class="shimmer h-4 w-3/4"></p> 983 <p class="shimmer h-4 w-[55%]"></p> 984 985 <!-- Needs to implement that in future --> 986 <div class="mt-3 flex hidden gap-4"> 987 <span class="shimmer block h-[30px] w-[30px] rounded-full"></span> 988 <span class="shimmer block h-[30px] w-[30px] rounded-full"></span> 989 </div> 990 </div> 991 </div> 992 <div class="grid gap-2.5 relative w-full max-w-[291px] max-sm:grid-cols-1 min-w-[291px] max-md:h-fit max-md:min-w-56 max-sm:min-w-[192px]"> 993 <div class="shimmer relative w-full rounded max-sm:!rounded-lg"> 994 <div class="after:content-[' '] relative after:block after:pb-[calc(100%+9px)]"></div> 995 </div> 996 997 <div class="grid content-start gap-2.5 max-sm:gap-1"> 998 <p class="shimmer h-4 w-3/4"></p> 999 <p class="shimmer h-4 w-[55%]"></p> 1000 1001 <!-- Needs to implement that in future --> 1002 <div class="mt-3 flex hidden gap-4"> 1003 <span class="shimmer block h-[30px] w-[30px] rounded-full"></span> 1004 <span class="shimmer block h-[30px] w-[30px] rounded-full"></span> 1005 </div> 1006 </div> 1007 </div> 1008 <div class="grid gap-2.5 relative w-full max-w-[291px] max-sm:grid-cols-1 min-w-[291px] max-md:h-fit max-md:min-w-56 max-sm:min-w-[192px]"> 1009 <div class="shimmer relative w-full rounded max-sm:!rounded-lg"> 1010 <div class="after:content-[' '] relative after:block after:pb-[calc(100%+9px)]"></div> 1011 </div> 1012 1013 <div class="grid content-start gap-2.5 max-sm:gap-1"> 1014 <p class="shimmer h-4 w-3/4"></p> 1015 <p class="shimmer h-4 w-[55%]"></p> 1016 1017 <!-- Needs to implement that in future --> 1018 <div class="mt-3 flex hidden gap-4"> 1019 <span class="shimmer block h-[30px] w-[30px] rounded-full"></span> 1020 <span class="shimmer block h-[30px] w-[30px] rounded-full"></span> 1021 </div> 1022 </div> 1023 </div> 1024 <div class="grid gap-2.5 relative w-full max-w-[291px] max-sm:grid-cols-1 min-w-[291px] max-md:h-fit max-md:min-w-56 max-sm:min-w-[192px]"> 1025 <div class="shimmer relative w-full rounded max-sm:!rounded-lg"> 1026 <div class="after:content-[' '] relative after:block after:pb-[calc(100%+9px)]"></div> 1027 </div> 1028 1029 <div class="grid content-start gap-2.5 max-sm:gap-1"> 1030 <p class="shimmer h-4 w-3/4"></p> 1031 <p class="shimmer h-4 w-[55%]"></p> 1032 1033 <!-- Needs to implement that in future --> 1034 <div class="mt-3 flex hidden gap-4"> 1035 <span class="shimmer block h-[30px] w-[30px] rounded-full"></span> 1036 <span class="shimmer block h-[30px] w-[30px] rounded-full"></span> 1037 </div> 1038 </div> 1039 </div> 1040 </div> 1041 1042 <a 1043 class="shimmer mx-auto mt-16 block h-12 w-[150.172px] rounded-2xl max-md:hidden" 1044 role="button" 1045 aria-label="Show more products" 1046 ></a> 1047 </div> 1048</v-products-carousel> 1049 1050 1051 1052 <!-- Static content --> 1053 <!-- push style --> 1054 1055 <!-- render html --> 1056 <div class="section-gap bold-collections container"> 1057 <div class="inline-col-wrapper direction-rtl"> 1058 <div class="inline-col-image-wrapper"> 1059 <img src="" data-src="https://mismomentosdigitales.com/storage/theme/10/K7fybOdN2OoqSS15HoxGLlY5WxjhWYZ6GKDkB370.webp" class="lazy" width="632" height="510" alt="¡Prepárate para nuestras nuevas Colecciones Audaces!"> 1060 </div> 1061 <div class="inline-col-content-wrapper direction-ltr"> 1062 <h2 class="inline-col-title"> ¡Deslumbrate con nuestras obras maestras! </h2> 1063 <p class="inline-col-description">¡Articulos hechos en bejuco con los mejores artesanos Mexicanos, porque buen regalo siempre es un momento para recordar!</p> 1064 <a href="https://mismomentosdigitales.com/search?sort=name-desc"><button class="primary-button max-md:rounded-lg max-md:px-4 max-md:py-2.5 max-md:text-sm">Ver Articulos</button><a/> 1065 </div> 1066 </div> 1067</div> 1068 1069 1070 <!-- Static content --> 1071 1072 <!-- Static content --> 1073 </main> 1074 1075 1076 1077 1078 <!-- Page Services Blade Component --> 1079 <!-- 1080 The ThemeCustomizationRepository repository is injected directly here because there is no way 1081 to retrieve it from the view composer, as this is an anonymous component. 1082--> 1083 1084 1085<!-- Features --> 1086 <div class="container mt-20 max-lg:px-8 max-md:mt-10 max-md:px-4"> 1087 <div class="max-md:max-y-6 flex justify-center gap-6 max-lg:flex-wrap max-md:grid max-md:grid-cols-2 max-md:gap-x-2.5 max-md:text-center"> 1088 <div class="flex items-center gap-5 bg-white max-md:grid max-md:gap-2.5 max-sm:gap-1 max-sm:px-2">
1089 <span 1090 class="icon-truck flex items-center justify-center w-[60px] h-[60px] bg-white border border-black rounded-full text-4xl text-navyBlue p-2.5 max-md:m-auto max-md:w-16 max-md:h-16 max-sm:w-10 max-sm:h-10 max-sm:text-2xl" 1091 role="presentation" 1092 ></span> 1093 1094 <div class="max-lg:grid max-lg:justify-center"> 1095 <!-- Service Title --> 1096 <p class="font-dmserif text-base font-medium max-md:text-xl max-sm:text-sm">EnvÃo gratuito</p> 1097 1098 <!-- Service Description --> 1099 <p class="mt-2.5 max-w-[217px] text-sm font-medium text-zinc-500 max-md:mt-0 max-md:text-base max-sm:text-xs"> 1100 EnvÃo gratuito en todos los pedidos 1101 </p> 1102 </div> 1103 </div> 1104 <div class="flex items-center gap-5 bg-white max-md:grid max-md:gap-2.5 max-sm:gap-1 max-sm:px-2"> 1105 <span 1106 class="icon-product flex items-center justify-center w-[60px] h-[60px] bg-white border border-black rounded-full text-4xl text-navyBlue p-2.5 max-md:m-auto max-md:w-16 max-md:h-16 max-sm:w-10 max-sm:h-10 max-sm:text-2xl" 1107 role="presentation" 1108 ></span> 1109 1110 <div class="max-lg:grid max-lg:justify-center"> 1111 <!-- Service Title --> 1112 <p class="font-dmserif text-base font-medium max-md:text-xl max-sm:text-sm">Reemplazo de producto</p> 1113 1114 <!-- Service Description --> 1115 <p class="mt-2.5 max-w-[217px] text-sm font-medium text-zinc-500 max-md:mt-0 max-md:text-base max-sm:text-xs"> 1116 ¡Reemplazo de producto sencillo disponible! 1117 </p> 1118 </div> 1119 </div> 1120 <div class="flex items-center gap-5 bg-white max-md:grid max-md:gap-2.5 max-sm:gap-1 max-sm:px-2"> 1121 <span 1122 class="icon-dollar-sign flex items-center justify-center w-[60px] h-[60px] bg-white border border-black rounded-full text-4xl text-navyBlue p-2.5 max-md:m-auto max-md:w-16 max-md:h-16 max-sm:w-10 max-sm:h-10 max-sm:text-2xl" 1123 role="presentation" 1124 ></span> 1125 1126 <div class="max-lg:grid max-lg:justify-center"> 1127 <!-- Service Title --> 1128 <p class="font-dmserif text-base font-medium max-md:text-xl max-sm:text-sm">EMI disponible</p> 1129 1130 <!-- Service Description --> 1131 <p class="mt-2.5 max-w-[217px] text-sm font-medium text-zinc-500 max-md:mt-0 max-md:text-base max-sm:text-xs"> 1132 EMI sin costo disponible en todas las tarjetas de crédito comunes 1133 </p> 1134 </div> 1135 </div> 1136 <div class="flex items-center gap-5 bg-white max-md:grid max-md:gap-2.5 max-sm:gap-1 max-sm:px-2"> 1137 <span 1138 class="icon-support flex items-center justify-center w-[60px] h-[60px] bg-white border border-black rounded-full text-4xl text-navyBlue p-2.5 max-md:m-auto max-md:w-16 max-md:h-16 max-sm:w-10 max-sm:h-10 max-sm:text-2xl" 1139 role="presentation" 1140 ></span> 1141 1142 <div class="max-lg:grid max-lg:justify-center"> 1143 <!-- Service Title --> 1144 <p class="font-dmserif text-base font-medium max-md:text-xl max-sm:text-sm">Soporte 24/7</p> 1145 1146 <!-- Service Description --> 1147 <p class="mt-2.5 max-w-[217px] text-sm font-medium text-zinc-500 max-md:mt-0 max-md:text-base max-sm:text-xs"> 1148 Soporte dedicado 24/7 por chat y correo electrónico 1149 </p> 1150 </div> 1151 </div> 1152 </div> 1153 </div> 1154 1155 1156 <!-- Page Footer Blade Component --> 1157 <!-- 1158 The category repository is injected directly here because there is no way 1159 to retrieve it from the view composer, as this is an anonymous component. 1160--> 1161 1162<!-- 1163 This code needs to be refactored to reduce the amount of PHP in the Blade 1164 template as much as possible. 1165--> 1166 1167<footer class="mt-9 bg-lightOrange max-sm:mt-10"> 1168 <div class="flex justify-between gap-x-6 gap-y-8 p-[60px] max-1060:flex-col-reverse max-md:gap-5 max-md:p-8 max-sm:px-4 max-sm:py-5"> 1169 <!-- For Desktop View --> 1170 <div class="flex flex-wrap items-start gap-24 max-1180:gap-6 max-1060:hidden"> 1171 <ul class="grid gap-5 text-sm"> 1172 1173 <li> 1174 <a href="https://mismomentosdigitales.com/page/about-us"> 1175 Acerca de Nosotros 1176 </a> 1177 </li> 1178 <li> 1179 <a href="https://mismomentosdigitales.com/contact-us"> 1180 Contáctenos 1181 </a> 1182 </li> 1183 <li> 1184 <a href="https://mismomentosdigitales.com/page/customer-service"> 1185 Servicio al Cliente 1186 </a> 1187 </li> 1188 <li> 1189 <a href="https://mismomentosdigitales.com/page/whats-new"> 1190 Novedades 1191 </a> 1192 </li> 1193 <li> 1194 <a href="https://mismomentosdigitales.com/page/terms-of-use"> 1195 Términos de Uso 1196 </a> 1197 </li> 1198 <li> 1199 <a href="https://mismomentosdigitales.com/page/terms-conditions"> 1200 Términos y Condiciones 1201 </a> 1202 </li> 1203 </ul> 1204 <ul class="grid gap-5 text-sm"> 1205 1206 <li> 1207 <a href="https://mismomentosdigitales.com/page/privacy-policy"> 1208 PolÃtica de Privacidad 1209 </a> 1210 </li> 1211 <li> 1212 <a href="https://mismomentosdigitales.com/page/payment-policy"> 1213 PolÃtica de Pago 1214 </a> 1215 </li> 1216 <li> 1217 <a href="https://mismomentosdigitales.com/page/shipping-policy"> 1218 PolÃtica de EnvÃo 1219 </a> 1220 </li> 1221 <li> 1222 <a href="https://mismomentosdigitales.com/page/refund-policy"> 1223 PolÃtica de Devolución 1224 </a> 1225 </li> 1226 <li> 1227 <a href="https://mismomentosdigitales.com/page/faq"> 1228 Preguntas Frecuentes/FAQ 1229 </a> 1230 </li> 1231 </ul> 1232 </div> 1233 1234 <!-- For Mobile view --> 1235 <div class="border-b border-zinc-200 hidden !w-full rounded-xl !border-2 !border-[#e9decc] max-1060:block max-sm:rounded-lg"> 1236 <v-accordion 1237 1238 is-active="" 1239 > 1240 <template v-slot:header="{ toggle, isOpen }"> 1241 <div 1242 class="flex cursor-pointer select-none items-center justify-between p-4 rounded-t-lg bg-[#F1EADF] font-medium max-md:p-2.5 max-sm:px-3 max-sm:py-2 max-sm:text-sm" 1243 role="button" 1244 tabindex="0" 1245 @click="toggle" 1246 > 1247 Contenido del pie de página 1248
1249 <span 1250 v-bind:class="isOpen ? 'icon-arrow-up text-2xl' : 'icon-arrow-down text-2xl'" 1251 role="button" 1252 aria-label="Toggle accordion" 1253 tabindex="0" 1254 ></span> 1255 </div> 1256 </template> 1257 1258 <template v-slot:content="{ isOpen }"> 1259 <div 1260 class="z-10 rounded-lg bg-white p-1.5 flex justify-between !bg-transparent !p-4" 1261 v-show="isOpen" 1262 > 1263 <ul class="grid gap-5 text-sm"> 1264 1265 <li> 1266 <a 1267 href="https://mismomentosdigitales.com/page/about-us" 1268 class="text-sm font-medium max-sm:text-xs"> 1269 Acerca de Nosotros 1270 </a> 1271 </li> 1272 <li> 1273 <a 1274 href="https://mismomentosdigitales.com/contact-us" 1275 class="text-sm font-medium max-sm:text-xs"> 1276 Contáctenos 1277 </a> 1278 </li> 1279 <li> 1280 <a 1281 href="https://mismomentosdigitales.com/page/customer-service" 1282 class="text-sm font-medium max-sm:text-xs"> 1283 Servicio al Cliente 1284 </a> 1285 </li> 1286 <li> 1287 <a 1288 href="https://mismomentosdigitales.com/page/whats-new" 1289 class="text-sm font-medium max-sm:text-xs"> 1290 Novedades 1291 </a> 1292 </li> 1293 <li> 1294 <a 1295 href="https://mismomentosdigitales.com/page/terms-of-use" 1296 class="text-sm font-medium max-sm:text-xs"> 1297 Términos de Uso 1298 </a> 1299 </li> 1300 <li> 1301 <a 1302 href="https://mismomentosdigitales.com/page/terms-conditions" 1303 class="text-sm font-medium max-sm:text-xs"> 1304 Términos y Condiciones 1305 </a> 1306 </li> 1307 </ul> 1308 <ul class="grid gap-5 text-sm"> 1309 1310 <li> 1311 <a 1312 href="https://mismomentosdigitales.com/page/privacy-policy" 1313 class="text-sm font-medium max-sm:text-xs"> 1314 PolÃtica de Privacidad 1315 </a> 1316 </li> 1317 <li> 1318 <a 1319 href="https://mismomentosdigitales.com/page/payment-policy" 1320 class="text-sm font-medium max-sm:text-xs"> 1321 PolÃtica de Pago 1322 </a> 1323 </li> 1324 <li> 1325 <a 1326 href="https://mismomentosdigitales.com/page/shipping-policy" 1327 class="text-sm font-medium max-sm:text-xs"> 1328 PolÃtica de EnvÃo 1329 </a> 1330 </li> 1331 <li> 1332 <a 1333 href="https://mismomentosdigitales.com/page/refund-policy" 1334 class="text-sm font-medium max-sm:text-xs"> 1335 PolÃtica de Devolución 1336 </a> 1337 </li> 1338 <li> 1339 <a 1340 href="https://mismomentosdigitales.com/page/faq" 1341 class="text-sm font-medium max-sm:text-xs"> 1342 Preguntas Frecuentes/FAQ 1343 </a> 1344 </li> 1345 </ul> 1346 </div> 1347 </template> 1348 </v-accordion> 1349</div> 1350 1351 1352 1353 1354 <!-- News Letter subscription --> 1355 <div class="grid gap-2.5"> 1356 <p 1357 class="max-w-[288px] text-3xl italic leading-[45px] text-navyBlue max-md:text-2xl max-sm:text-lg" 1358 role="heading" 1359 aria-level="2" 1360 > 1361 ¡Prepárate para nuestro divertido boletÃn! </p> 1362 1363 <p class="text-xs"> 1364 SuscrÃbete para mantenerte en contacto. </p> 1365 1366 <div> 1367 <!-- 1368 If a component has the `as` attribute, it indicates that it uses 1369 the ajaxified form or some customized slot form. 1370--> 1371 1372 1373 <v-form 1374 method="POST" 1375 :initial-errors="[]" 1376 v-slot="{ meta, errors }" 1377 action="https://mismomentosdigitales.com/subscription" class="mt-2.5 rounded max-sm:mt-0" 1378 > 1379 <input type="hidden" name="_token" value="myFWjhkxLJgRg3LHfS0es4cknnBSYfCDf39lykdf" autocomplete="off"> 1380 1381 <div class="relative w-full"> 1382 <v-field 1383 v-slot="{ field, errors }" 1384 rules="required|email" label="Email" 1385 name="email" 1386 > 1387 <input 1388 type="email" 1389 name="email" 1390 v-bind="field" 1391 :class="[errors.length ? 'border !border-red-500 hover:border-red-500' : '']" 1392 class="mb-1.5 w-full rounded-lg border px-5 py-3 text-base font-normal text-gray-600 transition-all hover:border-gray-400 focus:border-gray-400 max-sm:px-4 max-md:py-2 max-sm:text-sm block w-[420px] max-w-full rounded-xl border-2 border-[#e9decc] bg-[#F1EADF] px-5 py-4 text-base max-1060:w-full max-md:p-3.5 max-sm:mb-0 max-sm:rounded-lg max-sm:border-2 max-sm:p-2 max-sm:text-sm" aria-label="Correo Electrónico" placeholder="[email protected]" 1393 > 1394 </v-field> 1395 1396 <v-error-message 1397 1398 name="email" 1399 v-slot="{ message }" 1400> 1401 <p 1402 class="text-red-500 text-xs italic" 1403 v-text="message" 1404 > 1405 </p> 1406</v-error-message> 1407 1408 <button 1409 type="submit" 1410 class="absolute top-1.5 flex w-max items-center rounded-xl bg-white px-7 py-2.5 font-medium hover:bg-zinc-100 max-md:top-1 max-md:px-5 max-md:text-xs max-sm:mt-0 max-sm:rounded-lg max-sm:px-4 max-sm:py-2 ltr:right-2 rtl:left-2" 1411 > 1412 Suscribirse </button> 1413 </div> 1414 </v-form> 1415 </div> 1416 </div> 1417 1418 1419 </div> 1420 1421 <div class="flex justify-between bg-[#F1EADF] px-[60px] py-3.5 max-md:justify-center max-sm:px-5"> 1422 1423 1424 <p class="text-sm text-zinc-600 max-md:text-center"> 1425 © 2026 Mis Momentos Digitales. Todos los derechos reservados. </p> 1426 1427 1428 </div> 1429</footer> 1430 1431 1432 </div> 1433 1434 <style> 1435 .path-hint { 1436 border: solid 1px transparent; 1437 padding: 1px; 1438 } 1439 1440 .path-hint:hover { 1441 border: 1px solid red; 1442 } 1443 1444 .path-hint-tooltip { 1445 padding: 0px 10px; 1446 position: absolute; 1447 background: #000000; 1448 z-index: 10000; 1449 color: #fff; 1450 font-size: 10px; 1451 } 1452 1453 .path-hint-tooltip h4 { 1454 margin-top: 5px; 1455 margin-bottom: 3px; 1456 color: #fff; 1457 font-size: 12px; 1458 } 1459 1460 .path-hint-tooltip ul li { 1461 margin-bottom: 3px; 1462 } 1463 1464 .main-container-wrapper .product-card .product-image img { 1465 max-width: 100%; 1466 height: 260px; 1467 object-fit: cover; 1468 } 1469</style> 1470 1471 1472
1472<script 1473 type="text/x-template" 1474 id="v-shimmer-image-template" 1475 > 1476 <div 1477 :id="'image-shimmer-' + $.uid" 1478 class="shimmer" 1479 v-bind="$attrs" 1480 v-show="isLoading" 1481 > 1482 </div> 1483 1484 <img 1485 v-bind="$attrs" 1486 :data-src="src" 1487 :id="'image-' + $.uid" 1488 @load="onLoad" 1489 v-show="! isLoading" 1490 v-if="lazy" 1491 > 1492 1493 <img 1494 v-bind="$attrs" 1495 :data-src="src" 1496 :id="'image-' + $.uid" 1497 @load="onLoad" 1498 v-else 1499 v-show="! isLoading" 1500 > 1501 </script>
1501 1502 1503
1503<script type="module"> 1504 app.component('v-shimmer-image', { 1505 template: '#v-shimmer-image-template', 1506 1507 props: { 1508 lazy: { 1509 type: Boolean, 1510 default: true, 1511 }, 1512 1513 src: { 1514 type: String, 1515 default: '', 1516 }, 1517 }, 1518 1519 data() { 1520 return { 1521 isLoading: true, 1522 }; 1523 }, 1524 1525 mounted() { 1526 let self = this; 1527 1528 if (! this.lazy) { 1529 return; 1530 } 1531 1532 let lazyImageObserver = new IntersectionObserver(function(entries, observer) { 1533 entries.forEach(function(entry) { 1534 if (entry.isIntersecting) { 1535 let lazyImage = document.getElementById('image-' + self.$.uid); 1536 1537 lazyImage.src = lazyImage.dataset.src; 1538 1539 lazyImageObserver.unobserve(lazyImage); 1540 } 1541 }); 1542 }); 1543 1544 lazyImageObserver.observe(document.getElementById('image-shimmer-' + this.$.uid)); 1545 }, 1546 1547 methods: { 1548 onLoad() { 1549 this.isLoading = false; 1550 }, 1551 }, 1552 }); 1553 </script>
1553 1554
1554<script 1555 type="text/x-template" 1556 id="v-product-card-template" 1557 > 1558 <!-- Grid Card --> 1559 <div 1560 class="1180:transtion-all group w-full rounded-md 1180:relative 1180:grid 1180:content-start 1180:overflow-hidden 1180:duration-300 1180:hover:shadow-[0_5px_10px_rgba(0,0,0,0.1)]" 1561 v-if="mode != 'list'" 1562 > 1563 <div class="relative max-h-[300px] max-w-[291px] overflow-hidden max-md:max-h-60 max-md:max-w-full max-md:rounded-lg max-sm:max-h-[200px] max-sm:max-w-full"> 1564 1565 1566 <!-- Product Image --> 1567 <a 1568 :href="`https://mismomentosdigitales.com/${product.url_key}`" 1569 :aria-label="product.name + ' '" 1570 > 1571 <v-shimmer-image class="after:content-[' '] relative bg-zinc-100 transition-all duration-300 after:block after:pb-[calc(100%+9px)] group-hover:scale-105" :src="product.base_image.medium_image_url" :key="product.id" :index="product.id" width="291" height="300" :alt="product.name"> 1572 <div class="shimmer after:content-[' '] relative bg-zinc-100 transition-all duration-300 after:block after:pb-[calc(100%+9px)] group-hover:scale-105" :src="product.base_image.medium_image_url" :key="product.id" :index="product.id" width="291" height="300" :alt="product.name"></div> 1573</v-shimmer-image> 1574 1575 </a> 1576 1577 1578 1579 <!-- Product Ratings --> 1580 1581 1582 <v-product-ratings 1583 class="flex w-max items-center rounded-md border border-zinc-200 px-4 py-2 absolute bottom-1.5 items-center !border-white bg-white/80 !px-2 !py-1 text-xs max-sm:!px-1.5 max-sm:!py-0.5 ltr:left-1.5 rtl:right-1.5" :average="product.ratings.average" :total="product.reviews.total" :rating="false" v-if="product.reviews.total" 1584 average="0" 1585 total="0" 1586> 1587</v-product-ratings> 1588 1589 1590 1591 1592 <div class="action-items bg-black"> 1593 <!-- Product Sale Badge --> 1594 <p 1595 class="absolute top-1.5 inline-block rounded-[44px] bg-red-600 px-2.5 text-sm text-white max-sm:rounded-l-none max-sm:rounded-r-xl max-sm:px-2 max-sm:py-0.5 max-sm:text-xs ltr:left-1.5 max-sm:ltr:left-0 rtl:right-5 max-sm:rtl:right-0" 1596 v-if="product.on_sale" 1597 > 1598 Venta </p> 1599 1600 <!-- Product New Badge --> 1601 <p 1602 class="absolute top-1.5 inline-block rounded-[44px] bg-navyBlue px-2.5 text-sm text-white max-sm:rounded-l-none max-sm:rounded-r-xl max-sm:px-2 max-sm:py-0.5 max-sm:text-xs ltr:left-1.5 max-sm:ltr:left-0 rtl:right-1.5 max-sm:rtl:right-0" 1603 v-else-if="product.is_new" 1604 > 1605 Nuevo </p> 1606 1607 <div class="opacity-0 transition-all duration-300 group-hover:bottom-0 group-hover:opacity-100 max-lg:opacity-100 max-sm:opacity-100"> 1608 1609 1610 1611 <span 1612 class="absolute top-2.5 flex h-6 w-6 items-center justify-center rounded-full border border-zinc-200 bg-white text-lg md:hidden ltr:right-1.5 rtl:left-1.5" 1613 role="button" 1614 aria-label="Agregar a la lista de deseos" 1615 tabindex="0" 1616 :class="product.is_wishlist ? 'icon-heart-fill text-red-500' : 'icon-heart'" 1617 @click="addToWishlist()" 1618 > 1619 </span> 1620 1621 1622 1623 1624 1625 <span 1626 class="icon-compare absolute top-10 flex h-6 w-6 items-center justify-center rounded-full border border-zinc-200 bg-white text-lg sm:hidden ltr:right-1.5 rtl:left-1.5" 1627 role="button" 1628 aria-label="Agregar a comparar" 1629 tabindex="0" 1630 @click="addToCompare(product.id)" 1631 > 1632 </span> 1633 1634 1635 1636 </div> 1637 </div> 1638 </div> 1639 1640 <!-- Product Information Section --> 1641 <div class="-mt-9 grid max-w-[291px] translate-y-9 content-start gap-2.5 bg-white p-2.5 transition-transform duration-300 ease-out group-hover:-translate-y-0 group-hover:rounded-t-lg max-md:relative max-md:mt-0 max-md:translate-y-0 max-md:gap-0 max-md:px-0 max-md:py-1.5 max-sm:min-w-[170px] max-sm:max-w-[192px]"> 1642 1643 1644 1645 <p class="break-all text-base font-medium max-md:mb-1.5 max-md:max-w-56 max-md:whitespace-break-spaces max-md:leading-6 max-sm:max-w-[192px] max-sm:text-sm max-sm:leading-4"> 1646 {{ product.name }} 1647 </p> 1648 1649 1650 1651 <!-- Pricing --> 1652 1653 1654 <div 1655 class="flex items-center gap-2.5 text-lg font-semibold max-sm:text-sm max-sm:leading-6" 1656 v-html="product.price_html" 1657 > 1658 </div> 1659 1660 1661 1662 <!-- Product Actions Section --> 1663 <div class="action-items flex items-center justify-between opacity-0 transition-all duration-300 ease-in-out group-hover:opacity-100 max-md:hidden"> 1664 1665 1666 <button 1667 class="secondary-button w-full max-w-full p-2.5 text-sm font-medium max-sm:rounded-xl max-sm:p-2" 1668 :disabled="! product.is_saleable || isAddingToCart" 1669 @click="addToCart()" 1670 > 1671 Agregar al carrito </button> 1672 1673 1674 1675 1676
1677 <span 1678 class="cursor-pointer p-2.5 text-2xl max-sm:hidden" 1679 role="button" 1680 aria-label="Agregar a la lista de deseos" 1681 tabindex="0" 1682 :class="product.is_wishlist ? 'icon-heart-fill text-red-600' : 'icon-heart'" 1683 @click="addToWishlist()" 1684 > 1685 </span> 1686 1687 1688 1689 1690 1691 <span 1692 class="icon-compare cursor-pointer p-2.5 text-2xl max-sm:hidden" 1693 role="button" 1694 aria-label="Agregar a comparar" 1695 tabindex="0" 1696 @click="addToCompare(product.id)" 1697 > 1698 </span> 1699 1700 1701 </div> 1702 </div> 1703 </div> 1704 1705 <!-- List Card --> 1706 <div 1707 class="relative flex max-w-max grid-cols-2 gap-4 overflow-hidden rounded max-sm:flex-wrap" 1708 v-else 1709 > 1710 <div class="group relative max-h-[258px] max-w-[250px] overflow-hidden"> 1711 1712 1713 1714 <a :href="`https://mismomentosdigitales.com/${product.url_key}`"> 1715 <v-shimmer-image class="after:content-[' '] relative min-w-[250px] bg-zinc-100 transition-all duration-300 after:block after:pb-[calc(100%+9px)] group-hover:scale-105" :src="product.base_image.medium_image_url" :key="product.id" :index="product.id" width="291" height="300" :alt="product.name"> 1716 <div class="shimmer after:content-[' '] relative min-w-[250px] bg-zinc-100 transition-all duration-300 after:block after:pb-[calc(100%+9px)] group-hover:scale-105" :src="product.base_image.medium_image_url" :key="product.id" :index="product.id" width="291" height="300" :alt="product.name"></div> 1717</v-shimmer-image> 1718 1719 </a> 1720 1721 1722 1723 <div class="action-items bg-black"> 1724 <p 1725 class="absolute top-5 inline-block rounded-[44px] bg-red-500 px-2.5 text-sm text-white ltr:left-5 max-sm:ltr:left-2 rtl:right-5" 1726 v-if="product.on_sale" 1727 > 1728 Venta </p> 1729 1730 <p 1731 class="absolute top-5 inline-block rounded-[44px] bg-navyBlue px-2.5 text-sm text-white ltr:left-5 max-sm:ltr:left-2 rtl:right-5" 1732 v-else-if="product.is_new" 1733 > 1734 Nuevo </p> 1735 1736 <div class="opacity-0 transition-all duration-300 group-hover:bottom-0 group-hover:opacity-100 max-sm:opacity-100"> 1737 1738 1739 1740 <span 1741 class="absolute top-5 flex h-[30px] w-[30px] cursor-pointer items-center justify-center rounded-md bg-white text-2xl ltr:right-5 rtl:left-5" 1742 role="button" 1743 aria-label="Agregar a la lista de deseos" 1744 tabindex="0" 1745 :class="product.is_wishlist ? 'icon-heart-fill text-red-600' : 'icon-heart'" 1746 @click="addToWishlist()" 1747 > 1748 </span> 1749 1750 1751 1752 1753 1754 <span 1755 class="icon-compare absolute top-16 flex h-[30px] w-[30px] cursor-pointer items-center justify-center rounded-md bg-white text-2xl ltr:right-5 rtl:left-5" 1756 role="button" 1757 aria-label="Agregar a comparar" 1758 tabindex="0" 1759 @click="addToCompare(product.id)" 1760 > 1761 </span> 1762 1763 1764 </div> 1765 </div> 1766 </div> 1767 1768 <div class="grid content-start gap-4"> 1769 1770 1771 1772 <p class="text-base"> 1773 {{ product.name }} 1774 </p> 1775 1776 1777 1778 1779 1780 <div 1781 class="flex gap-2.5 text-lg font-semibold" 1782 v-html="product.price_html" 1783 > 1784 </div> 1785 1786 1787 1788 <!-- Needs to implement that in future --> 1789 <div class="flex hidden gap-4">
1790 <span class="block h-[30px] w-[30px] rounded-full bg-[#B5DCB4]"> 1791 </span> 1792 1793 <span class="block h-[30px] w-[30px] rounded-full bg-zinc-500"> 1794 </span> 1795 </div> 1796 1797 1798 1799 <p class="text-sm text-zinc-500"> 1800 <template v-if="! product.ratings.total"> 1801 <p class="text-sm text-zinc-500"> 1802 Sé el primero en revisar este producto </p> 1803 </template> 1804 1805 <template v-else> 1806 <v-product-ratings 1807 class="flex w-max items-center rounded-md border border-zinc-200 px-4 py-2" :average="product.ratings.average" :total="product.reviews.total" :rating="false" 1808 average="0" 1809 total="0" 1810> 1811</v-product-ratings> 1812 1813 </template> 1814 </p> 1815 1816 1817 1818 1819 1820 1821 <v-button class="primary-button whitespace-nowrap px-8 py-2.5" title="Agregar al carrito" :loading="isAddingToCart" :disabled="! product.is_saleable || isAddingToCart" @click="addToCart()"></v-button> 1822 1823 1824 1825 1826 </div> 1827 </div> 1828 </script>
1828 1829 1830
1830<script type="module"> 1831 app.component('v-product-card', { 1832 template: '#v-product-card-template', 1833 1834 props: ['mode', 'product'], 1835 1836 data() { 1837 return { 1838 isCustomer: '', 1839 1840 isAddingToCart: false, 1841 } 1842 }, 1843 1844 methods: { 1845 addToWishlist() { 1846 if (this.isCustomer) { 1847 this.$axios.post(`https://mismomentosdigitales.com/api/customer/wishlist`, { 1848 product_id: this.product.id 1849 }) 1850 .then(response => { 1851 this.product.is_wishlist = ! this.product.is_wishlist; 1852 1853 this.$emitter.emit('add-flash', { type: 'success', message: response.data.data.message }); 1854 }) 1855 .catch(error => {}); 1856 } else { 1857 window.location.href = "https://mismomentosdigitales.com/customer/login"; 1858 } 1859 }, 1860 1861 addToCompare(productId) { 1862 /** 1863 * This will handle for customers. 1864 */ 1865 if (this.isCustomer) { 1866 this.$axios.post('https://mismomentosdigitales.com/api/compare-items', { 1867 'product_id': productId 1868 }) 1869 .then(response => { 1870 this.$emitter.emit('add-flash', { type: 'success', message: response.data.data.message }); 1871 }) 1872 .catch(error => { 1873 if ([400, 422].includes(error.response.status)) { 1874 this.$emitter.emit('add-flash', { type: 'warning', message: error.response.data.data.message }); 1875 1876 return; 1877 } 1878 1879 this.$emitter.emit('add-flash', { type: 'error', message: error.response.data.message}); 1880 }); 1881 1882 return; 1883 } 1884 1885 /** 1886 * This will handle for guests. 1887 */ 1888 let items = this.getStorageValue() ?? []; 1889 1890 if (items.length) { 1891 if (! items.includes(productId)) { 1892 items.push(productId); 1893 1894 localStorage.setItem('compare_items', JSON.stringify(items)); 1895 1896 this.$emitter.emit('add-flash', { type: 'success', message: "Elemento añadido correctamente a la lista de comparación." }); 1897 } else { 1898 this.$emitter.emit('add-flash', { type: 'warning', message: "El elemento ya está agregado a la lista de comparación." }); 1899 } 1900 } else { 1901 localStorage.setItem('compare_items', JSON.stringify([productId])); 1902 1903 this.$emitter.emit('add-flash', { type: 'success', message: "Elemento añadido correctamente a la lista de comparación." }); 1904 1905 } 1906 }, 1907 1908 getStorageValue(key) { 1909 let value = localStorage.getItem('compare_items'); 1910 1911 if (! value) { 1912 return []; 1913 } 1914 1915 return JSON.parse(value); 1916 }, 1917 1918 addToCart() { 1919 this.isAddingToCart = true; 1920 1921 this.$axios.post('https://mismomentosdigitales.com/api/checkout/cart', { 1922 'quantity': 1, 1923 'product_id': this.product.id, 1924 }) 1925 .then(response => { 1926 if (response.data.message) { 1927 this.$emitter.emit('update-mini-cart', response.data.data ); 1928 1929 this.$emitter.emit('add-flash', { type: 'success', message: response.data.message }); 1930 } else { 1931 this.$emitter.emit('add-flash', { type: 'warning', message: response.data.data.message }); 1932 } 1933 1934 this.isAddingToCart = false;
1935 }) 1936 .catch(error => { 1937 this.$emitter.emit('add-flash', { type: 'error', message: error.response.data.message }); 1938 1939 if (error.response.data.redirect_uri) { 1940 window.location.href = error.response.data.redirect_uri; 1941 } 1942 1943 this.isAddingToCart = false; 1944 }); 1945 }, 1946 }, 1947 }); 1948 </script>
1948 1949
1949<script 1950 type="text/x-template" 1951 id="v-flash-group-template" 1952 > 1953 <transition-group 1954 tag='div' 1955 name="flash-group" 1956 enter-from-class="ltr:translate-x-full rtl:-translate-x-full" 1957 enter-active-class="transform transition duration-200 ease-in-out" 1958 enter-to-class="ltr:translate-x-0 rtl:-translate-x-0" 1959 leave-from-class="ltr:translate-x-0 rtl:-translate-x-0" 1960 leave-active-class="transform transition duration-200 ease-in-out" 1961 leave-to-class="ltr:translate-x-full rtl:-translate-x-full" 1962 class='fixed top-5 z-[1001] grid justify-items-end gap-2.5 max-sm:hidden ltr:right-5 rtl:left-5' 1963 > 1964 <v-flash-item 1965 v-for='flash in flashes' 1966 :key='flash.uid' 1967 :flash="flash" 1968 @onRemove="remove($event)" 1969/> 1970 1971 </transition-group> 1972 1973 <transition-group 1974 tag='div' 1975 name="flash-group" 1976 enter-from-class="ltr:translate-y-full rtl:-translate-y-full" 1977 enter-active-class="transform transition duration-200 ease-in-out" 1978 enter-to-class="ltr:translate-y-0 rtl:-translate-y-0" 1979 leave-from-class="ltr:translate-y-0 rtl:-translate-y-0" 1980 leave-active-class="transform transition duration-200 ease-in-out" 1981 leave-to-class="ltr:translate-y-full rtl:-translate-y-full" 1982 class='fixed bottom-10 left-1/2 z-[1001] grid -translate-x-1/2 -translate-y-1/2 transform justify-items-center gap-2.5 sm:hidden' 1983 > 1984 <v-flash-item 1985 v-for='flash in flashes' 1986 :key='flash.uid' 1987 :flash="flash" 1988 @onRemove="remove($event)" 1989/> 1990 1991 </transition-group> 1992 </script>
1992 1993 1994
1994<script type="module"> 1995 app.component('v-flash-group', { 1996 template: '#v-flash-group-template', 1997 1998 data() { 1999 return { 2000 uid: 0, 2001 2002 flashes: [] 2003 } 2004 }, 2005 2006 created() { 2007 2008 this.registerGlobalEvents(); 2009 }, 2010 2011 methods: { 2012 add(flash) { 2013 flash.uid = this.uid++; 2014 2015 this.flashes.push(flash); 2016 }, 2017 2018 remove(flash) { 2019 let index = this.flashes.indexOf(flash); 2020 2021 this.flashes.splice(index, 1); 2022 }, 2023 2024 registerGlobalEvents() { 2025 this.$emitter.on('add-flash', this.add); 2026 }, 2027 } 2028 }); 2029 </script>
2029 2030
2030<script 2031 type="text/x-template" 2032 id="v-modal-confirm-template" 2033 > 2034 <div> 2035 <transition 2036 tag="div" 2037 name="modal-overlay" 2038 enter-class="duration-300 ease-out" 2039 enter-from-class="opacity-0" 2040 enter-to-class="opacity-100" 2041 leave-class="duration-200 ease-in" 2042 leave-from-class="opacity-100" 2043 leave-to-class="opacity-0" 2044 > 2045 <div 2046 class="fixed inset-0 z-20 bg-gray-500 bg-opacity-50 transition-opacity" 2047 v-show="isOpen" 2048 ></div> 2049 </transition> 2050 2051 <transition 2052 tag="div" 2053 name="modal-content" 2054 enter-class="duration-300 ease-out" 2055 enter-from-class="translate-y-4 opacity-0 md:translate-y-0 md:scale-95" 2056 enter-to-class="translate-y-0 opacity-100 md:scale-100" 2057 leave-class="duration-200 ease-in" 2058 leave-from-class="translate-y-0 opacity-100 md:scale-100" 2059 leave-to-class="translate-y-4 opacity-0 md:translate-y-0 md:scale-95" 2060 > 2061 <div 2062 class="fixed inset-0 z-20 transform overflow-y-auto transition" v-show="isOpen" 2063 > 2064 <div class="flex min-h-full items-end justify-center p-4 text-center sm:items-center sm:p-0"> 2065 <div class="absolute left-1/2 top-1/2 z-[999] w-full max-w-[475px] -translate-x-1/2 -translate-y-1/2 overflow-hidden rounded-xl bg-white p-5 max-md:w-[90%] max-sm:p-4"> 2066 <div class="flex gap-2.5"> 2067 <div> 2068 <span class="flex rounded-full border border-gray-300 p-2.5"> 2069 <i class="icon-error text-3xl max-sm:text-xl"></i> 2070 </span> 2071 </div> 2072 2073 <div> 2074 <div class="flex items-center justify-between gap-5 text-xl max-sm:text-lg"> 2075 {{ title }} 2076 </div> 2077 2078 <div class="pb-5 pt-1.5 text-left text-sm text-gray-500"> 2079 {{ message }} 2080 </div> 2081 2082 <div class="flex justify-end gap-2.5"> 2083 <button 2084 type="button" 2085 class="secondary-button max-md:py-3 max-sm:px-6 max-sm:py-2.5" 2086 @click="disagree" 2087 > 2088 {{ options.btnDisagree }} 2089 </button> 2090 2091 <button 2092 type="button" 2093 class="primary-button max-md:py-3 max-sm:px-6 max-sm:py-2.5" 2094 @click="agree" 2095 > 2096 {{ options.btnAgree }} 2097 </button> 2098 </div> 2099 </div> 2100 </div> 2101 </div> 2102 </div> 2103 </div> 2104 </transition> 2105 </div> 2106 </script>
2106 2107 2108
2108<script type="module"> 2109 app.component('v-modal-confirm', { 2110 template: '#v-modal-confirm-template', 2111 2112 data() { 2113 return { 2114 isOpen: false, 2115 2116 title: '', 2117 2118 message: '', 2119 2120 options: { 2121 btnDisagree: '', 2122 btnAgree: '', 2123 }, 2124 2125 agreeCallback: null, 2126 2127 disagreeCallback: null, 2128 }; 2129 }, 2130 2131 created() { 2132 this.registerGlobalEvents(); 2133 }, 2134 2135 methods: { 2136 open({ 2137 title = "¿Estás seguro?", 2138 message = "¿Estás seguro de que quieres realizar esta acción?", 2139 options = { 2140 btnDisagree: "No estar de acuerdo", 2141 btnAgree: "Aceptar", 2142 }, 2143 agree = () => {}, 2144 disagree = () => {}, 2145 }) { 2146 this.isOpen = true; 2147 2148 const scrollbarWidth = window.innerWidth - document.documentElement.clientWidth; 2149 2150 document.body.style.overflow = 'hidden'; 2151 2152 document.body.style.paddingRight = `${scrollbarWidth}px`; 2153 2154 this.title = title; 2155 2156 this.message = message; 2157 2158 this.options = options; 2159 2160 this.agreeCallback = agree; 2161 2162 this.disagreeCallback = disagree; 2163 }, 2164 2165 disagree() { 2166 this.isOpen = false; 2167 2168 document.body.style.overflow = 'auto'; 2169 2170 document.body.style.paddingRight = ''; 2171 2172 this.disagreeCallback(); 2173 }, 2174 2175 agree() { 2176 this.isOpen = false; 2177 2178 document.body.style.overflow = 'auto'; 2179 2180 document.body.style.paddingRight = ''; 2181 2182 this.agreeCallback(); 2183 }, 2184 2185 registerGlobalEvents() { 2186 this.$emitter.on('open-confirm-modal', this.open); 2187 }, 2188 } 2189 }); 2190 </script>
2190 2191
2191<script 2192 type="text/x-template" 2193 id="v-carousel-template" 2194 > 2195 <div class="relative m-auto flex w-full overflow-hidden"> 2196 <!-- Slider --> 2197 <div 2198 class="inline-flex translate-x-0 cursor-pointer transition-transform duration-700 ease-out will-change-transform" 2199 ref="sliderContainer" 2200 > 2201 <div 2202 class="max-h-screen w-screen bg-cover bg-no-repeat" 2203 v-for="(image, index) in images" 2204 @click="visitLink(image)" 2205 ref="slide" 2206 > 2207 <v-shimmer-image class="aspect-[2.743/1] max-h-full w-full max-w-full select-none transition-transform duration-300 ease-in-out" :lazy="false" :src="image.image" :srcset="image.image + ' 1920w, ' + image.image.replace('storage', 'cache/large') + ' 1280w,' + image.image.replace('storage', 'cache/medium') + ' 1024w, ' + image.image.replace('storage', 'cache/small') + ' 525w'" :alt="image?.title" tabindex="0" fetchpriority="high"> 2208 <div class="shimmer aspect-[2.743/1] max-h-full w-full max-w-full select-none transition-transform duration-300 ease-in-out" :lazy="false" :src="image.image" :srcset="image.image + ' 1920w, ' + image.image.replace('storage', 'cache/large') + ' 1280w,' + image.image.replace('storage', 'cache/medium') + ' 1024w, ' + image.image.replace('storage', 'cache/small') + ' 525w'" :alt="image?.title" tabindex="0" fetchpriority="high"></div> 2209</v-shimmer-image> 2210 2211 </div> 2212 </div> 2213 2214 <!-- Navigation --> 2215 <span 2216 class="icon-arrow-left absolute left-2.5 top-1/2 -mt-[22px] hidden w-auto rounded-full bg-black/80 p-3 text-2xl font-bold text-white opacity-30 transition-all md:inline-block" 2217 :class="{ 2218 'cursor-not-allowed': direction == 'ltr' && currentIndex == 0, 2219 'cursor-pointer hover:opacity-100': direction == 'ltr' ? currentIndex > 0 : currentIndex <= 0 2220 }" 2221 role="button" 2222 aria-label="shop::components.carousel.previous" 2223 tabindex="0" 2224 v-if="images?.length >= 2" 2225 @click="navigate('prev')" 2226 > 2227 </span> 2228 2229 <span 2230 class="icon-arrow-right absolute right-2.5 top-1/2 -mt-[22px] hidden w-auto rounded-full bg-black/80 p-3 text-2xl font-bold text-white opacity-30 transition-all md:inline-block" 2231 :class="{ 2232 'cursor-not-allowed': direction == 'rtl' && currentIndex == 0, 2233 'cursor-pointer hover:opacity-100': direction == 'rtl' ? currentIndex < 0 : currentIndex >= 0 2234 }" 2235 role="button" 2236 aria-label="shop::components.carousel.next" 2237 tabindex="0" 2238 v-if="images?.length >= 2" 2239 @click="navigate('next')" 2240 > 2241 </span> 2242 2243 <!-- Pagination --> 2244 <div class="absolute bottom-5 left-0 flex w-full justify-center max-md:bottom-3.5 max-sm:bottom-2.5"> 2245 <div 2246 v-for="(image, index) in images" 2247 class="mx-1 h-3 w-3 cursor-pointer rounded-full max-md:h-2 max-md:w-2 max-sm:h-1.5 max-sm:w-1.5" 2248 :class="{ 'bg-navyBlue': index === Math.abs(currentIndex), 'opacity-30 bg-gray-500': index !== Math.abs(currentIndex) }" 2249 role="button" 2250 tabindex="0" 2251 @click="navigateByPagination(index)" 2252 > 2253 </div> 2254 </div> 2255 </div> 2256 </script>
2256 2257 2258
2258<script type="module"> 2259 app.component("v-carousel", { 2260 template: '#v-carousel-template', 2261 2262 props: ['images'], 2263 2264 data() { 2265 return { 2266 isDragging: false, 2267 startPos: 0, 2268 currentTranslate: 0, 2269 prevTranslate: 0, 2270 animationID: 0, 2271 currentIndex: 0, 2272 slider: '', 2273 slides: [], 2274 autoPlayInterval: null, 2275 direction: 'ltr', 2276 startFrom: 1, 2277 }; 2278 }, 2279 2280 mounted() { 2281 this.slider = this.$refs.sliderContainer; 2282 2283 if ( 2284 this.$refs.slide 2285 && typeof this.$refs.slide[Symbol.iterator] === 'function' 2286 ) { 2287 this.slides = Array.from(this.$refs.slide); 2288 } 2289 2290 this.init(); 2291 2292 this.play(); 2293 }, 2294 2295 methods: { 2296 init() { 2297 this.direction = document.dir; 2298 2299 if (this.direction == 'rtl') { 2300 this.startFrom = -1; 2301 } 2302 2303 this.slides.forEach((slide, index) => { 2304 slide.querySelector('img')?.addEventListener('dragstart', (e) => e.preventDefault()); 2305 2306 slide.addEventListener('mousedown', this.handleDragStart); 2307 2308 slide.addEventListener('touchstart', this.handleDragStart); 2309 2310 slide.addEventListener('mouseup', this.handleDragEnd); 2311 2312 slide.addEventListener('mouseleave', this.handleDragEnd); 2313 2314 slide.addEventListener('touchend', this.handleDragEnd); 2315 2316 slide.addEventListener('mousemove', this.handleDrag); 2317 2318 slide.addEventListener('touchmove', this.handleDrag, { passive: true }); 2319 }); 2320 2321 window.addEventListener('resize', this.setPositionByIndex); 2322 }, 2323 2324 handleDragStart(event) { 2325 this.startPos = event.type === 'mousedown' ? event.clientX : event.touches[0].clientX; 2326 2327 this.isDragging = true; 2328 2329 this.animationID = requestAnimationFrame(this.animation); 2330 }, 2331 2332 handleDrag(event) { 2333 if (! this.isDragging) { 2334 return; 2335 } 2336 2337 const currentPosition = event.type === 'mousemove' ? event.clientX : event.touches[0].clientX; 2338 2339 this.currentTranslate = this.prevTranslate + currentPosition - this.startPos; 2340 }, 2341 2342 handleDragEnd(event) { 2343 clearInterval(this.autoPlayInterval); 2344 2345 cancelAnimationFrame(this.animationID); 2346 2347 this.isDragging = false; 2348 2349 const movedBy = this.currentTranslate - this.prevTranslate; 2350 2351 if (this.direction == 'ltr') { 2352 if ( 2353 movedBy < -100 2354 && this.currentIndex < this.slides.length - 1 2355 ) { 2356 this.currentIndex += 1; 2357 } 2358 2359 if ( 2360 movedBy > 100 2361 && this.currentIndex > 0 2362 ) { 2363 this.currentIndex -= 1; 2364 } 2365 } else { 2366 if ( 2367 movedBy > 100 2368 && this.currentIndex < this.slides.length - 1 2369 ) { 2370 if (Math.abs(this.currentIndex) != this.slides.length - 1) { 2371 this.currentIndex -= 1; 2372 } 2373 } 2374 2375 if ( 2376 movedBy < -100 2377 && this.currentIndex < 0 2378 ) { 2379 this.currentIndex += 1; 2380 } 2381 } 2382 2383 this.setPositionByIndex(); 2384 2385 this.play(); 2386 }, 2387 2388 animation() { 2389 this.setSliderPosition(); 2390 2391 if (this.isDragging) { 2392 requestAnimationFrame(this.animation); 2393 } 2394 }, 2395 2396 setPositionByIndex() { 2397 this.currentTranslate = this.currentIndex * -window.innerWidth; 2398 2399 this.prevTranslate = this.currentTranslate; 2400 2401 this.setSliderPosition(); 2402 }, 2403 2404 setSliderPosition() { 2405 if (this.slider) { 2406 this.slider.style.transform = `translateX(${this.currentTranslate}px)`; 2407 } 2408 }, 2409 2410 visitLink(image) { 2411 if (image.link) { 2412 window.location.href = image.link; 2413 } 2414 }, 2415 2416 navigate(type) { 2417 clearInterval(this.autoPlayInterval); 2418 2419 if (this.direction === 'rtl') { 2420 type === 'next' ? this.prev() : this.next(); 2421 } else { 2422 type === 'next' ? this.next() : this.prev(); 2423 } 2424 2425 this.setPositionByIndex(); 2426 2427 this.play(); 2428 }, 2429 2430 next() { 2431 this.currentIndex = (this.currentIndex + this.startFrom) % this.images.length; 2432 }, 2433 2434 prev() { 2435 this.currentIndex = this.direction == 'ltr' 2436 ? this.currentIndex > 0 ? this.currentIndex - 1 : 0 2437 : this.currentIndex < 0 ? this.currentIndex + 1 : 0; 2438 }, 2439 2440 navigateByPagination(index) { 2441 this.direction == 'rtl' ? index = -index : ''; 2442 2443 clearInterval(this.autoPlayInterval); 2444 2445 this.currentIndex = index; 2446 2447 this.setPositionByIndex(); 2448 2449 this.play(); 2450 }, 2451 2452 play() { 2453 clearInterval(this.autoPlayInterval); 2454 2455 this.autoPlayInterval = setInterval(() => { 2456 this.currentIndex = (this.currentIndex + this.startFrom) % this.images.length; 2457 2458 this.setPositionByIndex(); 2459 }, 5000); 2460 }, 2461 }, 2462 }); 2463 </script>
2463 2464
2464<script 2465 type="text/x-template" 2466 id="v-categories-carousel-template" 2467 > 2468 <div 2469 class="container mt-14 max-lg:px-8 max-md:mt-7 max-md:!px-0 max-sm:mt-5" 2470 v-if="! isLoading && categories?.length" 2471 > 2472 <div class="relative"> 2473 <div 2474 ref="swiperContainer" 2475 class="scrollbar-hide flex gap-10 overflow-auto scroll-smooth max-lg:gap-4" 2476 > 2477 <div 2478 class="grid min-w-[120px] max-w-[120px] grid-cols-1 justify-items-center gap-4 font-medium max-md:min-w-20 max-md:max-w-20 max-md:gap-2.5 max-md:first:ml-4 max-sm:min-w-[60px] max-sm:max-w-[60px] max-sm:gap-1.5" 2479 v-for="category in categories" 2480 > 2481 <a 2482 :href="category.slug" 2483 class="h-[110px] w-[110px] rounded-full bg-zinc-100 max-md:h-20 max-md:w-20 max-sm:h-[60px] max-sm:w-[60px]" 2484 :aria-label="category.name" 2485 > 2486 <v-shimmer-image :src="category.logo?.large_image_url || 'https://mismomentosdigitales.com/themes/shop/default/build/assets/small-product-placeholder-CMT26fOX.webp'" width="110" height="110" class="w-full rounded-full max-sm:h-[60px] max-sm:w-[60px]" :alt="category.name"> 2487 <div class="shimmer w-full rounded-full max-sm:h-[60px] max-sm:w-[60px]" :src="category.logo?.large_image_url || 'https://mismomentosdigitales.com/themes/shop/default/build/assets/small-product-placeholder-CMT26fOX.webp'" width="110" height="110" :alt="category.name"></div> 2488</v-shimmer-image> 2489 2490 </a> 2491 2492 <a 2493 :href="category.slug" 2494 class="" 2495 > 2496 <p 2497 class="text-center text-lg text-black max-md:text-base max-md:font-normal max-sm:text-sm" 2498 v-text="category.name" 2499 > 2500 </p> 2501 </a> 2502 </div> 2503 </div> 2504 2505 <span 2506 class="icon-arrow-left-stylish absolute -left-10 top-9 flex h-[50px] w-[50px] cursor-pointer items-center justify-center rounded-full border border-black bg-white text-2xl transition hover:bg-black hover:text-white max-lg:-left-7 max-md:hidden" 2507 role="button" 2508 aria-label="shop::components.carousel.previous" 2509 tabindex="0" 2510 @click="swipeLeft" 2511 > 2512 </span> 2513 2514 <span 2515 class="icon-arrow-right-stylish absolute -right-6 top-9 flex h-[50px] w-[50px] cursor-pointer items-center justify-center rounded-full border border-black bg-white text-2xl transition hover:bg-black hover:text-white max-lg:-right-7 max-md:hidden" 2516 role="button" 2517 aria-label="shop::components.carousel.next" 2518 tabindex="0" 2519 @click="swipeRight" 2520 > 2521 </span> 2522 </div> 2523 </div> 2524 2525 <!-- Category Carousel Shimmer --> 2526 <template v-if="isLoading"> 2527 <div class="container mt-14 max-lg:px-8 max-md:mt-7 max-md:!px-0 max-sm:mt-5"> 2528 <div class="relative"> 2529 <div class="scrollbar-hide flex gap-10 overflow-auto max-lg:gap-4"> 2530 <div class="grid min-w-[120px] grid-cols-1 justify-items-center gap-4 max-md:min-w-20 max-md:gap-2.5 max-md:first:ml-4 max-sm:min-w-[60px] max-sm:max-w-[60px] max-sm:gap-1.5"> 2531 <div class="shimmer relative h-[110px] w-[110px] overflow-hidden rounded-full max-md:h-20 max-md:w-20 max-sm:h-[60px] max-sm:w-[60px]"> 2532 <img class="rounded-sm bg-zinc-100"> 2533 </div> 2534 2535 <p class="shimmer h-[27px] w-[90px] rounded-2xl max-sm:h-5 max-sm:w-[70px]"></p> 2536 </div> 2537 <div class="grid min-w-[120px] grid-cols-1 justify-items-center gap-4 max-md:min-w-20 max-md:gap-2.5 max-md:first:ml-4 max-sm:min-w-[60px] max-sm:max-w-[60px] max-sm:gap-1.5"> 2538 <div class="shimmer relative h-[110px] w-[110px] overflow-hidden rounded-full max-md:h-20 max-md:w-20 max-sm:h-[60px] max-sm:w-[60px]"> 2539 <img class="rounded-sm bg-zinc-100"> 2540 </div> 2541 2542 <p class="shimmer h-[27px] w-[90px] rounded-2xl max-sm:h-5 max-sm:w-[70px]"></p> 2543 </div> 2544 <div class="grid min-w-[120px] grid-cols-1 justify-items-center gap-4 max-md:min-w-20 max-md:gap-2.5 max-md:first:ml-4 max-sm:min-w-[60px] max-sm:max-w-[60px] max-sm:gap-1.5"> 2545 <div class="shimmer relative h-[110px] w-[110px] overflow-hidden rounded-full max-md:h-20 max-md:w-20 max-sm:h-[60px] max-sm:w-[60px]"> 2546 <img class="rounded-sm bg-zinc-100"> 2547 </div> 2548 2549 <p class="shimmer h-[27px] w-[90px] rounded-2xl max-sm:h-5 max-sm:w-[70px]"></p> 2550 </div> 2551 <div class="grid min-w-[120px] grid-cols-1 justify-items-center gap-4 max-md:min-w-20 max-md:gap-2.5 max-md:first:ml-4 max-sm:min-w-[60px] max-sm:max-w-[60px] max-sm:gap-1.5"> 2552 <div class="shimmer relative h-[110px] w-[110px] overflow-hidden rounded-full max-md:h-20 max-md:w-20 max-sm:h-[60px] max-sm:w-[60px]"> 2553 <img class="rounded-sm bg-zinc-100"> 2554 </div> 2555 2556 <p class="shimmer h-[27px] w-[90px] rounded-2xl max-sm:h-5 max-sm:w-[70px]"></p> 2557 </div> 2558 <div class="grid min-w-[120px] grid-cols-1 justify-items-center gap-4 max-md:min-w-20 max-md:gap-2.5 max-md:first:ml-4 max-sm:min-w-[60px] max-sm:max-w-[60px] max-sm:gap-1.5"> 2559 <div class="shimmer relative h-[110px] w-[110px] overflow-hidden rounded-full max-md:h-20 max-md:w-20 max-sm:h-[60px] max-sm:w-[60px]"> 2560 <img class="rounded-sm bg-zinc-100"> 2561 </div> 2562 2563 <p class="shimmer h-[27px] w-[90px] rounded-2xl max-sm:h-5 max-sm:w-[70px]"></p> 2564 </div> 2565 <div class="grid min-w-[120px] grid-cols-1 justify-items-center gap-4 max-md:min-w-20 max-md:gap-2.5 max-md:first:ml-4 max-sm:min-w-[60px] max-sm:max-w-[60px] max-sm:gap-1.5"> 2566 <div class="shimmer relative h-[110px] w-[110px] overflow-hidden rounded-full max-md:h-20 max-md:w-20 max-sm:h-[60px] max-sm:w-[60px]"> 2567 <img class="rounded-sm bg-zinc-100"> 2568 </div> 2569 2570 <p class="shimmer h-[27px] w-[90px] rounded-2xl max-sm:h-5 max-sm:w-[70px]"></p> 2571 </div> 2572 <div class="grid min-w-[120px] grid-cols-1 justify-items-center gap-4 max-md:min-w-20 max-md:gap-2.5 max-md:first:ml-4 max-sm:min-w-[60px] max-sm:max-w-[60px] max-sm:gap-1.5"> 2573 <div class="shimmer relative h-[110px] w-[110px] overflow-hidden rounded-full max-md:h-20 max-md:w-20 max-sm:h-[60px] max-sm:w-[60px]"> 2574 <img class="rounded-sm bg-zinc-100"> 2575 </div> 2576 2577 <p class="shimmer h-[27px] w-[90px] rounded-2xl max-sm:h-5 max-sm:w-[70px]"></p> 2578 </div> 2579 <div class="grid min-w-[120px] grid-cols-1 justify-items-center gap-4 max-md:min-w-20 max-md:gap-2.5 max-md:first:ml-4 max-sm:min-w-[60px] max-sm:max-w-[60px] max-sm:gap-1.5"> 2580 <div class="shimmer relative h-[110px] w-[110px] overflow-hidden rounded-full max-md:h-20 max-md:w-20 max-sm:h-[60px] max-sm:w-[60px]"> 2581 <img class="rounded-sm bg-zinc-100"> 2582 </div> 2583 2584 <p class="shimmer h-[27px] w-[90px] rounded-2xl max-sm:h-5 max-sm:w-[70px]"></p> 2585 </div> 2586 </div> 2587
2588 <span 2589 class="shimmer absolute -left-10 top-9 flex h-[50px] w-[50px] rounded-full max-sm:hidden" 2590 role="presentation" 2591 ></span> 2592 2593 <span 2594 class="shimmer absolute -right-6 top-9 flex h-[50px] w-[50px] rounded-full max-sm:hidden" 2595 role="presentation" 2596 ></span> 2597 </div> 2598</div> 2599 </template> 2600 </script>
2600 2601 2602
2602<script type="module"> 2603 app.component('v-categories-carousel', { 2604 template: '#v-categories-carousel-template', 2605 2606 props: [ 2607 'src', 2608 'title', 2609 'navigationLink', 2610 ], 2611 2612 data() { 2613 return { 2614 isLoading: true, 2615 2616 categories: [], 2617 2618 offset: 323, 2619 }; 2620 }, 2621 2622 mounted() { 2623 this.getCategories(); 2624 }, 2625 2626 methods: { 2627 getCategories() { 2628 this.$axios.get(this.src) 2629 .then(response => { 2630 this.isLoading = false; 2631 2632 this.categories = response.data.data; 2633 }).catch(error => { 2634 console.log(error); 2635 }); 2636 }, 2637 2638 swipeLeft() { 2639 const container = this.$refs.swiperContainer; 2640 2641 container.scrollLeft -= this.offset; 2642 }, 2643 2644 swipeRight() { 2645 const container = this.$refs.swiperContainer; 2646 2647 container.scrollLeft += this.offset; 2648 }, 2649 }, 2650 }); 2651 </script>
2651 2652
2652<script 2653 type="text/x-template" 2654 id="v-products-carousel-template" 2655 > 2656 <div 2657 class="container mt-20 max-lg:px-8 max-md:mt-8 max-sm:mt-7 max-sm:!px-4" 2658 v-if="! isLoading && products.length" 2659 > 2660 <div class="flex justify-between"> 2661 <h2 class="font-dmserif text-3xl max-md:text-2xl max-sm:text-xl"> 2662 {{ title }} 2663 </h2> 2664 2665 <div class="flex items-center justify-between gap-8"> 2666 <a 2667 :href="navigationLink" 2668 class="hidden max-lg:flex" 2669 v-if="navigationLink" 2670 > 2671 <p class="items-center text-xl max-md:text-base max-sm:text-sm"> 2672 Ver todo 2673 <span class="icon-arrow-right text-2xl max-md:text-lg max-sm:text-sm"></span> 2674 </p> 2675 </a> 2676 2677 <template v-if="products.length > 3"> 2678 <span 2679 v-if="products.length > 4 || (products.length > 3 && isScreenMax2xl)" 2680 class="icon-arrow-left-stylish rtl:icon-arrow-right-stylish inline-block cursor-pointer text-2xl max-lg:hidden" 2681 role="button" 2682 aria-label="Anterior" 2683 tabindex="0" 2684 @click="swipeLeft" 2685 > 2686 </span> 2687 2688 <span 2689 v-if="products.length > 4 || (products.length > 3 && isScreenMax2xl)" 2690 class="icon-arrow-right-stylish rtl:icon-arrow-left-stylish inline-block cursor-pointer text-2xl max-lg:hidden" 2691 role="button" 2692 aria-label="Siguiente" 2693 tabindex="0" 2694 @click="swipeRight" 2695 > 2696 </span> 2697 </template> 2698 </div> 2699 </div> 2700 2701 <div 2702 ref="swiperContainer" 2703 class="flex gap-8 pb-2.5 [&>*]:flex-[0] mt-10 overflow-auto scroll-smooth scrollbar-hide max-md:gap-7 max-md:mt-5 max-sm:gap-4 max-md:pb-0 max-md:whitespace-nowrap" 2704 > 2705 <v-product-card 2706 class="min-w-[291px] max-md:h-fit max-md:min-w-56 max-sm:min-w-[192px]" v-for="product in products" 2707 :product="product" 2708> 2709</v-product-card> 2710 2711 </div> 2712 2713 <a 2714 :href="navigationLink" 2715 class="secondary-button mx-auto mt-5 block w-max rounded-2xl px-11 py-3 text-center text-base max-lg:mt-0 max-lg:hidden max-lg:py-3.5 max-md:rounded-lg" 2716 :aria-label="title" 2717 v-if="navigationLink" 2718 > 2719 Ver todo </a> 2720 </div> 2721 2722 <!-- Product Card Listing --> 2723 <template v-if="isLoading"> 2724 <div class="container mt-20 max-lg:px-8 max-md:mt-8 max-sm:mt-7 max-sm:!px-4"> 2725 <div class="flex items-center justify-between"> 2726 <h3 class="shimmer h-8 w-[200px] max-sm:h-7"></h3> 2727 2728 <div class="flex items-center justify-between gap-8 max-lg:hidden"> 2729 <span 2730 class="shimmer inline-block h-6 w-6" 2731 role="presentation" 2732 ></span> 2733 2734 <span 2735 class="shimmer inline-block h-6 w-6 max-sm:hidden" 2736 role="presentation" 2737 ></span> 2738 </div> 2739 2740 <div class="shimmer h-7 w-24 max-sm:h-5 max-sm:w-[68px] lg:hidden"></div> 2741 </div> 2742 2743 <div class="scrollbar-hide mt-10 flex gap-8 overflow-auto pb-2.5 max-md:mt-5 max-sm:gap-4"> 2744 <div class="grid gap-2.5 relative w-full max-w-[291px] max-sm:grid-cols-1 min-w-[291px] max-md:h-fit max-md:min-w-56 max-sm:min-w-[192px]"> 2745 <div class="shimmer relative w-full rounded max-sm:!rounded-lg"> 2746 <div class="after:content-[' '] relative after:block after:pb-[calc(100%+9px)]"></div> 2747 </div> 2748 2749 <div class="grid content-start gap-2.5 max-sm:gap-1"> 2750 <p class="shimmer h-4 w-3/4"></p>
2751 <p class="shimmer h-4 w-[55%]"></p> 2752 2753 <!-- Needs to implement that in future --> 2754 <div class="mt-3 flex hidden gap-4"> 2755 <span class="shimmer block h-[30px] w-[30px] rounded-full"></span> 2756 <span class="shimmer block h-[30px] w-[30px] rounded-full"></span> 2757 </div> 2758 </div> 2759 </div> 2760 <div class="grid gap-2.5 relative w-full max-w-[291px] max-sm:grid-cols-1 min-w-[291px] max-md:h-fit max-md:min-w-56 max-sm:min-w-[192px]"> 2761 <div class="shimmer relative w-full rounded max-sm:!rounded-lg"> 2762 <div class="after:content-[' '] relative after:block after:pb-[calc(100%+9px)]"></div> 2763 </div> 2764 2765 <div class="grid content-start gap-2.5 max-sm:gap-1"> 2766 <p class="shimmer h-4 w-3/4"></p> 2767 <p class="shimmer h-4 w-[55%]"></p> 2768 2769 <!-- Needs to implement that in future --> 2770 <div class="mt-3 flex hidden gap-4"> 2771 <span class="shimmer block h-[30px] w-[30px] rounded-full"></span> 2772 <span class="shimmer block h-[30px] w-[30px] rounded-full"></span> 2773 </div> 2774 </div> 2775 </div> 2776 <div class="grid gap-2.5 relative w-full max-w-[291px] max-sm:grid-cols-1 min-w-[291px] max-md:h-fit max-md:min-w-56 max-sm:min-w-[192px]"> 2777 <div class="shimmer relative w-full rounded max-sm:!rounded-lg"> 2778 <div class="after:content-[' '] relative after:block after:pb-[calc(100%+9px)]"></div> 2779 </div> 2780 2781 <div class="grid content-start gap-2.5 max-sm:gap-1"> 2782 <p class="shimmer h-4 w-3/4"></p> 2783 <p class="shimmer h-4 w-[55%]"></p> 2784 2785 <!-- Needs to implement that in future --> 2786 <div class="mt-3 flex hidden gap-4"> 2787 <span class="shimmer block h-[30px] w-[30px] rounded-full"></span> 2788 <span class="shimmer block h-[30px] w-[30px] rounded-full"></span> 2789 </div> 2790 </div> 2791 </div> 2792 <div class="grid gap-2.5 relative w-full max-w-[291px] max-sm:grid-cols-1 min-w-[291px] max-md:h-fit max-md:min-w-56 max-sm:min-w-[192px]"> 2793 <div class="shimmer relative w-full rounded max-sm:!rounded-lg"> 2794 <div class="after:content-[' '] relative after:block after:pb-[calc(100%+9px)]"></div> 2795 </div> 2796 2797 <div class="grid content-start gap-2.5 max-sm:gap-1"> 2798 <p class="shimmer h-4 w-3/4"></p> 2799 <p class="shimmer h-4 w-[55%]"></p> 2800 2801 <!-- Needs to implement that in future --> 2802 <div class="mt-3 flex hidden gap-4"> 2803 <span class="shimmer block h-[30px] w-[30px] rounded-full"></span> 2804 <span class="shimmer block h-[30px] w-[30px] rounded-full"></span> 2805 </div> 2806 </div> 2807 </div> 2808 </div> 2809 2810 <a 2811 class="shimmer mx-auto mt-16 block h-12 w-[150.172px] rounded-2xl max-md:hidden" 2812 role="button" 2813 aria-label="Show more products" 2814 ></a> 2815 </div> 2816 </template> 2817 </script>
2817 2818 2819
2819<script type="module"> 2820 app.component('v-products-carousel', { 2821 template: '#v-products-carousel-template', 2822 2823 props: [ 2824 'src', 2825 'title', 2826 'navigationLink', 2827 ], 2828 2829 data() { 2830 return { 2831 isLoading: true, 2832 2833 products: [], 2834 2835 offset: 323, 2836 2837 isScreenMax2xl: window.innerWidth <= 1440, 2838 }; 2839 }, 2840 2841 mounted() { 2842 this.getProducts(); 2843 }, 2844 2845 created() { 2846 window.addEventListener('resize', this.updateScreenSize); 2847 }, 2848 2849 beforeDestroy() { 2850 window.removeEventListener('resize', this.updateScreenSize); 2851 }, 2852 2853 methods: { 2854 getProducts() { 2855 this.$axios.get(this.src) 2856 .then(response => { 2857 this.isLoading = false; 2858 2859 this.products = response.data.data; 2860 }).catch(error => { 2861 console.log(error); 2862 }); 2863 }, 2864 2865 updateScreenSize() { 2866 this.isScreenMax2xl = window.innerWidth <= 1440; 2867 }, 2868 2869 swipeLeft() { 2870 const container = this.$refs.swiperContainer; 2871 2872 container.scrollLeft -= this.offset; 2873 }, 2874 2875 swipeRight() { 2876 const container = this.$refs.swiperContainer; 2877 2878 // Check if scroll reaches the end 2879 if (container.scrollLeft + container.clientWidth >= container.scrollWidth) { 2880 // Reset scroll to the beginning 2881 container.scrollLeft = 0; 2882 } else { 2883 // Scroll to the right 2884 container.scrollLeft += this.offset; 2885 } 2886 }, 2887 }, 2888 }); 2889 </script>
2889 2890
2890<script 2891 type="text/x-template" 2892 id="v-product-ratings-template" 2893 > 2894 <div> 2895 <span class="text-sm font-medium text-black max-sm:text-xs"> 2896 {{ average }} 2897 </span> 2898 2899 <span 2900 class="icon-star-fill -mt-1 text-xl text-amber-500 max-sm:-mt-1 max-sm:text-lg" 2901 role="presentation" 2902 > 2903 </span> 2904 2905 <span class="border-l border-zinc-300 text-sm font-medium text-black max-sm:border-zinc-300 max-sm:text-xs ltr:pl-1 rtl:pr-1"> 2906 {{ abbreviatedTotal }} 2907 2908 <span v-if="rating">Calificaciones</span> 2909 </span> 2910 </div> 2911 </script>
2911 2912 2913
2913<script type="module"> 2914 app.component("v-product-ratings", { 2915 template: "#v-product-ratings-template", 2916 2917 props: { 2918 average: { 2919 type: String, 2920 required: true, 2921 }, 2922 2923 total: { 2924 type: String, 2925 required: true, 2926 }, 2927 2928 rating: { 2929 type: Boolean, 2930 required: false, 2931 }, 2932 }, 2933 2934 computed: { 2935 starColorClasses() { 2936 return { 2937 'text-emerald-600': this.average > 4, 2938 'text-emerald-500': this.average >= 4 && this.average < 5, 2939 'text-emerald-400': this.average >= 3 && this.average < 4, 2940 'text-amber-500': this.average >= 2 && this.average < 3, 2941 'text-red-500': this.average >= 1 && this.average < 2, 2942 'text-gray-400': this.average <= 0, 2943 }; 2944 }, 2945 2946 abbreviatedTotal() { 2947 if (this.total >= 1000) { 2948 return `${(this.total / 1000).toFixed(1)}k`; 2949 } 2950 2951 return this.total; 2952 }, 2953 }, 2954 }); 2955 </script>
2955 2956
2956<script 2957 type="text/x-template" 2958 id="v-button-template" 2959 > 2960 <button 2961 v-if="! loading" 2962 :class="[buttonClass, '']" 2963 > 2964 {{ title }} 2965 </button> 2966 2967 <button 2968 v-else 2969 :class="[buttonClass, '']" 2970 > 2971 <!-- Spinner --> 2972 <svg 2973 class="text-blue absolute h-5 w-5 animate-spin" 2974 xmlns="http://www.w3.org/2000/svg" 2975 fill="none" 2976 aria-hidden="true" 2977 viewBox="0 0 24 24" 2978 > 2979 <circle 2980 class="opacity-25" 2981 cx="12" 2982 cy="12" 2983 r="10" 2984 stroke="currentColor" 2985 stroke-width="4" 2986 > 2987 </circle> 2988 2989 <path 2990 class="opacity-75" 2991 fill="currentColor" 2992 d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z" 2993 > 2994 </path> 2995 </svg> 2996 2997 <span class="relative h-full w-full opacity-0"> 2998 {{ title }} 2999 </span> 3000 </button> 3001 </script>
3001 3002 3003
3003<script type="module"> 3004 app.component('v-button', { 3005 template: '#v-button-template', 3006 3007 props: { 3008 loading: Boolean, 3009 buttonType: String, 3010 title: String, 3011 buttonClass: String, 3012 }, 3013 }); 3014 </script>
3014 3015
3015<script 3016 type="text/x-template" 3017 id="v-flash-item-template" 3018 > 3019 <div 3020 class="flex w-max max-w-[408px] justify-between gap-12 rounded-lg px-5 py-3 max-sm:max-w-80 max-sm:items-center max-sm:gap-2 max-sm:p-3" 3021 :style="typeStyles[flash.type]['container']" 3022 > 3023 <p 3024 class="flex items-center break-words text-sm" 3025 :style="typeStyles[flash.type]['message']" 3026 > 3027 <span 3028 class="icon-toast-done text-2xl ltr:mr-2.5 rtl:ml-2.5" 3029 :class="iconClasses[flash.type]" 3030 :style="typeStyles[flash.type]['icon']" 3031 ></span> 3032 3033 {{ flash.message }} 3034 </p> 3035 3036 <span 3037 class="icon-cancel max-h-4 max-w-4 cursor-pointer" 3038 :style="typeStyles[flash.type]['icon']" 3039 @click="remove" 3040 ></span> 3041 </div> 3042 </script>
3042 3043 3044
3044<script type="module"> 3045 app.component('v-flash-item', { 3046 template: '#v-flash-item-template', 3047 3048 props: ['flash'], 3049 3050 data() { 3051 return { 3052 iconClasses: { 3053 success: 'icon-toast-done', 3054 3055 error: 'icon-toast-error', 3056 3057 warning: 'icon-toast-exclamation-mark', 3058 3059 info: 'icon-toast-info', 3060 }, 3061 3062 typeStyles: { 3063 success: { 3064 container: 'background: #D4EDDA', 3065 3066 message: 'color: #155721', 3067 3068 icon: 'color: #155721' 3069 }, 3070 3071 error: { 3072 container: 'background: #F8D7DA', 3073 3074 message: 'color: #721C24', 3075 3076 icon: 'color: #721C24' 3077 }, 3078 3079 warning: { 3080 container: 'background: #FFF3CD', 3081 3082 message: 'color: #856404', 3083 3084 icon: 'color: #856404' 3085 }, 3086 3087 info: { 3088 container: 'background: #E2E3E5', 3089 3090 message: 'color: #383D41', 3091 3092 icon: 'color: #383D41' 3093 }, 3094 }, 3095 }; 3096 }, 3097 3098 created() { 3099 var self = this; 3100 3101 setTimeout(function() { 3102 self.remove() 3103 }, 5000) 3104 }, 3105 3106 methods: { 3107 remove() { 3108 this.$emit('onRemove', this.flash) 3109 } 3110 } 3111 }); 3112 </script>
3112 3113
3113<script 3114 type="text/x-template" 3115 id="v-topbar-template" 3116 > 3117 <div class="flex w-full items-center justify-between border border-b border-l-0 border-r-0 border-t-0 px-16"> 3118 3119 3120 <!-- Currency Switcher --> 3121 <v-dropdown position="bottom-left" class="relative"> 3122 <div 3123 class="flex cursor-pointer gap-2.5 py-3" 3124 role="button" 3125 tabindex="0" 3126 @click="currencyToggler = ! currencyToggler" 3127 > 3128 <span> 3129 $ MXN 3130 </span> 3131 3132 <span 3133 class="text-2xl" 3134 :class="{'icon-arrow-up': currencyToggler, 'icon-arrow-down': ! currencyToggler}" 3135 role="presentation" 3136 ></span> 3137 </div> 3138 3139 <template v-slot:toggle> 3140 <div 3141 class="flex cursor-pointer gap-2.5 py-3" 3142 role="button" 3143 tabindex="0" 3144 @click="currencyToggler = ! currencyToggler" 3145 > 3146 <span> 3147 $ MXN 3148 </span> 3149 3150 <span 3151 class="text-2xl" 3152 :class="{'icon-arrow-up': currencyToggler, 'icon-arrow-down': ! currencyToggler}" 3153 role="presentation" 3154 ></span> 3155 </div> 3156 </template> 3157 3158 <template v-slot:content> 3159 <div class="p-5 journal-scroll max-h-[500px] !p-0"> 3160 <v-currency-switcher></v-currency-switcher> 3161 </div> 3162 </template> 3163 3164 </v-dropdown> 3165 3166 3167 3168 3169 <p class="py-3 text-xs font-medium"> 3170 15% OFF EN TODA LA TIENDA 3171 3172 <a 3173 href="https://mismomentosdigitales.com/" 3174 class="underline" 3175 role="button" 3176 > 3177 COMPRA AHORA 3178 </a> 3179 </p> 3180 3181 3182 3183 <!-- Locales Switcher --> 3184 <v-dropdown position="bottom-right" class="relative"> 3185 <!-- Dropdown Toggler --> 3186 <div 3187 class="flex cursor-pointer items-center gap-2.5 py-3" 3188 role="button" 3189 tabindex="0" 3190 @click="localeToggler = ! localeToggler" 3191 > 3192 <img 3193 src="https://mismomentosdigitales.com/storage/locales/LfLD31j8GSn3EiuC0o9cjblFqdc1ZBKSYixeJFaD.png" 3194 class="h-full" 3195 alt="Idioma predeterminado" 3196 width="24" 3197 height="16" 3198 /> 3199 3200 <span> 3201 Español 3202 </span> 3203 3204 <span 3205 class="text-2xl" 3206 :class="{'icon-arrow-up': localeToggler, 'icon-arrow-down': ! localeToggler}" 3207 role="presentation" 3208 ></span> 3209 </div> 3210 3211 <template v-slot:toggle> 3212 <!-- Dropdown Toggler --> 3213 <div 3214 class="flex cursor-pointer items-center gap-2.5 py-3" 3215 role="button" 3216 tabindex="0" 3217 @click="localeToggler = ! localeToggler" 3218 > 3219 <img 3220 src="https://mismomentosdigitales.com/storage/locales/LfLD31j8GSn3EiuC0o9cjblFqdc1ZBKSYixeJFaD.png" 3221 class="h-full" 3222 alt="Idioma predeterminado" 3223 width="24" 3224 height="16" 3225 /> 3226
3227 <span> 3228 Español 3229 </span> 3230 3231 <span 3232 class="text-2xl" 3233 :class="{'icon-arrow-up': localeToggler, 'icon-arrow-down': ! localeToggler}" 3234 role="presentation" 3235 ></span> 3236 </div> 3237 </template> 3238 3239 <template v-slot:content> 3240 <div class="p-5 journal-scroll max-h-[500px] !p-0"> 3241 <v-locale-switcher></v-locale-switcher> 3242 </div> 3243 </template> 3244 3245 </v-dropdown> 3246 3247 3248 3249 </div> 3250 </script>
3250 3251 3252
3252<script 3253 type="text/x-template" 3254 id="v-currency-switcher-template" 3255 > 3256 <div class="my-2.5 grid gap-1 overflow-auto max-md:my-0 sm:max-h-[500px]"> 3257 <span 3258 class="cursor-pointer px-5 py-2 text-base hover:bg-gray-100" 3259 v-for="currency in currencies" 3260 :class="{'bg-gray-100': currency.code == 'MXN'}" 3261 @click="change(currency)" 3262 > 3263 {{ currency.symbol + ' ' + currency.code }} 3264 </span> 3265 </div> 3266 </script>
3266 3267 3268
3268<script 3269 type="text/x-template" 3270 id="v-locale-switcher-template" 3271 > 3272 <div class="my-2.5 grid gap-1 overflow-auto max-md:my-0 sm:max-h-[500px]"> 3273 <span 3274 class="flex cursor-pointer items-center gap-2.5 px-5 py-2 text-base hover:bg-gray-100" 3275 :class="{'bg-gray-100': locale.code == 'es'}" 3276 v-for="locale in locales" 3277 @click="change(locale)" 3278 > 3279 <img 3280 :src="locale.logo_url || 'https://mismomentosdigitales.com/themes/shop/default/build/assets/default-language-BxH8WlkY.svg'" 3281 width="24" 3282 height="16" 3283 /> 3284 3285 {{ locale.name }} 3286 </span> 3287 </div> 3288 </script>
3288 3289 3290
3290<script type="module"> 3291 app.component('v-topbar', { 3292 template: '#v-topbar-template', 3293 3294 data() { 3295 return { 3296 localeToggler: '', 3297 3298 currencyToggler: '', 3299 }; 3300 }, 3301 }); 3302 3303 app.component('v-currency-switcher', { 3304 template: '#v-currency-switcher-template', 3305 3306 data() { 3307 return { 3308 currencies: [{"id":1,"code":"MXN","name":"Peso Mexicano","symbol":"$","decimal":2,"group_separator":",","decimal_separator":".","currency_position":null,"created_at":null,"updated_at":null,"pivot":{"channel_id":1,"currency_id":1}},{"id":7,"code":"USD","name":"D\u00f3lar Americano","symbol":"$","decimal":2,"group_separator":",","decimal_separator":".","currency_position":"left_with_space","created_at":"2025-09-11T23:24:35.000000Z","updated_at":"2025-09-11T23:25:51.000000Z","pivot":{"channel_id":1,"currency_id":7}}], 3309 }; 3310 }, 3311 3312 methods: { 3313 change(currency) { 3314 let url = new URL(window.location.href); 3315 3316 url.searchParams.set('currency', currency.code); 3317 3318 window.location.href = url.href; 3319 } 3320 } 3321 }); 3322 3323 app.component('v-locale-switcher', { 3324 template: '#v-locale-switcher-template', 3325 3326 data() { 3327 return { 3328 locales: [{"id":1,"code":"es","name":"Espa\u00f1ol","direction":"ltr","logo_path":"locales\/LfLD31j8GSn3EiuC0o9cjblFqdc1ZBKSYixeJFaD.png","created_at":null,"updated_at":null,"logo_url":"https:\/\/mismomentosdigitales.com\/storage\/locales\/LfLD31j8GSn3EiuC0o9cjblFqdc1ZBKSYixeJFaD.png","pivot":{"channel_id":1,"locale_id":1}},{"id":2,"code":"en","name":"Ingl\u00e9s","direction":"ltr","logo_path":"locales\/WRaQn0ILAH6uDfi3fcs4UzeFIl0p6cwpdyRxqxcO.png","created_at":null,"updated_at":null,"logo_url":"https:\/\/mismomentosdigitales.com\/storage\/locales\/WRaQn0ILAH6uDfi3fcs4UzeFIl0p6cwpdyRxqxcO.png","pivot":{"channel_id":1,"locale_id":2}}], 3329 }; 3330 }, 3331 3332 methods: { 3333 change(locale) { 3334 let url = new URL(window.location.href); 3335 3336 url.searchParams.set('locale', locale.code); 3337 3338 window.location.href = url.href; 3339 } 3340 } 3341 }); 3342 </script>
3342 3343
3343<script type="text/x-template" id="v-mobile-drawer-template"> 3344 <v-drawer 3345 @close="onDrawerClose" 3346 is-active="" 3347 position="left" 3348 width="100%" 3349> 3350 <template v-slot:toggle> 3351 <span class="icon-hamburger cursor-pointer text-2xl"></span> 3352 </template> 3353 3354 <template v-slot:header="{ close }"> 3355 <div class="grid gap-y-2.5 p-6 pb-5 max-md:gap-y-1.5 max-md:border-b max-md:border-zinc-200 max-md:p-4 max-md:gap-y-1 max-md:font-semibold"> 3356 <div class="flex items-center justify-between"> 3357 <a href="https://mismomentosdigitales.com"> 3358 <img 3359 src="https://mismomentosdigitales.com/storage/channel/1/LjkF6X4lat0B4tSpZ51CAs51dDDJOhSQhsWZRTDx.png" 3360 alt="Mis Momentos Digitales" 3361 width="131" 3362 height="29" 3363 > 3364 </a> 3365 </div> 3366 3367 <div class="absolute top-5 max-sm:top-4 ltr:right-5 rtl:left-5"> 3368 <span 3369 class="icon-cancel cursor-pointer text-3xl max-md:text-2xl" 3370 @click="close" 3371 > 3372 </span> 3373 </div> 3374 </div> 3375 </template> 3376 3377 <template v-slot:content> 3378 <div class="flex-1 overflow-auto px-6 max-md:px-4 !p-0"> 3379 <!-- Account Profile Hero Section --> 3380 <div class="border-b border-zinc-200 p-4"> 3381 <div class="grid grid-cols-[auto_1fr] items-center gap-4 roun
3381ded-xl border border-zinc-200 p-2.5"> 3382 <div> 3383 <img 3384 src="https://mismomentosdigitales.com/themes/shop/default/build/assets/user-placeholder-C_FiyGd9.png" 3385 class="h-[60px] w-[60px] rounded-full max-md:rounded-full" 3386 > 3387 </div> 3388 3389 <a 3390 href="https://mismomentosdigitales.com/customer/login" 3391 class="flex text-base font-medium" 3392 > 3393 Registrarse o iniciar sesión 3394 <i class="icon-double-arrow text-2xl ltr:ml-2.5 rtl:mr-2.5"></i> 3395 </a> 3396 3397 </div> 3398 </div> 3399 3400 3401 3402 <!-- Mobile category view --> 3403 <v-mobile-category ref="mobileCategory"></v-mobile-category> 3404 </div> 3405 </template> 3406 3407 <template v-slot:footer> 3408 <div class="pb-8 max-md:pb-2"> 3409 <!-- Localization & Currency Section --> 3410 <div class="fixed bottom-0 z-10 grid w-full max-w-full grid-cols-[1fr_auto_1fr] items-center justify-items-center border-t border-zinc-200 bg-white px-5 ltr:left-0 rtl:right-0"> 3411 <!-- Filter Drawer --> 3412 <v-drawer 3413 3414 is-active="" 3415 position="bottom" 3416 width="100%" 3417> 3418 <template v-slot:toggle> 3419 <div 3420 class="flex cursor-pointer items-center gap-x-2.5 px-2.5 py-3.5 text-lg font-medium uppercase max-md:py-3 max-sm:text-base" 3421 role="button" 3422 > 3423 $ MXN 3424 </div> 3425 </template> 3426 3427 <template v-slot:header="{ close }"> 3428 <div class="grid gap-y-2.5 p-6 pb-5 max-md:gap-y-1.5 max-md:border-b max-md:border-zinc-200 max-md:p-4 max-md:gap-y-1 max-md:font-semibold"> 3429 <div class="flex items-center justify-between"> 3430 <p class="text-lg font-semibold"> 3431 Monedas </p> 3432 </div> 3433 3434 <div class="absolute top-5 max-sm:top-4 ltr:right-5 rtl:left-5"> 3435 <span 3436 class="icon-cancel cursor-pointer text-3xl max-md:text-2xl" 3437 @click="close" 3438 > 3439 </span> 3440 </div> 3441 </div> 3442 </template> 3443 3444 <template v-slot:content> 3445 <div class="flex-1 overflow-auto px-6 max-md:px-4 !px-0"> 3446 <div 3447 class="overflow-auto" 3448 :style="{ height: getCurrentScreenHeight }" 3449 > 3450 <v-currency-switcher></v-currency-switcher> 3451 </div> 3452 </div> 3453 </template> 3454 3455 </v-drawer> 3456 3457 3458 <!-- Seperator --> 3459 <span class="h-5 w-0.5 bg-zinc-200"></span> 3460 3461 <!-- Sort Drawer --> 3462 <v-drawer 3463 3464 is-active="" 3465 position="bottom" 3466 width="100%" 3467> 3468 <template v-slot:toggle> 3469 <div 3470 class="flex cursor-pointer items-center gap-x-2.5 px-2.5 py-3.5 text-lg font-medium uppercase max-md:py-3 max-sm:text-base" 3471 role="button" 3472 > 3473 <img 3474 src="https://mismomentosdigitales.com/storage/locales/LfLD31j8GSn3EiuC0o9cjblFqdc1ZBKSYixeJFaD.png" 3475 class="h-full" 3476 alt="Default locale" 3477 width="24" 3478 height="16" 3479 /> 3480 3481 Español 3482 </div> 3483 </template> 3484 3485 <template v-slot:header="{ close }"> 3486 <div class="grid gap-y-2.5 p-6 pb-5 max-md:gap-y-1.5 max-md:border-b max-md:border-zinc-200 max-md:p-4 max-md:gap-y-1 max-md:font-semibold"> 3487 <div class="flex items-center justify-between"> 3488 <p class="text-lg font-semibold"> 3489 Idiomas </p> 3490 </div> 3491 3492 <div class="absolute top-5 max-sm:top-4 ltr:right-5 rtl:left-5">
3493 <span 3494 class="icon-cancel cursor-pointer text-3xl max-md:text-2xl" 3495 @click="close" 3496 > 3497 </span> 3498 </div> 3499 </div> 3500 </template> 3501 3502 <template v-slot:content> 3503 <div class="flex-1 overflow-auto px-6 max-md:px-4 !px-0"> 3504 <div 3505 class="overflow-auto" 3506 :style="{ height: getCurrentScreenHeight }" 3507 > 3508 <v-locale-switcher></v-locale-switcher> 3509 </div> 3510 </div> 3511 </template> 3512 3513 </v-drawer> 3514 3515 </div> 3516 </div> 3517 </template> 3518 </v-drawer> 3519 3520 </script>
3520 3521 3522
3522<script 3523 type="text/x-template" 3524 id="v-mobile-category-template" 3525 > 3526 <!-- Wrapper with transition effects --> 3527 <div class="relative h-full overflow-hidden"> 3528 <!-- Sliding container --> 3529 <div 3530 class="flex h-full transition-transform duration-300" 3531 :class="{ 3532 'ltr:translate-x-0 rtl:translate-x-0': currentViewLevel !== 'third', 3533 'ltr:-translate-x-full rtl:translate-x-full': currentViewLevel === 'third' 3534 }" 3535 > 3536 <!-- First level view --> 3537 <div class="h-full w-full flex-shrink-0 overflow-auto px-6"> 3538 <div class="py-4"> 3539 <div 3540 v-for="category in categories" 3541 :key="category.id" 3542 :class="{'mb-2': category.children && category.children.length}" 3543 > 3544 <div class="flex cursor-pointer items-center justify-between py-2 transition-colors duration-200"> 3545 <a :href="category.url" class="text-base font-medium text-black"> 3546 {{ category.name }} 3547 </a> 3548 </div> 3549 3550 <!-- Second Level Categories --> 3551 <div v-if="category.children && category.children.length" > 3552 <div 3553 v-for="secondLevelCategory in category.children" 3554 :key="secondLevelCategory.id" 3555 > 3556 <div 3557 class="flex cursor-pointer items-center justify-between py-2 transition-colors duration-200" 3558 @click="showThirdLevel(secondLevelCategory, category, $event)" 3559 > 3560 <a :href="secondLevelCategory.url" class="text-sm font-normal"> 3561 {{ secondLevelCategory.name }} 3562 </a> 3563 3564 <span 3565 v-if="secondLevelCategory.children && secondLevelCategory.children.length" 3566 class="icon-arrow-right rtl:icon-arrow-left" 3567 ></span> 3568 </div> 3569 </div> 3570 </div> 3571 </div> 3572 </div> 3573 </div> 3574 3575 <!-- Third level view --> 3576 <div 3577 class="h-full w-full flex-shrink-0" 3578 v-if="currentViewLevel === 'third'" 3579 > 3580 <div class="border-b border-gray-200 px-6 py-4"> 3581 <button 3582 @click="goBackToMainView" 3583 class="flex items-center justify-center gap-2 focus:outline-none" 3584 aria-label="Go back" 3585 > 3586 <span class="icon-arrow-left rtl:icon-arrow-right text-lg"></span> 3587 <div class="text-base font-medium text-black"> 3588 Volver al menú principal </div> 3589 </button> 3590 </div> 3591 3592 <!-- Third Level Content --> 3593 <div class="px-6 py-4"> 3594 <div 3595 v-for="thirdLevelCategory in currentSecondLevelCategory?.children" 3596 :key="thirdLevelCategory.id" 3597 class="mb-2" 3598 > 3599 <a 3600 :href="thirdLevelCategory.url" 3601 class="block py-2 text-sm transition-colors duration-200" 3602 > 3603 {{ thirdLevelCategory.name }} 3604 </a> 3605 </div> 3606 </div> 3607 </div> 3608 </div> 3609 </div> 3610 </script>
3610 3611 3612
3612<script type="module"> 3613 app.component('v-mobile-category', { 3614 template: '#v-mobile-category-template', 3615 3616 data() { 3617 return { 3618 categories: [], 3619 currentViewLevel: 'main', 3620 currentSecondLevelCategory: null, 3621 currentParentCategory: null 3622 } 3623 }, 3624 3625 mounted() { 3626 this.getCategories(); 3627 }, 3628 3629 computed: { 3630 getCurrentScreenHeight() { 3631 return window.innerHeight - (window.innerWidth < 920 ? 61 : 0) + 'px'; 3632 }, 3633 }, 3634 3635 methods: { 3636 getCategories() { 3637 this.$axios.get("https://mismomentosdigitales.com/api/categories/tree") 3638 .then(response => { 3639 this.categories = response.data.data; 3640 }) 3641 .catch(error => { 3642 console.log(error); 3643 }); 3644 }, 3645 3646 showThirdLevel(secondLevelCategory, parentCategory, event) { 3647 if (secondLevelCategory.children && secondLevelCategory.children.length) { 3648 this.currentSecondLevelCategory = secondLevelCategory; 3649 this.currentParentCategory = parentCategory; 3650 this.currentViewLevel = 'third'; 3651 3652 if (event) { 3653 event.preventDefault(); 3654 event.stopPropagation(); 3655 } 3656 } 3657 }, 3658 3659 goBackToMainView() { 3660 this.currentViewLevel = 'main'; 3661 } 3662 }, 3663 }); 3664 3665 app.component('v-mobile-drawer', { 3666 template: '#v-mobile-drawer-template', 3667 3668 methods: { 3669 onDrawerClose() { 3670 this.$refs.mobileCategory.currentViewLevel = 'main'; 3671 } 3672 }, 3673 }); 3674 </script>
3674 3675
3675<script 3676 type="text/x-template" 3677 id="v-accordion-template" 3678 > 3679 <div> 3680 <slot 3681 name="header" 3682 :toggle="toggle" 3683 :isOpen="isOpen" 3684 > 3685 admin::app.components.accordion.default-content </slot> 3686 3687 <slot 3688 name="content" 3689 :isOpen="isOpen" 3690 > 3691 admin::app.components.accordion.default-content </slot> 3692 </div> 3693 </script>
3693 3694 3695
3695<script type="module"> 3696 app.component('v-accordion', { 3697 template: '#v-accordion-template', 3698 3699 props: [ 3700 'isActive', 3701 ], 3702 3703 data() { 3704 return { 3705 isOpen: this.isActive, 3706 }; 3707 }, 3708 3709 methods: { 3710 toggle() { 3711 this.isOpen = ! this.isOpen; 3712 3713 this.$emit('toggle', { isActive: this.isOpen }); 3714 }, 3715 }, 3716 }); 3717 </script>
3717 3718
3718<script 3719 type="text/x-template" 3720 id="v-dropdown-template" 3721 > 3722 <div> 3723 <div 3724 class="select-none" 3725 ref="toggleBlock" 3726 @click="toggle()" 3727 > 3728 <slot name="toggle">Toggle</slot> 3729 </div> 3730 3731 <transition 3732 tag="div" 3733 name="dropdown" 3734 enter-active-class="transition duration-100 ease-out" 3735 enter-from-class="scale-95 transform opacity-0" 3736 enter-to-class="scale-100 transform opacity-100" 3737 leave-active-class="transition duration-75 ease-in" 3738 leave-from-class="scale-100 transform opacity-100" 3739 leave-to-class="scale-95 transform opacity-0" 3740 > 3741 <div 3742 class="absolute z-20 w-max rounded-[20px] bg-white shadow-[0px_10px_84px_rgba(0,0,0,0.1)] max-md:rounded-lg" 3743 :style="positionStyles" 3744 v-show="isActive" 3745 > 3746 <slot name="content"></slot> 3747 3748 <slot name="menu"></slot> 3749 </div> 3750 </transition> 3751 </div> 3752 </script>
3752 3753 3754
3754<script type="module"> 3755 app.component('v-dropdown', { 3756 template: '#v-dropdown-template', 3757 3758 props: { 3759 position: String, 3760 3761 closeOnClick: { 3762 type: Boolean, 3763 required: false, 3764 default: true 3765 }, 3766 }, 3767 3768 data() { 3769 return { 3770 toggleBlockWidth: 0, 3771 3772 toggleBlockHeight: 0, 3773 3774 isActive: false, 3775 }; 3776 }, 3777 3778 created() { 3779 window.addEventListener('click', this.handleFocusOut); 3780 }, 3781 3782 mounted() { 3783 this.toggleBlockWidth = this.$refs.toggleBlock.clientWidth; 3784 3785 this.toggleBlockHeight = this.$refs.toggleBlock.clientHeight; 3786 }, 3787 3788 beforeDestroy() { 3789 window.removeEventListener('click', this.handleFocusOut); 3790 }, 3791 3792 computed: { 3793 positionStyles() { 3794 switch (this.position) { 3795 case 'bottom-left': 3796 return [ 3797 `min-width: ${this.toggleBlockWidth}px`, 3798 `top: ${this.toggleBlockHeight}px`, 3799 'left: 0', 3800 ]; 3801 3802 case 'bottom-right': 3803 return [ 3804 `min-width: ${this.toggleBlockWidth}px`, 3805 `top: ${this.toggleBlockHeight}px`, 3806 'right: 0', 3807 ]; 3808 3809 case 'top-left': 3810 return [ 3811 `min-width: ${this.toggleBlockWidth}px`, 3812 `bottom: ${this.toggleBlockHeight}px`, 3813 'left: 0', 3814 ]; 3815 3816 case 'top-right': 3817 return [ 3818 `min-width: ${this.toggleBlockWidth}px`, 3819 `bottom: ${this.toggleBlockHeight}px`, 3820 'right: 0', 3821 ]; 3822 3823 default: 3824 return [ 3825 `min-width: ${this.toggleBlockWidth}px`, 3826 `top: ${this.toggleBlockHeight}px`, 3827 'left: 0', 3828 ]; 3829 } 3830 }, 3831 }, 3832 3833 methods: { 3834 toggle() { 3835 /** 3836 * If still somehow width is zero then this will check for width one more time. 3837 */ 3838 if (this.toggleBlockWidth === 0) { 3839 this.toggleBlockWidth = this.$refs.toggleBlock.clientWidth; 3840 } 3841 3842 /** 3843 * If still somehow height is zero then this will check for height one more time. 3844 */ 3845 if (this.toggleBlockHeight === 0) { 3846 this.toggleBlockHeight = this.$refs.toggleBlock.clientHeight; 3847 } 3848 3849 this.isActive = ! this.isActive; 3850 }, 3851 3852 handleFocusOut(e) { 3853 if (! this.$el.contains(e.target) || (this.closeOnClick && this.$el.children[1].contains(e.target))) { 3854 this.isActive = false; 3855 } 3856 }, 3857 }, 3858 }); 3859 </script>
3859 3860
3860<script 3861 type="text/x-template" 3862 id="v-desktop-category-template" 3863 > 3864 <!-- Loading State --> 3865 <div 3866 class="flex items-center gap-5" 3867 v-if="isLoading" 3868 > 3869 <span 3870 class="shimmer h-6 w-20 rounded" 3871 role="presentation" 3872 ></span> 3873 3874 <span 3875 class="shimmer h-6 w-20 rounded" 3876 role="presentation" 3877 ></span> 3878 3879 <span 3880 class="shimmer h-6 w-20 rounded" 3881 role="presentation" 3882 ></span> 3883 </div> 3884 3885 <!-- Default category layout --> 3886 <div 3887 class="flex items-center" 3888 v-else-if="'default' !== 'sidebar'" 3889 > 3890 <div 3891 class="group relative flex h-[77px] items-center border-b-4 border-transparent hover:border-b-4 hover:border-navyBlue" 3892 v-for="category in categories" 3893 > 3894 <span> 3895 <a 3896 :href="category.url" 3897 class="inline-block px-5 uppercase" 3898 > 3899 {{ category.name }} 3900 </a> 3901 </span> 3902 3903 <div 3904 class="pointer-events-none absolute top-[78px] z-[1] max-h-[580px] w-max max-w-[1260px] translate-y-1 overflow-auto overflow-x-auto border border-b-0 border-l-0 border-r-0 border-t border-[#F3F3F3] bg-white p-9 opacity-0 shadow-[0_6px_6px_1px_rgba(0,0,0,.3)] transition duration-300 ease-out group-hover:pointer-events-auto group-hover:translate-y-0 group-hover:opacity-100 group-hover:duration-200 group-hover:ease-in ltr:-left-9 rtl:-right-9" 3905 v-if="category.children && category.children.length" 3906 > 3907 <div class="flex justify-between gap-x-[70px]"> 3908 <div 3909 class="grid w-full min-w-max max-w-[150px] flex-auto grid-cols-[1fr] content-start gap-5" 3910 v-for="pairCategoryChildren in pairCategoryChildren(category)" 3911 > 3912 <template v-for="secondLevelCategory in pairCategoryChildren"> 3913 <p class="font-medium text-navyBlue"> 3914 <a :href="secondLevelCategory.url"> 3915 {{ secondLevelCategory.name }} 3916 </a> 3917 </p> 3918 3919 <ul 3920 class="grid grid-cols-[1fr] gap-3" 3921 v-if="secondLevelCategory.children && secondLevelCategory.children.length" 3922 > 3923 <li 3924 class="text-sm font-medium text-zinc-500" 3925 v-for="thirdLevelCategory in secondLevelCategory.children" 3926 > 3927 <a :href="thirdLevelCategory.url"> 3928 {{ thirdLevelCategory.name }} 3929 </a> 3930 </li> 3931 </ul> 3932 </template> 3933 </div> 3934 </div> 3935 </div> 3936 </div> 3937 </div> 3938 3939 <!-- Sidebar category layout --> 3940 <div v-else> 3941 <!-- Categories Navigation --> 3942 <div class="flex items-center"> 3943 <!-- "All" button for opening the category drawer --> 3944 <div 3945 class="flex h-[77px] cursor-pointer items-center border-b-4 border-transparent hover:border-b-4 hover:border-navyBlue" 3946 @click="toggleCategoryDrawer" 3947 > 3948 <span class="flex items-center gap-1 px-5 uppercase"> 3949 <span class="icon-hamburger text-xl"></span> 3950 3951 Todo </span> 3952 </div> 3953 3954 <!-- Show only first 4 categories in main navigation --> 3955 <div 3956 class="group relative flex h-[77px] items-center border-b-4 border-transparent hover:border-b-4 hover:border-navyBlue" 3957 v-for="category in categories.slice(0, 4)" 3958 >
3959 <span> 3960 <a 3961 :href="category.url" 3962 class="inline-block px-5 uppercase" 3963 > 3964 {{ category.name }} 3965 </a> 3966 </span> 3967 3968 <!-- Dropdown for each category --> 3969 <div 3970 class="pointer-events-none absolute top-[78px] z-[1] max-h-[580px] w-max max-w-[1260px] translate-y-1 overflow-auto overflow-x-auto border border-b-0 border-l-0 border-r-0 border-t border-[#F3F3F3] bg-white p-9 opacity-0 shadow-[0_6px_6px_1px_rgba(0,0,0,.3)] transition duration-300 ease-out group-hover:pointer-events-auto group-hover:translate-y-0 group-hover:opacity-100 group-hover:duration-200 group-hover:ease-in ltr:-left-9 rtl:-right-9" 3971 v-if="category.children && category.children.length" 3972 > 3973 <div class="flex justify-between gap-x-[70px]"> 3974 <div 3975 class="grid w-full min-w-max max-w-[150px] flex-auto grid-cols-[1fr] content-start gap-5" 3976 v-for="pairCategoryChildren in pairCategoryChildren(category)" 3977 > 3978 <template v-for="secondLevelCategory in pairCategoryChildren"> 3979 <p class="font-medium text-navyBlue"> 3980 <a :href="secondLevelCategory.url"> 3981 {{ secondLevelCategory.name }} 3982 </a> 3983 </p> 3984 3985 <ul 3986 class="grid grid-cols-[1fr] gap-3" 3987 v-if="secondLevelCategory.children && secondLevelCategory.children.length" 3988 > 3989 <li 3990 class="text-sm font-medium text-zinc-500" 3991 v-for="thirdLevelCategory in secondLevelCategory.children" 3992 > 3993 <a :href="thirdLevelCategory.url"> 3994 {{ thirdLevelCategory.name }} 3995 </a> 3996 </li> 3997 </ul> 3998 </template> 3999 </div> 4000 </div> 4001 </div> 4002 </div> 4003 </div> 4004 4005 <!-- Bagisto Drawer Integration --> 4006 <v-drawer 4007 :is-active="isDrawerActive" @toggle="onDrawerToggle" @close="onDrawerClose" 4008 is-active="" 4009 position="left" 4010 width="400px" 4011> 4012 <template v-slot:toggle> 4013 4014 </template> 4015 4016 <template v-slot:header="{ close }"> 4017 <div class="grid gap-y-2.5 p-6 pb-5 max-md:gap-y-1.5 max-md:border-b max-md:border-zinc-200 max-md:p-4 max-md:gap-y-1 max-md:font-semibold border-b border-gray-200"> 4018 <div class="flex w-full items-center justify-between"> 4019 <p class="text-xl font-medium"> 4020 CategorÃas </p> 4021 </div> 4022 4023 <div class="absolute top-5 max-sm:top-4 ltr:right-5 rtl:left-5"> 4024 <span 4025 class="icon-cancel cursor-pointer text-3xl max-md:text-2xl" 4026 @click="close" 4027 > 4028 </span> 4029 </div> 4030 </div> 4031 </template> 4032 4033 <template v-slot:content> 4034 <div class="flex-1 overflow-auto px-6 max-md:px-4 !px-0"> 4035 <!-- Wrapper with transition effects --> 4036 <div class="relative h-full overflow-hidden"> 4037 <!-- Sliding container --> 4038 <div 4039 class="flex h-full transition-transform duration-300" 4040 :class="{ 4041 'ltr:translate-x-0 rtl:translate-x-0': currentViewLevel !== 'third', 4042 'ltr:-translate-x-full rtl:translate-x-full': currentViewLevel === 'third' 4043 }" 4044 > 4045 <!-- First level view --> 4046 <div class="h-[calc(100vh-74px)] w-full flex-shrink-0 overflow-auto"> 4047 <div class="py-4"> 4048 <div 4049 v-for="category in categories" 4050 :key="category.id" 4051 :class="{'mb-2': category.children && category.children.length}" 4052 > 4053 <div class="flex cursor-pointer items-center justify-between px-6 py-2 transition-colors duration-200 hover:bg-gray-100"> 4054 <a 4055 :href="category.url" 4056 class="text-base font-medium text-black" 4057 > 4058 {{ category.name }} 4059 </a> 4060 </div> 4061 4062 <!-- Second Level Categories --> 4063 <div v-if="category.children && category.children.length" > 4064 <div 4065 v-for="secondLevelCategory in category.children" 4066 :key="secondLevelCategory.id" 4067 > 4068 <div 4069 class="flex cursor-pointer items-center justify-between px-6 py-2 transition-colors duration-200 hover:bg-gray-100" 4070 @click="showThirdLevel(secondLevelCategory, c
4070ategory, $event)" 4071 > 4072 <a 4073 :href="secondLevelCategory.url" 4074 class="text-sm font-normal" 4075 > 4076 {{ secondLevelCategory.name }} 4077 </a> 4078 4079 <span 4080 v-if="secondLevelCategory.children && secondLevelCategory.children.length" 4081 class="icon-arrow-right rtl:icon-arrow-left" 4082 ></span> 4083 </div> 4084 </div> 4085 </div> 4086 </div> 4087 </div> 4088 </div> 4089 4090 <!-- Third level view --> 4091 <div 4092 class="h-full w-full flex-shrink-0" 4093 v-if="currentViewLevel === 'third'" 4094 > 4095 <div class="border-b border-gray-200 px-6 py-4"> 4096 <button 4097 @click="goBackToMainView" 4098 class="flex items-center justify-center gap-2 focus:outline-none" 4099 aria-label="Go back" 4100 > 4101 <span class="icon-arrow-left rtl:icon-arrow-right text-lg"></span> 4102 4103 <p class="text-base font-medium text-black"> 4104 Volver al menú principal </p> 4105 </button> 4106 </div> 4107 4108 <!-- Third Level Content --> 4109 <div class="py-4"> 4110 <div 4111 v-for="thirdLevelCategory in currentSecondLevelCategory?.children" 4112 :key="thirdLevelCategory.id" 4113 class="mb-2" 4114 > 4115 <a 4116 :href="thirdLevelCategory.url" 4117 class="block px-6 py-2 text-sm transition-colors duration-200 hover:bg-gray-100" 4118 > 4119 {{ thirdLevelCategory.name }} 4120 </a> 4121 </div> 4122 </div> 4123 </div> 4124 </div> 4125 </div> 4126 </div> 4127 </template> 4128 4129 </v-drawer> 4130 4131 </div> 4132 </script>
4132 4133 4134
4134<script type="module"> 4135 app.component('v-desktop-category', { 4136 template: '#v-desktop-category-template', 4137 4138 data() { 4139 return { 4140 isLoading: true, 4141 categories: [], 4142 isDrawerActive: false, 4143 currentViewLevel: 'main', 4144 currentSecondLevelCategory: null, 4145 currentParentCategory: null 4146 } 4147 }, 4148 4149 mounted() { 4150 this.getCategories(); 4151 }, 4152 4153 methods: { 4154 getCategories() { 4155 this.$axios.get("https://mismomentosdigitales.com/api/categories/tree") 4156 .then(response => { 4157 this.isLoading = false; 4158 this.categories = response.data.data; 4159 }) 4160 .catch(error => { 4161 console.log(error); 4162 }); 4163 }, 4164 4165 pairCategoryChildren(category) { 4166 if (! category.children) return []; 4167 4168 return category.children.reduce((result, value, index, array) => { 4169 if (index % 2 === 0) { 4170 result.push(array.slice(index, index + 2)); 4171 } 4172 return result; 4173 }, []); 4174 }, 4175 4176 toggleCategoryDrawer() { 4177 this.isDrawerActive = !this.isDrawerActive; 4178 if (this.isDrawerActive) { 4179 this.currentViewLevel = 'main'; 4180 } 4181 }, 4182 4183 onDrawerToggle(event) { 4184 this.isDrawerActive = event.isActive; 4185 }, 4186 4187 onDrawerClose(event) { 4188 this.isDrawerActive = false; 4189 }, 4190 4191 showThirdLevel(secondLevelCategory, parentCategory, event) { 4192 if (secondLevelCategory.children && secondLevelCategory.children.length) { 4193 this.currentSecondLevelCategory = secondLevelCategory; 4194 this.currentParentCategory = parentCategory; 4195 this.currentViewLevel = 'third'; 4196 4197 if (event) { 4198 event.preventDefault(); 4199 event.stopPropagation(); 4200 } 4201 } 4202 }, 4203 4204 goBackToMainView() { 4205 this.currentViewLevel = 'main'; 4206 } 4207 }, 4208 }); 4209 </script>
4209 4210
4210<script 4211 type="text/x-template" 4212 id="v-image-search-template" 4213 > 4214 <div> 4215 <label 4216 class="icon-camera absolute top-3 flex items-center text-xl max-sm:top-2.5 ltr:right-3 ltr:pr-3 max-md:ltr:right-1.5 rtl:left-3 rtl:pl-3 max-md:rtl:left-1.5" 4217 aria-label="Buscar" 4218 :for="'v-image-search-' + $.uid" 4219 v-if="! isSearching" 4220 > 4221 </label> 4222 4223 <label 4224 class="absolute top-2.5 flex cursor-pointer items-center text-xl ltr:right-3 ltr:pr-3 max-md:ltr:pr-1 rtl:left-3 rtl:pl-3 max-md:rtl:pl-1" 4225 v-else 4226 > 4227 <!-- Spinner --> 4228 <svg 4229 class="h-5 w-5 animate-spin text-black" 4230 xmlns="http://www.w3.org/2000/svg" 4231 fill="none" 4232 viewBox="0 0 24 24" 4233 > 4234 <circle 4235 class="opacity-25" 4236 cx="12" 4237 cy="12" 4238 r="10" 4239 stroke="currentColor" 4240 stroke-width="4" 4241 > 4242 </circle> 4243 4244 <path 4245 class="opacity-75" 4246 fill="currentColor" 4247 d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z" 4248 > 4249 </path> 4250 </svg> 4251 </label> 4252 4253 <input 4254 type="file" 4255 class="hidden" 4256 ref="imageSearchInput" 4257 :id="'v-image-search-' + $.uid" 4258 @change="loadLibrary()" 4259 /> 4260 4261 <img 4262 id="uploaded-image-url" 4263 class="hidden" 4264 :src="uploadedImageUrl" 4265 alt="uploaded image url" 4266 width="20" 4267 height="20" 4268 /> 4269 </div> 4270 </script>
4270 4271 4272
4272<script type="module"> 4273 app.component('v-image-search', { 4274 template: '#v-image-search-template', 4275 4276 data() { 4277 return { 4278 uploadedImageUrl: '', 4279 4280 isSearching: false, 4281 }; 4282 }, 4283 4284 methods: { 4285 /** 4286 * This method will dynamically load the scripts. Because image search library 4287 * only used when someone clicks or interact with the image button. This will 4288 * reduce some data usage for mobile user. 4289 * 4290 * @return {void} 4291 */ 4292 loadLibrary() { 4293 this.$shop.loadDynamicScript( 4294 'https://cdn.jsdelivr.net/npm/@tensorflow/tfjs@latest/dist/tf.min.js', () => { 4295 this.$shop.loadDynamicScript( 4296 'https://cdn.jsdelivr.net/npm/[email protected]/dist/mobilenet.min.js', () => { 4297 this.analyzeImage(); 4298 } 4299 ); 4300 } 4301 ); 4302 }, 4303 4304 /** 4305 * This method will analyze the image and load the sets on the bases of trained model. 4306 * 4307 * @return {void} 4308 */ 4309 analyzeImage() { 4310 this.isSearching = true; 4311 4312 let imageInput = this.$refs.imageSearchInput; 4313 4314 if (imageInput.files && imageInput.files[0]) { 4315 if (imageInput.files[0].type.includes('image/')) { 4316 if (imageInput.files[0].size <= 2000000) { 4317 let formData = new FormData(); 4318 4319 formData.append('image', imageInput.files[0]); 4320 4321 this.$axios.post('https://mismomentosdigitales.com/search/upload', formData, { 4322 headers: { 4323 'Content-Type': 'multipart/form-data' 4324 } 4325 }) 4326 .then(response => { 4327 let net; 4328 4329 let self = this; 4330 4331 this.uploadedImageUrl = response.data; 4332 4333 async function app() { 4334 let analysedResult = []; 4335 4336 let queryString = ''; 4337 4338 net = await mobilenet.load(); 4339 4340 try { 4341 const result = await net.classify(document.getElementById('uploaded-image-url')); 4342 4343 result.forEach(function(value) { 4344 queryString = value.className.split(','); 4345 4346 if (queryString.length > 1) { 4347 analysedResult = analysedResult.concat(queryString); 4348 } else { 4349 analysedResult.push(queryString[0]); 4350 } 4351 }); 4352 } catch (error) { 4353 this.$emitter.emit('add-flash', { type: 'error', message: "Algo salió mal, por favor inténtelo de nuevo más tarde."}); 4354 } 4355 4356 localStorage.searchedImageUrl = self.uploadedImageUrl; 4357 4358 queryString = localStorage.searchedTerms = analysedResult.join('_'); 4359 4360 queryString = localStorage.searchedTerms.split('_').map(term => { 4361 return term.split(' ').join('+'); 4362 }); 4363 4364 window.location.href = `${'https://mismomentosdigitales.com/search'}?query=${queryString[0]}&image-search=1`; 4365 } 4366 4367 app(); 4368 }) 4369 .catch((error) => { 4370 this.$emitter.emit('add-flash', { type: 'error', message: "Algo salió mal, por favor inténtelo de nuevo más tarde."}); 4371 4372 this.isSearching = false;
4373 }); 4374 } else { 4375 imageInput.value = ''; 4376 4377 this.$emitter.emit('add-flash', { type: 'error', message: 'Error de lÃmite de tamaño'}); 4378 4379 this.isSearching = false; 4380 } 4381 } else { 4382 imageInput.value = ''; 4383 4384 this.$emitter.emit('add-flash', { type: 'error', message: 'Solo se permiten imágenes (.jpeg, .jpg, .png, ..).'}); 4385 4386 this.isSearching = false; 4387 } 4388 } 4389 }, 4390 }, 4391 }); 4392 </script>
4392 4393
4393<script 4394 type="text/x-template" 4395 id="v-mini-cart-template" 4396 > 4397 4398 4399 <v-drawer 4400 4401 is-active="" 4402 position="right" 4403 width="500px" 4404> 4405 <template v-slot:toggle> 4406 <span class="relative"> 4407 <span 4408 class="icon-cart cursor-pointer text-2xl" 4409 role="button" 4410 aria-label="Carrito de Compras" 4411 tabindex="0" 4412 ></span> 4413 4414 <span 4415 class="absolute -top-4 rounded-[44px] bg-navyBlue px-2 py-1.5 text-xs font-semibold leading-[9px] text-white ltr:left-5 rtl:right-5 max-md:px-2 max-md:py-1.5 max-md:ltr:left-4 max-md:rtl:right-4" 4416 v-if="cart?.items_count" 4417 > 4418 {{ cart.items_count }} 4419 </span> 4420 </span> 4421 </template> 4422 4423 <template v-slot:header="{ close }"> 4424 <div class="grid gap-y-2.5 p-6 pb-5 max-md:gap-y-1.5 max-md:border-b max-md:border-zinc-200 max-md:p-4 max-md:gap-y-1 max-md:font-semibold"> 4425 <div class="flex items-center justify-between"> 4426 <p class="text-2xl font-medium max-md:text-xl max-sm:text-xl"> 4427 Carrito de Compras </p> 4428 </div> 4429 4430 <p class="text-base max-md:text-zinc-500 max-sm:text-xs"> 4431 15% OFF APPLYING THE COUPON: FIESTAS2026 4432 </p> 4433 4434 <div class="absolute top-5 max-sm:top-4 ltr:right-5 rtl:left-5"> 4435 <span 4436 class="icon-cancel cursor-pointer text-3xl max-md:text-2xl" 4437 @click="close" 4438 > 4439 </span> 4440 </div> 4441 </div> 4442 </template> 4443 4444 <template v-slot:content> 4445 <div class="flex-1 overflow-auto px-6 max-md:px-4"> 4446 <!-- Cart Item Listing --> 4447 <div 4448 class="mt-9 grid gap-12 max-md:mt-2.5 max-md:gap-5" 4449 v-if="cart?.items?.length" 4450 > 4451 <div 4452 class="flex gap-x-5 max-md:gap-x-4" 4453 v-for="item in cart?.items" 4454 > 4455 <!-- Cart Item Image --> 4456 4457 4458 <div class=""> 4459 <a :href="`https://mismomentosdigitales.com/${item.product_url_key}`"> 4460 <img 4461 :src="item.base_image.small_image_url" 4462 class="max-w-28 max-h-28 rounded-xl max-md:max-h-20 max-md:max-w-[76px]" 4463 /> 4464 </a> 4465 </div> 4466 4467 4468 4469 <!-- Cart Item Information --> 4470 <div class="grid flex-1 place-content-start justify-stretch gap-y-2.5"> 4471 <div class="flex justify-between gap-2 max-md:gap-0 max-sm:flex-wrap"> 4472 4473 4474 4475 <a 4476 class="max-w-4/5 max-md:w-full" 4477 :href="`https://mismomentosdigitales.com/${item.product_url_key}`" 4478 > 4479 <p class="text-base font-medium max-md:font-normal max-sm:text-sm"> 4480 {{ item.name }} 4481 </p> 4482 </a> 4483 4484 4485 4486 4487 4488 <template v-if="displayTax.prices == 'including_tax'"> 4489 <p class="text-lg max-md:font-semibold max-sm:text-sm"> 4490 {{ item.formatted_price_incl_tax }} 4491 </p> 4492 </template> 4493 4494 <template v-else-if="displayTax.prices == 'both'"> 4495 <p class="flex flex-col text-lg max-md:font-semibold max-sm:text-sm"> 4496 {{ item.formatted_price_incl_tax }} 4497
4498 <span class="text-xs font-normal text-zinc-500"> 4499 Excl. Impuestos: 4500 <span class="font-medium text-black">{{ item.formatted_price }}</span> 4501 </span> 4502 </p> 4503 </template> 4504 4505 <template v-else> 4506 <p class="text-lg max-md:font-semibold max-sm:text-sm"> 4507 {{ item.formatted_price }} 4508 </p> 4509 </template> 4510 4511 4512 </div> 4513 4514 <!-- Cart Item Options Container --> 4515 <div 4516 class="grid select-none gap-x-2.5 gap-y-1.5 max-sm:gap-y-0.5" 4517 v-if="item.options.length" 4518 > 4519 4520 4521 4522 <!-- Details Toggler --> 4523 <div class=""> 4524 <p 4525 class="flex cursor-pointer items-center gap-x-4 text-base max-md:gap-x-1.5 max-md:text-sm max-sm:text-xs" 4526 @click="item.option_show = ! item.option_show" 4527 > 4528 Ver Detalles 4529 <span 4530 class="text-2xl max-md:text-xl max-sm:text-lg" 4531 :class="{'icon-arrow-up': item.option_show, 'icon-arrow-down': ! item.option_show}" 4532 ></span> 4533 </p> 4534 </div> 4535 4536 <!-- Option Details --> 4537 <div 4538 class="grid gap-2" 4539 v-show="item.option_show" 4540 > 4541 <template v-for="attribute in item.options"> 4542 <div class="max-md:grid max-md:gap-0.5"> 4543 <p class="text-sm font-medium text-zinc-500 max-md:font-normal max-sm:text-xs"> 4544 {{ attribute.attribute_name + ':' }} 4545 </p> 4546 4547 <p class="text-sm max-sm:text-xs"> 4548 <template v-if="attribute?.attribute_type === 'file'"> 4549 <a 4550 :href="attribute.file_url" 4551 class="text-blue-700" 4552 target="_blank" 4553 :download="attribute.file_name" 4554 > 4555 {{ attribute.file_name }} 4556 </a> 4557 </template> 4558 4559 <template v-else> 4560 {{ attribute.option_label }} 4561 </template> 4562 </p> 4563 </div> 4564 </template> 4565 </div> 4566 4567 4568 </div> 4569 4570 <div class="flex flex-wrap items-center gap-5 max-md:gap-2.5"> 4571 4572 4573 <!-- Cart Item Quantity Changer --> 4574 <v-quantity-changer 4575 class="flex items-center border border-navyBlue max-h-9 max-w-[150px] gap-x-2.5 rounded-[54px] px-3.5 py-1.5 max-md:gap-x-2 max-md:px-1 max-md:py-0.5" :value="item?.quantity" @change="updateItem($event, item)" 4576 name="quantity" 4577 value="1" 4578 min-value="1" 4579> 4580</v-quantity-changer> 4581 4582 4583 4584 4585 4586 4587 <!-- Cart Item Remove Button --> 4588 <button 4589 type="button" 4590 class="text-blue-700 max-md:text-sm" 4591 @click="removeItem(item.id)" 4592 > 4593 Eliminar </button> 4594 4595 4596 </div> 4597 </div> 4598 </div> 4599 </div> 4600 4601 <!-- Empty Cart Section --> 4602 <div 4603 class="mt-32 pb-8 max-md:mt-32" 4604 v-else 4605 > 4606 <div class="b-0 grid place-items-center gap-y-5 max-md:gap-y-0"> 4607 <img 4608 class="max-md:h-[100px] max-md:w-[100px]" 4609 src="https://mismomentosdigitales.com/themes/shop/default/build/assets/thank-you-mhMpuEVL.png" 4610 > 4611 4612 <p 4613 class="text-xl max-md:text-sm" 4614 role="heading" 4615 > 4616 Tu carrito está vacÃo </p> 4617 </div> 4618 </div> 4619 </div> 4620 </template> 4621 4622 <template v-slot:footer> 4623 <div class="pb-8 max-md:pb-2"> 4624 <div 4625 v-if="cart?.items?.length" 4626 class="grid-col-1 grid gap-5 max-md:gap-2.5" 4627 > 4628 <div 4629 class="my-8 flex items-center justify-between border-b border-zinc-200 px-6 pb-2 max-md:my-0 max-md:border-t max-md:px-5 max-md:py-2" 4630 :class="{'!justify-end': isLoading}" 4631 > 4632 4633 4634 <template v-if="! isLoading"> 4635 <p class="text-sm font-medium text-zinc-500"> 4636 Subtotal </p> 4637 4638 <template v-if="displayTax.subtotal == 'including_tax'"> 4639 <p class="text-3xl font-semibold max-md:text-base"> 4640 {{ cart.formatted_sub_total_incl_tax }} 4641 </p> 4642 </template> 4643 4644 <template v-else-if="displayTax.subtotal == 'both'"> 4645 <p class="flex flex-col text-3xl font-semibold max-md:text-sm max-sm:text-right"> 4646 {{ cart.formatted_sub_total_incl_tax }} 4647
4648 <span class="text-sm font-normal text-zinc-500 max-sm:text-xs"> 4649 Excl. Impuestos: 4650 <span class="font-medium text-black">{{ cart.formatted_sub_total }}</span> 4651 </span> 4652 </p> 4653 </template> 4654 4655 <template v-else> 4656 <p class="text-3xl font-semibold max-md:text-base"> 4657 {{ cart.formatted_sub_total }} 4658 </p> 4659 </template> 4660 </template> 4661 4662 <template v-else> 4663 <!-- Spinner --> 4664 <svg 4665 class="text-blue h-8 w-8 animate-spin text-[5px] font-semibold max-md:h-7 max-md:w-7 max-sm:h-4 max-sm:w-4" 4666 xmlns="http://www.w3.org/2000/svg" 4667 fill="none" 4668 aria-hidden="true"
4669 viewBox="0 0 24 24" 4670 > 4671 <circle 4672 class="opacity-25" 4673 cx="12" 4674 cy="12" 4675 r="10" 4676 stroke="currentColor" 4677 stroke-width="4" 4678 ></circle> 4679 4680 <path 4681 class="opacity-75" 4682 fill="currentColor" 4683 d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z" 4684 ></path> 4685 </svg> 4686 </template> 4687 4688 4689 </div> 4690 4691 4692 4693 <!-- Cart Action Container --> 4694 <div class="grid gap-2.5 px-6 max-md:px-4 max-sm:gap-1.5"> 4695 4696 4697 <a 4698 href="https://mismomentosdigitales.com/checkout/onepage" 4699 class="mx-auto block w-full cursor-pointer rounded-2xl bg-navyBlue px-11 py-4 text-center text-base font-medium text-white max-md:rounded-lg max-md:px-5 max-md:py-2" 4700 > 4701 Continuar con el Pago </a> 4702 4703 4704 4705 <div class="block cursor-pointer text-center text-base font-medium max-md:py-1.5"> 4706 <a href="https://mismomentosdigitales.com/checkout/cart"> 4707 Ver Carrito </a> 4708 </div> 4709 </div> 4710 4711 4712 </div> 4713 </div> 4714 </template> 4715 </v-drawer> 4716 4717 4718 4719 4720 </script>
4720 4721 4722
4722<script type="module"> 4723 app.component("v-mini-cart", { 4724 template: '#v-mini-cart-template', 4725 4726 data() { 4727 return { 4728 cart: null, 4729 4730 isLoading:false, 4731 4732 displayTax: { 4733 prices: "excluding_tax", 4734 subtotal: "excluding_tax", 4735 }, 4736 } 4737 }, 4738 4739 mounted() { 4740 this.getCart(); 4741 4742 /** 4743 * To Do: Implement this. 4744 * 4745 * Action. 4746 */ 4747 this.$emitter.on('update-mini-cart', (cart) => { 4748 this.cart = cart; 4749 }); 4750 }, 4751 4752 methods: { 4753 getCart() { 4754 this.$axios.get('https://mismomentosdigitales.com/api/checkout/cart') 4755 .then(response => { 4756 this.cart = response.data.data; 4757 }) 4758 .catch(error => {}); 4759 }, 4760 4761 updateItem(quantity, item) { 4762 this.isLoading = true; 4763 4764 let qty = {}; 4765 4766 qty[item.id] = quantity; 4767 4768 this.$axios.put('https://mismomentosdigitales.com/api/checkout/cart', { qty }) 4769 .then(response => { 4770 if (response.data.message) { 4771 this.cart = response.data.data; 4772 } else { 4773 this.$emitter.emit('add-flash', { type: 'warning', message: response.data.data.message }); 4774 } 4775 4776 this.isLoading = false; 4777 }).catch(error => this.isLoading = false); 4778 }, 4779 4780 removeItem(itemId) { 4781 this.$emitter.emit('open-confirm-modal', { 4782 agree: () => { 4783 this.isLoading = true; 4784 4785 this.$axios.post('https://mismomentosdigitales.com/api/checkout/cart', { 4786 '_method': 'DELETE', 4787 'cart_item_id': itemId, 4788 }) 4789 .then(response => { 4790 this.cart = response.data.data; 4791 4792 this.$emitter.emit('add-flash', { type: 'success', message: response.data.message }); 4793 4794 this.isLoading = false; 4795 }) 4796 .catch(error => { 4797 this.$emitter.emit('add-flash', { type: 'error', message: response.data.message }); 4798 4799 this.isLoading = false; 4800 }); 4801 } 4802 }); 4803 }, 4804 }, 4805 }); 4806 </script>
4806 4807
4807<script 4808 type="text/x-template" 4809 id="v-quantity-changer-template" 4810 > 4811 <div> 4812 <span 4813 class="icon-minus cursor-pointer text-2xl" 4814 role="button" 4815 tabindex="0" 4816 aria-label="Disminuir cantidad" 4817 @click="decrease" 4818 > 4819 </span> 4820 4821 <p class="w-2.5 select-none text-center max-sm:text-sm"> 4822 {{ quantity }} 4823 </p> 4824 4825 <span 4826 class="icon-plus cursor-pointer text-2xl" 4827 role="button" 4828 tabindex="0" 4829 aria-label="Aumentar cantidad" 4830 @click="increase" 4831 > 4832 </span> 4833 4834 <v-field 4835 type="hidden" 4836 :name="name" 4837 v-model="quantity" 4838 ></v-field> 4839 </div> 4840 </script>
4840 4841 4842
4842<script type="module"> 4843 app.component("v-quantity-changer", { 4844 template: '#v-quantity-changer-template', 4845 4846 props:['name', 'value', 'minValue'], 4847 4848 data() { 4849 return { 4850 quantity: this.value, 4851 } 4852 }, 4853 4854 watch: { 4855 value() { 4856 this.quantity = this.value; 4857 }, 4858 }, 4859 4860 methods: { 4861 increase() { 4862 this.$emit('change', ++this.quantity); 4863 }, 4864 4865 decrease() { 4866 if (this.quantity > this.minValue) { 4867 this.quantity -= 1; 4868 4869 this.$emit('change', this.quantity); 4870 } 4871 }, 4872 } 4873 }); 4874 </script>
4874 4875
4875<script 4876 type="text/x-template" 4877 id="v-drawer-template" 4878 > 4879 <div> 4880 <!-- Toggler --> 4881 <div @click="open"> 4882 <slot name="toggle"></slot> 4883 </div> 4884 4885 <!-- Overlay --> 4886 <transition 4887 tag="div" 4888 name="drawer-overlay" 4889 enter-class="duration-300 ease-out" 4890 enter-from-class="opacity-0" 4891 enter-to-class="opacity-100" 4892 leave-class="duration-200 ease-in" 4893 leave-from-class="opacity-100" 4894 leave-to-class="opacity-0" 4895 > 4896 <div 4897 class="fixed inset-0 z-20 bg-gray-500 bg-opacity-50 transition-opacity" 4898 v-show="isOpen" 4899 ></div> 4900 </transition> 4901 4902 <!-- Content --> 4903 <transition 4904 tag="div" 4905 name="drawer" 4906 :enter-from-class="enterFromLeaveToClasses" 4907 enter-active-class="transform transition duration-200 ease-in-out" 4908 enter-to-class="translate-x-0" 4909 leave-from-class="translate-x-0" 4910 leave-active-class="transform transition duration-200 ease-in-out" 4911 :leave-to-class="enterFromLeaveToClasses" 4912 > 4913 <div 4914 class="fixed z-[1000] overflow-hidden bg-white max-md:!w-full" 4915 :class="{ 4916 'inset-x-0 top-0': position == 'top', 4917 'inset-x-0 bottom-0 max-sm:max-h-full': position == 'bottom', 4918 'inset-y-0 ltr:right-0 rtl:left-0': position == 'right', 4919 'inset-y-0 ltr:left-0 rtl:right-0': position == 'left' 4920 }" 4921 :style="'width:' + width" 4922 v-show="isOpen" 4923 > 4924 <div class="pointer-events-auto h-full w-full overflow-auto bg-white"> 4925 <div class="flex h-full w-full flex-col"> 4926 <div class="min-h-0 min-w-0 flex-1 overflow-auto"> 4927 <div class="flex h-full flex-col"> 4928 <slot 4929 name="header" 4930 :close="close" 4931 > 4932 Default Header 4933 </slot> 4934 4935 <!-- Content Slot --> 4936 <slot name="content"></slot> 4937 4938 <!-- Footer Slot --> 4939 <slot name="footer"></slot> 4940 </div> 4941 </div> 4942 </div> 4943 </div> 4944 </div> 4945 </transition> 4946 </div> 4947 </script>
4947 4948 4949
4949<script type="module"> 4950 app.component('v-drawer', { 4951 template: '#v-drawer-template', 4952 4953 props: [ 4954 'isActive', 4955 'position', 4956 'width' 4957 ], 4958 4959 data() { 4960 return { 4961 isOpen: this.isActive, 4962 }; 4963 }, 4964 4965 watch: { 4966 isActive: function(newVal, oldVal) { 4967 this.isOpen = newVal; 4968 } 4969 }, 4970 4971 computed: { 4972 enterFromLeaveToClasses() { 4973 if (this.position == 'top') { 4974 return '-translate-y-full'; 4975 } else if (this.position == 'bottom') { 4976 return 'translate-y-full'; 4977 } else if (this.position == 'left') { 4978 return 'ltr:-translate-x-full rtl:translate-x-full'; 4979 } else if (this.position == 'right') { 4980 return 'ltr:translate-x-full rtl:-translate-x-full'; 4981 } 4982 } 4983 }, 4984 4985 methods: { 4986 toggle() { 4987 this.isOpen = ! this.isOpen; 4988 4989 if (this.isOpen) { 4990 document.body.style.overflow = 'hidden'; 4991 } else { 4992 document.body.style.overflow ='auto'; 4993 } 4994 4995 document.body.style.paddingRight = ''; 4996 4997 this.$emit('toggle', { isActive: this.isOpen }); 4998 }, 4999 5000 open() { 5001 this.isOpen = true; 5002 5003 const scrollbarWidth = window.innerWidth - document.documentElement.clientWidth; 5004 5005 document.body.style.overflow = 'hidden'; 5006 5007 document.body.style.paddingRight = `${scrollbarWidth}px`; 5008 5009 this.$emit('open', { isActive: this.isOpen }); 5010 }, 5011 5012 close() { 5013 this.isOpen = false; 5014 5015 document.body.style.overflow = 'auto'; 5016 5017 document.body.style.paddingRight = ''; 5018 5019 this.$emit('close', { isActive: this.isOpen }); 5020 } 5021 }, 5022 }); 5023 </script>
5023 5024 5025 5026
5026<script> 5027 /** 5028 * Load event, the purpose of using the event is to mount the application 5029 * after all of our `Vue` components which is present in blade file have 5030 * been registered in the app. No matter what `app.mount()` should be 5031 * called in the last. 5032 */ 5033 window.addEventListener("load", function (event) { 5034 app.mount("#app"); 5035 }); 5036 </script>
5036 5037 5038 5039 5040
5040<script type="text/javascript"> 5041 5042 </script>
5042 5043 5044 5045 5046 5047 <a href="https://wa.me/9851161077?text=Hola%2C+me+interesa+un+producto+de+Mis+Momentos+Digitales." target="_blank" rel="noopener nofollow" 5048 id="mm-wa-float" 5049 style=" 5050 position:fixed !important; 5051 right:16px !important; /* <- fuerza derecha */ 5052 left:auto !important; /* <- por si algún CSS ponÃa left */ 5053 bottom:16px !important; 5054 width:56px;height:56px;border-radius:9999px; 5055 background:#25D366; color:#fff; 5056 display:flex !important; align-items:center; justify-content:center; 5057 box-shadow:0 10px 24px rgba(0,0,0,.22); 5058 z-index:2147483647; /* muy por encima de cualquier overlay */ 5059 opacity:1 !important; visibility:visible !important; 5060 pointer-events:auto !important; 5061 " 5062 aria-label="WhatsApp"> 5063 <svg width="28" height="28" viewBox="0 0 32 32" 5064 style="display:block; color:#fff; fill:currentColor;"> 5065 <path d="M19.11 17.25c-.27-.14-1.6-.79-1.85-.88-.25-.09-.43-.14-.61.14-.18.27-.7.88-.86 1.06-.16.18-.32.2-.59.07-.27-.14-1.12-.41-2.14-1.31-.79-.7-1.32-1.57-1.48-1.83-.16-.27-.02-.42.12-.55.12-.12.27-.32.41-.48.14-.16.18-.27.27-.45.09-.18.05-.34-.02-.48-.07-.14-.61-1.47-.84-2.02-.22-.53-.44-.45-.61-.45-.16 0-.34-.02-.52-.02-.18 0-.48.07-.73.34-.25.27-.96.94-.96 2.29 0 1.35.99 2.65 1.13 2.83.14.18 1.95 2.99 4.72 4.2 2.78 1.2 2.78.8 3.28.77.5-.02 1.6-.65 1.83-1.28.23-.63.23-1.17.16-1.28-.07-.11-.25-.18-.52-.32z"/> 5066 <path d="M27.5 14.5c0 7.18-5.82 13-13 13-2.27 0-4.41-.6-6.24-1.65L4 27.98l2.24-4.11A12.95 12.95 0 0 1 1.5 14.5c0-7.18 5.82-13 13-13s13 5.82 13 13zm-13-10.5C8 4 4 8 4 13.5c0 2.29.89 4.38 2.35 5.95l-1.53 2.8 3.12-.98A10.45 10.45 0 0 0 14.5 24C20 24 24 20 24 14.5 24 9 20 4 14.5 4z"/> 5067 </svg> 5068</a> 5069 5070
5071<script> 5072if ('serviceWorker' in navigator) { 5073 navigator.serviceWorker.register('https://mismomentosdigitales.com/service-worker.js') 5074 .then(() => console.log('Service Worker registrado')) 5075 .catch(err => console.error('SW error:', err)); 5076} 5077</script>
vendor: 1 bytes, line 5077
5077
5078<script> 5079(function () { 5080 // Solo aplica cuando la app corre en modo standalone/TWA 5081 const isStandalone = 5082 window.matchMedia('(display-mode: standalone)').matches || 5083 (navigator.standalone === true); 5084 5085 if (!isStandalone) return; 5086 5087 // Intercepta clics en <a> 5088 document.addEventListener('click', function (e) { 5089 const a = e.target.closest('a[href]'); 5090 if (!a) return; 5091 5092 const url = new URL(a.getAttribute('href'), location.origin); 5093 5094 // Mismo origen -> abrir en la misma vista (evita target=_blank) 5095 if (url.origin === location.origin) { 5096 e.preventDefault(); 5097 window.location.assign(url.pathname + url.search + url.hash); 5098 } else { 5099 // Externo -> deja que abra fuera (Custom Tab) 5100 // Asegura seguridad 5101 a.setAttribute('rel', 'noopener noreferrer'); 5102 } 5103 }, true); 5104})(); 5105</script>
5105 5106 </body> 5107</html>
Line numbers count LF bytes from the start of the resource, as the search results do. Vendor segments are library code the classifier recognised; they are stored but not indexed. Bytes are shown as Latin1 characters, one per byte.