33 klaviyo recomendations (#40) · rogerioromao.dev/purrform-frontend@e0d5941

+1 -1

config.json

··· 1 1 { 2 - "name": "credit system checkout", 2 + "name": "diet builder test", 3 3 "version": "6.10.0", 4 4 "template_engine": "handlebars_v4", 5 5 "meta": {

templates/pages/custom/page/diet-builder.html

This is a binary file and will not be displayed.

+508 -515

templates/pages/custom/page/rawsome-catculator.html

··· 1 - {{#partial "page"}} {{> components/common/breadcrumbs breadcrumbs=breadcrumbs}} 2 - {{{region name="page_builder_content__above-toggler"}}} {{> 3 - components/custom/calculator-toggler}} {{> 4 - components/custom/calculator-toggler-mobile}} {{{region 5 - name="page_builder_content__below-toggler"}}} {{!--<div 6 - class="rawsome-catculator-page" 7 - > 1 + {{#partial "page"}} 2 + {{> components/common/breadcrumbs breadcrumbs=breadcrumbs}} 3 + {{{region name="page_builder_content__above-toggler"}}} 4 + {{>components/custom/calculator-toggler}} 5 + {{>components/custom/calculator-toggler-mobile}} 6 + {{{region name="page_builder_content__below-toggler"}}} 7 + 8 + <div class="rawsome-catculator-page"> 8 9 <div class="calculator-heading"> 9 10 <h1>How much protein are you currently feeding your cat?</h1> 10 11 <p> ··· 13 14 </p> 14 15 </div> 15 16 16 - {{> components/custom/calculator-toggler}} {{> 17 - components/custom/calculator-toggler-mobile}} 17 + {{> components/custom/calculator-toggler}} 18 + {{> components/custom/calculator-toggler-mobile}} 18 19 19 20 <div style="display: none"> 20 21 <div class="tubs_temp" style="display: none"></div> ··· 223 224 </div> 224 225 </div> 225 226 </div> 227 + </div> 226 228 227 - <script 228 - src="https://code.jquery.com/jquery-3.7.0.js" 229 - integrity="sha256-JlqSTELeR4TLqP0OG9dxM7yDPqX1ox/HfgiSLBj8+kM=" 230 - crossorigin="anonymous" 231 - ></script> 229 + <script 230 + src="https://code.jquery.com/jquery-3.7.0.js" 231 + integrity="sha256-JlqSTELeR4TLqP0OG9dxM7yDPqX1ox/HfgiSLBj8+kM=" 232 + crossorigin="anonymous" 233 + ></script> 232 234 233 - <script> 234 - let prev_value = ``; 235 - let age_value = null; 236 - let weight_value = null; 237 - let coef = null; 238 - let activity_value = null; 239 - let neutered_value = null; 240 - let daily_meals = null; 241 - let total = null; 242 - let kcal = null; 243 - var kcal_per_kg = 1500; 235 + <script> 236 + let age_value = null; 237 + let weight_value = null; 238 + let coef = null; 239 + let activity_value = null; 240 + let neutered_value = null; 241 + let daily_meals = null; 242 + let total = null; 243 + let kcal = null; 244 + const KCAL_PER_KG = 1500; 244 245 245 - const weightInput = () => { 246 - const weight_input = document.getElementById('weight_input'); 247 - const re = /^[1-9][0-9]?$/; 246 + const age = (num) => { 247 + $('.tubs_temp').html(''); 248 + $('.pouches_temp').html(''); 249 + age_value = num; 250 + url = `https://purrform-apps-027e.onrender.com/calculator?age=${num}`; 248 251 249 - console.table({ 250 - 'prev value': prev_value, 251 - 'weight input': weight_input.value, 252 - }); 253 - console.log('passes regex test:', re.test(weight_input.value)); 252 + $.ajax({ 253 + url: url, 254 + method: 'GET', 255 + success: function (response) { 256 + var tubs; 257 + var pouches; 258 + if (response != '' && response != undefined) { 259 + if (num == 1) { 260 + if (response.hasOwnProperty('weaning_tubs')) { 261 + tubs = response.weaning_tubs; 262 + } 263 + if (response.hasOwnProperty('weaning_pouches')) { 264 + pouches = response.weaning_pouches; 265 + } 266 + } 267 + if (num == 2 || num == 3) { 268 + if (response.hasOwnProperty('kitten_tubs')) { 269 + tubs = response.kitten_tubs; 270 + } 271 + if (response.hasOwnProperty('kitten_pouches')) { 272 + pouches = response.kitten_pouches; 273 + } 274 + } 275 + if (num == 4 || num == 5) { 276 + if (response.hasOwnProperty('adult_tubs')) { 277 + tubs = response.adult_tubs; 278 + } 279 + if (response.hasOwnProperty('adult_pouches')) { 280 + pouches = response.adult_pouches; 281 + } 282 + } 283 + } 284 + if (tubs != null && tubs != undefined) { 285 + $(tubs).each(function (i, val) { 286 + p_id = val.id; 287 + p_image = val.image; 288 + p_name = val.name; 289 + p_url = val.action_url; 290 + p_cal_per_kg = val.calorie; 254 291 255 - if (weight_input.value && !re.test(weight_input.value)) 256 - weight_input.value = prev_value; 292 + $('.tubs_temp').append( 293 + '<div class="wrapper"><div class="image_wrap" style="">' + 294 + '<a href="' + 295 + p_url + 296 + '"><img src="' + 297 + p_image + 298 + '"style="width: auto; height: auto; "/></a>' + 299 + '</div>' + 300 + '<div class="content_wrap" style="">' + 301 + '<a href="' + 302 + p_url + 303 + '"><p style="line-height: 16px; font-size: 14px; color: #687D6A;">' + 304 + p_name + 305 + '</p></a>' + 306 + '</div>' + 307 + '<div class="cta_wrap" style="">' + 308 + '<a href="' + 309 + p_url + 310 + '"><button class="rawsome-button--primary" data-calorie = "' + 311 + p_cal_per_kg + 312 + '" >150g per day</button></a>' + 313 + '</div></div>' 314 + ); 315 + }); 316 + } else { 317 + $('.tubs_temp').html( 318 + '<div class="wrapper"><p>No product found</p></div>' 319 + ); 320 + } 321 + if (pouches != null && pouches != undefined) { 322 + $(pouches).each(function (i, val) { 323 + p_id = val.id; 324 + p_image = val.image; 325 + p_name = val.name; 326 + p_url = val.action_url; 327 + p_cal_per_kg = val.calorie; 328 + //console.log("Here is the product data"); 329 + //console.log(JSON.stringify(val)); 330 + $('.pouches_temp').append( 331 + '<div class="wrapper"><div class="image_wrap" style="">' + 332 + '<a href="' + 333 + p_url + 334 + '"><img src="' + 335 + p_image + 336 + '"style="width: auto; height: auto;"/></a>' + 337 + '</div>' + 338 + '<div class="content_wrap" style="">' + 339 + '<a href="' + 340 + p_url + 341 + '"><p style="line-height: 16px; font-size: 14px; color: #687D6A;">' + 342 + p_name + 343 + '</p></a>' + 344 + '</div>' + 345 + '<div class="cta_wrap" style="">' + 346 + '<a href="' + 347 + p_url + 348 + '"><button class="rawsome-button--primary" data-calorie = "' + 349 + p_cal_per_kg + 350 + '" >150g per day</button></a>' + 351 + '</div></div>' 352 + ); 353 + }); 354 + } else { 355 + $('.pouches_temp').html( 356 + '<div class="wrapper"><p>No product found</p></div>' 357 + ); 358 + } 359 + }, 360 + error: function (jqxhr, status, error) { 361 + console.log('Something went wrong!'); 362 + console.log('jqxhr!' + JSON.stringify(jqxhr)); 363 + console.log('status' + status); 364 + console.log('Error!' + error); 365 + }, 366 + }); 367 + switch (num) { 368 + case 1: 369 + coef = 2.3; 370 + daily_meals = `Feed as & when required`; 371 + activity_value = 95; 372 + toKittenPageTwo(); 373 + break; 374 + case 2: 375 + coef = 2.15; 376 + daily_meals = `Divided into 4 to 6 meals a day`; 377 + toAdolescentPageTwo(); 378 + break; 379 + case 3: 380 + coef = 1.85; 381 + daily_meals = `Divided into 3 to 4 meals a day`; 382 + toPageTwo(); 383 + break; 384 + case 4: 385 + coef = 1.5; 386 + daily_meals = `Divided into 2 meals a day`; 387 + toPageTwo(); 388 + break; 389 + case 5: 390 + coef = 1; 391 + daily_meals = `Divided into 2 meals a day`; 392 + toPageTwo(); 393 + break; 394 + } 395 + }; 257 396 258 - prev_value = weight_input.value; 259 - }; 397 + const weightInput = () => { 398 + const weight_input = document.getElementById('weight_input'); 399 + const re = /^[1-9][0-9]?$/; 260 400 261 - const toKittenPageTwo = () => { 262 - let catculator = document.getElementById('catculator'); 263 - catculator.innerHTML = ` 264 - <div id='catculator' style='width: 100%'> 265 - <p style='font-weight: bold; color: #687D6A; font-size: 24px; text-align: center;'> 266 - How much does your cat weigh? 267 - </p> 268 - <div class="cat_weight_cal"> 269 - <img style='width: 250px; height: 215px; margin-left: 15%;' src='https://cdn11.bigcommerce.com/s-lh9wfk05w0/images/stencil/320w/image-manager/cat-weight.png'/> 270 - <div style='display: flex; flex-direction: column; width: auto; height: auto;'> 271 - <p class="cat_weight_p" >kg</p> 272 - <input id='weight_input' oninput='weightInput()' style=' margin: 40px 0px 0px 141px; width: 165px; height: 3.5rem; border: 3px solid #687D6A; border-radius: 45px; background-color: #00000000; color: #687D6A; font-size: 18px;'/> 273 - <div> 274 - <button class="rawsome-button--secondary" onclick='toPageOne()'>Back</button> 275 - <button class="rawsome-button--primary" onclick='weight(1)' style='color: #fff; font-size: 18px; font-weight: bold; margin: 20px 0px 0px 141px; text-align: center; width: 165px; height: 3.5rem; background-color: #687D6A; border-color: #00000000; border-radius: 45px;'>Next</button> 276 - </div> 277 - </div> 401 + const nextButton = document.querySelector( 402 + '.rawsome-button--primary' 403 + ); 278 404 279 - </div> 405 + if (weight_input.value && !re.test(weight_input.value)) { 406 + nextButton.disabled = true; 407 + } else if (weight_input.value && re.test(weight_input.value)) { 408 + nextButton.disabled = false; 409 + } else { 410 + nextButton.disabled = true; 411 + } 280 412 281 - </div> 282 - `; 283 - }; 284 413 285 - const toAdolescentPageTwo = () => { 286 - let catculator = document.getElementById('catculator'); 287 - catculator.innerHTML = ` 288 - <div id='catculator' style='width: 100%'> 289 - <p style='font-weight: bold; color: #687D6A; font-size: 24px; text-align: center;'> 290 - How much does your cat weigh? 291 - </p> 292 - <div class="cat_weight_cal" > 293 - <img style='width: 250px; height: 215px; margin-left: 15%;' src='https://cdn11.bigcommerce.com/s-lh9wfk05w0/images/stencil/320w/image-manager/cat-weight.png'/> 294 - <div style='display: flex; flex-direction: column; width: auto; height: auto;'> 295 - <p class="cat_weight_p" >kg</p> 296 - <input id='weight_input' style=' margin: 40px 0px 0px 141px; width: 165px; height: 3.5rem; border: 3px solid #687D6A; border-radius: 45px; background-color: #00000000; color: #687D6A; font-size: 18px;'/> 297 - <div> 298 - <button class="rawsome-button--secondary" onclick='toPageOne()' >Back</button> 299 - <button class="rawsome-button--primary" onclick='weight(2)' style='color: #fff; font-size: 18px; font-weight: bold; margin: 20px 0px 0px 141px; text-align: center; width: 165px; height: 3.5rem; background-color: #687D6A; border-color: #00000000; border-radius: 45px;'>Next</button> 300 - </div> 301 - </div> 302 414 303 - </div> 304 - </div> 305 - `; 306 - }; 415 + }; 307 416 308 - const toAdolescentPageThree = () => { 309 - let catculator = document.getElementById('catculator'); 310 - catculator.innerHTML = ` 311 - <div id='catculator' style='width: 100%'> 312 - <p style='font-weight: bold; color: #687D6A; font-size: 24px; text-align: center;'> 313 - Is your cat spayed / neutered? 314 - </p> 315 - <div class="cat_neutered" style='margin-top: 35px; display: flex; flex-direction: row;'> 316 - <img style='width: 295px; height: 215px; margin-left: 10%;' src='https://cdn11.bigcommerce.com/s-lh9wfk05w0/product_images/uploaded_images/kittengreen-new.png'/> 317 - <div style='display: flex; flex-direction: column; width: auto; height: auto;'> 318 - <button class="rawsome-button--primary" onclick='neutered(true, 1)' >Yes</button> 319 - <button class="rawsome-button--primary" onclick='neutered(false, 1)'>No</button> 417 + const toKittenPageTwo = () => { 418 + let catculator = document.getElementById('catculator'); 419 + catculator.innerHTML = /* html */` 420 + <div id='catculator' style='width: 100%'> 421 + <p style='font-weight: bold; color: #687D6A; font-size: 24px; text-align: center;'> 422 + How much does your cat weigh? 423 + </p> 424 + <div class="cat_weight_cal"> 425 + <img style='width: 250px; height: 215px; margin-left: 15%;' src='https://cdn11.bigcommerce.com/s-lh9wfk05w0/images/stencil/320w/image-manager/cat-weight.png'/> 426 + <div style='display: flex; flex-direction: column; width: auto; height: auto;'> 427 + <p class="cat_weight_p" >kg</p> 428 + <input id='weight_input' type="number" min="1" step="1" oninput='weightInput()' style=' margin: 40px 0px 0px 141px; width: 165px; height: 3.5rem; border: 3px solid #687D6A; border-radius: 45px; background-color: #00000000; color: #687D6A; font-size: 18px;'/> 429 + <div> 430 + <button class="rawsome-button--secondary" onclick='toPageOne()'>Back</button> 431 + <button class="rawsome-button--primary" onclick='weight(1)' disabled style='color: #fff; font-size: 18px; font-weight: bold; margin: 20px 0px 0px 141px; text-align: center; width: 165px; height: 3.5rem; background-color: #687D6A; border-color: #00000000; border-radius: 45px;'>Next</button> 432 + </div> 320 433 </div> 321 - <button class="rawsome-button--secondary" onclick='toAdolescentPageTwo()' >Back</button> 434 + 435 + </div> 436 + 437 + </div> 438 + `; 439 + }; 440 + 441 + const toAdolescentPageTwo = () => { 442 + let catculator = document.getElementById('catculator'); 443 + catculator.innerHTML = ` 444 + <div id='catculator' style='width: 100%'> 445 + <p style='font-weight: bold; color: #687D6A; font-size: 24px; text-align: center;'> 446 + How much does your cat weigh? 447 + </p> 448 + <div class="cat_weight_cal" > 449 + <img style='width: 250px; height: 215px; margin-left: 15%;' src='https://cdn11.bigcommerce.com/s-lh9wfk05w0/images/stencil/320w/image-manager/cat-weight.png'/> 450 + <div style='display: flex; flex-direction: column; width: auto; height: auto;'> 451 + <p class="cat_weight_p" >kg</p> 452 + <input id='weight_input' type="number" min="1" step="1" oninput='weightInput()' style=' margin: 40px 0px 0px 141px; width: 165px; height: 3.5rem; border: 3px solid #687D6A; border-radius: 45px; background-color: #00000000; color: #687D6A; font-size: 18px;'/> 453 + <div> 454 + <button class="rawsome-button--secondary" onclick='toPageOne()' >Back</button> 455 + <button class="rawsome-button--primary" disabled onclick='weight(2)' style='color: #fff; font-size: 18px; font-weight: bold; margin: 20px 0px 0px 141px; text-align: center; width: 165px; height: 3.5rem; background-color: #687D6A; border-color: #00000000; border-radius: 45px;'>Next</button> 322 456 </div> 323 457 </div> 324 - `; 325 - }; 326 458 327 - const catculate = () => { 328 - console.log(` 329 - age: ${age_value} 330 - weight: ${weight_value} 331 - coef: ${coef} 332 - activity: ${activity_value} 333 - neutered?: ${neutered_value} 334 - daily meals: ${daily_meals} 335 - `); 336 - total = Math.round( 337 - ((Math.pow(weight_value, 0.67) * activity_value * 1000) / 338 - kcal_per_kg) * 339 - coef 340 - ); 341 - kcal = Math.round((150 * total) / 100); 342 - toPageFive(); 343 - }; 459 + </div> 460 + </div> 461 + `; 462 + }; 344 463 345 - const weight = (num) => { 346 - weight_value = parseFloat( 347 - document.getElementById('weight_input').value 348 - ); 349 - switch (num) { 350 - case 1: 351 - activity_value = 95; 352 - catculate(); 353 - break; 354 - case 2: 355 - toAdolescentPageThree(); 356 - break; 357 - case 3: 358 - toPageThree(); 359 - break; 360 - } 361 - }; 464 + const toAdolescentPageThree = () => { 465 + let catculator = document.getElementById('catculator'); 466 + catculator.innerHTML = ` 467 + <div id='catculator' style='width: 100%'> 468 + <p style='font-weight: bold; color: #687D6A; font-size: 24px; text-align: center;'> 469 + Is your cat spayed / neutered? 470 + </p> 471 + <div class="cat_neutered" style='margin-top: 35px; display: flex; flex-direction: row;'> 472 + <img style='width: 295px; height: 215px; margin-left: 10%;' src='https://cdn11.bigcommerce.com/s-lh9wfk05w0/product_images/uploaded_images/kittengreen-new.png'/> 473 + <div style='display: flex; flex-direction: column; width: auto; height: auto;'> 474 + <button class="rawsome-button--primary" onclick='neutered(true, 1)' >Yes</button> 475 + <button class="rawsome-button--primary" onclick='neutered(false, 1)'>No</button> 476 + </div> 477 + <button class="rawsome-button--secondary" onclick='toAdolescentPageTwo()' >Back</button> 478 + </div> 479 + </div> 480 + `; 481 + }; 362 482 363 - const neutered = (bool, num) => { 364 - neutered_value = bool; 365 - if (num === 1) { 366 - activity_value = neutered_value ? 87.5 : 95; 483 + const catculate = () => { 484 + total = Math.round( 485 + ((Math.pow(weight_value, 0.67) * activity_value * 1000) / 486 + KCAL_PER_KG) * 487 + coef 488 + ); 489 + kcal = Math.round((150 * total) / 100); 490 + toPageFive(); 491 + }; 492 + 493 + const weight = (num) => { 494 + weight_value = parseFloat( 495 + document.getElementById('weight_input').value 496 + ); 497 + switch (num) { 498 + case 1: 499 + activity_value = 95; 367 500 catculate(); 368 - } else toPageFour(); 369 - }; 501 + break; 502 + case 2: 503 + toAdolescentPageThree(); 504 + break; 505 + case 3: 506 + toPageThree(); 507 + break; 508 + } 509 + }; 370 510 371 - const activity = (num) => { 372 - switch (num) { 373 - case 1: 374 - activity_value = neutered_value ? 52 : 80; 375 - break; 376 - case 2: 377 - activity_value = neutered_value ? 64 : 87.5; 378 - break; 379 - case 3: 380 - activity_value = neutered_value ? 75 : 95; 381 - break; 382 - } 511 + const neutered = (bool, num) => { 512 + neutered_value = bool; 513 + if (num === 1) { 514 + activity_value = neutered_value ? 87.5 : 95; 383 515 catculate(); 384 - }; 516 + } else toPageFour(); 517 + }; 385 518 386 - const age = (num) => { 387 - console.log('num:' + num); 388 - $('.tubs_temp').html(''); 389 - $('.pouches_temp').html(''); 390 - age_value = num; 391 - storehash = 'lh9wfk05w0'; 392 - url = `https://purrform-apps-027e.onrender.com/calculator?age=${num}`; 519 + const activity = (num) => { 520 + switch (num) { 521 + case 1: 522 + activity_value = neutered_value ? 52 : 80; 523 + break; 524 + case 2: 525 + activity_value = neutered_value ? 64 : 87.5; 526 + break; 527 + case 3: 528 + activity_value = neutered_value ? 75 : 95; 529 + break; 530 + } 531 + catculate(); 532 + }; 393 533 394 - $.ajax({ 395 - url: url, 396 - method: 'GET', 397 - success: function (response) { 398 - console.log('response:' + response); 399 - var tubs; 400 - var pouches; 401 - if (response != '' && response != undefined) { 402 - if (num == 1) { 403 - if (response.hasOwnProperty('weaning_tubs')) { 404 - tubs = response.weaning_tubs; 405 - } 406 - if (response.hasOwnProperty('weaning_pouches')) { 407 - pouches = response.weaning_pouches; 408 - } 409 - } 410 - if (num == 2 || num == 3) { 411 - if (response.hasOwnProperty('kitten_tubs')) { 412 - tubs = response.kitten_tubs; 413 - } 414 - if (response.hasOwnProperty('kitten_pouches')) { 415 - pouches = response.kitten_pouches; 416 - } 417 - } 418 - if (num == 4 || num == 5) { 419 - if (response.hasOwnProperty('adult_tubs')) { 420 - tubs = response.adult_tubs; 421 - } 422 - if (response.hasOwnProperty('adult_pouches')) { 423 - pouches = response.adult_pouches; 424 - } 425 - } 426 - } 427 - if (tubs != null && tubs != undefined) { 428 - $(tubs).each(function (i, val) { 429 - console.log('val:' + JSON.stringify(val)); 430 - p_id = val.id; 431 - p_image = val.image; 432 - p_name = val.name; 433 - p_url = val.action_url; 434 - p_cal_per_kg = val.calorie; 435 534 436 - $('.tubs_temp').append( 437 - '<div class="wrapper"><div class="image_wrap" style="">' + 438 - '<a href="' + 439 - p_url + 440 - '"><img src="' + 441 - p_image + 442 - '"style="width: auto; height: auto; "/></a>' + 443 - '</div>' + 444 - '<div class="content_wrap" style="">' + 445 - '<a href="' + 446 - p_url + 447 - '"><p style="line-height: 16px; font-size: 14px; color: #687D6A;">' + 448 - p_name + 449 - '</p></a>' + 450 - '</div>' + 451 - '<div class="cta_wrap" style="">' + 452 - '<a href="' + 453 - p_url + 454 - '"><button class="rawsome-button--primary" data-calorie = "' + 455 - p_cal_per_kg + 456 - '" >150g per day</button></a>' + 457 - '</div></div>' 458 - ); 459 - }); 460 - } else { 461 - $('.tubs_temp').html( 462 - '<div class="wrapper"><p>No product found</p></div>' 463 - ); 464 - } 465 - if (pouches != null && pouches != undefined) { 466 - $(pouches).each(function (i, val) { 467 - console.log('val:' + JSON.stringify(val)); 468 - p_id = val.id; 469 - p_image = val.image; 470 - p_name = val.name; 471 - p_url = val.action_url; 472 - p_cal_per_kg = val.calorie; 473 - //console.log("Here is the product data"); 474 - //console.log(JSON.stringify(val)); 475 - $('.pouches_temp').append( 476 - '<div class="wrapper"><div class="image_wrap" style="">' + 477 - '<a href="' + 478 - p_url + 479 - '"><img src="' + 480 - p_image + 481 - '"style="width: auto; height: auto;"/></a>' + 482 - '</div>' + 483 - '<div class="content_wrap" style="">' + 484 - '<a href="' + 485 - p_url + 486 - '"><p style="line-height: 16px; font-size: 14px; color: #687D6A;">' + 487 - p_name + 488 - '</p></a>' + 489 - '</div>' + 490 - '<div class="cta_wrap" style="">' + 491 - '<a href="' + 492 - p_url + 493 - '"><button class="rawsome-button--primary" data-calorie = "' + 494 - p_cal_per_kg + 495 - '" >150g per day</button></a>' + 496 - '</div></div>' 497 - ); 498 - }); 499 - } else { 500 - $('.pouches_temp').html( 501 - '<div class="wrapper"><p>No product found</p></div>' 502 - ); 503 - } 504 - }, 505 - error: function (jqxhr, status, error) { 506 - console.log('Something went wrong!'); 507 - console.log('jqxhr!' + JSON.stringify(jqxhr)); 508 - console.log('status' + status); 509 - console.log('Error!' + error); 510 - }, 511 - }); 512 - switch (num) { 513 - case 1: 514 - coef = 2.3; 515 - daily_meals = `Feed as & when required`; 516 - activity_value = 95; 517 - console.log('hi'); 518 - toKittenPageTwo(); 519 - break; 520 - case 2: 521 - coef = 2.15; 522 - daily_meals = `Divided into 4 to 6 meals a day`; 523 - toAdolescentPageTwo(); 524 - break; 525 - case 3: 526 - coef = 1.85; 527 - daily_meals = `Divided into 3 to 4 meals a day`; 528 - toPageTwo(); 529 - break; 530 - case 4: 531 - coef = 1.5; 532 - daily_meals = `Divided into 2 meals a day`; 533 - toPageTwo(); 534 - break; 535 - case 5: 536 - coef = 1; 537 - daily_meals = `Divided into 2 meals a day`; 538 - toPageTwo(); 539 - break; 540 - } 541 - }; 542 535 543 - const reset = () => { 544 - age_value = null; 545 - weight_value = null; 546 - coef = null; 547 - activity_value = null; 548 - neutered_value = null; 549 - daily_meals = null; 550 - total = null; 551 - kcal = null; 552 - kcal_per_kg = 1500; 553 - toPageOne(); 554 - }; 536 + const reset = () => { 537 + age_value = null; 538 + weight_value = null; 539 + coef = null; 540 + activity_value = null; 541 + neutered_value = null; 542 + daily_meals = null; 543 + total = null; 544 + kcal = null; 545 + toPageOne(); 546 + }; 555 547 556 - const closeProductWindow = () => { 557 - document.getElementById('show_RDA').style.display = 'none'; 558 - const productWindow = document.getElementById('productWindow'); 559 - productWindow.innerHTML = ``; 560 - }; 548 + const closeProductWindow = () => { 549 + document.getElementById('show_RDA').style.display = 'none'; 550 + const productWindow = document.getElementById('productWindow'); 551 + productWindow.innerHTML = ``; 552 + }; 561 553 562 - const showProducts = () => { 563 - // alert("show_RDA") 564 - document.getElementById('show_RDA').style.display = 'block'; 565 - document.getElementById('show_RDA').style.visibility = 'visible'; 566 - const productWindow = document.getElementById('productWindow123'); 567 - getTubs = $('.tubs_temp'); 568 - getpouches = $('.pouches_temp'); 569 - productWindow.innerHTML = 570 - `<div class="" id="show_RDA" tabindex="-1" aria-labelledby="redeem_point" style="display: block; visibility: visible;" aria-hidden="true"> 571 - <div class="modal-dialog"> 572 -  575 - <div class="modal-content swal2-content" > 576 - <h1 style="text-align:center; margin-bottom: 1.5rem;" id="swal2-title">450g Tubs</h1> 554 + const showProducts = () => { 555 + // alert("show_RDA") 556 + document.getElementById('show_RDA').style.display = 'block'; 557 + document.getElementById('show_RDA').style.visibility = 'visible'; 558 + const productWindow = document.getElementById('productWindow123'); 559 + getTubs = $('.tubs_temp'); 560 + getpouches = $('.pouches_temp'); 561 + productWindow.innerHTML = 562 + `<div class="" id="show_RDA" tabindex="-1" aria-labelledby="redeem_point" style="display: block; visibility: visible;" aria-hidden="true"> 563 + <div class="modal-dialog"> 564 +  567 + <div class="modal-content swal2-content" > 568 + <h1 style="text-align:center; margin-bottom: 1.5rem;" id="swal2-title">450g Tubs</h1> 577 569 578 - <div id="swal2-content_tubs" class="swal2-html-container tubs" style="display: block;"> 579 - ` + 580 - getTubs.html() + 581 - ` 582 - </div> 583 - <hr> 584 - <h1 style="text-align:center; margin-bottom: 1.5rem;" id="swal2-title">Pouches</h1> 570 + <div id="swal2-content_tubs" class="swal2-html-container tubs" style="display: block;"> 571 + ` + 572 + getTubs.html() + 573 + ` 574 + </div> 575 + <hr> 576 + <h1 style="text-align:center; margin-bottom: 1.5rem;" id="swal2-title">Pouches</h1> 585 577 586 - <div id="swal2-content-pouches" class="swal2-html-container tubs" style="display: block;"> 578 + <div id="swal2-content-pouches" class="swal2-html-container tubs" style="display: block;"> 587 579 588 - ` + 589 - getpouches.html() + 590 - ` 591 - </div> 592 - <hr> 580 + ` + 581 + getpouches.html() + 582 + ` 583 + </div> 584 + <hr> 593 585 594 - </div> 586 + </div> 595 587 596 - </div> 597 - </div> 598 - `; 599 - getTubs.css('display', 'flex'); 600 - getpouches.css('display', 'flex'); 601 - $('.cta_wrap button').each(function () { 602 - this_cal = $(this).attr('data-calorie'); 603 - this_cal = this_cal * 10; 588 + </div> 589 + </div> 590 + `; 591 + getTubs.css('display', 'flex'); 592 + getpouches.css('display', 'flex'); 593 + $('.cta_wrap button').each(function () { 594 + this_cal = $(this).attr('data-calorie'); 595 + this_cal = this_cal * 10; 604 596 605 - this_total = Math.round( 606 - ((Math.pow(weight_value, 0.67) * activity_value * 1000) / 607 - this_cal) * 608 - coef 609 - ); 610 - $(this).text(this_total + 'g per day'); 611 - }); 612 - }; 597 + this_total = Math.round( 598 + ((Math.pow(weight_value, 0.67) * activity_value * 1000) / 599 + this_cal) * 600 + coef 601 + ); 602 + $(this).text(this_total + 'g per day'); 603 + }); 604 + }; 613 605 614 - const toPageOne = () => { 615 - let catculator = document.getElementById('catculator'); 616 - catculator.innerHTML = ` 617 - <div id='catculator' style='width: 100%'> 618 - <p style='font-weight: bold; color: #687D6A; font-size: 24px; text-align: center;'> 619 - How old is your cat? 620 - </p> 621 - <div class="catculator-row" style='width: 100%; display: flex; flex-direction: row;'> 622 - <div class="catculator-col"> 623 - <img style='width: 75px; height: 75px; margin: 75px 0px 30px 37px;' src='https://cdn11.bigcommerce.com/s-lh9wfk05w0/product_images/uploaded_images/cat1.png'/> 624 - <button class="rawsome-button--primary" onclick='age(1)' > 625 - <p style="color: #fff; font-size: 18px; font-weight: bold; margin: auto; padding-bottom: 3px;"> 626 - 4-8 Weeks 627 - </p> 628 - </button> 629 - </div> 606 + const toPageOne = () => { 607 + let catculator = document.getElementById('catculator'); 608 + catculator.innerHTML = ` 609 + <div id='catculator' style='width: 100%'> 610 + <p style='font-weight: bold; color: #687D6A; font-size: 24px; text-align: center;'> 611 + How old is your cat? 612 + </p> 613 + <div class="catculator-row" style='width: 100%; display: flex; flex-direction: row;'> 614 + <div class="catculator-col"> 615 + <img style='width: 75px; height: 75px; margin: 75px 0px 30px 37px;' src='https://cdn11.bigcommerce.com/s-lh9wfk05w0/product_images/uploaded_images/cat1.png'/> 616 + <button class="rawsome-button--primary" onclick='age(1)' > 617 + <p style="color: #fff; font-size: 18px; font-weight: bold; margin: auto; padding-bottom: 3px;"> 618 + 4-8 Weeks 619 + </p> 620 + </button> 621 + </div> 630 622 631 - <div class="catculator-col"> 632 - <img style='width: 125px; height: 91px; margin: 59px 0px 30px 12px;' src='https://cdn11.bigcommerce.com/s-lh9wfk05w0/product_images/uploaded_images/cat2.png'/> 633 - <button class="rawsome-button--primary" onclick='age(2)' > 634 - <p style="color: #fff; font-size: 18px; font-weight: bold; margin: auto; padding-bottom: 3px;"> 635 - 2-4 Months 636 - </p> 637 - </button> 638 - </div> 623 + <div class="catculator-col"> 624 + <img style='width: 125px; height: 91px; margin: 59px 0px 30px 12px;' src='https://cdn11.bigcommerce.com/s-lh9wfk05w0/product_images/uploaded_images/cat2.png'/> 625 + <button class="rawsome-button--primary" onclick='age(2)' > 626 + <p style="color: #fff; font-size: 18px; font-weight: bold; margin: auto; padding-bottom: 3px;"> 627 + 2-4 Months 628 + </p> 629 + </button> 630 + </div> 639 631 640 - <div class="catculator-col"> 641 - <img style='width: 150px; height: 106px; margin: 44px 0px 30px 0px;' src='https://cdn11.bigcommerce.com/s-lh9wfk05w0/product_images/uploaded_images/cat3.png'/> 642 - <button class="rawsome-button--primary" onclick='age(3)' > 643 - <p style="color: #fff; font-size: 18px; font-weight: bold; margin: auto; padding-bottom: 3px;"> 644 - 4-9 Months 645 - </p> 646 - </button> 647 - </div> 648 - 649 - <div class="catculator-col"> 650 - <img style='width: 95px; height: 128px; margin: 22px 0px 30px 27px;' src='https://cdn11.bigcommerce.com/s-lh9wfk05w0/product_images/uploaded_images/cat4.png'/> 651 - <button class="rawsome-button--primary" onclick='age(4)'> 652 - <p style="color: #fff; font-size: 18px; font-weight: bold; margin: auto; padding-bottom: 3px;"> 653 - 9-12 Months 654 - </p> 655 - </button> 656 - </div> 632 + <div class="catculator-col"> 633 + <img style='width: 150px; height: 106px; margin: 44px 0px 30px 0px;' src='https://cdn11.bigcommerce.com/s-lh9wfk05w0/product_images/uploaded_images/cat3.png'/> 634 + <button class="rawsome-button--primary" onclick='age(3)' > 635 + <p style="color: #fff; font-size: 18px; font-weight: bold; margin: auto; padding-bottom: 3px;"> 636 + 4-9 Months 637 + </p> 638 + </button> 639 + </div> 657 640 658 - <div class="catculator-col"> 659 - <img style='width: 90px; height: 140px; margin: 10px 0px 30px 30px;' src='https://cdn11.bigcommerce.com/s-lh9wfk05w0/product_images/uploaded_images/cat5.png'/> 660 - <button class="rawsome-button--primary" onclick='age(5)' > 661 - <p style="color: #fff; font-size: 18px; font-weight: bold; margin: auto; padding-bottom: 3px;"> 662 - 12+ Months 663 - </p> 664 - </button> 665 - </div> 641 + <div class="catculator-col"> 642 + <img style='width: 95px; height: 128px; margin: 22px 0px 30px 27px;' src='https://cdn11.bigcommerce.com/s-lh9wfk05w0/product_images/uploaded_images/cat4.png'/> 643 + <button class="rawsome-button--primary" onclick='age(4)'> 644 + <p style="color: #fff; font-size: 18px; font-weight: bold; margin: auto; padding-bottom: 3px;"> 645 + 9-12 Months 646 + </p> 647 + </button> 666 648 </div> 649 + 650 + <div class="catculator-col"> 651 + <img style='width: 90px; height: 140px; margin: 10px 0px 30px 30px;' src='https://cdn11.bigcommerce.com/s-lh9wfk05w0/product_images/uploaded_images/cat5.png'/> 652 + <button class="rawsome-button--primary" onclick='age(5)' > 653 + <p style="color: #fff; font-size: 18px; font-weight: bold; margin: auto; padding-bottom: 3px;"> 654 + 12+ Months 655 + </p> 656 + </button> 667 657 </div> 668 - `; 669 - }; 658 + </div> 659 + </div> 660 + `; 661 + }; 670 662 671 - const toPageFive = () => { 672 - let catculator = document.getElementById('catculator'); 673 - catculator.innerHTML = ` 674 - <div id='catculator' style='width: 100%'> 675 - <p class="recom_daily_amount_heading" > 676 - Your Recommended Daily Amount (RDA) is... 677 - </p> 678 - <div class="recom_daily_amount"> 679 -  680 - <div class="recom_daily_amount_inner"> 681 - <div class="rc_reccoms" > 682 - <p >Serving per day: <span><strong>${total}g</strong></span></p> 683 -  684 - </div> 663 + const toPageFive = () => { 664 + let catculator = document.getElementById('catculator'); 665 + catculator.innerHTML = ` 666 + <div id='catculator' style='width: 100%'> 667 + <p class="recom_daily_amount_heading" > 668 + Your Recommended Daily Amount (RDA) is... 669 + </p> 670 + <div class="recom_daily_amount"> 671 +  672 + <div class="recom_daily_amount_inner"> 673 + <div class="rc_reccoms" > 674 + <p >Serving per day: <span><strong>${total}g</strong></span></p> 675 +  676 + </div> 685 677 686 - <div class="daily_meals"> 687 - <p >${daily_meals}</p> 688 - </div> 678 + <div class="daily_meals"> 679 + <p >${daily_meals}</p> 680 + </div> 689 681 690 - <div class="rc_reccoms"> 691 - <div> 692 - <p >Daily calorie intake: <span><strong>${kcal} kcal</strong></span></p> 693 -  682 + <div class="rc_reccoms"> 683 + <div> 684 + <p >Daily calorie intake: <span><strong>${kcal} kcal</strong></span></p> 685 +  694 686 695 - </div> 696 687 </div> 697 - <button class="rawsome-button--secondary" onclick='reset()'>Start Over</button> 698 688 </div> 689 + <button class="rawsome-button--secondary" onclick='reset()'>Start Over</button> 690 + </div> 699 691 700 692 701 - <div class="rda_account_btn_container"> 702 - <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 703 - <span class="button--loading"></span> 704 - </button> 693 + <div class="rda_account_btn_container"> 694 + <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 695 + <span class="button--loading"></span> 696 + </button> 705 697 706 - </div> 698 + </div> 707 699 708 - <div id="show_RDA" class="swal2-container swal2-center swal2-backdrop-show" style="overflow-y: auto;display:none"> 709 - <div id="productWindow123"></div> 700 + <div id="show_RDA" class="swal2-container swal2-center swal2-backdrop-show" style="overflow-y: auto;display:none"> 701 + <div id="productWindow123"></div> 710 702 </div> 711 703 704 + </div> 705 + `; 706 + interval = setInterval(function () { 707 + tub = $('.tubs_temp .wrapper').children().length; 708 + pouche = $('.pouches_temp .wrapper').children().length; 709 + if (tub > 0 || pouche > 0) { 710 + clearInterval(interval); 711 + $('.button--loading').hide(); 712 + $('#show_product_cta').removeClass('cta--loading'); 713 + $('#show_product_cta').removeAttr('title'); 714 + } 715 + }, 500); 716 + }; 717 + 718 + const toPageThree = () => { 719 + let catculator = document.getElementById('catculator'); 720 + catculator.innerHTML = ` 721 + <div id='catculator' style='width: 100%'> 722 + <p style='font-weight: bold; color: #687D6A; font-size: 24px; text-align: center;'> 723 + Is your cat spayed / nuetered? 724 + </p> 725 + <div class="cat_spayed"> 726 + <img style='width: 295px; height: 215px; margin-left: 10%;' src='https://cdn11.bigcommerce.com/s-lh9wfk05w0/product_images/uploaded_images/kittengreen-new.png'/> 727 + <div style='display: flex; flex-direction: column; width: auto; height: auto;'> 728 + <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> 729 + <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> 712 730 </div> 713 - `; 714 - interval = setInterval(function () { 715 - tub = $('.tubs_temp .wrapper').children().length; 716 - pouche = $('.pouches_temp .wrapper').children().length; 717 - console.log('TUB :' + tub + ': , POUCH :' + pouche + ':'); 718 - if (tub > 0 || pouche > 0) { 719 - clearInterval(interval); 720 - $('.button--loading').hide(); 721 - $('#show_product_cta').removeClass('cta--loading'); 722 - $('#show_product_cta').removeAttr('title'); 723 - } 724 - }, 500); 725 - }; 731 + <button class="rawsome-button--secondary" onclick='toPageTwo()' >Back</button> 732 + </div> 733 + </div> 734 + `; 735 + }; 726 736 727 - const toPageThree = () => { 728 - let catculator = document.getElementById('catculator'); 729 - catculator.innerHTML = ` 730 - <div id='catculator' style='width: 100%'> 731 - <p style='font-weight: bold; color: #687D6A; font-size: 24px; text-align: center;'> 732 - Is your cat spayed / nuetered? 733 - </p> 734 - <div class="cat_spayed"> 735 - <img style='width: 295px; height: 215px; margin-left: 10%;' src='https://cdn11.bigcommerce.com/s-lh9wfk05w0/product_images/uploaded_images/kittengreen-new.png'/> 736 - <div style='display: flex; flex-direction: column; width: auto; height: auto;'> 737 - <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> 738 - <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> 739 - </div> 740 - <button class="rawsome-button--secondary" onclick='toPageTwo()' >Back</button> 737 + const toPageFour = () => { 738 + let catculator = document.getElementById('catculator'); 739 + catculator.innerHTML = ` 740 + <div id='catculator' style='width: 100%'> 741 + <p style='font-weight: bold; color: #687D6A; font-size: 24px; text-align: center;'> 742 + How active is your cat? 743 + </p> 744 + <div class="cat_active" style='margin-top: 35px; display: flex; flex-direction: row;'> 745 + <img style='width: 371px; height: 190px; margin: 25px 0px 0px 5%;' src='https://cdn11.bigcommerce.com/s-lh9wfk05w0/product_images/uploaded_images/twocatsgreen.png'/> 746 + <div style='display: flex; flex-direction: column; width: auto; height: auto;'> 747 + <button class="rawsome-button--primary" onclick='activity(1)' >Not Much</button> 748 + <button class="rawsome-button--primary" onclick='activity(2)' >Moderately</button> 749 + <button class="rawsome-button--primary" onclick='activity(3)' >Active</button> 741 750 </div> 751 + <button class="rawsome-button--secondary" onclick='toPageThree()' >Back</button> 752 + </div> 753 + </div> 754 + `; 755 + }; 756 + 757 + const toPageTwo = () => { 758 + let catculator = document.getElementById('catculator'); 759 + catculator.innerHTML = ` 760 + <div id='catculator' style='width: 100%'> 761 + <p style='font-weight: bold; color: #687D6A; font-size: 24px; ;'> 762 + How much does your cat weigh? 763 + </p> 764 + <div class="cat_weight_cal" > 765 + <img style='width: 250px; height: 215px; margin-left: 15%;' src='https://cdn11.bigcommerce.com/s-lh9wfk05w0/images/stencil/320w/image-manager/cat-weight.png'/> 766 + <div style='display: flex; flex-direction: column; width: auto; height: auto;'> 767 + <p class="cat_weight_p" >kg</p> 768 + <input id='weight_input' type="number" min="1" step="1" oninput='weightInput()' style='margin: 40px 0px 0px 141px; width: 165px; height: 3.5rem; border: 3px solid #687D6A; border-radius: 45px; background-color: #00000000; color: #687D6A; font-size: 18px;'/> 769 + <div> 770 + <button class="rawsome-button--secondary" onclick='toPageOne()' >Back</button> 771 + <button class="rawsome-button--primary" onclick='weight(3)' disabled style='color: #fff; font-size: 18px; font-weight: bold; margin: 20px 0px 0px 141px; ; width: 165px; height: 3.5rem; background-color: #687D6A; border-color: #00000000; border-radius: 45px;'>Next</button> 742 772 </div> 743 - `; 744 - }; 745 - 746 - const toPageFour = () => { 747 - let catculator = document.getElementById('catculator'); 748 - catculator.innerHTML = ` 749 - <div id='catculator' style='width: 100%'> 750 - <p style='font-weight: bold; color: #687D6A; font-size: 24px; text-align: center;'> 751 - How active is your cat? 752 - </p> 753 - <div class="cat_active" style='margin-top: 35px; display: flex; flex-direction: row;'> 754 - <img style='width: 371px; height: 190px; margin: 25px 0px 0px 5%;' src='https://cdn11.bigcommerce.com/s-lh9wfk05w0/product_images/uploaded_images/twocatsgreen.png'/> 755 - <div style='display: flex; flex-direction: column; width: auto; height: auto;'> 756 - <button class="rawsome-button--primary" onclick='activity(1)' >Not Much</button> 757 - <button class="rawsome-button--primary" onclick='activity(2)' >Moderately</button> 758 - <button class="rawsome-button--primary" onclick='activity(3)' >Active</button> 759 773 </div> 760 - <button class="rawsome-button--secondary" onclick='toPageThree()' >Back</button> 761 - </div> 762 - </div> 763 - `; 764 - }; 765 774 766 - const toPageTwo = () => { 767 - let catculator = document.getElementById('catculator'); 768 - catculator.innerHTML = ` 769 - <div id='catculator' style='width: 100%'> 770 - <p style='font-weight: bold; color: #687D6A; font-size: 24px; ;'> 771 - How much does your cat weigh? 772 - </p> 773 - <div class="cat_weight_cal" > 774 - <img style='width: 250px; height: 215px; margin-left: 15%;' src='https://cdn11.bigcommerce.com/s-lh9wfk05w0/images/stencil/320w/image-manager/cat-weight.png'/> 775 - <div style='display: flex; flex-direction: column; width: auto; height: auto;'> 776 - <p class="cat_weight_p" >kg</p> 777 - <input id='weight_input' style='margin: 40px 0px 0px 141px; width: 165px; height: 3.5rem; border: 3px solid #687D6A; border-radius: 45px; background-color: #00000000; color: #687D6A; font-size: 18px;'/> 778 - <div> 779 - <button class="rawsome-button--secondary" onclick='toPageOne()' >Back</button> 780 - <button class="rawsome-button--primary" onclick='weight(3)' style='color: #fff; font-size: 18px; font-weight: bold; margin: 20px 0px 0px 141px; ; width: 165px; height: 3.5rem; background-color: #687D6A; border-color: #00000000; border-radius: 45px;'>Next</button> 781 - </div> 782 - </div> 775 + </div> 776 + </div> 777 + `; 778 + }; 779 + </script> 783 780 784 - </div> 785 - </div> 786 - `; 787 - }; 788 - </script> </div 789 - >--}} {{/partial}} {{> layout/base}} 781 + {{/partial}} 782 + {{> layout/base}}

Configure Feed

Configure Feed