rogerioromao.dev / purrform-frontend
The repo for Purrform's main BigCommerce store.
0
fork

Configure Feed

Select the types of activity you want to include in your feed.

Refactor rawsome-catculator page: remove unused elements, streamline HTML structure, and enhance button styles for better UX

Rogerio Romao b4b94a16 9e50e2cb

+1584 -1331
+2
assets/js/app.js
··· 57 57 import('./theme/custom/diet-builder'), 58 58 'pages/custom/page/feline-grimace-scale': () => 59 59 import('./theme/custom/feline-grimace-scale'), 60 + 'pages/custom/page/rawsome-catculator': () => 61 + import('./theme/custom/rawsome-catculator'), 60 62 }; 61 63 62 64 /**
+767
assets/js/theme/custom/rawsome-catculator.js
··· 1 + import PageManager from '../page-manager'; 2 + 3 + // ── Constants ──────────────────────────────────────────────────────── 4 + 5 + const KCAL_PER_KG = 1500; 6 + 7 + const CALCULATOR_API = 'https://purrform-apps-027e.onrender.com/calculator'; 8 + 9 + const AGE_CONFIG = { 10 + 1: { 11 + label: '4-8 Weeks', 12 + coef: 2.3, 13 + meals: 'Feed as & when required', 14 + activity: 95, 15 + flow: 'kitten', 16 + productKey: 'weaning', 17 + }, 18 + 2: { 19 + label: '2-4 Months', 20 + coef: 2.15, 21 + meals: 'Divided into 4 to 6 meals a day', 22 + activity: null, 23 + flow: 'adolescent', 24 + productKey: 'kitten', 25 + }, 26 + 3: { 27 + label: '4-9 Months', 28 + coef: 1.85, 29 + meals: 'Divided into 3 to 4 meals a day', 30 + activity: null, 31 + flow: 'adult', 32 + productKey: 'kitten', 33 + }, 34 + 4: { 35 + label: '9-12 Months', 36 + coef: 1.5, 37 + meals: 'Divided into 2 meals a day', 38 + activity: null, 39 + flow: 'adult', 40 + productKey: 'adult', 41 + }, 42 + 5: { 43 + label: '12+ Months', 44 + coef: 1.0, 45 + meals: 'Divided into 2 meals a day', 46 + activity: null, 47 + flow: 'adult', 48 + productKey: 'adult', 49 + }, 50 + }; 51 + 52 + // activity_value constants from original code 53 + const ACTIVITY_VALUES = { 54 + neutered: { low: 52, moderate: 64, active: 75 }, 55 + intact: { low: 80, moderate: 87.5, active: 95 }, 56 + }; 57 + 58 + const CAT_IMAGES = { 59 + ages: [ 60 + { 61 + src: 'https://cdn11.bigcommerce.com/s-lh9wfk05w0/product_images/uploaded_images/cat1.png', 62 + modifier: 'kitten', 63 + }, 64 + { 65 + src: 'https://cdn11.bigcommerce.com/s-lh9wfk05w0/product_images/uploaded_images/cat2.png', 66 + modifier: 'young', 67 + }, 68 + { 69 + src: 'https://cdn11.bigcommerce.com/s-lh9wfk05w0/product_images/uploaded_images/cat3.png', 70 + modifier: 'adolescent', 71 + }, 72 + { 73 + src: 'https://cdn11.bigcommerce.com/s-lh9wfk05w0/images/stencil/original/image-manager/9-12-months-cat-03.png?t=1660570333&_gl=1*1lk0d6z*_ga*ODg5ODM2MTQ0LjE2NTYzMTgwNTQ.*_ga_WS2VZYPC6G*MTY2MDU2NzY4Ny4xMDQuMS4xNjYwNTcwMzQwLjMy', 74 + modifier: 'preAdult', 75 + }, 76 + { 77 + src: 'https://cdn11.bigcommerce.com/s-lh9wfk05w0/product_images/uploaded_images/cat5.png', 78 + modifier: 'adult', 79 + }, 80 + ], 81 + weight: 'https://cdn11.bigcommerce.com/s-lh9wfk05w0/images/stencil/320w/image-manager/cat-weight.png', 82 + neutered: 83 + 'https://cdn11.bigcommerce.com/s-lh9wfk05w0/product_images/uploaded_images/kittengreen-new.png', 84 + activity: 85 + 'https://cdn11.bigcommerce.com/s-lh9wfk05w0/product_images/uploaded_images/twocatsgreen.png', 86 + }; 87 + 88 + // ── Helpers ────────────────────────────────────────────────────────── 89 + 90 + function el(tag, attrs = {}, ...children) { 91 + const element = document.createElement(tag); 92 + for (const [key, value] of Object.entries(attrs)) { 93 + if (key === 'className') { 94 + element.className = value; 95 + } else if (key === 'dataset') { 96 + for (const [dk, dv] of Object.entries(value)) { 97 + element.dataset[dk] = dv; 98 + } 99 + } else if (key.startsWith('on') && typeof value === 'function') { 100 + element.addEventListener(key.slice(2).toLowerCase(), value); 101 + } else { 102 + element.setAttribute(key, value); 103 + } 104 + } 105 + for (const child of children) { 106 + if (typeof child === 'string') { 107 + element.appendChild(document.createTextNode(child)); 108 + } else if (child) { 109 + element.appendChild(child); 110 + } 111 + } 112 + return element; 113 + } 114 + 115 + function calculateRDA(weight, activity, coef) { 116 + const total = Math.round( 117 + ((weight ** 0.67 * activity * 1000) / KCAL_PER_KG) * coef, 118 + ); 119 + const kcal = Math.round((150 * total) / 100); 120 + return { total, kcal }; 121 + } 122 + 123 + function calculateProductGrams(weight, activity, coef, caloriePerKg) { 124 + return Math.round( 125 + ((weight ** 0.67 * activity * 1000) / (caloriePerKg * 10)) * coef, 126 + ); 127 + } 128 + 129 + // ── RawsomeCatculator Class ────────────────────────────────────────── 130 + 131 + export default class RawsomeCatculator extends PageManager { 132 + constructor(context) { 133 + super(context); 134 + 135 + this.state = { 136 + age: null, 137 + flow: null, 138 + weight: null, 139 + coef: null, 140 + activity: null, 141 + neutered: null, 142 + meals: null, 143 + total: null, 144 + kcal: null, 145 + products: { tubs: [], pouches: [] }, 146 + productsLoaded: false, 147 + }; 148 + 149 + this.container = null; 150 + this._productsPromise = null; 151 + } 152 + 153 + onReady() { 154 + this.container = document.getElementById('catculator'); 155 + if (!this.container) return; 156 + this.renderAgeStep(); 157 + } 158 + 159 + // ── State ──────────────────────────────────────────────────────── 160 + 161 + resetState() { 162 + this.state = { 163 + age: null, 164 + flow: null, 165 + weight: null, 166 + coef: null, 167 + activity: null, 168 + neutered: null, 169 + meals: null, 170 + total: null, 171 + kcal: null, 172 + products: { tubs: [], pouches: [] }, 173 + productsLoaded: false, 174 + }; 175 + this._productsPromise = null; 176 + this.renderAgeStep(); 177 + } 178 + 179 + // ── API ────────────────────────────────────────────────────────── 180 + 181 + fetchProducts(ageNum) { 182 + const cfg = AGE_CONFIG[ageNum]; 183 + this._productsPromise = fetch(`${CALCULATOR_API}?age=${ageNum}`) 184 + .then((res) => res.json()) 185 + .then((data) => { 186 + this.state.products = { 187 + tubs: data[`${cfg.productKey}_tubs`] ?? [], 188 + pouches: data[`${cfg.productKey}_pouches`] ?? [], 189 + }; 190 + this.state.productsLoaded = true; 191 + }) 192 + .catch(() => { 193 + this.state.productsLoaded = true; 194 + }); 195 + return this._productsPromise; 196 + } 197 + 198 + // ── DOM helpers ────────────────────────────────────────────────── 199 + 200 + clearContainer() { 201 + while (this.container.firstChild) { 202 + this.container.removeChild(this.container.firstChild); 203 + } 204 + } 205 + 206 + renderStep(headingText, content) { 207 + this.clearContainer(); 208 + const heading = el( 209 + 'p', 210 + { className: 'catculator-step__heading' }, 211 + headingText, 212 + ); 213 + this.container.appendChild(heading); 214 + if (content) this.container.appendChild(content); 215 + } 216 + 217 + // ── Steps ──────────────────────────────────────────────────────── 218 + 219 + renderAgeStep() { 220 + const ages = [1, 2, 3, 4, 5]; 221 + const row = el('div', { className: 'catculator-row' }); 222 + 223 + ages.forEach((num) => { 224 + const cfg = AGE_CONFIG[num]; 225 + const img = CAT_IMAGES.ages[num - 1]; 226 + const col = el( 227 + 'div', 228 + { className: 'catculator-col' }, 229 + el('img', { 230 + src: img.src, 231 + className: `catculator-col__img catculator-col__img--${img.modifier}`, 232 + }), 233 + el( 234 + 'button', 235 + { 236 + className: 'rawsome-button--primary', 237 + onClick: () => this.selectAge(num), 238 + }, 239 + el('p', {}, cfg.label), 240 + ), 241 + ); 242 + row.appendChild(col); 243 + }); 244 + 245 + this.renderStep('How old is your cat?', row); 246 + } 247 + 248 + selectAge(num) { 249 + const cfg = AGE_CONFIG[num]; 250 + this.state.age = num; 251 + this.state.flow = cfg.flow; 252 + this.state.coef = cfg.coef; 253 + this.state.meals = cfg.meals; 254 + this.state.productsLoaded = false; 255 + this.fetchProducts(num); 256 + 257 + if (cfg.flow === 'kitten') { 258 + this.state.activity = cfg.activity; 259 + this.renderKittenWeightStep(); 260 + } else if (cfg.flow === 'adolescent') { 261 + this.renderAdolescentWeightStep(); 262 + } else { 263 + this.renderAdultWeightStep(); 264 + } 265 + } 266 + 267 + renderKittenWeightStep() { 268 + const content = this._buildWeightLayout( 269 + () => { 270 + const w = this._readWeightInput(); 271 + if (!w) return; 272 + this.state.weight = w; 273 + this.catculate(); 274 + }, 275 + () => this.renderAgeStep(), 276 + ); 277 + this.renderStep('How much does your cat weigh?', content); 278 + } 279 + 280 + renderAdolescentWeightStep() { 281 + const content = this._buildWeightLayout( 282 + () => { 283 + const w = this._readWeightInput(); 284 + if (!w) return; 285 + this.state.weight = w; 286 + this.renderAdolescentNeuteredStep(); 287 + }, 288 + () => this.renderAgeStep(), 289 + ); 290 + this.renderStep('How much does your cat weigh?', content); 291 + } 292 + 293 + renderAdultWeightStep() { 294 + const content = this._buildWeightLayout( 295 + () => { 296 + const w = this._readWeightInput(); 297 + if (!w) return; 298 + this.state.weight = w; 299 + this.renderAdultNeuteredStep(); 300 + }, 301 + () => this.renderAgeStep(), 302 + ); 303 + this.renderStep('How much does your cat weigh?', content); 304 + } 305 + 306 + _readWeightInput() { 307 + const input = this.container.querySelector('#weight_input'); 308 + if (!input) return null; 309 + const v = parseFloat(input.value); 310 + return Number.isNaN(v) || v <= 0 ? null : v; 311 + } 312 + 313 + _buildWeightLayout(onNext, onBack) { 314 + const input = el('input', { 315 + id: 'weight_input', 316 + type: 'number', 317 + min: '0.1', 318 + step: '0.1', 319 + }); 320 + 321 + const nextBtn = el( 322 + 'button', 323 + { 324 + className: 'rawsome-button--primary', 325 + disabled: 'disabled', 326 + onClick: onNext, 327 + }, 328 + 'Next', 329 + ); 330 + 331 + input.addEventListener('input', () => { 332 + const v = parseFloat(input.value); 333 + if (Number.isNaN(v) || v <= 0) { 334 + nextBtn.setAttribute('disabled', 'disabled'); 335 + } else { 336 + nextBtn.removeAttribute('disabled'); 337 + } 338 + }); 339 + 340 + const backBtn = el( 341 + 'button', 342 + { className: 'rawsome-button--secondary', onClick: onBack }, 343 + 'Back', 344 + ); 345 + 346 + const buttons = el( 347 + 'div', 348 + { className: 'cat_weight_buttons' }, 349 + backBtn, 350 + nextBtn, 351 + ); 352 + const label = el('p', { className: 'cat_weight_p' }, 'kg'); 353 + const inputGroup = el( 354 + 'div', 355 + { className: 'cat_weight_input_group' }, 356 + label, 357 + input, 358 + buttons, 359 + ); 360 + const img = el('img', { 361 + src: CAT_IMAGES.weight, 362 + className: 'cat_weight_img', 363 + }); 364 + return el('div', { className: 'cat_weight_cal' }, img, inputGroup); 365 + } 366 + 367 + renderAdolescentNeuteredStep() { 368 + const img = el('img', { src: CAT_IMAGES.neutered }); 369 + 370 + const yesBtn = el( 371 + 'button', 372 + { 373 + className: 'rawsome-button--primary', 374 + onClick: () => { 375 + this.state.neutered = true; 376 + this.state.activity = ACTIVITY_VALUES.intact.moderate; 377 + this.catculate(); 378 + }, 379 + }, 380 + 'Yes', 381 + ); 382 + 383 + const noBtn = el( 384 + 'button', 385 + { 386 + className: 'rawsome-button--primary', 387 + onClick: () => { 388 + this.state.neutered = false; 389 + this.state.activity = ACTIVITY_VALUES.intact.active; 390 + this.catculate(); 391 + }, 392 + }, 393 + 'No', 394 + ); 395 + 396 + const backBtn = el( 397 + 'button', 398 + { 399 + className: 'rawsome-button--secondary', 400 + onClick: () => this.renderAdolescentWeightStep(), 401 + }, 402 + 'Back', 403 + ); 404 + 405 + const btnGroup = el( 406 + 'div', 407 + { className: 'cat_button_group' }, 408 + yesBtn, 409 + noBtn, 410 + ); 411 + 412 + const layout = el( 413 + 'div', 414 + { className: 'cat_neutered' }, 415 + img, 416 + btnGroup, 417 + backBtn, 418 + ); 419 + this.renderStep('Is your cat spayed / neutered?', layout); 420 + } 421 + 422 + renderAdultNeuteredStep() { 423 + const img = el('img', { src: CAT_IMAGES.neutered }); 424 + 425 + const yesBtn = el( 426 + 'button', 427 + { 428 + className: 'rawsome-button--primary', 429 + onClick: () => { 430 + this.state.neutered = true; 431 + this.renderAdultActivityStep(); 432 + }, 433 + }, 434 + 'Yes', 435 + ); 436 + 437 + const noBtn = el( 438 + 'button', 439 + { 440 + className: 'rawsome-button--primary', 441 + onClick: () => { 442 + this.state.neutered = false; 443 + this.renderAdultActivityStep(); 444 + }, 445 + }, 446 + 'No', 447 + ); 448 + 449 + const backBtn = el( 450 + 'button', 451 + { 452 + className: 'rawsome-button--secondary', 453 + onClick: () => this.renderAdultWeightStep(), 454 + }, 455 + 'Back', 456 + ); 457 + 458 + const btnGroup = el( 459 + 'div', 460 + { className: 'cat_button_group' }, 461 + yesBtn, 462 + noBtn, 463 + ); 464 + 465 + const layout = el( 466 + 'div', 467 + { className: 'cat_spayed' }, 468 + img, 469 + btnGroup, 470 + backBtn, 471 + ); 472 + this.renderStep('Is your cat spayed / neutered?', layout); 473 + } 474 + 475 + renderAdultActivityStep() { 476 + const isNeutered = this.state.neutered; 477 + const av = isNeutered 478 + ? ACTIVITY_VALUES.neutered 479 + : ACTIVITY_VALUES.intact; 480 + 481 + const makeBtn = (label, actVal) => 482 + el( 483 + 'button', 484 + { 485 + className: 'rawsome-button--primary', 486 + onClick: () => { 487 + this.state.activity = actVal; 488 + this.catculate(); 489 + }, 490 + }, 491 + label, 492 + ); 493 + 494 + const img = el('img', { src: CAT_IMAGES.activity }); 495 + 496 + const btnGroup = el( 497 + 'div', 498 + { className: 'cat_button_group' }, 499 + makeBtn('Not Much', av.low), 500 + makeBtn('Moderately', av.moderate), 501 + makeBtn('Active', av.active), 502 + ); 503 + 504 + const backBtn = el( 505 + 'button', 506 + { 507 + className: 'rawsome-button--secondary', 508 + onClick: () => this.renderAdultNeuteredStep(), 509 + }, 510 + 'Back', 511 + ); 512 + 513 + const layout = el( 514 + 'div', 515 + { className: 'cat_active' }, 516 + img, 517 + btnGroup, 518 + backBtn, 519 + ); 520 + this.renderStep('How active is your cat?', layout); 521 + } 522 + 523 + catculate() { 524 + const { weight, activity, coef } = this.state; 525 + const { total, kcal } = calculateRDA(weight, activity, coef); 526 + this.state.total = total; 527 + this.state.kcal = kcal; 528 + this.renderResultStep(); 529 + } 530 + 531 + renderResultStep() { 532 + const { total, kcal, meals } = this.state; 533 + 534 + // RDA rows 535 + const servingRow = el( 536 + 'div', 537 + { className: 'rc_reccoms' }, 538 + el( 539 + 'p', 540 + {}, 541 + 'Serving per day: ', 542 + el('span', {}, el('strong', {}, `${total}g`)), 543 + ), 544 + ); 545 + 546 + const mealsRow = el( 547 + 'div', 548 + { className: 'daily_meals' }, 549 + el('p', {}, meals), 550 + ); 551 + 552 + const calorieRow = el( 553 + 'div', 554 + { className: 'rc_reccoms' }, 555 + el( 556 + 'p', 557 + {}, 558 + 'Daily calorie intake: ', 559 + el('span', {}, el('strong', {}, `${kcal} kcal`)), 560 + ), 561 + ); 562 + 563 + const startOverBtn = el( 564 + 'button', 565 + { 566 + className: 'rawsome-button--secondary', 567 + onClick: () => this.resetState(), 568 + }, 569 + 'Start Over', 570 + ); 571 + 572 + const inner = el( 573 + 'div', 574 + { className: 'recom_daily_amount_inner' }, 575 + servingRow, 576 + mealsRow, 577 + calorieRow, 578 + startOverBtn, 579 + ); 580 + 581 + // "View RDA on products" CTA with loading state 582 + const ctaBtn = el( 583 + 'button', 584 + { 585 + id: 'show_product_cta', 586 + className: 587 + 'rda_account_btn rawsome-button--secondary cta--loading', 588 + title: 'loading... please wait', 589 + onClick: () => this.openProductsModal(), 590 + }, 591 + 'View your RDA on our products ', 592 + el('span', { className: 'button--loading' }), 593 + ); 594 + 595 + const ctaContainer = el( 596 + 'div', 597 + { className: 'rda_account_btn_container' }, 598 + ctaBtn, 599 + ); 600 + 601 + // Modal container (hidden until CTA clicked) 602 + const modalContainer = el('div', { 603 + id: 'show_RDA', 604 + className: 'swal2-container swal2-center swal2-backdrop-show', 605 + hidden: 'hidden', 606 + }); 607 + 608 + const outer = el( 609 + 'div', 610 + { className: 'recom_daily_amount' }, 611 + inner, 612 + ctaContainer, 613 + modalContainer, 614 + ); 615 + 616 + // Heading is rendered separately via renderStep wrapper, but recom_daily_amount_heading 617 + // needs to be full-width, so we replicate that structure inline here: 618 + this.clearContainer(); 619 + 620 + const heading = el( 621 + 'p', 622 + { className: 'recom_daily_amount_heading' }, 623 + 'Your Recommended Daily Amount (RDA) is...', 624 + ); 625 + 626 + this.container.appendChild(heading); 627 + this.container.appendChild(outer); 628 + 629 + // Clear loading state once products are available 630 + if (this._productsPromise) { 631 + this._productsPromise.then(() => { 632 + const btn = this.container.querySelector('#show_product_cta'); 633 + if (btn) { 634 + btn.classList.remove('cta--loading'); 635 + btn.removeAttribute('title'); 636 + const spinner = btn.querySelector('.button--loading'); 637 + if (spinner) spinner.style.display = 'none'; 638 + } 639 + }); 640 + } else { 641 + // No products promise — enable immediately (fallback) 642 + ctaBtn.classList.remove('cta--loading'); 643 + ctaBtn.removeAttribute('title'); 644 + } 645 + } 646 + 647 + openProductsModal() { 648 + const modal = this.container.querySelector('#show_RDA'); 649 + if (!modal) return; 650 + 651 + modal.removeAttribute('hidden'); 652 + modal.innerHTML = ''; 653 + 654 + const { tubs, pouches } = this.state.products; 655 + const { weight, activity, coef } = this.state; 656 + 657 + const buildGrid = (products) => { 658 + if (!products || products.length === 0) { 659 + return el( 660 + 'div', 661 + { className: 'wrapper' }, 662 + el('p', {}, 'No product found'), 663 + ); 664 + } 665 + 666 + const grid = el('div', { className: 'product-grid' }); 667 + products.forEach((product) => { 668 + const grams = calculateProductGrams( 669 + weight, 670 + activity, 671 + coef, 672 + product.calorie, 673 + ); 674 + const card = el( 675 + 'div', 676 + { className: 'wrapper' }, 677 + el( 678 + 'div', 679 + { className: 'image_wrap' }, 680 + el( 681 + 'a', 682 + { href: product.action_url }, 683 + el('img', { src: product.image }), 684 + ), 685 + ), 686 + el( 687 + 'div', 688 + { className: 'content_wrap' }, 689 + el( 690 + 'a', 691 + { href: product.action_url }, 692 + el( 693 + 'p', 694 + { className: 'product-name' }, 695 + product.name, 696 + ), 697 + ), 698 + ), 699 + el( 700 + 'div', 701 + { className: 'rda_wrap' }, 702 + el( 703 + 'p', 704 + { className: 'rda_label' }, 705 + `RDA: ${grams}g per day`, 706 + ), 707 + ), 708 + el( 709 + 'div', 710 + { className: 'cta_wrap' }, 711 + el( 712 + 'a', 713 + { href: product.action_url }, 714 + el( 715 + 'button', 716 + { className: 'rawsome-button--primary' }, 717 + 'View Product', 718 + ), 719 + ), 720 + ), 721 + ); 722 + grid.appendChild(card); 723 + }); 724 + return grid; 725 + }; 726 + 727 + const tubsSection = el( 728 + 'div', 729 + { 730 + id: 'swal2-content_tubs', 731 + className: 'swal2-html-container tubs', 732 + }, 733 + buildGrid(tubs), 734 + ); 735 + 736 + const pouchesSection = el( 737 + 'div', 738 + { 739 + id: 'swal2-content-pouches', 740 + className: 'swal2-html-container tubs', 741 + }, 742 + buildGrid(pouches), 743 + ); 744 + 745 + const content = el( 746 + 'div', 747 + { className: 'modal-content swal2-content' }, 748 + el('h1', { className: 'product-section__title' }, '450g Tubs'), 749 + tubsSection, 750 + el('hr', {}), 751 + el('h1', { className: 'product-section__title' }, 'Pouches'), 752 + pouchesSection, 753 + el('hr', {}), 754 + ); 755 + 756 + const dialog = el('div', { className: 'modal-dialog' }, content); 757 + modal.appendChild(dialog); 758 + } 759 + 760 + closeProductsModal() { 761 + const modal = this.container.querySelector('#show_RDA'); 762 + if (modal) { 763 + modal.setAttribute('hidden', 'hidden'); 764 + modal.innerHTML = ''; 765 + } 766 + } 767 + }
+4 -2
assets/scss/custom/main.scss
··· 1 1 @import 'variables'; 2 2 @import 'marketing-tokens'; 3 + 3 4 /* Custom Page Styling */ 4 5 @import 'pages/cart'; 5 6 @import 'pages/pdp'; 6 7 @import 'pages/calculators'; 8 + @import 'pages/rawsome-catculator'; 7 9 @import 'pages/diet-builder'; 8 10 @import 'pages/feline-grimace-scale'; 9 11 @import 'pages/account'; 10 12 11 - /*Components*/ 13 + /* Components */ 12 14 @import 'components/widgets/homepage_carousel'; 13 15 @import 'components/accountsReward'; 14 16 @import 'components/widgets/3-column'; ··· 17 19 @import 'components/pagination'; 18 20 @import 'components/blogs'; 19 21 20 - /*Layouts*/ 22 + /* Layouts */ 21 23 @import 'layouts/footer'; 22 24 23 25 .previewCartCheckout .previewCartCheckout-additionalCheckoutButtons {
-608
assets/scss/custom/pages/_calculators.scss
··· 1 - .rawsome-catculator-page { 2 - font-family: 'Filson Pro', sans-serif; 3 - 4 - .calculator-heading { 5 - margin: auto; 6 - text-align: center; 7 - margin-bottom: 2rem; 8 - 9 - h1 { 10 - font-weight: 700; 11 - font-size: 36px; 12 - margin-bottom: 1rem; 13 - 14 - @include breakpoint('medium') { 15 - font-size: 48px; 16 - } 17 - } 18 - 19 - p { 20 - font-size: 18px; 21 - } 22 - } 23 - 24 - .calculator-toggler { 25 - margin: 0 auto 2rem; 26 - width: 100%; 27 - justify-content: space-between; 28 - display: none; 29 - 30 - p { 31 - padding: 12px; 32 - text-align: center; 33 - margin-bottom: 0; 34 - margin-top: 0; 35 - 36 - a { 37 - color: $body-color; 38 - } 39 - } 40 - 41 - p.active { 42 - border-bottom: 2px solid $headingColor; 43 - font-weight: 700; 44 - } 45 - 46 - @include breakpoint('medium') { 47 - width: 35%; 48 - display: flex; 49 - } 50 - } 51 - 52 - .calculator-toggler-mobile { 53 - background-color: $light-BgColor; 54 - display: block; 55 - width: 100vw; 56 - position: relative; 57 - left: calc(-50vw + 50%); 58 - padding: 1rem 0; 59 - 60 - .inner { 61 - margin: auto; 62 - width: 92%; 63 - 64 - p { 65 - padding: 0.5rem 0.8rem; 66 - margin-bottom: 0.2rem; 67 - 68 - a { 69 - color: $body-color; 70 - } 71 - } 72 - 73 - p#toggler-active { 74 - background-color: $white-color; 75 - border-radius: 30px; 76 - 77 - span { 78 - float: right; 79 - 80 - &.open { 81 - rotate: 180deg; 82 - } 83 - } 84 - } 85 - 86 - #toggler-dropdown { 87 - display: none; 88 - 89 - &.active { 90 - display: block; 91 - } 92 - } 93 - } 94 - 95 - @include breakpoint('medium') { 96 - display: none; 97 - } 98 - } 99 - } 100 - 101 - .rawsome-button--primary { 102 - transition: all 0.2s ease; 103 - border: 2px solid $headingColor; 104 - color: #fff; 105 - font-size: 18px; 106 - font-weight: bold; 107 - margin: 20px 0 0 141px; 108 - text-align: center; 109 - display: block; 110 - width: 165px; 111 - height: 3.5rem; 112 - background-color: #687d6a; 113 - border-radius: 45px; 114 - 115 - &:hover { 116 - background-color: white; 117 - color: $headingColor; 118 - 119 - p { 120 - color: $headingColor; 121 - } 122 - } 123 - } 124 - 125 - .rawsome-button--secondary { 126 - background-color: white; 127 - font-weight: bold; 128 - color: black; 129 - border: 2px solid $input-field; 130 - transition: all 0.2s ease; 131 - border-radius: 45px; 132 - text-align: center; 133 - width: 165px; 134 - height: 3.5rem; 135 - display: block; 136 - 137 - &:hover { 138 - color: $headingColor; 139 - border-color: black; 140 - } 141 - } 142 - 143 - .cat_weight_cal { 144 - margin-top: 35px; 145 - display: block; 146 - 147 - img { 148 - width: 80%; 149 - height: auto; 150 - margin: auto; 151 - display: block; 152 - 153 - @include breakpoint('medium') { 154 - width: 100%; 155 - } 156 - } 157 - 158 - div { 159 - justify-content: center; 160 - 161 - .cat_weight_p { 162 - margin: 5rem 0 0.5rem; 163 - color: black; 164 - font-weight: 700; 165 - text-transform: uppercase; 166 - 167 - @include breakpoint('medium') { 168 - margin: 0 0 0.5rem; 169 - } 170 - } 171 - 172 - #weight_input { 173 - margin: 0.5rem 0 1rem; 174 - width: 100%; 175 - border: 2px solid $input-field; 176 - padding-left: 15px; 177 - font-size: 18px; 178 - color: #687d6a; 179 - border-radius: 45px; 180 - height: 3.5rem; 181 - } 182 - 183 - div { 184 - display: flex; 185 - justify-content: space-between; 186 - gap: 10px; 187 - 188 - button { 189 - margin: 0; 190 - width: 50%; 191 - } 192 - } 193 - } 194 - 195 - @include breakpoint('medium') { 196 - display: grid; 197 - grid-template-columns: 1fr 1fr; 198 - gap: 30px; 199 - margin: auto; 200 - width: 50%; 201 - } 202 - } 203 - 204 - .cat_spayed { 205 - display: block; 206 - margin-top: 35px; 207 - 208 - .rawsome-button--secondary { 209 - margin: 20px 0 0 96px; 210 - 211 - @include breakpoint('medium') { 212 - margin: 40px 0 0 26px; 213 - } 214 - } 215 - 216 - @include breakpoint('medium') { 217 - display: flex !important; 218 - flex-direction: row; 219 - align-items: center; 220 - } 221 - } 222 - 223 - .cat_neutered { 224 - display: block !important; 225 - margin-top: 35px; 226 - 227 - .rawsome-button--primary { 228 - margin: 20px auto 0; 229 - 230 - @include breakpoint('medium') { 231 - margin: 20px 0 0 141px; 232 - } 233 - } 234 - 235 - .rawsome-button--secondary { 236 - margin: 20px 0 0 96px; 237 - 238 - @include breakpoint('medium') { 239 - margin: 20px 0 0 26px !important; 240 - } 241 - } 242 - 243 - @include breakpoint('medium') { 244 - display: flex !important; 245 - flex-direction: row; 246 - align-items: center; 247 - } 248 - } 249 - 250 - .cat_active { 251 - display: block !important; 252 - 253 - img { 254 - margin: 0 !important; 255 - } 256 - 257 - .rawsome-button--primary { 258 - margin: 10px auto; 259 - 260 - @include breakpoint('medium') { 261 - margin: 20px 0 0 26px; 262 - } 263 - } 264 - 265 - .rawsome-button--secondary { 266 - margin: 10px auto 0 !important; 267 - 268 - @include breakpoint('medium') { 269 - margin: 20px 0 0 26px !important; 270 - } 271 - } 272 - 273 - @include breakpoint('medium') { 274 - display: flex !important; 275 - flex-direction: row; 276 - align-items: center; 277 - justify-content: center; 278 - } 279 - } 280 - 281 - .recom_daily_amount_heading { 282 - background-color: $headingColor; 283 - color: $white-color; 284 - font-weight: bold; 285 - font-size: 24px; 286 - text-align: center; 287 - margin-bottom: 0; 288 - padding: 3.5rem 0 0.5rem; 289 - width: 99.4vw; 290 - position: relative; 291 - left: calc(-50vw + 50%); 292 - } 293 - 294 - .recom_daily_amount { 295 - width: 99.4vw; 296 - position: relative; 297 - left: calc(-50vw + 50%); 298 - background-color: $headingColor; 299 - padding: 1rem 1rem 3rem; 300 - 301 - .rda_account_btn_container { 302 - margin: 1.5rem auto 0; 303 - width: 95%; 304 - 305 - .rda_account_btn { 306 - margin: auto; 307 - width: fit-content; 308 - padding-left: 25px; 309 - padding-right: 25px; 310 - } 311 - 312 - @include breakpoint('medium') { 313 - width: 30%; 314 - } 315 - } 316 - 317 - .recom_daily_amount_inner { 318 - background-color: $white-color; 319 - margin: auto; 320 - width: 100%; 321 - border-radius: 15px; 322 - padding: 18px 10px; 323 - 324 - .rc_reccoms { 325 - background-color: $light-BgColor; 326 - width: 95%; 327 - margin: auto; 328 - border-radius: 15px; 329 - 330 - p { 331 - padding: 7px 15px; 332 - 333 - span { 334 - float: right; 335 - margin: 0; 336 - 337 - @include breakpoint('medium') { 338 - float: none; 339 - margin-left: 70px; 340 - } 341 - } 342 - } 343 - 344 - &:last-of-type { 345 - p { 346 - span { 347 - @include breakpoint('medium') { 348 - margin-left: 45px; 349 - } 350 - } 351 - } 352 - } 353 - } 354 - 355 - .daily_meals { 356 - width: 85%; 357 - margin: 10px auto; 358 - 359 - @include breakpoint('medium') { 360 - width: 89%; 361 - } 362 - } 363 - 364 - .rawsome-button--secondary { 365 - width: 95%; 366 - height: 2.5rem; 367 - margin: 2rem auto 0; 368 - position: relative; 369 - } 370 - 371 - @include breakpoint('medium') { 372 - width: 30%; 373 - } 374 - } 375 - } 376 - 377 - .button--loading::after { 378 - content: ''; 379 - position: absolute; 380 - width: 30px; 381 - height: 30px; 382 - right: 0; 383 - left: 0; 384 - margin: auto; 385 - border: 6px solid #687d6a; 386 - border-top-color: #bd9b60; 387 - border-radius: 50%; 388 - animation: button-loading-spinner 1s ease infinite; 389 - } 390 - 391 - .cta--loading { 392 - opacity: 0.2; 393 - pointer-events: none; 394 - } 395 - 396 - @keyframes button-loading-spinner { 397 - from { 398 - transform: rotate(0turn); 399 - } 400 - 401 - to { 402 - transform: rotate(1turn); 403 - } 404 - } 405 - 406 - .catculator-row { 407 - width: 100%; 408 - 409 - .catculator-col { 410 - width: 100%; 411 - display: flex; 412 - align-items: center; 413 - justify-content: center; 414 - 415 - @include breakpoint('large') { 416 - display: block; 417 - } 418 - } 419 - 420 - button { 421 - margin-left: 1.5rem; 422 - width: 80%; 423 - height: 3.5rem; 424 - border-radius: 40px; 425 - background-color: #687d6a; 426 - text-align: center; 427 - } 428 - 429 - @include breakpoint('large') { 430 - display: flex; 431 - flex-direction: row; 432 - 433 - button { 434 - margin-right: 95px; 435 - margin-left: 0; 436 - width: 150px; 437 - } 438 - } 439 - } 440 - 441 - #rawsome-bottom { 442 - margin-top: 2rem; 443 - background-color: #f3f2f2; 444 - width: 100vw; 445 - position: relative; 446 - left: calc(-50vw + 50%); 447 - padding: 3rem 0; 448 - 449 - .rawsome-info-table { 450 - display: grid; 451 - grid-template-columns: auto; 452 - margin: auto; 453 - width: 92%; 454 - 455 - div { 456 - text-align: center; 457 - margin-bottom: 2rem; 458 - display: flex; 459 - align-items: center; 460 - justify-content: center; 461 - 462 - div { 463 - display: block; 464 - padding-left: 20px; 465 - 466 - @include breakpoint('medium') { 467 - padding-left: 0; 468 - } 469 - } 470 - 471 - img { 472 - width: 30%; 473 - 474 - @include breakpoint('medium') { 475 - height: 120px; 476 - width: auto; 477 - } 478 - } 479 - 480 - h1 { 481 - margin: 3rem auto 0.5rem; 482 - } 483 - 484 - p { 485 - margin-bottom: 1rem; 486 - } 487 - 488 - @include breakpoint('medium') { 489 - display: block; 490 - } 491 - } 492 - 493 - @include breakpoint('medium') { 494 - width: 81%; 495 - grid-template-columns: auto auto auto; 496 - } 497 - } 498 - 499 - @include breakpoint('medium') { 500 - width: 99.4vw; 501 - } 502 - } 503 - 504 - #show_RDA { 505 - padding: 0; 506 - position: static; 507 - 508 - .modal-header { 509 - padding-left: 2.25rem; 510 - padding-right: 3.0357rem; 511 - border-bottom: none; 512 - 513 - .swal2-close { 514 - position: absolute; 515 - z-index: 2; 516 - top: 0; 517 - right: 0; 518 - -ms-flex-align: center; 519 - align-items: center; 520 - -ms-flex-pack: center; 521 - justify-content: center; 522 - width: 1.2em; 523 - height: 1.2em; 524 - padding: 0; 525 - overflow: hidden; 526 - transition: color 0.1s ease-out; 527 - border: none; 528 - border-radius: 0; 529 - background: 0 0; 530 - color: #ccc; 531 - font-family: serif; 532 - font-size: 2.5em; 533 - line-height: 1.2; 534 - cursor: pointer; 535 - } 536 - } 537 - 538 - #rda-title { 539 - color: $white-color; 540 - text-align: center; 541 - } 542 - 543 - #swal2-title { 544 - color: $white-color; 545 - text-align: center; 546 - } 547 - 548 - hr { 549 - border: none; 550 - margin: 0; 551 - } 552 - 553 - .swal2-content { 554 - margin: auto; 555 - width: 100%; 556 - 557 - @include breakpoint('medium') { 558 - width: 80%; 559 - } 560 - 561 - #swal2-content-pouches, 562 - #swal2-content_tubs { 563 - display: grid !important; 564 - grid-template-columns: 1fr 1fr; 565 - gap: 13px; 566 - 567 - @include breakpoint('medium') { 568 - grid-template-columns: 1fr 1fr 1fr 1fr; 569 - } 570 - } 571 - 572 - .wrapper { 573 - padding: 15px 10px; 574 - border-radius: 20px; 575 - background-color: $white-color; 576 - 577 - .image_wrap { 578 - img { 579 - width: auto; 580 - height: auto; 581 - } 582 - } 583 - 584 - .content_wrap { 585 - margin: 0.5rem auto 1rem; 586 - 587 - p { 588 - text-align: center; 589 - } 590 - } 591 - 592 - .rawsome-button--primary { 593 - margin: 0 auto; 594 - width: 100%; 595 - font-size: 16px; 596 - 597 - @include breakpoint('medium') { 598 - font-size: 18px; 599 - } 600 - } 601 - 602 - @include breakpoint('medium') { 603 - padding: 20px; 604 - } 605 - } 606 - } 607 - } 608 - 609 1 .dry-matter-basis-calculator-page { 610 2 #dmb-test { 611 3 display: none;
+799
assets/scss/custom/pages/_rawsome-catculator.scss
··· 1 + // ── Rawsome Catculator ──────────────────────────────────────────────── 2 + 3 + // CSS Variables — aliased from shared marketing tokens (_marketing-tokens.scss) 4 + :root { 5 + --rc-bg: var(--brand-bg); 6 + --rc-card: var(--brand-card); 7 + --rc-green: var(--brand-green); 8 + --rc-green-light: var(--brand-green-light); 9 + --rc-green-mid: var(--brand-green-mid); 10 + --rc-text: var(--brand-text); 11 + --rc-text-muted: var(--brand-text-muted); 12 + --rc-border: var(--brand-border); 13 + --rc-radius: var(--brand-radius); 14 + --rc-transition: var(--brand-transition); 15 + } 16 + 17 + // Full-width wrapper that breaks out of container 18 + .rawsome-catculator-page { 19 + width: 100vw; 20 + margin-left: calc(-50vw + 50%); 21 + background: var(--rc-bg); 22 + min-height: 100vh; 23 + position: relative; 24 + padding: 2rem 1rem; 25 + 26 + // ── Heading ─────────────────────────────────────────────────── 27 + .calculator-heading { 28 + margin: 2rem auto; 29 + text-align: center; 30 + max-width: 70ch; 31 + text-wrap: balance; 32 + position: relative; 33 + z-index: 1; 34 + animation: rcFadeDown 0.6s ease both; 35 + 36 + h1 { 37 + font-weight: 700; 38 + font-size: clamp(1.8rem, 5vw, 2.8rem); 39 + color: var(--rc-green); 40 + line-height: 1.1; 41 + letter-spacing: -0.5px; 42 + margin-bottom: 1rem; 43 + } 44 + 45 + p { 46 + font-size: 1rem; 47 + font-weight: 300; 48 + color: var(--rc-text-muted); 49 + line-height: 1.6; 50 + max-width: 520px; 51 + margin-inline: auto; 52 + } 53 + } 54 + 55 + // ── Toggler (desktop) ───────────────────────────────────────── 56 + .calculator-toggler { 57 + margin: 0 auto 2rem; 58 + width: 100%; 59 + justify-content: space-between; 60 + display: none; 61 + 62 + p { 63 + padding: 12px; 64 + text-align: center; 65 + margin-bottom: 0; 66 + margin-top: 0; 67 + 68 + a { 69 + color: var(--rc-text); 70 + } 71 + } 72 + 73 + p.active { 74 + border-bottom: 2px solid var(--rc-green); 75 + font-weight: 700; 76 + } 77 + 78 + @include breakpoint('medium') { 79 + width: 35%; 80 + display: flex; 81 + } 82 + } 83 + 84 + // ── Toggler (mobile) ───────────────────────────────────────── 85 + .calculator-toggler-mobile { 86 + background-color: var(--rc-green-light); 87 + display: block; 88 + width: 100vw; 89 + position: relative; 90 + left: calc(-50vw + 50%); 91 + padding: 1rem 0; 92 + 93 + .inner { 94 + margin: auto; 95 + width: 92%; 96 + 97 + p { 98 + padding: 0.5rem 0.8rem; 99 + margin-bottom: 0.2rem; 100 + 101 + a { 102 + color: var(--rc-text); 103 + } 104 + } 105 + 106 + p#toggler-active { 107 + background-color: var(--rc-card); 108 + border-radius: 30px; 109 + 110 + span { 111 + float: right; 112 + 113 + &.open { 114 + rotate: 180deg; 115 + } 116 + } 117 + } 118 + 119 + #toggler-dropdown { 120 + display: none; 121 + 122 + &.active { 123 + display: block; 124 + } 125 + } 126 + } 127 + 128 + @include breakpoint('medium') { 129 + display: none; 130 + } 131 + } 132 + 133 + // ── Catculator wizard container ────────────────────────────── 134 + #catculator { 135 + width: 100%; 136 + padding-top: 1.5rem; 137 + position: relative; 138 + z-index: 1; 139 + } 140 + 141 + // Step heading rendered by JS (renderStep) 142 + .catculator-step__heading { 143 + font-weight: 600; 144 + color: var(--rc-green); 145 + font-size: 1.5rem; 146 + text-align: center; 147 + margin-bottom: 1.5rem; 148 + } 149 + 150 + // ── Disclaimer copy ────────────────────────────────────────── 151 + .calculator-disclaimer { 152 + margin: 3rem auto; 153 + text-align: center; 154 + max-width: 640px; 155 + 156 + p { 157 + color: var(--rc-text-muted); 158 + font-size: 0.95rem; 159 + line-height: 1.6; 160 + } 161 + } 162 + } 163 + 164 + // ── Buttons ────────────────────────────────────────────────────────── 165 + .rawsome-button--primary { 166 + transition: all var(--rc-transition); 167 + border: 2px solid var(--rc-green); 168 + color: #fff; 169 + font-size: 1rem; 170 + font-weight: 600; 171 + text-align: center; 172 + display: inline-flex; 173 + align-items: center; 174 + justify-content: center; 175 + min-width: 120px; 176 + height: 3rem; 177 + background-color: var(--rc-green); 178 + border-radius: var(--rc-radius); 179 + cursor: pointer; 180 + padding: 0 1.25rem; 181 + 182 + p { 183 + margin: 0; 184 + color: inherit; 185 + font-weight: inherit; 186 + } 187 + 188 + a { 189 + color: inherit; 190 + text-decoration: none; 191 + } 192 + 193 + &:hover { 194 + background-color: var(--rc-card); 195 + color: var(--rc-green); 196 + box-shadow: 0 4px 16px rgba(84, 96, 82, 0.2); 197 + 198 + p, 199 + a { 200 + color: var(--rc-green); 201 + } 202 + } 203 + 204 + &:disabled { 205 + opacity: 0.5; 206 + cursor: not-allowed; 207 + } 208 + } 209 + 210 + .rawsome-button--secondary { 211 + background-color: var(--rc-card); 212 + font-weight: 600; 213 + color: var(--rc-green); 214 + border: 2px solid var(--rc-green); 215 + transition: all var(--rc-transition); 216 + border-radius: var(--rc-radius); 217 + text-align: center; 218 + min-width: 120px; 219 + height: 3rem; 220 + display: inline-flex; 221 + align-items: center; 222 + justify-content: center; 223 + cursor: pointer; 224 + padding: 0 1.25rem; 225 + 226 + &:hover { 227 + background-color: var(--rc-green-light); 228 + } 229 + } 230 + 231 + // ── Weight step ────────────────────────────────────────────────────── 232 + .cat_weight_cal { 233 + margin-top: 1rem; 234 + display: flex; 235 + flex-direction: column; 236 + align-items: center; 237 + gap: 2rem; 238 + 239 + .cat_weight_img { 240 + width: 180px; 241 + height: auto; 242 + flex-shrink: 0; 243 + } 244 + 245 + .cat_weight_input_group { 246 + display: flex; 247 + flex-direction: column; 248 + width: 100%; 249 + max-width: 250px; 250 + gap: 0.5rem; 251 + } 252 + 253 + .cat_weight_p { 254 + color: var(--rc-text); 255 + font-weight: 600; 256 + text-transform: uppercase; 257 + font-size: 0.8rem; 258 + letter-spacing: 1px; 259 + margin-bottom: 0.5rem; 260 + text-align: center; 261 + } 262 + 263 + #weight_input { 264 + width: 100%; 265 + height: 3.5rem; 266 + border: 2px solid var(--rc-border); 267 + border-radius: var(--rc-radius); 268 + background-color: var(--rc-card); 269 + color: var(--rc-text); 270 + font-size: 1.2rem; 271 + text-align: center; 272 + appearance: textfield; 273 + -moz-appearance: textfield; 274 + transition: 275 + border-color var(--rc-transition), 276 + box-shadow var(--rc-transition); 277 + 278 + &:focus { 279 + outline: none; 280 + border-color: var(--rc-green); 281 + box-shadow: 0 0 0 3px rgba(84, 96, 82, 0.1); 282 + } 283 + 284 + &::-webkit-outer-spin-button, 285 + &::-webkit-inner-spin-button { 286 + -webkit-appearance: none; 287 + margin: 0; 288 + } 289 + } 290 + 291 + .cat_weight_buttons { 292 + display: flex; 293 + justify-content: center; 294 + gap: 12px; 295 + margin-top: 1.5rem; 296 + 297 + button { 298 + margin: 0; 299 + min-width: 100px; 300 + } 301 + } 302 + 303 + @include breakpoint('medium') { 304 + flex-direction: row; 305 + justify-content: center; 306 + gap: 3rem; 307 + max-width: 700px; 308 + margin: 1rem auto 0; 309 + } 310 + } 311 + 312 + // ── Neutered / Spayed step ─────────────────────────────────────────── 313 + .cat_spayed, 314 + .cat_neutered { 315 + display: flex; 316 + flex-direction: column; 317 + align-items: center; 318 + gap: 2rem; 319 + margin-top: 1rem; 320 + 321 + img { 322 + width: 200px; 323 + height: auto; 324 + flex-shrink: 0; 325 + } 326 + 327 + .cat_button_group { 328 + display: flex; 329 + flex-direction: column; 330 + align-items: center; 331 + gap: 12px; 332 + 333 + @include breakpoint('medium') { 334 + align-items: flex-start; 335 + } 336 + 337 + .rawsome-button--primary, 338 + .rawsome-button--secondary { 339 + margin: 0; 340 + min-width: 160px; 341 + } 342 + } 343 + 344 + > .rawsome-button--secondary { 345 + margin: 0; 346 + min-width: 160px; 347 + } 348 + 349 + @include breakpoint('medium') { 350 + flex-direction: row; 351 + justify-content: center; 352 + gap: 3rem; 353 + max-width: 800px; 354 + margin: 1rem auto 0; 355 + } 356 + } 357 + 358 + // ── Activity step ──────────────────────────────────────────────────── 359 + .cat_active { 360 + display: flex; 361 + flex-direction: column; 362 + align-items: center; 363 + gap: 2rem; 364 + margin-top: 1rem; 365 + 366 + img { 367 + width: 250px; 368 + height: auto; 369 + flex-shrink: 0; 370 + } 371 + 372 + .cat_button_group { 373 + display: flex; 374 + flex-direction: column; 375 + align-items: center; 376 + gap: 12px; 377 + 378 + @include breakpoint('medium') { 379 + align-items: flex-start; 380 + } 381 + 382 + .rawsome-button--primary { 383 + margin: 0; 384 + min-width: 140px; 385 + } 386 + } 387 + 388 + > .rawsome-button--secondary { 389 + margin: 0; 390 + min-width: 140px; 391 + } 392 + 393 + @include breakpoint('medium') { 394 + flex-direction: row; 395 + justify-content: center; 396 + gap: 3rem; 397 + max-width: 900px; 398 + margin: 1rem auto 0; 399 + } 400 + } 401 + 402 + // ── Age step: 5-col row of cats ────────────────────────────────────── 403 + .catculator-row { 404 + width: 100%; 405 + display: flex; 406 + flex-direction: column; 407 + gap: 1rem; 408 + 409 + .catculator-col { 410 + width: 100%; 411 + display: flex; 412 + flex-direction: column; 413 + align-items: center; 414 + justify-content: center; 415 + gap: 0.75rem; 416 + } 417 + 418 + .rawsome-button--primary { 419 + width: 80%; 420 + max-width: 220px; 421 + } 422 + 423 + @include breakpoint('large') { 424 + flex-direction: row; 425 + align-items: flex-end; 426 + justify-content: space-between; 427 + 428 + .catculator-col { 429 + flex: 1; 430 + } 431 + 432 + .rawsome-button--primary { 433 + width: 150px; 434 + } 435 + } 436 + } 437 + 438 + // Age-step cat images — sized to communicate the growth progression visually 439 + .catculator-col__img--kitten { 440 + width: 75px; 441 + height: 75px; 442 + margin: 75px 0 30px 0; 443 + } 444 + .catculator-col__img--young { 445 + width: 125px; 446 + height: 91px; 447 + margin: 59px 0 30px 0; 448 + } 449 + .catculator-col__img--adolescent { 450 + height: 106px; 451 + margin: 44px 0 30px 0; 452 + } 453 + .catculator-col__img--preAdult { 454 + height: 128px; 455 + margin: 22px 0 30px 0; 456 + } 457 + .catculator-col__img--adult { 458 + width: 90px; 459 + height: 140px; 460 + margin: 10px 0 30px 0; 461 + } 462 + 463 + // ── Results: heading + inner card ──────────────────────────────────── 464 + .recom_daily_amount_heading { 465 + color: var(--rc-green); 466 + font-weight: 700; 467 + font-size: 1.5rem; 468 + text-align: center; 469 + margin-bottom: 1.5rem; 470 + } 471 + 472 + .recom_daily_amount { 473 + padding: 0; 474 + 475 + .rda_account_btn_container { 476 + margin: 1.5rem auto 0; 477 + width: 95%; 478 + display: flex; 479 + justify-content: center; 480 + 481 + .rda_account_btn { 482 + margin: auto; 483 + width: fit-content; 484 + padding-left: 25px; 485 + padding-right: 25px; 486 + } 487 + 488 + @include breakpoint('medium') { 489 + width: 30%; 490 + } 491 + } 492 + 493 + .recom_daily_amount_inner { 494 + background-color: var(--rc-card); 495 + margin: auto; 496 + width: 100%; 497 + border-radius: var(--rc-radius); 498 + padding: 18px 10px; 499 + 500 + .rc_reccoms { 501 + background-color: var(--rc-green-light); 502 + width: 95%; 503 + margin: auto; 504 + border-radius: var(--rc-radius); 505 + 506 + p { 507 + padding: 7px 15px; 508 + color: var(--rc-text); 509 + 510 + span { 511 + float: right; 512 + margin: 0; 513 + color: var(--rc-green); 514 + 515 + @include breakpoint('medium') { 516 + float: none; 517 + margin-left: 70px; 518 + } 519 + } 520 + } 521 + 522 + &:last-of-type { 523 + p { 524 + span { 525 + @include breakpoint('medium') { 526 + margin-left: 45px; 527 + } 528 + } 529 + } 530 + } 531 + } 532 + 533 + .daily_meals { 534 + width: 85%; 535 + margin: 10px auto; 536 + 537 + p { 538 + color: var(--rc-text-muted); 539 + text-align: center; 540 + } 541 + 542 + @include breakpoint('medium') { 543 + width: 89%; 544 + } 545 + } 546 + 547 + .rawsome-button--secondary { 548 + width: 95%; 549 + height: 2.5rem; 550 + margin: 2rem auto 0; 551 + position: relative; 552 + } 553 + 554 + @include breakpoint('medium') { 555 + width: 30%; 556 + } 557 + } 558 + } 559 + 560 + // ── Loading spinner ────────────────────────────────────────────────── 561 + .button--loading::after { 562 + content: ''; 563 + position: absolute; 564 + width: 30px; 565 + height: 30px; 566 + right: 0; 567 + left: 0; 568 + margin: auto; 569 + border: 6px solid var(--rc-green); 570 + border-top-color: #bd9b60; 571 + border-radius: 50%; 572 + animation: rawsome-button-loading-spinner 1s ease infinite; 573 + } 574 + 575 + .cta--loading { 576 + opacity: 0.2; 577 + pointer-events: none; 578 + } 579 + 580 + @keyframes rawsome-button-loading-spinner { 581 + from { 582 + transform: rotate(0turn); 583 + } 584 + 585 + to { 586 + transform: rotate(1turn); 587 + } 588 + } 589 + 590 + // ── Bottom "product types" info table ──────────────────────────────── 591 + #rawsome-bottom { 592 + margin-top: 2rem; 593 + width: 100vw; 594 + position: relative; 595 + left: calc(-50vw + 50%); 596 + padding: 3rem 0; 597 + 598 + .rawsome-info-table { 599 + display: grid; 600 + grid-template-columns: 1fr; 601 + gap: 2rem; 602 + margin: auto; 603 + width: 92%; 604 + 605 + > div { 606 + text-align: center; 607 + display: flex; 608 + flex-direction: column; 609 + align-items: center; 610 + justify-content: center; 611 + gap: 0.75rem; 612 + padding: 1.5rem 1rem; 613 + background-color: var(--rc-bg); 614 + border-radius: var(--rc-radius); 615 + 616 + img { 617 + width: auto; 618 + height: 120px; 619 + max-width: 40%; 620 + } 621 + 622 + h1 { 623 + margin: 0.5rem auto; 624 + font-size: 1.25rem; 625 + color: var(--rc-green); 626 + font-weight: 700; 627 + } 628 + 629 + p { 630 + margin-bottom: 0.5rem; 631 + color: var(--rc-text-muted); 632 + font-size: 0.95rem; 633 + } 634 + 635 + .rawsome-button--primary { 636 + width: 150px; 637 + height: 3rem; 638 + margin-top: 0.5rem; 639 + } 640 + } 641 + 642 + @include breakpoint('medium') { 643 + width: 81%; 644 + grid-template-columns: 1fr 1fr 1fr; 645 + } 646 + } 647 + } 648 + 649 + // ── Products modal (rendered by JS as #show_RDA) ───────────────────── 650 + #show_RDA { 651 + padding: 0; 652 + position: static; 653 + 654 + .modal-header { 655 + padding-left: 2.25rem; 656 + padding-right: 3.0357rem; 657 + border-bottom: none; 658 + 659 + .swal2-close { 660 + position: absolute; 661 + z-index: 2; 662 + top: 0; 663 + right: 0; 664 + align-items: center; 665 + justify-content: center; 666 + width: 1.2em; 667 + height: 1.2em; 668 + padding: 0; 669 + overflow: hidden; 670 + transition: color 0.1s ease-out; 671 + border: none; 672 + border-radius: 0; 673 + background: 0 0; 674 + color: #ccc; 675 + font-family: serif; 676 + font-size: 2.5em; 677 + line-height: 1.2; 678 + cursor: pointer; 679 + } 680 + } 681 + 682 + #rda-title, 683 + #swal2-title { 684 + color: var(--rc-green); 685 + text-align: center; 686 + } 687 + 688 + hr { 689 + border: none; 690 + margin: 0; 691 + } 692 + 693 + .swal2-content { 694 + margin: auto; 695 + width: 100%; 696 + 697 + @include breakpoint('medium') { 698 + width: 80%; 699 + } 700 + 701 + .product-grid { 702 + display: grid; 703 + grid-template-columns: 1fr; 704 + gap: 13px; 705 + 706 + @include breakpoint('small') { 707 + grid-template-columns: 1fr 1fr; 708 + } 709 + 710 + @include breakpoint('medium') { 711 + grid-template-columns: 1fr 1fr 1fr; 712 + } 713 + 714 + @include breakpoint('large') { 715 + grid-template-columns: 1fr 1fr 1fr 1fr; 716 + } 717 + } 718 + 719 + .product-section__title { 720 + text-align: center; 721 + margin-bottom: 1.5rem; 722 + color: var(--rc-green); 723 + } 724 + 725 + .wrapper { 726 + padding: 15px 10px; 727 + border-radius: var(--rc-radius); 728 + background-color: var(--rc-card); 729 + border: 2px solid var(--rc-green); 730 + display: flex; 731 + flex-direction: column; 732 + 733 + .image_wrap img { 734 + width: auto; 735 + height: 100px; 736 + display: block; 737 + margin: 0 auto; 738 + object-fit: contain; 739 + } 740 + 741 + .content_wrap { 742 + margin: 0.5rem auto; 743 + flex: 1; 744 + 745 + .product-name { 746 + text-align: center; 747 + line-height: 1.2; 748 + font-size: 0.875rem; 749 + color: var(--rc-green); 750 + } 751 + } 752 + 753 + .rda_wrap { 754 + text-align: center; 755 + padding: 0.4rem 0 0.5rem; 756 + 757 + .rda_label { 758 + margin: 0; 759 + font-size: 0.8rem; 760 + font-weight: 700; 761 + color: var(--rc-green); 762 + letter-spacing: 0.3px; 763 + } 764 + } 765 + 766 + .cta_wrap { 767 + margin-top: auto; 768 + } 769 + 770 + .rawsome-button--primary { 771 + margin: 0 auto; 772 + width: 100%; 773 + font-size: 0.75rem; 774 + height: 2.5rem; 775 + 776 + @include breakpoint('medium') { 777 + font-size: 0.875rem; 778 + } 779 + } 780 + 781 + @include breakpoint('medium') { 782 + padding: 20px; 783 + } 784 + } 785 + } 786 + } 787 + 788 + // ── Animations ─────────────────────────────────────────────────────── 789 + @keyframes rcFadeDown { 790 + from { 791 + opacity: 0; 792 + transform: translateY(-16px); 793 + } 794 + 795 + to { 796 + opacity: 1; 797 + transform: translateY(0); 798 + } 799 + }
+12 -721
templates/pages/custom/page/rawsome-catculator.html
··· 1 1 {{#partial "page"}} 2 - {{> components/common/breadcrumbs breadcrumbs=breadcrumbs}} 3 - {{{region name="page_builder_content__above-toggler"}}} 4 - {{{region name="page_builder_content__below-toggler"}}} 5 - 6 2 <div class="rawsome-catculator-page"> 7 3 <div class="calculator-heading"> 8 4 <h1>How much protein are you currently feeding your cat?</h1> ··· 15 11 {{> components/custom/calculator-toggler}} 16 12 {{> components/custom/calculator-toggler-mobile}} 17 13 18 - <div style="display: none"> 19 - <div class="tubs_temp" style="display: none"></div> 20 - <div class="pouches_temp" style="display: none"></div> 21 - </div> 22 - <div id="catculator" style="width: 100%; padding-top: 1.5rem"> 23 - <p 24 - style=" 25 - font-weight: bold; 26 - color: #687d6a; 27 - font-size: 24px; 28 - text-align: center; 29 - margin-bottom: 0; 30 - " 31 - > 32 - How old is your cat? 33 - </p> 34 - <div class="catculator-row"> 35 - <div class="catculator-col"> 36 - <img 37 - style=" 38 - width: 75px; 39 - height: 75px; 40 - margin: 75px 0px 30px 37px; 41 - " 42 - src="https://cdn11.bigcommerce.com/s-lh9wfk05w0/product_images/uploaded_images/cat1.png" 43 - /> 44 - <button class="rawsome-button--primary" onclick="age(1)"> 45 - <p>4-8 Weeks</p> 46 - </button> 47 - </div> 48 - 49 - <div class="catculator-col"> 50 - <img 51 - style=" 52 - width: 125px; 53 - height: 91px; 54 - margin: 59px 0px 30px 12px; 55 - " 56 - src="https://cdn11.bigcommerce.com/s-lh9wfk05w0/product_images/uploaded_images/cat2.png" 57 - /> 58 - <button class="rawsome-button--primary" onclick="age(2)"> 59 - <p>2-4 Months</p> 60 - </button> 61 - </div> 62 - 63 - <div class="catculator-col"> 64 - <img 65 - style="height: 106px; margin: 44px 0px 30px 0px" 66 - src="https://cdn11.bigcommerce.com/s-lh9wfk05w0/product_images/uploaded_images/cat3.png" 67 - /> 68 - <button class="rawsome-button--primary" onclick="age(3)"> 69 - <p>4-9 Months</p> 70 - </button> 71 - </div> 72 - 73 - <div class="catculator-col"> 74 - <img 75 - style="height: 128px; margin: 22px 0px 30px 0px" 76 - src="https://cdn11.bigcommerce.com/s-lh9wfk05w0/images/stencil/original/image-manager/9-12-months-cat-03.png?t=1660570333&_gl=1*1lk0d6z*_ga*ODg5ODM2MTQ0LjE2NTYzMTgwNTQ.*_ga_WS2VZYPC6G*MTY2MDU2NzY4Ny4xMDQuMS4xNjYwNTcwMzQwLjMy" 77 - /> 78 - <button class="rawsome-button--primary" onclick="age(4)"> 79 - <p>9-12 Months</p> 80 - </button> 81 - </div> 82 - 83 - <div class="catculator-col" style="margin-right: -120px !important"> 84 - <img 85 - style=" 86 - width: 90px; 87 - height: 140px; 88 - margin: 10px 0px 30px 30px; 89 - " 90 - src="https://cdn11.bigcommerce.com/s-lh9wfk05w0/product_images/uploaded_images/cat5.png" 91 - /> 92 - <button class="rawsome-button--primary" onclick="age(5)"> 93 - <p>12+ Months</p> 94 - </button> 95 - </div> 96 - </div> 97 - </div> 14 + <div id="catculator"></div> 98 15 99 - <div style="margin: 3rem auto; text-align: center"> 16 + <div class="calculator-disclaimer"> 100 17 <p> 101 18 Please note that the generic calculation is calculated by using an 102 19 average of 150kcal per 100g of PurrForm food. 103 - <br /> 104 - <br /> 20 + <br /><br /> 105 21 Please refer to the RDA to find out how much to feed by product. 106 - <br /> 107 - <br /> 22 + <br /><br /> 108 23 These are guidelines only and may need to be adjusted accordingly. 109 - <br /> 110 - <br /> 24 + <br /><br /> 111 25 If you need further information please contact us on 112 26 enquiry@purrform.co.uk. 113 27 </p> ··· 116 30 <div id="rawsome-bottom"> 117 31 <div class="rawsome-info-table"> 118 32 <div> 119 - <img 120 - src="https://cdn11.bigcommerce.com/s-lh9wfk05w0/images/stencil/original/image-manager/cat1new.png?t=1638444894&_gl=1*558qiq*_ga*MTEwMDQ4NTI5Ny4xNjg1OTY5NDc0*_ga_WS2VZYPC6G*MTY4ODEyODk1My4xMDIuMS4xNjg4MTMxMzIyLjI5LjAuMA.." 121 - /> 33 + <img src="https://cdn11.bigcommerce.com/s-lh9wfk05w0/images/stencil/original/image-manager/cat1new.png?t=1638444894&_gl=1*558qiq*_ga*MTEwMDQ4NTI5Ny4xNjg1OTY5NDc0*_ga_WS2VZYPC6G*MTY4ODEyODk1My4xMDIuMS4xNjg4MTMxMzIyLjI5LjAuMA.." /> 122 34 <div> 123 35 <h1>Super Fine Minced</h1> 124 36 <p>For baby kittens from 4-8 weeks old.</p> 125 - <button 126 - style=" 127 - display: block; 128 - margin: 10px auto 20px auto; 129 - width: 150px; 130 - height: 3rem; 131 - border-color: rgb(104, 125, 106); 132 - border-radius: 40px; 133 - background-color: rgb(104, 125, 106); 134 - text-align: center; 135 - " 136 - > 137 - <a 138 - href="/all" 139 - style=" 140 - color: #fff; 141 - font-size: 18px; 142 - font-weight: bold; 143 - margin: auto; 144 - padding-bottom: 3px; 145 - text-decoration: none; 146 - " 147 - > 148 - Shop Now 149 - </a> 150 - </button> 37 + <a href="/all" class="rawsome-button--primary">Shop Now</a> 151 38 </div> 152 39 </div> 153 40 <div> 154 - <img 155 - src="https://cdn11.bigcommerce.com/s-lh9wfk05w0/images/stencil/original/image-manager/cat3new.png?t=1638444909&_gl=1*1c7qqbf*_ga*MTEwMDQ4NTI5Ny4xNjg1OTY5NDc0*_ga_WS2VZYPC6G*MTY4ODEyODk1My4xMDIuMS4xNjg4MTMxMzIyLjI5LjAuMA.." 156 - /> 41 + <img src="https://cdn11.bigcommerce.com/s-lh9wfk05w0/images/stencil/original/image-manager/cat3new.png?t=1638444909&_gl=1*1c7qqbf*_ga*MTEwMDQ4NTI5Ny4xNjg1OTY5NDc0*_ga_WS2VZYPC6G*MTY4ODEyODk1My4xMDIuMS4xNjg4MTMxMzIyLjI5LjAuMA.." /> 157 42 <div> 158 43 <h1>Finely Minced</h1> 159 44 <p>For kittens above 8 weeks to 9 months old.</p> 160 - <button 161 - style=" 162 - display: block; 163 - margin: 10px auto 20px auto; 164 - width: 150px; 165 - height: 3rem; 166 - border-color: rgb(104, 125, 106); 167 - border-radius: 40px; 168 - background-color: rgb(104, 125, 106); 169 - text-align: center; 170 - " 171 - > 172 - <a 173 - href="/all" 174 - style=" 175 - color: #fff; 176 - font-size: 18px; 177 - font-weight: bold; 178 - margin: auto; 179 - padding-bottom: 3px; 180 - text-decoration: none; 181 - " 182 - > 183 - Shop Now 184 - </a> 185 - </button> 45 + <a href="/all" class="rawsome-button--primary">Shop Now</a> 186 46 </div> 187 47 </div> 188 48 <div> 189 - <img 190 - src="https://cdn11.bigcommerce.com/s-lh9wfk05w0/images/stencil/original/image-manager/adult-cat-green-new2.png?t=1655893873&_gl=1*1j7s8a4*_ga*MTEwMDQ4NTI5Ny4xNjg1OTY5NDc0*_ga_WS2VZYPC6G*MTY4ODEyODk1My4xMDIuMS4xNjg4MTMxMzIyLjI5LjAuMA.." 191 - /> 49 + <img src="https://cdn11.bigcommerce.com/s-lh9wfk05w0/images/stencil/original/image-manager/adult-cat-green-new2.png?t=1655893873&_gl=1*1j7s8a4*_ga*MTEwMDQ4NTI5Ny4xNjg1OTY5NDc0*_ga_WS2VZYPC6G*MTY4ODEyODk1My4xMDIuMS4xNjg4MTMxMzIyLjI5LjAuMA.." /> 192 50 <div> 193 51 <h1>Coarsely Minced</h1> 194 52 <p>For adult cats above the age of 9 months old.</p> 195 - <button 196 - style=" 197 - display: block; 198 - margin: 10px auto 20px auto; 199 - width: 150px; 200 - height: 3rem; 201 - border-color: rgb(104, 125, 106); 202 - border-radius: 40px; 203 - background-color: rgb(104, 125, 106); 204 - text-align: center; 205 - " 206 - > 207 - <a 208 - href="/all" 209 - style=" 210 - color: #fff; 211 - font-size: 18px; 212 - font-weight: bold; 213 - margin: auto; 214 - padding-bottom: 3px; 215 - text-decoration: none; 216 - " 217 - > 218 - Shop Now 219 - </a> 220 - </button> 53 + <a href="/all" class="rawsome-button--primary">Shop Now</a> 221 54 </div> 222 55 </div> 223 56 </div> 224 57 </div> 225 58 </div> 226 59 227 - <script 228 - src="https://code.jquery.com/jquery-3.7.0.js" 229 - integrity="sha256-JlqSTELeR4TLqP0OG9dxM7yDPqX1ox/HfgiSLBj8+kM=" 230 - crossorigin="anonymous" 231 - ></script> 232 - 233 - <script> 234 - let age_value = null; 235 - let weight_value = null; 236 - let coef = null; 237 - let activity_value = null; 238 - let neutered_value = null; 239 - let daily_meals = null; 240 - let total = null; 241 - let kcal = null; 242 - const KCAL_PER_KG = 1500; 243 - 244 - const age = (num) => { 245 - $('.tubs_temp').html(''); 246 - $('.pouches_temp').html(''); 247 - age_value = num; 248 - url = `https://purrform-apps-027e.onrender.com/calculator?age=${num}`; 249 - 250 - $.ajax({ 251 - url: url, 252 - method: 'GET', 253 - success: function (response) { 254 - var tubs; 255 - var pouches; 256 - if (response != '' && response != undefined) { 257 - if (num == 1) { 258 - if (response.hasOwnProperty('weaning_tubs')) { 259 - tubs = response.weaning_tubs; 260 - } 261 - if (response.hasOwnProperty('weaning_pouches')) { 262 - pouches = response.weaning_pouches; 263 - } 264 - } 265 - if (num == 2 || num == 3) { 266 - if (response.hasOwnProperty('kitten_tubs')) { 267 - tubs = response.kitten_tubs; 268 - } 269 - if (response.hasOwnProperty('kitten_pouches')) { 270 - pouches = response.kitten_pouches; 271 - } 272 - } 273 - if (num == 4 || num == 5) { 274 - if (response.hasOwnProperty('adult_tubs')) { 275 - tubs = response.adult_tubs; 276 - } 277 - if (response.hasOwnProperty('adult_pouches')) { 278 - pouches = response.adult_pouches; 279 - } 280 - } 281 - } 282 - if (tubs != null && tubs != undefined) { 283 - $(tubs).each(function (i, val) { 284 - p_id = val.id; 285 - p_image = val.image; 286 - p_name = val.name; 287 - p_url = val.action_url; 288 - p_cal_per_kg = val.calorie; 289 - 290 - $('.tubs_temp').append( 291 - '<div class="wrapper"><div class="image_wrap" style="">' + 292 - '<a href="' + 293 - p_url + 294 - '"><img src="' + 295 - p_image + 296 - '"style="width: auto; height: auto; "/></a>' + 297 - '</div>' + 298 - '<div class="content_wrap" style="">' + 299 - '<a href="' + 300 - p_url + 301 - '"><p style="line-height: 16px; font-size: 14px; color: #687D6A;">' + 302 - p_name + 303 - '</p></a>' + 304 - '</div>' + 305 - '<div class="cta_wrap" style="">' + 306 - '<a href="' + 307 - p_url + 308 - '"><button class="rawsome-button--primary" data-calorie = "' + 309 - p_cal_per_kg + 310 - '" >150g per day</button></a>' + 311 - '</div></div>' 312 - ); 313 - }); 314 - } else { 315 - $('.tubs_temp').html( 316 - '<div class="wrapper"><p>No product found</p></div>' 317 - ); 318 - } 319 - if (pouches != null && pouches != undefined) { 320 - $(pouches).each(function (i, val) { 321 - p_id = val.id; 322 - p_image = val.image; 323 - p_name = val.name; 324 - p_url = val.action_url; 325 - p_cal_per_kg = val.calorie; 326 - //console.log("Here is the product data"); 327 - //console.log(JSON.stringify(val)); 328 - $('.pouches_temp').append( 329 - '<div class="wrapper"><div class="image_wrap" style="">' + 330 - '<a href="' + 331 - p_url + 332 - '"><img src="' + 333 - p_image + 334 - '"style="width: auto; height: auto;"/></a>' + 335 - '</div>' + 336 - '<div class="content_wrap" style="">' + 337 - '<a href="' + 338 - p_url + 339 - '"><p style="line-height: 16px; font-size: 14px; color: #687D6A;">' + 340 - p_name + 341 - '</p></a>' + 342 - '</div>' + 343 - '<div class="cta_wrap" style="">' + 344 - '<a href="' + 345 - p_url + 346 - '"><button class="rawsome-button--primary" data-calorie = "' + 347 - p_cal_per_kg + 348 - '" >150g per day</button></a>' + 349 - '</div></div>' 350 - ); 351 - }); 352 - } else { 353 - $('.pouches_temp').html( 354 - '<div class="wrapper"><p>No product found</p></div>' 355 - ); 356 - } 357 - }, 358 - error: function (jqxhr, status, error) { 359 - console.log('Something went wrong!'); 360 - console.log('jqxhr!' + JSON.stringify(jqxhr)); 361 - console.log('status' + status); 362 - console.log('Error!' + error); 363 - }, 364 - }); 365 - switch (num) { 366 - case 1: 367 - coef = 2.3; 368 - daily_meals = `Feed as & when required`; 369 - activity_value = 95; 370 - toKittenPageTwo(); 371 - break; 372 - case 2: 373 - coef = 2.15; 374 - daily_meals = `Divided into 4 to 6 meals a day`; 375 - toAdolescentPageTwo(); 376 - break; 377 - case 3: 378 - coef = 1.85; 379 - daily_meals = `Divided into 3 to 4 meals a day`; 380 - toPageTwo(); 381 - break; 382 - case 4: 383 - coef = 1.5; 384 - daily_meals = `Divided into 2 meals a day`; 385 - toPageTwo(); 386 - break; 387 - case 5: 388 - coef = 1; 389 - daily_meals = `Divided into 2 meals a day`; 390 - toPageTwo(); 391 - break; 392 - } 393 - }; 394 - 395 - const weightInput = () => { 396 - const weight_input = document.getElementById('weight_input'); 397 - const nextButton = weight_input.parentElement.querySelector( 398 - '.rawsome-button--primary' 399 - ); 400 - const value = parseFloat(weight_input.value); 401 - 402 - nextButton.disabled = isNaN(value) || value <= 0; 403 - }; 404 - 405 - const toKittenPageTwo = () => { 406 - let catculator = document.getElementById('catculator'); 407 - catculator.innerHTML = /* html */` 408 - <div id='catculator' style='width: 100%'> 409 - <p style='font-weight: bold; color: #687D6A; font-size: 24px; text-align: center;'> 410 - How much does your cat weigh? 411 - </p> 412 - <div class="cat_weight_cal"> 413 - <img src='https://cdn11.bigcommerce.com/s-lh9wfk05w0/images/stencil/320w/image-manager/cat-weight.png'/> 414 - <div style='display: flex; flex-direction: column; width: auto; height: auto;'> 415 - <p class="cat_weight_p" >kg</p> 416 - <input id='weight_input' type="number" min="1" step="1" oninput='weightInput()'/> 417 - <div> 418 - <button class="rawsome-button--secondary" onclick='toPageOne()'>Back</button> 419 - <button class="rawsome-button--primary" onclick='weight(1)' disabled >Next</button> 420 - </div> 421 - </div> 422 - 423 - </div> 424 - 425 - </div> 426 - `; 427 - }; 428 - 429 - const toAdolescentPageTwo = () => { 430 - let catculator = document.getElementById('catculator'); 431 - catculator.innerHTML = ` 432 - <div id='catculator' style='width: 100%'> 433 - <p style='font-weight: bold; color: #687D6A; font-size: 24px; text-align: center;'> 434 - How much does your cat weigh? 435 - </p> 436 - <div class="cat_weight_cal" > 437 - <img src='https://cdn11.bigcommerce.com/s-lh9wfk05w0/images/stencil/320w/image-manager/cat-weight.png'/> 438 - <div style='display: flex; flex-direction: column; width: auto; height: auto;'> 439 - <p class="cat_weight_p" >kg</p> 440 - <input id='weight_input' type="number" min="1" step="1" oninput='weightInput()' /> 441 - <div> 442 - <button class="rawsome-button--secondary" onclick='toPageOne()' >Back</button> 443 - <button class="rawsome-button--primary" disabled onclick='weight(2)' >Next</button> 444 - </div> 445 - </div> 446 - 447 - </div> 448 - </div> 449 - `; 450 - }; 451 - 452 - const toAdolescentPageThree = () => { 453 - let catculator = document.getElementById('catculator'); 454 - catculator.innerHTML = ` 455 - <div id='catculator' style='width: 100%'> 456 - <p style='font-weight: bold; color: #687D6A; font-size: 24px; text-align: center;'> 457 - Is your cat spayed / neutered? 458 - </p> 459 - <div class="cat_neutered" style='margin-top: 35px; display: flex; flex-direction: row;'> 460 - <img style='width: 295px; height: 215px; margin-left: 10%;' src='https://cdn11.bigcommerce.com/s-lh9wfk05w0/product_images/uploaded_images/kittengreen-new.png'/> 461 - <div style='display: flex; flex-direction: column; width: auto; height: auto;'> 462 - <button class="rawsome-button--primary" onclick='neutered(true, 1)' >Yes</button> 463 - <button class="rawsome-button--primary" onclick='neutered(false, 1)'>No</button> 464 - </div> 465 - <button class="rawsome-button--secondary" onclick='toAdolescentPageTwo()' >Back</button> 466 - </div> 467 - </div> 468 - `; 469 - }; 470 - 471 - const catculate = () => { 472 - total = Math.round( 473 - ((Math.pow(weight_value, 0.67) * activity_value * 1000) / 474 - KCAL_PER_KG) * 475 - coef 476 - ); 477 - kcal = Math.round((150 * total) / 100); 478 - toPageFive(); 479 - }; 480 - 481 - const weight = (num) => { 482 - weight_value = parseFloat( 483 - document.getElementById('weight_input').value 484 - ); 485 - switch (num) { 486 - case 1: 487 - activity_value = 95; 488 - catculate(); 489 - break; 490 - case 2: 491 - toAdolescentPageThree(); 492 - break; 493 - case 3: 494 - toPageThree(); 495 - break; 496 - } 497 - }; 498 - 499 - const neutered = (bool, num) => { 500 - neutered_value = bool; 501 - if (num === 1) { 502 - activity_value = neutered_value ? 87.5 : 95; 503 - catculate(); 504 - } else toPageFour(); 505 - }; 506 - 507 - const activity = (num) => { 508 - switch (num) { 509 - case 1: 510 - activity_value = neutered_value ? 52 : 80; 511 - break; 512 - case 2: 513 - activity_value = neutered_value ? 64 : 87.5; 514 - break; 515 - case 3: 516 - activity_value = neutered_value ? 75 : 95; 517 - break; 518 - } 519 - catculate(); 520 - }; 521 - 522 - 523 - 524 - const reset = () => { 525 - age_value = null; 526 - weight_value = null; 527 - coef = null; 528 - activity_value = null; 529 - neutered_value = null; 530 - daily_meals = null; 531 - total = null; 532 - kcal = null; 533 - toPageOne(); 534 - }; 535 - 536 - const closeProductWindow = () => { 537 - document.getElementById('show_RDA').style.display = 'none'; 538 - const productWindow = document.getElementById('productWindow'); 539 - productWindow.innerHTML = ``; 540 - }; 541 - 542 - const showProducts = () => { 543 - // alert("show_RDA") 544 - document.getElementById('show_RDA').style.display = 'block'; 545 - document.getElementById('show_RDA').style.visibility = 'visible'; 546 - const productWindow = document.getElementById('productWindow123'); 547 - getTubs = $('.tubs_temp'); 548 - getpouches = $('.pouches_temp'); 549 - productWindow.innerHTML = 550 - `<div class="" id="show_RDA" tabindex="-1" aria-labelledby="redeem_point" style="display: block; visibility: visible;" aria-hidden="true"> 551 - <div class="modal-dialog"> 552 - <!--<div class="modal-header swal2-header"> 553 - <button type="button" class="swal2-close" onclick="document.getElementById('show_RDA').style.display='none';">x</button> 554 - </div>--> 555 - <div class="modal-content swal2-content" > 556 - <h1 style="text-align:center; margin-bottom: 1.5rem;" id="swal2-title">450g Tubs</h1> 557 - 558 - <div id="swal2-content_tubs" class="swal2-html-container tubs" style="display: block;"> 559 - ` + 560 - getTubs.html() + 561 - ` 562 - </div> 563 - <hr> 564 - <h1 style="text-align:center; margin-bottom: 1.5rem;" id="swal2-title">Pouches</h1> 565 - 566 - <div id="swal2-content-pouches" class="swal2-html-container tubs" style="display: block;"> 567 - 568 - ` + 569 - getpouches.html() + 570 - ` 571 - </div> 572 - <hr> 573 - 574 - </div> 575 - 576 - </div> 577 - </div> 578 - `; 579 - getTubs.css('display', 'flex'); 580 - getpouches.css('display', 'flex'); 581 - $('.cta_wrap button').each(function () { 582 - this_cal = $(this).attr('data-calorie'); 583 - this_cal = this_cal * 10; 584 - 585 - this_total = Math.round( 586 - ((Math.pow(weight_value, 0.67) * activity_value * 1000) / 587 - this_cal) * 588 - coef 589 - ); 590 - $(this).text(this_total + 'g per day'); 591 - }); 592 - }; 593 - 594 - const toPageOne = () => { 595 - let catculator = document.getElementById('catculator'); 596 - catculator.innerHTML = ` 597 - <div id='catculator' style='width: 100%'> 598 - <p style='font-weight: bold; color: #687D6A; font-size: 24px; text-align: center;'> 599 - How old is your cat? 600 - </p> 601 - <div class="catculator-row" style='width: 100%; display: flex; flex-direction: row;'> 602 - <div class="catculator-col"> 603 - <img style='width: 75px; height: 75px; margin: 75px 0px 30px 37px;' src='https://cdn11.bigcommerce.com/s-lh9wfk05w0/product_images/uploaded_images/cat1.png'/> 604 - <button class="rawsome-button--primary" onclick='age(1)' > 605 - <p style="color: #fff; font-size: 18px; font-weight: bold; margin: auto; padding-bottom: 3px;"> 606 - 4-8 Weeks 607 - </p> 608 - </button> 609 - </div> 610 - 611 - <div class="catculator-col"> 612 - <img style='width: 125px; height: 91px; margin: 59px 0px 30px 12px;' src='https://cdn11.bigcommerce.com/s-lh9wfk05w0/product_images/uploaded_images/cat2.png'/> 613 - <button class="rawsome-button--primary" onclick='age(2)' > 614 - <p style="color: #fff; font-size: 18px; font-weight: bold; margin: auto; padding-bottom: 3px;"> 615 - 2-4 Months 616 - </p> 617 - </button> 618 - </div> 619 - 620 - <div class="catculator-col"> 621 - <img style='width: 150px; height: 106px; margin: 44px 0px 30px 0px;' src='https://cdn11.bigcommerce.com/s-lh9wfk05w0/product_images/uploaded_images/cat3.png'/> 622 - <button class="rawsome-button--primary" onclick='age(3)' > 623 - <p style="color: #fff; font-size: 18px; font-weight: bold; margin: auto; padding-bottom: 3px;"> 624 - 4-9 Months 625 - </p> 626 - </button> 627 - </div> 628 - 629 - <div class="catculator-col"> 630 - <img style='width: 95px; height: 128px; margin: 22px 0px 30px 27px;' src='https://cdn11.bigcommerce.com/s-lh9wfk05w0/product_images/uploaded_images/cat4.png'/> 631 - <button class="rawsome-button--primary" onclick='age(4)'> 632 - <p style="color: #fff; font-size: 18px; font-weight: bold; margin: auto; padding-bottom: 3px;"> 633 - 9-12 Months 634 - </p> 635 - </button> 636 - </div> 637 - 638 - <div class="catculator-col"> 639 - <img style='width: 90px; height: 140px; margin: 10px 0px 30px 30px;' src='https://cdn11.bigcommerce.com/s-lh9wfk05w0/product_images/uploaded_images/cat5.png'/> 640 - <button class="rawsome-button--primary" onclick='age(5)' > 641 - <p style="color: #fff; font-size: 18px; font-weight: bold; margin: auto; padding-bottom: 3px;"> 642 - 12+ Months 643 - </p> 644 - </button> 645 - </div> 646 - </div> 647 - </div> 648 - `; 649 - }; 650 - 651 - const toPageFive = () => { 652 - let catculator = document.getElementById('catculator'); 653 - catculator.innerHTML = ` 654 - <div id='catculator' style='width: 100%'> 655 - <p class="recom_daily_amount_heading" > 656 - Your Recommended Daily Amount (RDA) is... 657 - </p> 658 - <div class="recom_daily_amount"> 659 - <!--<img style='width: 138px; height: 215px; margin: 0px 116px 0px 116px;' src='https://cdn11.bigcommerce.com/s-lh9wfk05w0/product_images/uploaded_images/adult-cat-green-new.png'/>--> 660 - <div class="recom_daily_amount_inner"> 661 - <div class="rc_reccoms" > 662 - <p >Serving per day: <span><strong>${total}g</strong></span></p> 663 - <!--<button style='cursor:auto;margin: -10px 0px 0px 50px; color: #fff; font-size: 18px; font-weight: bold; text-align: center; width: 165px; height: 3.5rem; background-color: #BD9B60; border-color: #00000000; border-radius: 45px;'>${total}g</button>--> 664 - </div> 665 - 666 - <div class="daily_meals"> 667 - <p >${daily_meals}</p> 668 - </div> 669 - 670 - <div class="rc_reccoms"> 671 - <div> 672 - <p >Daily calorie intake: <span><strong>${kcal} kcal</strong></span></p> 673 - <!--<button style='cursor:auto;margin: -10px 0px 0px 20px; color: #fff; font-size: 18px; font-weight: bold; text-align: center; width: 165px; height: 3.5rem; background-color: #BD9B60; border-color: #00000000; border-radius: 45px;'>${kcal} kcal</button></div>--> 674 - 675 - </div> 676 - </div> 677 - <button class="rawsome-button--secondary" onclick='reset()'>Start Over</button> 678 - </div> 679 - 680 - 681 - <div class="rda_account_btn_container"> 682 - <button class="rda_account_btn rawsome-button--secondary" title="loading... please wait" id="show_product_cta" class="cta--loading" onclick='showProducts()' style=''>View your RDA on our products 683 - <span class="button--loading"></span> 684 - </button> 685 - 686 - </div> 687 - 688 - <div id="show_RDA" class="swal2-container swal2-center swal2-backdrop-show" style="overflow-y: auto;display:none"> 689 - <div id="productWindow123"></div> 690 - </div> 691 - 692 - </div> 693 - `; 694 - interval = setInterval(function () { 695 - tub = $('.tubs_temp .wrapper').children().length; 696 - pouche = $('.pouches_temp .wrapper').children().length; 697 - if (tub > 0 || pouche > 0) { 698 - clearInterval(interval); 699 - $('.button--loading').hide(); 700 - $('#show_product_cta').removeClass('cta--loading'); 701 - $('#show_product_cta').removeAttr('title'); 702 - } 703 - }, 500); 704 - }; 705 - 706 - const toPageThree = () => { 707 - let catculator = document.getElementById('catculator'); 708 - catculator.innerHTML = ` 709 - <div id='catculator' style='width: 100%'> 710 - <p style='font-weight: bold; color: #687D6A; font-size: 24px; text-align: center;'> 711 - Is your cat spayed / nuetered? 712 - </p> 713 - <div class="cat_spayed"> 714 - <img style='width: 295px; height: 215px; margin-left: 10%;' src='https://cdn11.bigcommerce.com/s-lh9wfk05w0/product_images/uploaded_images/kittengreen-new.png'/> 715 - <div style='display: flex; flex-direction: column; width: auto; height: auto;'> 716 - <button class="rawsome-button--primary" onclick='neutered(true, 2)' style='color: #fff; font-size: 18px; font-weight: bold; margin: 40px 0px 0px 96px; text-align: center; width: 165px; height: 3.5rem; background-color: #687D6A; border-color: #00000000; border-radius: 45px;'>Yes</button> 717 - <button class="rawsome-button--primary" onclick='neutered(false, 2)' style='color: #fff; font-size: 18px; font-weight: bold; margin: 20px 0px 0px 96px; text-align: center; width: 165px; height: 3.5rem; background-color: #687D6A; border-color: #00000000; border-radius: 45px;'>No</button> 718 - </div> 719 - <button class="rawsome-button--secondary" onclick='toPageTwo()' >Back</button> 720 - </div> 721 - </div> 722 - `; 723 - }; 724 - 725 - const toPageFour = () => { 726 - let catculator = document.getElementById('catculator'); 727 - catculator.innerHTML = ` 728 - <div id='catculator' style='width: 100%'> 729 - <p style='font-weight: bold; color: #687D6A; font-size: 24px; text-align: center;'> 730 - How active is your cat? 731 - </p> 732 - <div class="cat_active" style='margin-top: 35px; display: flex; flex-direction: row;'> 733 - <img style='width: 371px; height: 190px; margin: 25px 0px 0px 5%;' src='https://cdn11.bigcommerce.com/s-lh9wfk05w0/product_images/uploaded_images/twocatsgreen.png'/> 734 - <div style='display: flex; flex-direction: column; width: auto; height: auto;'> 735 - <button class="rawsome-button--primary" onclick='activity(1)' >Not Much</button> 736 - <button class="rawsome-button--primary" onclick='activity(2)' >Moderately</button> 737 - <button class="rawsome-button--primary" onclick='activity(3)' >Active</button> 738 - </div> 739 - <button class="rawsome-button--secondary" onclick='toPageThree()' >Back</button> 740 - </div> 741 - </div> 742 - `; 743 - }; 744 - 745 - const toPageTwo = () => { 746 - let catculator = document.getElementById('catculator'); 747 - catculator.innerHTML = ` 748 - <div id='catculator' style='width: 100%'> 749 - <p style='font-weight: bold; color: #687D6A; font-size: 24px; text-align: center;'> 750 - How much does your cat weigh? 751 - </p> 752 - <div class="cat_weight_cal" > 753 - <img src='https://cdn11.bigcommerce.com/s-lh9wfk05w0/images/stencil/320w/image-manager/cat-weight.png'/> 754 - <div style='display: flex; flex-direction: column; width: auto; height: auto;'> 755 - <p class="cat_weight_p" >kg</p> 756 - <input id='weight_input' type="number" min="1" step="1" oninput='weightInput()' /> 757 - <div> 758 - <button class="rawsome-button--secondary" onclick='toPageOne()' >Back</button> 759 - <button class="rawsome-button--primary" onclick='weight(3)' disabled >Next</button> 760 - </div> 761 - </div> 762 - 763 - </div> 764 - </div> 765 - `; 766 - }; 767 - </script> 768 - 769 60 {{/partial}} 770 - {{> layout/base}} 61 + {{> layout/base}}