Chapter Books

Shelly's Adventures Verified independent store

→

#sa-chapter-page { --navy:#123B63; --blue:#1560A8; --gold:#F2A93B; --coral:#EF6634; --teal:#2E9E6B; --cream:#FBF7EF; font-family:'Nunito',system-ui,sans-serif; color:var(--navy); m ax-width:900px; margin:0 auto; padding:24px 16px 64px; } #sa-chapter-page * { box-sizing:border-box; } #sa-chapter-page h1,#sa-chapter-page h2,#sa-chapter-page .display { font-family:'Baloo 2',system-ui,sans-serif; font-weight:700; } #sa-chapter-page .eyebrow{ display:inline-block; background:var(--teal); color:#fff; font-weight:800; font-size:.72rem; letter-spacing:.08em; text-transform:uppercase; padding:5px 12px; border-radius:100px; margin-bottom:10px; } #sa-chapter-page h1{ font-size:2rem; margin:0 0 6px; } #sa-chapter-page .sub{ font-size:1.02rem; margin:0 0 28px; opacity:.85; } #sa-chapter-page .howto{ background:#EAF2FA; border:2px solid var(--blue); border-radius:16px; padding:18px 20px; margin-bottom:22px; } #sa-chapter-page .howto h3{ font-family:'Baloo 2',sans-serif; font-weight:800; font-size:1.1rem; color:var(--navy); margin-bottom:12px; } #sa-chapter-page .howto-step{ display:flex; gap:12px; margin-bottom:12px; align-items:flex-start; } #sa-chapter-page .howto-step:last-child{ margin-bottom:0; } #sa-chapter-page .howto-num{ flex:none; width:28px; height:28px; border-radius:50%; background:var(--blue); color:#fff; font-family:'Baloo 2',sans-serif; font-weight:800; font-size:.95rem; display:flex; align-items:center; justify-content:center; } #sa-chapter-page .howto-text{ font-size:.94rem; font-weight:600; line-height:1.45; padding-top:3px; } #sa-chapter-page .howto-text b{ color:var(--navy); } #sa-chapter-page .student-info{ background:#fff; border:2px solid var(--teal); border-radius:16px; padding:18px 20px; margin-bottom:22px; } #sa-chapter-page .student-info h3{ font-family:'Baloo 2',sans-serif; font-weight:800; font-size:1.05rem; color:var(--navy); margin-bottom:4px; } #sa-chapter-page .student-info .sub{ font-size:.86rem; opacity:.7; font-weight:600; margin-bottom:14px; } #sa-chapter-page .student-info .field-grid{ display:grid; grid-template-columns:repeat(auto-fit,minmax(200px,1fr)); gap:12px; } #sa-chapter-page .student-info label{ display:block; font-size:.82rem; font-weight:800; color:var(--navy); margin-bottom:4px; } #sa-chapter-page .student-info input{ width:100%; padding:10px 12px; border:2px solid #E7E0D3; border-radius:10px; font-size:.94rem; font-family:'Nunito',sans-serif; font-weight:600; color:var(--navy); } #sa-chapter-page .student-info input:focus{ outline:none; border-color:var(--teal); } #sa-chapter-page .student-info input.err{ border-color:var(--coral); } #sa-chapter-page .student-info .req{ color:var(--coral); } #sa-chapter-page .delivery{ background:#fff; border:2px solid var(--gold); border-radius:16px; padding:18px 20px; margin-bottom:22px; } #sa-chapter-page .delivery h3{ font-family:'Baloo 2',sans-serif; font-weight:800; font-size:1.05rem; color:var(--navy); margin-bottom:4px; } #sa-chapter-page .delivery .sub{ font-size:.86rem; opacity:.7; font-weight:600; margin-bottom:14px; } #sa-chapter-page .delivery-row{ display:flex; gap:12px; flex-wrap:wrap; } #sa-chapter-page .delivery-opt{ flex:1; min-width:220px; border:2.4px solid #E7E0D3; border-radius:14px; padding:14px 16px; cursor:pointer; display:flex; align-items:center; gap:12px; transition:border-color .15s, background .15s; } #sa-chapter-page .delivery-opt:hover{ border-color:var(--gold); } #sa-chapter-page .delivery-opt.selected{ border-color:var(--teal); background:#EFF8F3; } #sa-chapter-page .delivery-opt input[type="radio"]{ position:absolute; opacity:0; width:0; height:0; pointer-events:none; } #sa-chapter-page .delivery-opt .radio{ width:22px; height:22px; flex:none; border-radius:50%; border:2.2px solid #C9C2B3; background:#fff; position:relative; } #sa-chapter-page .delivery-opt.selected .radio{ border-color:var(--teal); } #sa-chapter-page .delivery-opt.selected .radio::after{ content:""; position:absolute; left:4px; top:4px; width:10px; height:10px; border-radius:50%; background:var(--teal); } #sa-chapter-page .delivery-opt .label{ font-weight:800; font-size:.98rem; color:var(--navy); } #sa-chapter-page .delivery-opt .price-tag{ font-weight:700; font-size:.86rem; opacity:.65; } #sa-chapter-page .delivery-opt.disabled{ opacity:.45; cursor:not-allowed; background:#F2EFE7; } #sa-chapter-page .delivery-opt.disabled .price-tag{ color:var(--coral); opacity:1; } #sa-chapter-page .items-box{ background:#fff; border:2px solid var(--coral); border-radius:16px; padding:20px; margin-bottom:22px; } #sa-chapter-page .panel-head{ background:var(--cream); border:1px solid #EADFC9; border-radius:14px; padding:16px 18px; margin-bottom:18px; display:flex; align-items:center; justify-content:space-between; gap:12px; flex-wrap:wrap; } #sa-chapter-page .panel-head .price{ font-family:'Baloo 2',sans-serif; font-size:1.6rem; color:var(--blue); font-weight:800; } #sa-chapter-page .panel-head .price small{ font-size:.9rem; font-weight:600; color:var(--navy); opacity:.7; } #sa-chapter-page .counter{ font-weight:800; color:var(--teal); } #sa-chapter-page .note{ font-size:.85rem; opacity:.7; margin:-8px 0 18px; } #sa-chapter-page .stepper-row{ display:flex; align-items:center; justify-content:space-between; gap:12px; border:2px solid #E7E0D3; border-radius:12px; padding:12px 14px; margin-bottom:10px; } #sa-chapter-page .stepper-row .info{ font-weight:700; font-size:.94rem; } #sa-chapter-page .stepper-row .level{ font-weight:600; font-size:.82em; opacity:.6; } #sa-chapter-page .stepper{ display:flex; align-items:center; gap:10px; flex:none; } #sa-chapter-page .stepper button{ width:30px; height:30px; border-radius:50%; border:2px solid var(--teal); background:#fff; color:var(--teal); font-family:'Baloo 2',sans-serif; font-weight:800; font-size:1.1rem; cursor:pointer; line-height:1; } #sa-chapter-page .stepper button:disabled{ opacity:.3; cursor:not-allowed; } #sa-chapter-page .stepper .qty{ min-width:22px; text-align:center; font-weight:800; } #sa-chapter-page .cta{ font-family:'Baloo 2',sans-serif; font-weight:700; font-size:1.05rem; background:var(--coral); color:#fff; border:none; border-radius:100px; padding:14px 30px; cursor:pointer; transition:transform .1s, background .15s; } #sa-chapter-page .cta:hover:not(:disabled){ background:#e0562a; transform:translateY(-1px); } #sa-chapter-page .cta:disabled{ background:#C9C2B3; cursor:not-allowed; } #sa-chapter-page .status{ margin-top:12px; font-weight:700; } #sa-chapter-page .status.ok{ color:var(--teal); } #sa-chapter-page .status.err{ color:var(--coral); } For Schools Chapter Books Autographed chapter books for early independent readers — $8 each. 📖 How to Order — 3 Easy Steps 1 Fill in the Student Order Info below — it's attached to your order. 2 Use the + button to add copies of any chapter book title. The number shows how many you've picked. 3 Once you're happy with your picks, click the green "Add to Cart" button. Student Order Info Fill this in once — it's attached to whatever you order below. Student Name * School Name * Grade Teacher 🚚 Delivery Method Choose how you'd like to receive your books. Pick Up At School Free — during Kentrell's visit Ship To My Home Shipping cost & speed selected at checkout 0 chapter books selected $0 total $8 per book. Add as many copies of each title as you'd like. Add to Cart (function(){ // ---------- CONFIG ---------- var CHAPTER_BOOKS = [ {title:"Kasey's First Day of Basketball Practice", level:"2nd-5th"}, {title:"Shelly Goes to the Bank", level:"2nd-5th"}, {title:"Shelly Meets a New Friend", level:"2nd-5th"} ]; var CHAPTER_BOOK_VARIANT_ID = "49435997110500"; // "Chapter Book" $8 (shared across all 3 pages) // Flip this to true once the school visit has concluded — Pickup locks out and // Ship becomes the only choice, since Kentrell is no longer on-site to hand off books. var VISIT_HAS_OCCURRED = false; // ---------- END CONFIG ---------- function buildStepperList(listId, items, onChange){ var list = document.getElementById(listId); var qty = items.map(function(){ return 0; }); items.forEach(function(item, i){ var row = document.createElement('div'); row.className = 'stepper-row'; row.innerHTML = '' + item.title + ' (' + item.level + ')' + '' + '–' + '0' + '+' + ''; var qtyEl = row.querySelector('.qty'); var minusBtn = row.querySelector('.minus'); var plusBtn = row.querySelector('.plus'); function refresh(){ qtyEl.textContent = qty[i]; minusBtn.disabled = qty[i] 0){ qty[i]--; refresh(); onChange(qty); } }); plusBtn.addEventListener('click', function(){ qty[i]++; refresh(); onChange(qty); }); refresh(); list.appendChild(row); }); return function(){ return qty; }; } function addToCart(items, statusEl, button){ button.disabled = true; var original = button.textContent; button.textContent = 'Adding…'; fetch('/cart/add.js', { method:'POST', headers:{'Content-Type':'application/json'}, body: JSON.stringify({items: items}) }).then(function(r){ if(!r.ok) throw new Error('cart error'); return r.json(); }).then(function(){ statusEl.textContent = 'Added to cart! ✓'; statusEl.className = 'status ok'; button.textContent = original; button.disabled = false; }).catch(function(){ statusEl.textContent = 'Something went wrong — please try again, or refresh the page.'; statusEl.className = 'status err'; button.textContent = original; button.disabled = false; }); } function getStudentInfo(){ return { student: document.getElementById('si-student').value.trim(), school: document.getElementById('si-school').value.trim(), grade: document.getElementById('si-grade').value.trim(), teacher: document.getElementById('si-teacher').value.trim() }; } function validateStudentInfo(){ var info = getStudentInfo(); var studentEl = document.getElementById('si-student'); var schoolEl = document.getElementById('si-school'); studentEl.classList.toggle('err', !info.student); schoolEl.classList.toggle('err', !info.school); return !!(info.student && info.school); } function getDeliveryMethod(){ var checked = document.querySelector('#sa-chapter-page input[name="delivery"]:checked'); return checked ? checked.value : 'pickup'; } function submitWithStudentInfo(items, statusEl, button){ if(!validateStudentInfo()){ statusEl.textContent = 'Please fill in Student Name and School Name above before ordering.'; statusEl.className = 'status err'; document.getElementById('si-student').scrollIntoView({behavior:'smooth', block:'center'}); return; } var info = getStudentInfo(); var delivery = getDeliveryMethod(); var deliveryLabel = delivery === 'ship' ? 'Ship To My Home' : 'Pick Up At School (Free)'; items.forEach(function(item){ item.properties = item.properties || {}; item.properties['Student Name'] = info.student; item.properties['School Name'] = info.school; if(info.grade) item.properties['Grade'] = info.grade; if(info.teacher) item.properties['Teacher'] = info.teacher; item.properties['Delivery Method'] = deliveryLabel; }); addToCart(items, statusEl, button); } // Delivery method selector + visit-status lockout if(VISIT_HAS_OCCURRED){ var pickupOpt = document.getElementById('delivery-pickup-opt'); var shipOpt = document.getElementById('delivery-ship-opt'); pickupOpt.classList.add('disabled'); pickupOpt.classList.remove('selected'); pickupOpt.querySelector('input[type="radio"]').disabled = true; pickupOpt.querySelector('.price-tag').textContent = 'No longer available — visit has concluded'; shipOpt.classList.add('selected'); shipOpt.querySelector('input[type="radio"]').checked = true; document.getElementById('delivery-sub').textContent = "Kentrell's visit has concluded, so all orders now ship to your home."; } document.querySelectorAll('#sa-chapter-page .delivery-opt').forEach(function(opt){ opt.addEventListener('click', function(){ if(opt.classList.contains('disabled')) return; document.querySelectorAll('#sa-chapter-page .delivery-opt').forEach(function(o){ o.classList.remove('selected'); }); opt.classList.add('selected'); opt.querySelector('input[type="radio"]').checked = true; }); }); // Chapter books (quantity-based, $8 each) var getChapterQty = buildStepperList('chapter-list', CHAPTER_BOOKS, function(qty){ var total = qty.reduce(function(a,b){ return a+b; }, 0); document.getElementById('chapter-count').textContent = total; document.getElementById('chapter-price').innerHTML = '$'+(total*8)+' total'; document.getElementById('chapter-add').disabled = total === 0; }); document.getElementById('chapter-add').addEventListener('click', function(){ var qty = getChapterQty(); var items = []; CHAPTER_BOOKS.forEach(function(book, i){ if(qty[i] > 0){ items.push({id: CHAPTER_BOOK_VARIANT_ID, quantity: qty[i], properties: {'Book Title': book.title}}); } }); submitWithStudentInfo(items, document.getElementById('chapter-status'), this); }); })(); Show more