Created
March 27, 2019 13:14
-
-
Save jackbillstrom/898d535502ca35c0551b580f87631f3c to your computer and use it in GitHub Desktop.
prisräknaren
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <!DOCTYPE html> | |
| <html lang="sv"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <meta http-equiv="X-UA-Compatible" content="ie=edge"> | |
| <title>Prisräknaren</title> | |
| <link rel="stylesheet" | |
| href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0-beta.2/css/bootstrap.css"> | |
| <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/intl-tel-input/12.1.2/css/intlTelInput.css"> | |
| <link rel="stylesheet" href="https://code.ionicframework.com/ionicons/2.0.1/css/ionicons.min.css"> | |
| <link rel="stylesheet" | |
| href="https://cdnjs.cloudflare.com/ajax/libs/jquery-nice-select/1.1.0/css/nice-select.min.css"> | |
| <style> | |
| .form-group { | |
| width: 100%; | |
| } | |
| #progressbar li span { | |
| margin-top: -10px; | |
| display: block; | |
| } | |
| #extraColors, | |
| #colorChoices { | |
| display: flex; | |
| } | |
| #extraColors .round, | |
| #colorChoices .round { | |
| box-shadow: 2px 2px 14px rgba(0, 0, 0, 0.18); | |
| cursor: pointer; | |
| transition: all 0.25s ease; | |
| } | |
| #extraColors .round:hover, | |
| #colorChoices .round:hover { | |
| opacity: 0.8; | |
| } | |
| .round { | |
| border-radius: 50%; | |
| box-shadow: 2px 2px 14px rgba(0, 0, 0, 0.18); | |
| cursor: pointer; | |
| transition: all 0.25s ease; | |
| color: #fff; | |
| min-height: 100px; | |
| max-hegith: 100px; | |
| display: flex; | |
| align-items: center; | |
| justify-content: center; | |
| margin: 0 auto; | |
| padding: 10px; | |
| min-width: 100px; | |
| max-width: 100px; | |
| } | |
| .round.active { | |
| border: 5px solid #2053a4; | |
| transform: scale(0.9); | |
| } | |
| .multi_step_form { | |
| display: block; | |
| } | |
| .multi_step_form #msform { | |
| text-align: center; | |
| position: relative; | |
| padding-top: 50px; | |
| min-height: 820px; | |
| max-width: 810px; | |
| margin: 0 auto; | |
| background: #fff; | |
| z-index: 1; | |
| } | |
| .multi_step_form #msform .tittle { | |
| text-align: center; | |
| padding-bottom: 55px; | |
| } | |
| .multi_step_form #msform .tittle h2 { | |
| font: 500 24px/35px 'Roboto', sans-serif; | |
| color: #3f4553; | |
| padding-bottom: 5px; | |
| } | |
| .multi_step_form #msform .tittle p { | |
| font: 400 16px/28px 'Roboto', sans-serif; | |
| color: #5f6771; | |
| } | |
| .multi_step_form #msform fieldset { | |
| border: 0; | |
| padding: 20px 105px 0; | |
| position: relative; | |
| width: 100%; | |
| left: 0; | |
| right: 0; | |
| } | |
| .multi_step_form #msform fieldset:not(:first-of-type) { | |
| display: none; | |
| } | |
| .multi_step_form #msform fieldset h3 { | |
| font: 500 18px/35px 'Roboto', sans-serif; | |
| color: #3f4553; | |
| } | |
| .multi_step_form #msform fieldset h6 { | |
| font: 400 15px/28px 'Roboto', sans-serif; | |
| color: #5f6771; | |
| padding-bottom: 30px; | |
| } | |
| .multi_step_form #msform fieldset .intl-tel-input { | |
| display: block; | |
| background: transparent; | |
| border: 0; | |
| box-shadow: none; | |
| outline: none; | |
| } | |
| .multi_step_form #msform fieldset .intl-tel-input .flag-container .selected-flag { | |
| padding: 0 20px; | |
| background: transparent; | |
| border: 0; | |
| box-shadow: none; | |
| outline: none; | |
| width: 65px; | |
| } | |
| .multi_step_form #msform fieldset .intl-tel-input .flag-container .selected-flag .iti-arrow { | |
| border: 0; | |
| } | |
| .multi_step_form #msform fieldset .intl-tel-input .flag-container .selected-flag .iti-arrow:after { | |
| position: absolute; | |
| top: 0; | |
| right: 0; | |
| font: normal normal normal 24px/7px Ionicons; | |
| color: #5f6771; | |
| } | |
| .multi_step_form #msform fieldset #phone { | |
| padding-left: 80px; | |
| } | |
| .multi_step_form #msform fieldset .form-group { | |
| padding: 0 10px; | |
| } | |
| .multi_step_form #msform fieldset .fg_2, | |
| .multi_step_form #msform fieldset .fg_3 { | |
| padding-top: 10px; | |
| display: block; | |
| overflow: hidden; | |
| } | |
| .multi_step_form #msform fieldset .fg_3 { | |
| padding-bottom: 70px; | |
| } | |
| .multi_step_form #msform fieldset .form-control, | |
| .multi_step_form #msform fieldset .product_select { | |
| border-radius: 3px; | |
| border: 1px solid #d8e1e7; | |
| padding: 0 20px; | |
| height: auto; | |
| font: 400 15px/48px 'Roboto', sans-serif; | |
| color: #5f6771; | |
| box-shadow: none; | |
| outline: none; | |
| width: 100%; | |
| } | |
| .multi_step_form #msform fieldset .form-control.placeholder, | |
| .multi_step_form #msform fieldset .product_select.placeholder { | |
| color: #5f6771; | |
| } | |
| .multi_step_form #msform fieldset .form-control:-moz-placeholder, | |
| .multi_step_form #msform fieldset .product_select:-moz-placeholder { | |
| color: #5f6771; | |
| } | |
| .multi_step_form #msform fieldset .form-control::-moz-placeholder, | |
| .multi_step_form #msform fieldset .product_select::-moz-placeholder { | |
| color: #5f6771; | |
| } | |
| .multi_step_form #msform fieldset .form-control::-webkit-input-placeholder, | |
| .multi_step_form #msform fieldset .product_select::-webkit-input-placeholder { | |
| color: #5f6771; | |
| } | |
| .multi_step_form #msform fieldset .form-control:hover, | |
| .multi_step_form #msform fieldset .product_select:hover, | |
| .multi_step_form #msform fieldset .form-control:focus, | |
| .multi_step_form #msform fieldset .product_select:focus { | |
| border-color: #2053a4; | |
| } | |
| .multi_step_form #msform fieldset .form-control:focus.placeholder, | |
| .multi_step_form #msform fieldset .product_select:focus.placeholder { | |
| color: transparent; | |
| } | |
| .multi_step_form #msform fieldset .form-control:focus:-moz-placeholder, | |
| .multi_step_form #msform fieldset .product_select:focus:-moz-placeholder { | |
| color: transparent; | |
| } | |
| .multi_step_form #msform fieldset .form-control:focus::-moz-placeholder, | |
| .multi_step_form #msform fieldset .product_select:focus::-moz-placeholder { | |
| color: transparent; | |
| } | |
| .multi_step_form #msform fieldset .form-control:focus::-webkit-input-placeholder, | |
| .multi_step_form #msform fieldset .product_select:focus::-webkit-input-placeholder { | |
| color: transparent; | |
| } | |
| .multi_step_form #msform fieldset .product_select:after { | |
| display: none; | |
| } | |
| .multi_step_form #msform fieldset .product_select:before { | |
| position: absolute; | |
| top: 0; | |
| right: 20px; | |
| font: normal normal normal 24px/48px Ionicons; | |
| color: #5f6771; | |
| } | |
| .multi_step_form #msform fieldset .product_select .list { | |
| width: 100%; | |
| } | |
| .multi_step_form #msform fieldset .done_text { | |
| padding-top: 40px; | |
| } | |
| .multi_step_form #msform fieldset .done_text .don_icon { | |
| height: 36px; | |
| width: 36px; | |
| line-height: 36px; | |
| font-size: 22px; | |
| margin-bottom: 10px; | |
| background: #2053a4; | |
| display: inline-block; | |
| border-radius: 50%; | |
| color: #fff; | |
| text-align: center; | |
| } | |
| .multi_step_form #msform fieldset .done_text h6 { | |
| line-height: 23px; | |
| } | |
| .multi_step_form #msform fieldset .code_group { | |
| margin-bottom: 60px; | |
| } | |
| .multi_step_form #msform fieldset .code_group .form-control { | |
| border: 0; | |
| border-bottom: 1px solid #a1a7ac; | |
| border-radius: 0; | |
| display: inline-block; | |
| width: 30px; | |
| font-size: 30px; | |
| color: #5f6771; | |
| padding: 0; | |
| margin-right: 7px; | |
| text-align: center; | |
| line-height: 1; | |
| } | |
| .multi_step_form #msform fieldset .passport { | |
| margin-top: -10px; | |
| padding-bottom: 30px; | |
| position: relative; | |
| } | |
| .multi_step_form #msform fieldset .passport .don_icon { | |
| height: 36px; | |
| width: 36px; | |
| line-height: 36px; | |
| font-size: 22px; | |
| position: absolute; | |
| top: 4px; | |
| right: 0; | |
| background: #2053a4; | |
| display: inline-block; | |
| border-radius: 50%; | |
| color: #fff; | |
| text-align: center; | |
| } | |
| .multi_step_form #msform fieldset .passport h4 { | |
| font: 500 15px/23px 'Roboto', sans-serif; | |
| color: #5f6771; | |
| padding: 0; | |
| } | |
| .multi_step_form #msform fieldset .input-group { | |
| padding-bottom: 40px; | |
| } | |
| .multi_step_form #msform fieldset .input-group .custom-file { | |
| width: 100%; | |
| height: auto; | |
| } | |
| .multi_step_form #msform fieldset .input-group .custom-file .custom-file-label { | |
| width: 168px; | |
| border-radius: 5px; | |
| cursor: pointer; | |
| font: 700 14px/40px 'Roboto', sans-serif; | |
| border: 1px solid #99a2a8; | |
| text-align: center; | |
| transition: all 300ms linear 0s; | |
| color: #5f6771; | |
| } | |
| .multi_step_form #msform fieldset .input-group .custom-file .custom-file-label i { | |
| font-size: 20px; | |
| padding-right: 10px; | |
| } | |
| .multi_step_form #msform fieldset .input-group .custom-file .custom-file-label:hover, | |
| .multi_step_form #msform fieldset .input-group .custom-file .custom-file-label:focus { | |
| background: #2053a4; | |
| border-color: #2053a4; | |
| color: #fff; | |
| } | |
| .multi_step_form #msform fieldset .input-group .custom-file input { | |
| display: none; | |
| } | |
| .multi_step_form #msform fieldset .file_added { | |
| text-align: left; | |
| padding-left: 190px; | |
| padding-bottom: 60px; | |
| } | |
| .multi_step_form #msform fieldset .file_added li { | |
| font: 400 15px/28px 'Roboto', sans-serif; | |
| color: #5f6771; | |
| } | |
| .multi_step_form #msform fieldset .file_added li a { | |
| color: #2053a4; | |
| font-weight: 500; | |
| display: inline-block; | |
| position: relative; | |
| padding-left: 15px; | |
| } | |
| .multi_step_form #msform fieldset .file_added li a i { | |
| font-size: 22px; | |
| padding-right: 8px; | |
| position: absolute; | |
| left: 0; | |
| transform: rotate(20deg); | |
| } | |
| .multi_step_form #msform #progressbar { | |
| margin-bottom: 30px; | |
| overflow: hidden; | |
| } | |
| .multi_step_form #msform #progressbar li { | |
| list-style-type: none; | |
| color: #99a2a8; | |
| font-size: 9px; | |
| width: calc(100%/3); | |
| float: left; | |
| position: relative; | |
| font: 500 13px/1 'Roboto', sans-serif; | |
| margin-bottom: 10px; | |
| } | |
| .multi_step_form #msform #progressbar li:nth-child(2):before { | |
| content: ""; | |
| } | |
| .multi_step_form #msform #progressbar li:nth-child(3):before { | |
| content: ""; | |
| } | |
| .multi_step_form #msform #progressbar li:before { | |
| content: ""; | |
| font: normal normal normal 30px/50px Ionicons; | |
| width: 100%; | |
| height: 100%; | |
| display: block; | |
| background: #eaf0f4; | |
| margin: 0 auto 10px auto; | |
| } | |
| .multi_step_form #msform #progressbar li:after { | |
| content: ''; | |
| width: 100%; | |
| height: 10px; | |
| background: #eaf0f4; | |
| position: absolute; | |
| left: -50%; | |
| top: 21px; | |
| z-index: -1; | |
| } | |
| .multi_step_form #msform #progressbar li:last-child:after { | |
| width: 150%; | |
| } | |
| .multi_step_form #msform #progressbar li.active { | |
| color: #2053a4; | |
| } | |
| .multi_step_form #msform #progressbar li.active:before, | |
| .multi_step_form #msform #progressbar li.active:after { | |
| background: #2053a4; | |
| color: white; | |
| } | |
| .multi_step_form #msform .action-button { | |
| background: #2053a4; | |
| color: white; | |
| border: 0 none; | |
| border-radius: 5px; | |
| cursor: pointer; | |
| min-width: 130px; | |
| font: 700 14px/40px 'Roboto', sans-serif; | |
| border: 1px solid #2053a4; | |
| margin: 0 5px; | |
| text-transform: uppercase; | |
| display: inline-block; | |
| } | |
| .multi_step_form #msform .action-button:hover, | |
| .multi_step_form #msform .action-button:focus { | |
| background: #405867; | |
| border-color: #405867; | |
| } | |
| .multi_step_form #msform .previous_button { | |
| background: transparent; | |
| color: #99a2a8; | |
| border-color: #99a2a8; | |
| } | |
| .multi_step_form #msform .previous_button:hover, | |
| .multi_step_form #msform .previous_button:focus { | |
| background: #405867; | |
| border-color: #405867; | |
| color: #fff; | |
| } | |
| @media all and (max-width: 650px) { | |
| #colorChoices, | |
| #extraOutput { | |
| display: flex; | |
| flex-direction: row !important; | |
| flex-wrap: wrap; | |
| } | |
| #colorChoices .round, | |
| #extraOutput .round { | |
| margin-bottom: 20px; | |
| } | |
| } | |
| </style> | |
| </head> | |
| <body> | |
| <section class="multi_step_form"> | |
| <form id="msform"> | |
| <!-- Titel--> | |
| <div class="tittle"> | |
| <h2>Prisgenerator</h2> | |
| <p>I detta formulär kan du beräkna priset på eran beställning packtejp</p> | |
| </div> | |
| <!-- progressbar --> | |
| <ul id="progressbar"> | |
| <li class="active"><span>Välj färg</span></li> | |
| <li><span>Storlek & antal</span></li> | |
| <li><span>Granska</span></li> | |
| </ul> | |
| <!-- fieldsets --> | |
| <fieldset> | |
| <h3>Välj grundfärg</h3> | |
| <h6>För att generera pris behöver du välja ett grundutförande till packtejpen</h6> | |
| <div class="form-row" style="justify-content: center;"> | |
| <div id="colorChoices" class="form-group"> | |
| <!-- genererat --> | |
| </div> | |
| </div> | |
| <button type="button" class="action-button previous_button">Bakåt</button> | |
| <button type="button" class="next action-button">Nästa</button> | |
| </fieldset> | |
| <!-- Välj tillval --> | |
| <fieldset> | |
| <h3>Välj tillval</h3> | |
| <h6>Var vänlig och välj era tillval till packtejpen</h6> | |
| <div class="form-row"> | |
| <div class="form-group"> | |
| <b><label>Välj storlek</label></b> | |
| <select id="caseSize" class="product_select"> | |
| <option selected value="38 mm x 66 m">38 mm x 66 m</option> | |
| <option value="50 mm x 66 m">50 mm x 66 m</option> | |
| </select> | |
| </div> | |
| </div> | |
| <!-- Antal rullar --> | |
| <div class="form-row"> | |
| <div class="form-group"> | |
| <b><label>Välj antal rullar</label></b> | |
| <input id="countCases" type="number" class="form-control" value="1" | |
| style="max-width:250px;margin:0 auto;" /> | |
| </div> | |
| </div> | |
| <!-- Logotyp --> | |
| <div class="form-row"> | |
| <div class="form-group"> | |
| <p><b><label>Bifoga en logotyp (valfritt)</label></b></p> | |
| <input id="logotypeUpload" type="file" accept="image/x-png,image/gif,image/jpeg" /> | |
| </div> | |
| </div> | |
| <!-- Extra färg --> | |
| <div class="form-row"> | |
| <div class="form-group"> | |
| <b><label>Välj till ytterligare färger</label></b> | |
| <div id="extraColors"> | |
| <!-- Genererade färger här --> | |
| </div> | |
| </div> | |
| </div> | |
| <p><i>Estimerat pris <span id="priceEstimate"></span> :-</i></p> | |
| <button type="button" class="action-button previous previous_button">Bakåt</button> | |
| <button id="submitCalc" type="button" class="next action-button">Nästa</button> | |
| </fieldset> | |
| <fieldset> | |
| <h3>Översikt</h3> | |
| <h6>Här ser du detaljerna för er planerade beställning</h6> | |
| <div class="form-row"> | |
| <div class="form-group"> | |
| <div id="output"></div> | |
| <b>Extra färg</b> | |
| <div id="extraOutput"></div> | |
| <div id="counts"> | |
| <p> | |
| <b>Storlek</b>: <span id="cartonSize"></span> | |
| </p> | |
| <p> | |
| <b>Antal kartonger</b>: <span id="cartonCount"></span> | |
| </p> | |
| <p> | |
| <b>Pris per rulle <span id="pcsPrice"></span> :-</b> | |
| </p> | |
| <h4>Totalpris exkl. moms <span id="totalPrice">0</span> :-</h4> | |
| </div> | |
| </div> | |
| </div> | |
| <button type="button" class="action-button previous previous_button">Bakåt</button> | |
| <a href="#" class="action-button">Slutför</a> | |
| </fieldset> | |
| </form> | |
| </section> | |
| <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> | |
| <script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0-beta/js/bootstrap.min.js"></script> | |
| <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-easing/1.3/jquery.easing.min.js"></script> | |
| <script src="https://cdnjs.cloudflare.com/ajax/libs/intl-tel-input/12.1.2/js/intlTelInput.js"></script> | |
| <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js"></script> | |
| <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-nice-select/1.1.0/js/jquery.nice-select.min.js"></script> | |
| <script> | |
| ; | |
| (function ($) { | |
| "use strict"; | |
| var res; | |
| var colors = [{ | |
| name: 'Brun', | |
| value: '#CD853F' | |
| }, | |
| { | |
| name: 'Vit', | |
| value: '#fff', | |
| price: 0 | |
| }, | |
| { | |
| name: 'Annan färg', | |
| value: '#405867', | |
| price: 0 | |
| }, | |
| { | |
| name: 'Transparent', | |
| value: 'transparent', | |
| price: 0 | |
| } | |
| ]; | |
| var priceList = [{ | |
| size: '38 mm x 66 m', | |
| price: 35.40, | |
| maxItems: 48, | |
| maxColors: 1 | |
| }, | |
| { | |
| size: '38 mm x 66 m', | |
| price: 40.70, | |
| maxItems: 48, | |
| maxColors: 2 | |
| }, | |
| { | |
| size: '38 mm x 66 m', | |
| price: 48.90, | |
| maxItems: 48, | |
| maxColors: 3 | |
| }, | |
| { | |
| size: '50 mm x 66 m', | |
| price: 42.80, | |
| maxItems: 36, | |
| maxColors: 1 | |
| }, | |
| { | |
| size: '50 mm x 66 m', | |
| price: 49.20, | |
| maxItems: 36, | |
| maxColors: 2 | |
| }, | |
| { | |
| size: '50 mm x 66 m', | |
| price: 59, | |
| maxItems: 36, | |
| maxColors: 3 | |
| } | |
| ]; | |
| var selected = {}; | |
| var selected_size = null; | |
| function filterPrice() { | |
| var total_price; // dekl. totalpris för att uppdat. senare | |
| var total_items = Number($("#countCases").val()); // antal önskade rullar | |
| var filter = { | |
| size: $("#caseSize option:selected") | |
| .text(), // Angiven storlek från <select>'s värde (deklar. längst upp) | |
| maxColors: $("#extraColors").find(".round.active").length // antal valda "extrafärger" | |
| }; | |
| res = priceList.filter(function (item) { | |
| for (var key in filter) { | |
| if (item[key] === undefined || item[key] != filter[key]) | |
| return false; | |
| } | |
| return true; | |
| }); | |
| console.log("==== FILTER ===="); | |
| console.log(filter); | |
| console.log("==== logga matchange pristabell ===="); | |
| console.log(res); | |
| console.log("==== Totalpris ===="); | |
| calcTotal(res, filter, total_items); | |
| var total_price = res[0].price * total_items; | |
| $('#totalPrice').html(total_price); // In med slutpriset | |
| } | |
| function calcTotal(res, filter, itemCount) { | |
| console.log('calcTotal', res); | |
| console.log('calcTotal', filter); | |
| var total, single_price = 0; | |
| if (filter.size == "50 mm x 66 m") { | |
| console.log('size is', "big"); | |
| if (itemCount < 36 && filter.maxColors == 1) { | |
| // För för köp under 36 rullar och 1 färg | |
| single_price = 42.80; //TODO: Vad är priset för små ordrar? | |
| } else if (itemCount < 36 && filter.maxColors == 2) { | |
| // För för köp under 48 rullar och 2 färg | |
| single_price = 49.20; //TODO: Vad är priset för små ordrar? | |
| } else if (itemCount < 36 && filter.maxColors == 3) { | |
| // För för köp under 36 rullar och 3 färger | |
| single_price = 59.00; //TODO: Vad är priset för små ordrar? | |
| } else if (itemCount >= 36 && itemCount < 72 && filter.maxColors == 1) { | |
| // För för köp på 48 eller fler rullar, men mindre än 72 och 1 färg | |
| single_price = 42.80; | |
| } else if (itemCount >= 36 && itemCount < 72 && filter.maxColors == 2) { | |
| // För för köp på 36 eller fler rullar, men mindre än 72 och 2 färger | |
| single_price = 49.90; | |
| } else if (itemCount >= 36 && itemCount < 72 && filter.maxColors == 3) { | |
| // För för köp på 36 eller fler rullar, men mindre än 72 och 3 färger | |
| single_price = 59.00; | |
| } | |
| console.log('single price is', itemCount); | |
| total = single_price * itemCount; | |
| } else if (filter.size == "38 mm x 66 m") { | |
| console.log('size is', "small"); | |
| if (itemCount < 48 && filter.maxColors == 1) { | |
| // För för köp under 48 rullar och 1 färg | |
| single_price = 40; //TODO: Vad är priset för små ordrar? | |
| } else if (itemCount < 48 && filter.maxColors == 2) { | |
| // För för köp under 48 rullar och 2 färg | |
| single_price = 40; //TODO: Vad är priset för små ordrar? | |
| } else if (itemCount < 48 && filter.maxColors == 3) { | |
| // För för köp under 48 rullar och 3 färger | |
| single_price = 40; //TODO: Vad är priset för små ordrar? | |
| } else if (itemCount >= 48 && itemCount < 96 && filter.maxColors == 1) { | |
| // För för köp på 48 eller fler rullar, men mindre än 96 och 1 färg | |
| single_price = 35.40; | |
| } else if (itemCount >= 96 && itemCount < 96 && filter.maxColors == 2) { | |
| // För för köp på 48 eller fler rullar, men mindre än 96 och 2 färger | |
| single_price = 40.70; | |
| } else if (itemCount >= 96 && itemCount < 96 && filter.maxColors == 3) { | |
| // För för köp på 48 eller fler rullar, men mindre än 96 och 3 färger | |
| single_price = 48.90; | |
| } | |
| $("#pcsPrice").html(single_price); | |
| console.log('single price is', single_price); | |
| console.log('calcing.. ', single_price, ' * ', itemCount); | |
| total = single_price * itemCount; | |
| } | |
| console.log('total', total); | |
| return total; | |
| } | |
| // jquery appends | |
| for (var i = 0; i < colors.length; i++) { | |
| if (colors[i].name == "Vit" || colors[i].name == "Transparent") { | |
| $("#colorChoices").append("<div class=\"round\" data-color=\"" + colors[i].name + | |
| "\" style=\"background-color:" + colors[i].value + ";color:#333\">" + colors[i].name + | |
| "</div>"); | |
| $("#extraColors").append("<div class=\"round\" data-color=\"" + colors[i].name + | |
| "\" style=\"background-color:" + colors[i].value + ";color:#333\">" + colors[i].name + | |
| "</div>"); | |
| } else { | |
| $("#colorChoices").append("<div class=\"round\" data-color=\"" + colors[i].name + | |
| "\" style=\"background-color:" + colors[i].value + "\">" + colors[i].name + "</div>"); | |
| $("#extraColors").append("<div class=\"round\" data-color=\"" + colors[i].name + | |
| "\" style=\"background-color:" + colors[i].value + ";\">" + colors[i].name + "</div>"); | |
| } | |
| } | |
| // jquery klick-events | |
| $("#colorChoices .round").click(function () { | |
| $(".round").removeClass("active"); | |
| $(this).toggleClass("active"); | |
| // Variabler för läsbarhet | |
| selected.color = $(this).attr('style').split(';').filter(item => item.startsWith( | |
| 'background-color'))[0].split(":")[1]; | |
| selected.name = $(this).data('color'); | |
| // Sätter grundfärgen | |
| if (selected.name == "Vit" || selected.name == "Transparent") { | |
| $("#output").html("<b>Grundfärg</b><div class=\"round\" style=\"background-color:" + | |
| selected.color + "\;color:#333\">" + selected.name + "</div>"); | |
| } else { | |
| $("#output").html("<b>Grundfärg</b><div class=\"round\" style=\"background-color:" + | |
| selected.color + "\">" + selected.name + "</div>"); | |
| } | |
| }); | |
| $("#extraColors .round").click(function () { | |
| $(this).toggleClass("active"); | |
| // Variabler för läsbarhet | |
| selected.color = $(this).attr('style').split(';').filter(item => item.startsWith( | |
| 'background-color'))[0].split(":")[1]; | |
| selected.name = $(this).data('color'); | |
| // Sätter grundfärgen | |
| if (selected.name == "Vit" || selected.name == "Transparent") { | |
| $("#extraOutput").append("<div class=\"round\" style=\"background-color:" + selected | |
| .color + "\;color:#333\">" + selected.name + "</div>"); | |
| } else { | |
| $("#extraOutput").append("<div class=\"round\" style=\"background-color:" + selected | |
| .color + "\">" + selected.name + "</div>"); | |
| } | |
| }); | |
| $("#submitCalc").click(function () { | |
| filterPrice(); | |
| $("#cartonSize").html($("#caseSize option:selected").text()); | |
| $("#cartonCount").html($("#countCases").val()); | |
| $("#caseSize").on('change', function () { | |
| selected_size = $("option:selected").text(); | |
| }); | |
| }); | |
| $("#colorChoices").append() | |
| //* Form js | |
| function verificationForm() { | |
| //jQuery time | |
| var current_fs, next_fs, previous_fs; //fieldsets | |
| var left, opacity, scale; //fieldset properties which we will animate | |
| var animating; //flag to prevent quick multi-click glitches | |
| $(".next").click(function () { | |
| if (animating) return false; | |
| animating = true; | |
| current_fs = $(this).parent(); | |
| next_fs = $(this).parent().next(); | |
| //activate next step on progressbar using the index of next_fs | |
| $("#progressbar li").eq($("fieldset").index(next_fs)).addClass("active"); | |
| //show the next fieldset | |
| next_fs.show(); | |
| //hide the current fieldset with style | |
| current_fs.animate({ | |
| opacity: 0 | |
| }, { | |
| step: function (now, mx) { | |
| //as the opacity of current_fs reduces to 0 - stored in "now" | |
| //1. scale current_fs down to 80% | |
| scale = 1 - (1 - now) * 0.2; | |
| //2. bring next_fs from the right(50%) | |
| left = (now * 50) + "%"; | |
| //3. increase opacity of next_fs to 1 as it moves in | |
| opacity = 1 - now; | |
| current_fs.css({ | |
| 'transform': 'scale(' + scale + ')', | |
| 'position': 'absolute' | |
| }); | |
| next_fs.css({ | |
| 'left': left, | |
| 'opacity': opacity | |
| }); | |
| }, | |
| duration: 800, | |
| complete: function () { | |
| current_fs.hide(); | |
| animating = false; | |
| }, | |
| //this comes from the custom easing plugin | |
| easing: 'easeInOutBack' | |
| }); | |
| }); | |
| $(".previous").click(function () { | |
| if (animating) return false; | |
| animating = true; | |
| current_fs = $(this).parent(); | |
| previous_fs = $(this).parent().prev(); | |
| //de-activate current step on progressbar | |
| $("#progressbar li").eq($("fieldset").index(current_fs)).removeClass("active"); | |
| //show the previous fieldset | |
| previous_fs.show(); | |
| //hide the current fieldset with style | |
| current_fs.animate({ | |
| opacity: 0 | |
| }, { | |
| step: function (now, mx) { | |
| //as the opacity of current_fs reduces to 0 - stored in "now" | |
| //1. scale previous_fs from 80% to 100% | |
| scale = 0.8 + (1 - now) * 0.2; | |
| //2. take current_fs to the right(50%) - from 0% | |
| left = ((1 - now) * 50) + "%"; | |
| //3. increase opacity of previous_fs to 1 as it moves in | |
| opacity = 1 - now; | |
| current_fs.css({ | |
| 'left': left | |
| }); | |
| previous_fs.css({ | |
| 'transform': 'scale(' + scale + ')', | |
| 'opacity': opacity | |
| }); | |
| }, | |
| duration: 800, | |
| complete: function () { | |
| current_fs.hide(); | |
| animating = false; | |
| }, | |
| //this comes from the custom easing plugin | |
| easing: 'easeInOutBack' | |
| }); | |
| }); | |
| $(".submit").click(function () { | |
| return false; | |
| }) | |
| }; | |
| function phoneNoselect() { | |
| if ($('#msform').length) { | |
| $("#phone").intlTelInput(); | |
| $("#phone").intlTelInput("setNumber", "+880"); | |
| }; | |
| }; | |
| //* Select js | |
| function nice_Select() { | |
| if ($('.product_select').length) { | |
| $('select').niceSelect(); | |
| }; | |
| }; | |
| /*Function Calls*/ | |
| verificationForm(); | |
| phoneNoselect(); | |
| nice_Select(); | |
| })(jQuery); | |
| </script> | |
| </body> | |
| </html> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment