Skip to content
- Choosing a selection results in a full page refresh.
- Opens in a new window.
<script src="//www.zionpark.org/cdn/shop/t/35/assets/zfp-scroll-animations.js?v=40123657415927684401775865929" defer></script>
<div id="zfp-drawer-overlay" class="zfp-drawer-overlay" aria-hidden="true"></div>
<div id="zfp-cart-drawer" class="zfp-cart-drawer" role="dialog" aria-modal="true" aria-label="Your cart" hidden>
<div class="zfp-cd-header">
<div class="zfp-cd-header__left">
<span class="zfp-cd-header__title">YOUR CART</span>
<span class="zfp-cd-header__count" id="zfp-cd-count">0</span>
</div>
<button class="zfp-cd-close" id="zfp-cd-close" aria-label="Close cart">
<svg width="18" height="18" viewBox="0 0 18 18" fill="none">
<path d="M1 1L17 17M17 1L1 17" stroke="currentColor" stroke-width="2" stroke-linecap="round"/>
</svg>
</button>
</div>
<div class="zfp-cd-ship" id="zfp-cd-ship" hidden>
<div class="zfp-cd-ship__msg" id="zfp-cd-ship-msg"></div>
<div class="zfp-cd-ship__track">
<div class="zfp-cd-ship__fill" id="zfp-cd-ship-fill"></div>
</div>
</div>
<div class="zfp-cd-body" id="zfp-cd-body">
<div class="zfp-cd-empty" id="zfp-cd-empty" hidden>
<svg width="48" height="48" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5">
<circle cx="9" cy="21" r="1"/><circle cx="20" cy="21" r="1"/>
<path d="M1 1h4l2.68 13.39a2 2 0 0 0 2 1.61h9.72a2 2 0 0 0 2-1.61L23 6H6"/>
</svg>
<p>Your cart is empty</p>
<a href="/store" class="zfp-cd-empty__link">Continue Shopping</a>
</div>
<div id="zfp-cd-items" class="zfp-cd-items"></div>
</div>
<div class="zfp-cd-footer" id="zfp-cd-footer" hidden>
<div class="zfp-cd-zc" id="zfp-cd-zc" hidden>
<div class="zfp-cd-zc__topo"></div>
<div class="zfp-cd-zc__inner">
<span class="zfp-cd-zc__icon">◈</span>
<div class="zfp-cd-zc__body">
<strong id="zfp-cd-zc-title">Join Zion Circle — Support Zion & Save</strong>
<span id="zfp-cd-zc-sub">Save 15% on eligible purchases. Starting at $50/yr.</span>
</div>
<button class="zfp-cd-zc__btn" id="zfp-cd-zc-btn">Join</button>
</div>
</div>
<div class="zfp-cd-recs" id="zfp-cd-recs" hidden>
<p class="zfp-cd-recs__label">You might also like</p>
<div class="zfp-cd-recs__list" id="zfp-cd-recs-list"></div>
</div>
<div class="zfp-cd-totals">
<div class="zfp-cd-totals__row">
<span class="zfp-cd-totals__label">Estimated total</span>
<span class="zfp-cd-totals__value" id="zfp-cd-total">$0.00</span>
</div>
<p class="zfp-cd-totals__note">Taxes and shipping calculated at checkout</p>
</div>
<a href="/checkout" class="zfp-cd-checkout" id="zfp-cd-checkout">
<svg width="14" height="14" viewBox="0 0 24 24" fill="currentColor"><path d="M12 1C8.676 1 6 3.676 6 7v1H3v13h18V8h-3V7c0-3.324-2.676-6-6-6zm0 2c2.276 0 4 1.724 4 4v1H8V7c0-2.276 1.724-4 4-4zm0 9a2 2 0 1 1 0 4 2 2 0 0 1 0-4z"/></svg>
Check Out
</a>
<a href="/store" class="zfp-cd-continue">← Continue Shopping</a>
</div>
</div>
<style>
/* ═══════════════════════════════════════════════
ZFP CART DRAWER
═══════════════════════════════════════════════ */
:root {
--zfp-cd-width: 420px;
--zfp-cd-bg: #F4EFE6;
--zfp-cd-surface: #FAF7F2;
--zfp-cd-border: rgba(0,0,0,.1);
--zfp-cd-rust: #C04A1E;
--zfp-cd-moss: #C04A1E;
--zfp-cd-charcoal: #1E1E1E;
--zfp-cd-mid: #6B6B6B;
--zfp-cd-gold: #C08C20;
}
.zfp-drawer-overlay {
position: fixed;
inset: 0;
background: rgba(0,0,0,.4);
z-index: 9998;
opacity: 0;
pointer-events: none;
transition: opacity .3s ease;
}
.zfp-drawer-overlay.is-open {
opacity: 1;
pointer-events: auto;
}
.zfp-cart-drawer {
position: fixed;
top: 0;
right: 0;
bottom: 0;
width: var(--zfp-cd-width);
max-width: 100vw;
background: var(--zfp-cd-bg);
z-index: 9999;
display: flex;
flex-direction: column;
transform: translateX(100%);
transition: transform .35s cubic-bezier(0.16, 1, 0.3, 1);
box-shadow: -4px 0 32px rgba(0,0,0,.12);
}
.zfp-cart-drawer:not([hidden]) { display: flex; }
.zfp-cart-drawer.is-open { transform: translateX(0); }
/* ── Header ── */
.zfp-cd-header {
display: flex;
align-items: center;
justify-content: space-between;
padding: 1.25rem 1.25rem 1rem;
border-bottom: 1px solid var(--zfp-cd-border);
background: var(--zfp-cd-bg);
flex-shrink: 0;
}
.zfp-cd-header__left {
display: flex;
align-items: center;
gap: .6rem;
}
.zfp-cd-header__title {
font-family: 'Oswald', sans-serif;
font-weight: 700;
font-size: 18px;
letter-spacing: .06em;
color: var(--zfp-cd-charcoal);
}
.zfp-cd-header__count {
background: var(--zfp-cd-rust);
color: white;
font-family: 'Barlow Condensed', sans-serif;
font-weight: 700;
font-size: 11px;
min-width: 20px;
height: 20px;
border-radius: 10px;
display: flex;
align-items: center;
justify-content: center;
padding: 0 5px;
}
.zfp-cd-close {
background: none;
border: 1px solid var(--zfp-cd-border);
border-radius: 50%;
width: 36px;
height: 36px;
display: flex;
align-items: center;
justify-content: center;
cursor: pointer;
color: var(--zfp-cd-charcoal);
transition: background .12s, color .12s;
}
.zfp-cd-close:hover { background: var(--zfp-cd-charcoal); color: white; }
/* ── Shipping bar ── */
.zfp-cd-ship {
padding: .75rem 1.25rem;
background: var(--zfp-cd-surface);
border-bottom: 1px solid var(--zfp-cd-border);
flex-shrink: 0;
}
.zfp-cd-ship__msg {
font-family: 'Barlow', sans-serif;
font-size: 12px;
color: var(--zfp-cd-charcoal);
margin-bottom: .4rem;
line-height: 1.4;
}
.zfp-cd-ship__msg strong { color: var(--zfp-cd-rust); }
.zfp-cd-ship__qualified { color: var(--zfp-cd-moss); font-weight: 600; }
.zfp-cd-ship__track {
height: 4px;
background: rgba(0,0,0,.1);
border-radius: 2px;
overflow: hidden;
}
.zfp-cd-ship__fill {
height: 100%;
background: var(--zfp-cd-rust);
border-radius: 2px;
transition: width .4s ease;
}
/* ── Body ── */
.zfp-cd-body {
flex: 1;
overflow-y: auto;
-webkit-overflow-scrolling: touch;
padding: .5rem 0;
}
/* ── Fix: hidden attribute overridden by display rules ── */
.zfp-cd-ship[hidden],
.zfp-cd-footer[hidden],
.zfp-cd-zc[hidden],
.zfp-cd-recs[hidden],
.zfp-cd-empty[hidden] { display: none !important; }
/* ── Empty state ── */
.zfp-cd-empty {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
height: 100%;
gap: 1rem;
padding: 3rem 1.5rem;
color: var(--zfp-cd-mid);
}
.zfp-cd-empty p {
font-family: 'Barlow', sans-serif;
font-size: 15px;
margin: 0;
}
.zfp-cd-empty__link {
font-family: 'Barlow Condensed', sans-serif;
font-weight: 600;
font-size: 13px;
letter-spacing: .08em;
text-transform: uppercase;
color: var(--zfp-cd-rust);
text-decoration: underline;
}
/* ── Cart items ── */
.zfp-cd-item {
display: flex;
gap: .85rem;
padding: .85rem 1.25rem;
border-bottom: 1px solid var(--zfp-cd-border);
align-items: flex-start;
transition: background .12s;
}
.zfp-cd-item:hover { background: rgba(0,0,0,.02); }
.zfp-cd-item__img {
width: 72px;
height: 72px;
border-radius: 5px;
object-fit: cover;
background: var(--zfp-cd-surface);
flex-shrink: 0;
display: block;
}
.zfp-cd-item__img-placeholder {
width: 72px;
height: 72px;
border-radius: 5px;
background: var(--zfp-cd-surface);
flex-shrink: 0;
}
.zfp-cd-item__info { flex: 1; min-width: 0; }
.zfp-cd-item__title {
font-family: 'Barlow', sans-serif;
font-size: 13px;
font-weight: 500;
color: var(--zfp-cd-charcoal);
line-height: 1.35;
margin: 0 0 3px;
text-decoration: none;
display: block;
}
.zfp-cd-item__title:hover { color: var(--zfp-cd-rust); }
.zfp-cd-item__variant {
font-family: 'Barlow', sans-serif;
font-size: 11px;
color: var(--zfp-cd-mid);
margin: 0 0 6px;
}
.zfp-cd-item__price-row {
display: flex;
align-items: center;
justify-content: space-between;
gap: .5rem;
}
.zfp-cd-item__price {
font-family: 'Barlow Condensed', sans-serif;
font-weight: 600;
font-size: 14px;
color: var(--zfp-cd-charcoal);
}
.zfp-cd-item__price--original {
text-decoration: line-through;
color: var(--zfp-cd-mid);
font-weight: 400;
margin-right: 4px;
}
.zfp-cd-item__price--sale { color: var(--zfp-cd-rust); }
.zfp-cd-item__qty {
display: flex;
align-items: center;
border: 1px solid var(--zfp-cd-border);
border-radius: 4px;
overflow: hidden;
background: white;
}
.zfp-cd-item__qty-btn {
background: none;
border: none;
width: 28px;
height: 28px;
display: flex;
align-items: center;
justify-content: center;
cursor: pointer;
font-size: 16px;
color: var(--zfp-cd-charcoal);
transition: background .1s;
flex-shrink: 0;
}
.zfp-cd-item__qty-btn:hover { background: var(--zfp-cd-surface); }
.zfp-cd-item__qty-num {
font-family: 'Barlow', sans-serif;
font-size: 13px;
min-width: 24px;
text-align: center;
color: var(--zfp-cd-charcoal);
border-left: 1px solid var(--zfp-cd-border);
border-right: 1px solid var(--zfp-cd-border);
line-height: 28px;
}
.zfp-cd-item__remove {
background: none;
border: none;
cursor: pointer;
color: var(--zfp-cd-mid);
padding: 4px;
display: flex;
align-items: center;
justify-content: center;
border-radius: 3px;
transition: color .12s;
margin-left: auto;
}
.zfp-cd-item__remove:hover { color: #e74c3c; }
/* ── Zion Circle upsell ── */
.zfp-cd-zc {
position: relative;
overflow: hidden;
background: #2a3a33;
margin: .75rem 1.25rem;
border-radius: 6px;
}
.zfp-cd-zc__topo {
position: absolute;
inset: 0;
background-image: url('//www.zionpark.org/cdn/shop/t/35/assets/ZFP%20Topography%20Pattern.png?v=101172587969262511901773343610');
background-size: 480px;
opacity: .06;
pointer-events: none;
}
.zfp-cd-zc__inner {
position: relative;
z-index: 1;
display: flex;
align-items: center;
gap: .75rem;
padding: .85rem 1rem;
}
.zfp-cd-zc__icon {
font-size: 18px;
color: var(--zfp-cd-gold);
flex-shrink: 0;
}
.zfp-cd-zc__body {
flex: 1;
min-width: 0;
}
.zfp-cd-zc__body strong {
display: block;
font-family: 'Barlow Condensed', sans-serif;
font-weight: 700;
font-size: 12px;
letter-spacing: .05em;
text-transform: uppercase;
color: #F4EFE6;
margin-bottom: 2px;
}
.zfp-cd-zc__body span {
font-family: 'Barlow', sans-serif;
font-size: 11px;
color: rgba(244,239,230,.65);
line-height: 1.4;
}
.zfp-cd-zc__btn {
flex-shrink: 0;
background: var(--zfp-cd-rust);
color: white;
border: none;
border-radius: 3px;
padding: 6px 14px;
font-family: 'Barlow Condensed', sans-serif;
font-weight: 700;
font-size: 12px;
letter-spacing: .08em;
text-transform: uppercase;
cursor: pointer;
white-space: nowrap;
transition: background .12s;
}
.zfp-cd-zc__btn:hover { background: #a03d18; }
.zfp-cd-zc__btn:disabled { opacity: .55; cursor: not-allowed; }
.zfp-cd-zc--active { background: #a03d18; }
.zfp-cd-zc--active .zfp-cd-zc__icon { color: #F4EFE6; }
/* ── Recommendations ── */
.zfp-cd-recs {
padding: .75rem 1.25rem;
border-top: 1px solid var(--zfp-cd-border);
}
.zfp-cd-recs__label {
font-family: 'Barlow Condensed', sans-serif;
font-weight: 600;
font-size: 11px;
letter-spacing: .1em;
text-transform: uppercase;
color: var(--zfp-cd-mid);
margin: 0 0 .6rem;
}
.zfp-cd-recs__list {
display: flex;
gap: .6rem;
overflow-x: auto;
-webkit-overflow-scrolling: touch;
scrollbar-width: none;
padding-bottom: 2px;
}
.zfp-cd-recs__list::-webkit-scrollbar { display: none; }
.zfp-cd-rec {
flex-shrink: 0;
width: 100px;
text-decoration: none;
}
.zfp-cd-rec__img {
width: 100px;
height: 100px;
object-fit: cover;
border-radius: 5px;
background: var(--zfp-cd-surface);
display: block;
margin-bottom: .35rem;
}
.zfp-cd-rec__title {
font-family: 'Barlow', sans-serif;
font-size: 11px;
color: var(--zfp-cd-charcoal);
line-height: 1.3;
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
overflow: hidden;
}
.zfp-cd-rec__price {
font-family: 'Barlow Condensed', sans-serif;
font-size: 11px;
font-weight: 600;
color: var(--zfp-cd-rust);
margin-top: 2px;
}
/* ── Footer ── */
.zfp-cd-footer {
flex-shrink: 0;
border-top: 1px solid var(--zfp-cd-border);
background: var(--zfp-cd-bg);
padding: 0 0 .5rem;
}
.zfp-cd-totals {
padding: .85rem 1.25rem .65rem;
}
.zfp-cd-totals__row {
display: flex;
justify-content: space-between;
align-items: baseline;
margin-bottom: .25rem;
}
.zfp-cd-totals__label {
font-family: 'Barlow Condensed', sans-serif;
font-weight: 600;
font-size: 12px;
letter-spacing: .08em;
text-transform: uppercase;
color: var(--zfp-cd-mid);
}
.zfp-cd-totals__value {
font-family: 'Oswald', sans-serif;
font-weight: 700;
font-size: 22px;
color: var(--zfp-cd-charcoal);
}
.zfp-cd-totals__note {
font-family: 'Barlow', sans-serif;
font-size: 10px;
color: var(--zfp-cd-mid);
margin: 0;
}
.zfp-cd-checkout {
display: flex;
align-items: center;
justify-content: center;
gap: .5rem;
background: var(--zfp-cd-charcoal);
color: white;
font-family: 'Barlow Condensed', sans-serif;
font-weight: 700;
font-size: 15px;
letter-spacing: .12em;
text-transform: uppercase;
text-decoration: none;
padding: .9rem 1rem;
margin: 0 1.25rem .5rem;
border-radius: 4px;
transition: background .15s;
}
.zfp-cd-checkout:hover { background: var(--zfp-cd-rust); color: white; text-decoration: none; }
.zfp-cd-continue {
display: block;
text-align: center;
font-family: 'Barlow', sans-serif;
font-size: 12px;
color: var(--zfp-cd-mid);
text-decoration: none;
padding: .25rem 1.25rem .5rem;
transition: color .12s;
}
.zfp-cd-continue:hover { color: var(--zfp-cd-rust); }
/* ── Loading state ── */
.zfp-cd-item.is-loading { opacity: .5; pointer-events: none; }
/* ── Mobile ── */
@media (max-width: 480px) {
:root { --zfp-cd-width: 100vw; }
.zfp-cart-drawer { border-radius: 0; }
}
</style>
<script>
/* Display name map from Liquid — product_id -> custom display name */
window.zfpDisplayNames = {};
</script>
<script>
(function () {
'use strict';
/* ── Config ── */
var ZC_PRODUCT_ID = '10486305554743';
var ZC_VARIANT_ID = 51849238577463;
var SHIP_THRESHOLD = 10000; /* cents */
var SHOP_CURRENCY = 'USD';
/* ── Elements ── */
var drawer = document.getElementById('zfp-cart-drawer');
var overlay = document.getElementById('zfp-drawer-overlay');
var closeBtn = document.getElementById('zfp-cd-close');
var itemsEl = document.getElementById('zfp-cd-items');
var emptyEl = document.getElementById('zfp-cd-empty');
var footerEl = document.getElementById('zfp-cd-footer');
var countEl = document.getElementById('zfp-cd-count');
var totalEl = document.getElementById('zfp-cd-total');
var shipEl = document.getElementById('zfp-cd-ship');
var shipMsg = document.getElementById('zfp-cd-ship-msg');
var shipFill = document.getElementById('zfp-cd-ship-fill');
var zcEl = document.getElementById('zfp-cd-zc');
var zcBtn = document.getElementById('zfp-cd-zc-btn');
var zcTitle = document.getElementById('zfp-cd-zc-title');
var zcSub = document.getElementById('zfp-cd-zc-sub');
var recsEl = document.getElementById('zfp-cd-recs');
var recsList = document.getElementById('zfp-cd-recs-list');
/* ── State ── */
var currentCart = null;
var lastProductId = null;
var recsLoaded = false;
/* ── Format money ── */
function money(cents) {
return '$' + (cents / 100).toFixed(2).replace(/\d(?=(\d{3})+\.)/g, '$&,');
}
/* ── Open / Close ── */
window.zfpDrawerOpen = function () {
drawer.hidden = false;
setTimeout(function () {
drawer.classList.add('is-open');
overlay.classList.add('is-open');
document.body.style.overflow = 'hidden';
}, 10);
/* Load recs on open if not already loaded */
if (!recsLoaded) loadRecs(lastProductId || null);
};
function closeDrawer() {
drawer.classList.remove('is-open');
overlay.classList.remove('is-open');
document.body.style.overflow = '';
setTimeout(function () { drawer.hidden = true; }, 350);
}
closeBtn.addEventListener('click', closeDrawer);
overlay.addEventListener('click', closeDrawer);
document.addEventListener('keydown', function (e) {
if (e.key === 'Escape') closeDrawer();
});
/* ── Render cart ── */
var lastCartToken = null;
function renderCart(cart) {
/* Only re-render if cart actually changed */
var token = cart.token + ':' + cart.item_count + ':' + cart.total_price;
if (token === lastCartToken) return;
lastCartToken = token;
currentCart = cart;
var count = cart.item_count || 0;
var total = cart.total_price || 0;
/* Count badge */
countEl.textContent = count;
/* Total */
totalEl.textContent = money(total);
/* Update all header badges */
document.querySelectorAll('[id^="zfp-cart-count"], .cart-count-bubble span:first-child, #cart-icon-bubble .visually-hidden ~ span').forEach(function (el) {
el.textContent = count > 99 ? '99+' : count;
});
/* Shipping bar */
if (count > 0) {
shipEl.hidden = false;
var pct = Math.min(100, Math.round(total / SHIP_THRESHOLD * 100));
shipFill.style.width = pct + '%';
if (total >= SHIP_THRESHOLD) {
shipMsg.innerHTML = '<span class="zfp-cd-ship__qualified">✓ Your order qualifies for free shipping!</span>';
} else {
var rem = SHIP_THRESHOLD - total;
shipMsg.innerHTML = 'Add <strong>' + money(rem) + '</strong> more for free shipping';
}
} else {
shipEl.hidden = true;
}
/* Items */
if (count === 0) {
emptyEl.hidden = false;
itemsEl.innerHTML = '';
footerEl.hidden = true;
zcEl.hidden = true;
recsEl.hidden = true;
recsLoaded = false;
return;
}
emptyEl.hidden = true;
footerEl.hidden = false;
/* Check if ZC in cart */
var hasZC = cart.items.some(function (i) { return String(i.product_id) === ZC_PRODUCT_ID; });
/* Render items */
var html = '';
cart.items.forEach(function (item, idx) {
var imgHtml = item.image
? '<img class="zfp-cd-item__img" src="' + item.image.replace('.jpg', '_150x150.jpg').replace('.png', '_150x150.png') + '" alt="' + (item.title || '').replace(/"/g, '"') + '" loading="lazy">'
: '<div class="zfp-cd-item__img-placeholder"></div>';
var priceHtml = '';
if (item.original_line_price !== item.final_line_price) {
priceHtml = '<span class="zfp-cd-item__price--original">' + money(item.original_line_price) + '</span>'
+ '<span class="zfp-cd-item__price zfp-cd-item__price--sale">' + money(item.final_line_price) + '</span>';
} else {
priceHtml = '<span class="zfp-cd-item__price">' + money(item.final_line_price) + '</span>';
}
var variantHtml = (item.variant_title && item.variant_title !== 'Default Title')
? '<p class="zfp-cd-item__variant">' + item.variant_title + '</p>' : '';
html += '<div class="zfp-cd-item" data-line="' + (idx + 1) + '" data-key="' + item.key + '">'
+ '<a href="' + item.url + '">' + imgHtml + '</a>'
+ '<div class="zfp-cd-item__info">'
+ '<a href="' + item.url + '" class="zfp-cd-item__title">' + (window.zfpDisplayNames && window.zfpDisplayNames[item.product_id] || item.product_title) + '</a>'
+ variantHtml
+ '<div class="zfp-cd-item__price-row">'
+ priceHtml
+ '<div class="zfp-cd-item__qty">'
+ '<button class="zfp-cd-item__qty-btn" data-action="minus" data-key="' + item.key + '" aria-label="Decrease quantity">−</button>'
+ '<span class="zfp-cd-item__qty-num">' + item.quantity + '</span>'
+ '<button class="zfp-cd-item__qty-btn" data-action="plus" data-key="' + item.key + '" aria-label="Increase quantity">+</button>'
+ '</div>'
+ '<button class="zfp-cd-item__remove" data-key="' + item.key + '" aria-label="Remove ' + item.product_title + '">'
+ '<svg width="14" height="14" viewBox="0 0 14 14" fill="none"><path d="M1 1l12 12M13 1L1 13" stroke="currentColor" stroke-width="1.5" stroke-linecap="round"/></svg>'
+ '</button>'
+ '</div>'
+ '</div>'
+ '</div>';
});
itemsEl.innerHTML = html;
/* Zion Circle upsell */
zcEl.hidden = false;
if (hasZC) {
zcEl.classList.add('zfp-cd-zc--active');
zcTitle.textContent = 'Zion Circle savings active';
zcSub.textContent = '15% off applied to your eligible items';
zcBtn.style.display = 'none';
} else {
zcEl.classList.remove('zfp-cd-zc--active');
zcTitle.textContent = 'Join Zion Circle — Support Zion & Save';
zcSub.textContent = 'Save 15% on eligible purchases. Starting at $50/yr.';
zcBtn.style.display = '';
zcBtn.disabled = false;
zcBtn.textContent = 'Join';
}
/* Recommendations — load once per product session */
if (lastProductId && !recsLoaded) {
loadRecs(lastProductId);
}
}
/* ── Fetch cart ── */
/* ── Fetch cart — private + public alias ── */
var fetchCartInFlight = false;
function fetchCartPrivate() {
if (fetchCartInFlight) return Promise.resolve();
fetchCartInFlight = true;
return fetch('/cart.js')
.then(function (r) { return r.json(); })
.then(function (cart) {
fetchCartInFlight = false;
renderCart(cart);
return cart;
})
.catch(function(e) {
fetchCartInFlight = false;
throw e;
});
}
/* Public alias for external callers */
window.fetchCart = fetchCartPrivate;
window.fetchCartPrivate = fetchCartPrivate;
/* ── Update line item ── */
function updateLine(key, quantity) {
var itemEl = itemsEl.querySelector('[data-key="' + key + '"]');
if (itemEl) itemEl.classList.add('is-loading');
fetch('/cart/change.js', {
method: 'POST',
headers: { 'Content-Type': 'application/json' },
body: JSON.stringify({ id: key, quantity: quantity })
})
.then(function (r) { return r.json(); })
.then(function () { return fetchCartPrivate(); })
.catch(function () {
if (itemEl) itemEl.classList.remove('is-loading');
});
}
/* ── Event delegation for qty + remove ── */
itemsEl.addEventListener('click', function (e) {
var qtyBtn = e.target.closest('.zfp-cd-item__qty-btn');
var removeBtn = e.target.closest('.zfp-cd-item__remove');
if (qtyBtn) {
var key = qtyBtn.dataset.key;
var action = qtyBtn.dataset.action;
var item = currentCart && currentCart.items.find(function(i) { return i.key === key; });
if (!item) return;
var newQty = action === 'plus' ? item.quantity + 1 : Math.max(0, item.quantity - 1);
updateLine(key, newQty);
}
if (removeBtn) {
var key = removeBtn.dataset.key;
updateLine(key, 0);
}
});
/* ── Zion Circle button ── */
zcBtn.addEventListener('click', function () {
zcBtn.disabled = true;
zcBtn.textContent = 'Adding…';
fetch('/cart/add.js', {
method: 'POST',
headers: { 'Content-Type': 'application/json' },
body: JSON.stringify({ id: ZC_VARIANT_ID, quantity: 1, selling_plan: 12149522743 })
})
.then(function (r) { return r.json(); })
.then(function () { fetchCartPrivate(); })
.catch(function () {
zcBtn.disabled = false;
zcBtn.textContent = 'Join';
});
});
/* ── Recommendations ── */
function loadRecs(productId) {
if (recsLoaded) return;
if (!productId) {
/* Fall back to first item in cart */
fetch('/cart.js')
.then(function(r){ return r.json(); })
.then(function(cart){
if (cart.items && cart.items.length) loadRecs(cart.items[0].product_id);
});
return;
}
fetch('/recommendations/products.json?product_id=' + productId + '&limit=6&intent=related')
.then(function (r) { return r.json(); })
.then(function (data) {
var products = data.products || [];
if (!products.length) return;
recsLoaded = true;
recsEl.hidden = false;
recsList.innerHTML = products.slice(0, 5).map(function (p) {
var imgSrc = p.featured_image || (p.images && p.images[0]) || '';
if (imgSrc && imgSrc.indexOf('//') === 0) imgSrc = 'https:' + imgSrc;
if (imgSrc) imgSrc = imgSrc.split('?')[0] + '?width=150&height=150&crop=center';
return '<a href="' + p.url + '" class="zfp-cd-rec">'
+ (imgSrc ? '<img class="zfp-cd-rec__img" src="' + imgSrc + '" alt="' + p.title.replace(/"/g, '') + '" loading="lazy">' : '<div class="zfp-cd-rec__img"></div>')
+ '<div class="zfp-cd-rec__title">' + p.title + '</div>'
+ '<div class="zfp-cd-rec__price">' + money(p.price_min || p.price) + '</div>'
+ '</a>';
}).join('');
}).catch(function () {});
}
/* ── Add to cart — global handler ── */
var atcInFlight = false;
window.zfpDrawerAddToCart = function (variantId, quantity, productId) {
if (atcInFlight) return Promise.resolve();
atcInFlight = true;
lastProductId = productId || lastProductId;
recsLoaded = false;
return fetch('/cart/add.js', {
method: 'POST',
headers: { 'Content-Type': 'application/json' },
body: JSON.stringify({ id: parseInt(variantId, 10), quantity: quantity || 1 })
})
.then(function (r) { return r.json(); })
.then(function (data) {
atcInFlight = false;
return data;
})
.catch(function(e) {
atcInFlight = false;
throw e;
});
};
/* ── Intercept Nimbus ATC buttons on non-shop-category pages ── */
document.addEventListener('click', function (e) {
/* Only intercept if NOT on cart page and NOT already handled */
if (window.location.pathname === '/cart') return;
var atcBtn = e.target.closest('[name="add"], .btn-add-to-cart, [data-add-to-cart]');
if (!atcBtn) return;
/* Don't intercept if it's inside our section (handled by shop-category JS) */
if (atcBtn.closest('#shopify-section-template--') || atcBtn.closest('.zfp-pcard')) return;
var form = atcBtn.closest('form[action="/cart/add"]');
if (!form) return;
e.preventDefault();
var idInput = form.querySelector('[name="id"]');
if (!idInput) return;
var productEl = form.closest('[data-product-id]') || document;
var productId = productEl.dataset && productEl.dataset.productId;
atcBtn.setAttribute('disabled', '');
var orig = atcBtn.textContent;
atcBtn.textContent = 'Adding…';
window.zfpDrawerAddToCart(idInput.value, 1, productId)
.then(function () {
atcBtn.textContent = 'Added!';
setTimeout(function () {
atcBtn.textContent = orig;
atcBtn.removeAttribute('disabled');
}, 2000);
})
.catch(function () {
atcBtn.textContent = orig;
atcBtn.removeAttribute('disabled');
});
}, true);
/* ── Initial load ── */
fetchCartPrivate();
})();
</script>
<div id="zfp-zc-modal-overlay" class="zfp-zcm-overlay" aria-hidden="true"></div>
<div id="zfp-zc-modal" class="zfp-zcm" role="dialog" aria-modal="true" aria-label="Join Zion Circle" hidden>
<button class="zfp-zcm__close" id="zfp-zcm-close" aria-label="Close">
<svg width="16" height="16" viewBox="0 0 16 16" fill="none">
<path d="M1 1l14 14M15 1L1 15" stroke="currentColor" stroke-width="2" stroke-linecap="round"/>
</svg>
</button>
<div class="zfp-zcm__topo"></div>
<div class="zfp-zcm__inner"><div class="zfp-zcm__head">
<span class="zfp-zcm__icon">◈</span>
<div>
<h2 class="zfp-zcm__title">Join Zion Circle</h2>
<p class="zfp-zcm__savings-line" id="zfp-zcm-savings" style="display:none;">
Save <strong id="zfp-zcm-amount"></strong> on your current order
</p>
</div>
</div><ul class="zfp-zcm__perks">
<li>
<svg width="14" height="14" viewBox="0 0 24 24" fill="currentColor"><path d="M9 16.17L4.83 12l-1.42 1.41L9 19 21 7l-1.41-1.41L9 16.17z"/></svg>
<span>15% off eligible purchases — in-store & online</span>
</li>
<li>
<svg width="14" height="14" viewBox="0 0 24 24" fill="currentColor"><path d="M9 16.17L4.83 12l-1.42 1.41L9 19 21 7l-1.41-1.41L9 16.17z"/></svg>
<span>Valid at partner national park stores nationwide</span>
</li>
<li>
<svg width="14" height="14" viewBox="0 0 24 24" fill="currentColor"><path d="M9 16.17L4.83 12l-1.42 1.41L9 19 21 7l-1.41-1.41L9 16.17z"/></svg>
<span>Tax-deductible donation to Zion conservation</span>
</li>
</ul><div class="zfp-zcm__tiers" id="zfp-zcm-tiers"><button class="zfp-zcm__tier is-selected"
data-variant-id="51849238577463"
data-price="5000"
data-title="$50.00"
data-selling-plan="12149522743"
onclick="zcmSelectTier(this)">
<span class="zfp-zcm__tier-name">$50.00</span>
<span class="zfp-zcm__tier-price">50<small>/yr</small></span>
</button><button class="zfp-zcm__tier"
data-variant-id="51849238610231"
data-price="10000"
data-title="$100.00"
data-selling-plan="12149522743"
onclick="zcmSelectTier(this)">
<span class="zfp-zcm__tier-name">$100.00</span>
<span class="zfp-zcm__tier-price">100<small>/yr</small></span>
</button><button class="zfp-zcm__tier"
data-variant-id="51849238642999"
data-price="50000"
data-title="$500.00"
data-selling-plan="12149522743"
onclick="zcmSelectTier(this)">
<span class="zfp-zcm__tier-name">$500.00</span>
<span class="zfp-zcm__tier-price">500<small>/yr</small></span>
</button><button class="zfp-zcm__tier"
data-variant-id="51849238675767"
data-price="100000"
data-title="$1000.00"
data-selling-plan="12149522743"
onclick="zcmSelectTier(this)">
<span class="zfp-zcm__tier-name">$1000.00</span>
<span class="zfp-zcm__tier-price">1,000<small>/yr</small></span>
</button></div><button class="zfp-zcm__submit" id="zfp-zcm-submit" onclick="zcmJoin()">
Join Zion Circle
</button>
<p class="zfp-zcm__note">
Annual Donation · Tax-deductible · Cancel anytime
</p>
<a href="/products/zion-circle" class="zfp-zcm__learn">
Learn more about Zion Circle →
</a>
</div>
</div>
<style>
/* ════════════════════════════════════════
ZION CIRCLE MODAL
════════════════════════════════════════ */
.zfp-zcm-overlay {
position: fixed;
inset: 0;
background: rgba(0,0,0,.55);
z-index: 99998;
opacity: 0;
pointer-events: none;
transition: opacity .3s ease;
}
.zfp-zcm-overlay.is-open {
opacity: 1;
pointer-events: auto;
}
.zfp-zcm {
position: fixed;
top: 50%;
left: 50%;
transform: translate(-50%, -48%) scale(.96);
width: min(480px, 94vw);
background: #C04A1E;
border-radius: 14px;
border: 1px solid rgba(255,255,255,.08);
z-index: 99999;
opacity: 0;
transition: opacity .3s ease, transform .3s cubic-bezier(.16,1,.3,1);
overflow: hidden;
}
.zfp-zcm:not([hidden]) { display: block; }
.zfp-zcm.is-open {
opacity: 1;
transform: translate(-50%, -50%) scale(1);
}
.zfp-zcm__topo {
position: absolute;
inset: 0;
background-image: url('//www.zionpark.org/cdn/shop/t/35/assets/ZFP%20Topography%20Pattern.png?v=101172587969262511901773343610');
background-size: 480px;
opacity: .04;
pointer-events: none;
}
.zfp-zcm__close {
position: absolute;
top: 1rem;
right: 1rem;
background: rgba(255,255,255,.08);
border: none;
border-radius: 50%;
width: 32px;
height: 32px;
display: flex;
align-items: center;
justify-content: center;
cursor: pointer;
color: rgba(244,239,230,.6);
transition: background .12s, color .12s;
z-index: 2;
}
.zfp-zcm__close:hover { background: rgba(255,255,255,.15); color: #F4EFE6; }
.zfp-zcm__inner {
position: relative;
z-index: 1;
padding: 2rem 1.75rem 1.75rem;
}
/* Head */
.zfp-zcm__head {
display: flex;
align-items: flex-start;
gap: .85rem;
margin-bottom: 1.25rem;
}
.zfp-zcm__icon {
font-size: 26px;
color: #C08C20;
line-height: 1;
flex-shrink: 0;
margin-top: 2px;
}
.zfp-zcm__title {
font-family: 'Oswald', sans-serif;
font-weight: 700;
font-size: 24px;
letter-spacing: .03em;
text-transform: uppercase;
color: #F4EFE6;
margin: 0 0 3px;
line-height: 1.1;
}
.zfp-zcm__savings-line {
font-family: 'Barlow', sans-serif;
font-size: 13px;
color: rgba(244,239,230,.65);
margin: 0;
}
.zfp-zcm__savings-line strong { color: #C08C20; }
/* Perks */
.zfp-zcm__perks {
list-style: none;
padding: 0;
margin: 0 0 1.5rem;
display: flex;
flex-direction: column;
gap: .5rem;
}
.zfp-zcm__perks li {
display: flex;
align-items: flex-start;
gap: .5rem;
font-family: 'Barlow', sans-serif;
font-size: 13px;
color: rgba(244,239,230,.75);
line-height: 1.4;
}
.zfp-zcm__perks li svg {
color: #C04A1E;
flex-shrink: 0;
margin-top: 1px;
}
/* Tiers */
.zfp-zcm__tiers {
display: flex;
gap: .65rem;
margin-bottom: 1.25rem;
flex-wrap: wrap;
}
.zfp-zcm__tier {
flex: 1;
min-width: 100px;
background: rgba(255,255,255,.05);
border: 2px solid rgba(244,239,230,.2);
border-radius: 8px;
padding: .75rem .65rem;
cursor: pointer;
text-align: center;
transition: border-color .15s, background .15s;
display: flex;
flex-direction: column;
align-items: center;
gap: .2rem;
}
.zfp-zcm__tier:hover { border-color: rgba(192,140,32,.5); }
.zfp-zcm__tier.is-selected {
border-color: #F4EFE6;
background: rgba(244,239,230,.15);
}
.zfp-zcm__tier-name {
font-family: 'Barlow Condensed', sans-serif;
font-weight: 600;
font-size: 11px;
letter-spacing: .1em;
text-transform: uppercase;
color: rgba(244,239,230,.8);
}
.zfp-zcm__tier-price {
font-family: 'Oswald', sans-serif;
font-weight: 700;
font-size: 22px;
color: #F4EFE6;
line-height: 1;
}
.zfp-zcm__tier-price small {
font-size: 11px;
font-weight: 400;
color: rgba(244,239,230,.45);
}
/* Submit */
.zfp-zcm__submit {
width: 100%;
background: #F4EFE6;
color: #C04A1E;
border: none;
border-radius: 6px;
padding: .9rem;
font-family: 'Barlow Condensed', sans-serif;
font-weight: 700;
font-size: 16px;
letter-spacing: .1em;
text-transform: uppercase;
cursor: pointer;
transition: background .15s;
margin-bottom: .75rem;
}
.zfp-zcm__submit:hover { background: #e8e0d5; }
.zfp-zcm__submit:disabled { opacity: .55; cursor: not-allowed; }
.zfp-zcm__note {
font-family: 'Barlow', sans-serif;
font-size: 11px;
color: rgba(244,239,230,.65);
text-align: center;
margin: 0 0 .75rem;
}
.zfp-zcm__learn {
display: block;
text-align: center;
font-family: 'Barlow', sans-serif;
font-size: 12px;
color: rgba(244,239,230,.6);
text-decoration: underline;
transition: color .12s;
}
.zfp-zcm__learn:hover { color: #F4EFE6; }
</style>
<script>
(function() {
var modal = document.getElementById('zfp-zc-modal');
var overlay = document.getElementById('zfp-zc-modal-overlay');
var closeBtn = document.getElementById('zfp-zcm-close');
var selectedVariantId = '51849238577463';
var selectedSellingPlan = '12149522743';
/* ── Open ── */
window.zcModalOpen = function(savingsAmount) {
modal.hidden = false;
setTimeout(function() {
modal.classList.add('is-open');
overlay.classList.add('is-open');
document.body.style.overflow = 'hidden';
}, 10);
/* Show savings if provided */
var savingsLine = document.getElementById('zfp-zcm-savings');
var savingsAmt = document.getElementById('zfp-zcm-amount');
if (savingsAmount && savingsAmount > 0) {
savingsAmt.textContent = '$' + parseFloat(savingsAmount).toFixed(2);
savingsLine.style.display = '';
} else {
savingsLine.style.display = 'none';
}
/* Reset submit button */
var btn = document.getElementById('zfp-zcm-submit');
if (btn) { btn.disabled = false; btn.textContent = 'Join Zion Circle'; }
};
/* ── Close ── */
function closeModal() {
modal.classList.remove('is-open');
overlay.classList.remove('is-open');
document.body.style.overflow = '';
setTimeout(function() { modal.hidden = true; }, 300);
}
closeBtn.addEventListener('click', closeModal);
overlay.addEventListener('click', closeModal);
document.addEventListener('keydown', function(e) {
if (e.key === 'Escape' && modal.classList.contains('is-open')) closeModal();
});
/* ── Tier selection ── */
window.zcmSelectTier = function(el) {
document.querySelectorAll('.zfp-zcm__tier').forEach(function(t) { t.classList.remove('is-selected'); });
el.classList.add('is-selected');
selectedVariantId = el.dataset.variantId;
selectedSellingPlan = el.dataset.sellingPlan || '12149522743';
};
/* ── Join ── */
var zcmJoinInFlight = false;
window.zcmJoin = function() {
if (zcmJoinInFlight) return;
zcmJoinInFlight = true;
var btn = document.getElementById('zfp-zcm-submit');
btn.disabled = true;
btn.textContent = 'Adding…';
var body = { id: parseInt(selectedVariantId, 10), quantity: 1 };
body.selling_plan = parseInt(selectedSellingPlan || '12149522743', 10);
fetch('/cart/add.js', {
method: 'POST',
headers: { 'Content-Type': 'application/json' },
body: JSON.stringify(body)
})
.then(function(r) { return r.json(); })
.then(function(data) {
zcmJoinInFlight = false;
if (data.status) {
btn.textContent = data.description || 'Error — try again';
btn.disabled = false;
} else {
btn.disabled = false;
btn.textContent = 'Joined!';
closeModal();
/* Fetch updated cart and open drawer */
if (typeof window.zfpDrawerAddToCart === 'function') {
/* Item already added — just fetch cart and open drawer */
setTimeout(function() {
if (typeof window.fetchCart === 'function') {
window.fetchCart().then(function() { window.zfpDrawerOpen(); });
} else if (typeof window.zfpDrawerOpen === 'function') {
window.zfpDrawerOpen();
}
}, 350);
} else if (typeof window.zfpDrawerOpen === 'function') {
setTimeout(window.zfpDrawerOpen, 350);
}
}
})
.catch(function() {
zcmJoinInFlight = false;
btn.textContent = 'Error — try again';
btn.disabled = false;
});
};
/* ── Override zfpAddZionCircle to open modal instead ── */
window.zfpAddZionCircle = function(btn) {
var savings = 0;
/* Try to get cart savings from page context */
if (btn && btn.dataset && btn.dataset.savings) {
savings = parseFloat(btn.dataset.savings);
}
window.zcModalOpen(savings);
};
})();
</script>
Nature & Wildlife
Night Sky
Ornaments
Passport Books
Patches
Pets
Pine Valley
