Hi @zachdyson,
Was able to find your staging site and check the page source.
So, you can remove all the code from Project Settings > Head Code & Footer Code - the JS and CSS files return 404s because they were most likely hosted with Squarespace - the JS file is the same thing you’re pasting in anyway.
Also no need to add jQuery, it’s already added by Webflow by default.
Replace your code in Page Settings > Custom Code > Before </body> tag with the following:
<script>
$(document).ready(function ($) {
$('.zapiet-delivery-validator__close').click(function () {
$('#zapiet-delivery-validator__topbar').remove();
$('header.Header.Header--top, .Mobile-bar.Mobile-bar--top').addClass(
't-close'
);
});
var zipcode = [
{ zipcode: 3000, zipname: 'Melbourne' },
{ zipcode: 3001, zipname: 'Melbourne' },
{ zipcode: 3002, zipname: 'East Melbourne' },
{ zipcode: 3003, zipname: 'West Melbourne' },
{ zipcode: 3006, zipname: 'Southbank' },
{ zipcode: 3008, zipname: 'Docklands' },
{ zipcode: 3010, zipname: 'University Of Melbourne' },
{ zipcode: 3031, zipname: 'Flemington, Kensington' },
{ zipcode: 3032, zipname: 'Ascot Vale,Travancore' },
{ zipcode: 3033, zipname: 'East Keilor' },
{ zipcode: 3039, zipname: 'Moonee Ponds' },
{ zipcode: 3040, zipname: 'Aberfeldie, Essendon, Essendon West' },
{
zipcode: 3041,
zipname: 'Essendon North, Strathmore, Strathmore Heights',
},
{ zipcode: 3042, zipname: 'Airport West, Keilor Park, Niddrie' },
{ zipcode: 3043, zipname: 'Gladstone Park, Gowanbrae, Tullamarine' },
{ zipcode: 3044, zipname: 'Pascoe Vale, Pascoe Vale South' },
{ zipcode: 3045, zipname: 'Melbourne Airport' },
{ zipcode: 3046, zipname: 'Glenroy' },
{ zipcode: 3047, zipname: 'Broadmeadows, Dallas, Jacana' },
{ zipcode: 3048, zipname: 'Coolaroo, Meadow Heights' },
{ zipcode: 3049, zipname: 'Attwood, Westmeadows' },
{ zipcode: 3050, zipname: 'Royal Melbourne Hospital' },
{ zipcode: 3051, zipname: 'Hotham Hill, North Melbourne' },
{ zipcode: 3052, zipname: 'Melbourne University, Parkville' },
{ zipcode: 3053, zipname: 'Carlton, Carlton South' },
{ zipcode: 3054, zipname: 'Carlton North, Princes Hill' },
{ zipcode: 3055, zipname: 'Brunswick West' },
{ zipcode: 3056, zipname: 'Brunswick' },
{ zipcode: 3057, zipname: 'Brunswick East' },
{ zipcode: 3058, zipname: 'Coburg, Coburg North, Merlynston, Moreland' },
{ zipcode: 3060, zipname: 'Fawkner' },
{ zipcode: 3061, zipname: 'Campbellfield' },
{ zipcode: 3062, zipname: 'Somerton' },
{ zipcode: 3064, zipname: 'Roxburgh Park' },
{ zipcode: 3065, zipname: 'Fitzroy' },
{ zipcode: 3066, zipname: 'Collingwood' },
{ zipcode: 3067, zipname: 'Abbotsford' },
{ zipcode: 3068, zipname: 'Clifton Hill, Fitzroy North' },
{ zipcode: 3070, zipname: 'Northcote' },
{ zipcode: 3071, zipname: 'Thornbury' },
{
zipcode: 3072,
zipname: 'Northland Centre, Preston, Preston South, Regent West',
},
{ zipcode: 3073, zipname: 'Reservoir, Keon Park' },
{ zipcode: 3074, zipname: 'Thomastown' },
{ zipcode: 3075, zipname: 'Lalor' },
{ zipcode: 3076, zipname: 'Epping' },
{ zipcode: 3078, zipname: 'Alphington, Fairfield' },
{ zipcode: 3079, zipname: 'Ivanhoe, Ivanhoe East' },
{
zipcode: 3081,
zipname: 'Heidelberg Heights, Heidelberg Rgh, Heidelberg West',
},
{ zipcode: 3082, zipname: 'Mill Park' },
{ zipcode: 3083, zipname: 'Bundoora, Kingsbury' },
{ zipcode: 3084, zipname: 'Eaglemont, Heidelberg, Rosanna, Viewbank' },
{ zipcode: 3085, zipname: 'Macleod, Yallambie' },
{ zipcode: 3087, zipname: 'Watsonia' },
{ zipcode: 3088, zipname: 'Greensborough' },
{ zipcode: 3093, zipname: 'Lower Plenty' },
{ zipcode: 3101, zipname: 'Kew' },
{ zipcode: 3102, zipname: 'Kew East' },
{ zipcode: 3105, zipname: 'Bulleen' },
{ zipcode: 3106, zipname: 'Templestowe' },
{ zipcode: 3107, zipname: 'Templestowe Lower' },
{ zipcode: 3108, zipname: 'Doncaster' },
{
zipcode: 3109,
zipname: 'Doncaster East, Doncaster Heights, Tunstall Square Po',
},
{ zipcode: 3111, zipname: 'Donvale' },
{ zipcode: 3121, zipname: 'Burnley, Cremorne, Richmond' },
{ zipcode: 3122, zipname: 'Hawthorn' },
{ zipcode: 3123, zipname: 'Hawthorn East' },
{ zipcode: 3124, zipname: 'Camberwell' },
{ zipcode: 3128, zipname: 'Box Hill' },
{ zipcode: 3129, zipname: 'Box Hill North, Kerrimuir, Mont Albert North' },
{ zipcode: 3130, zipname: 'Blackburn, Blackburn North' },
{ zipcode: 3205, zipname: 'South Melbourne, South Melbourne Dc' },
{ zipcode: 3206, zipname: 'Albert Park, Middle Park' },
{ zipcode: 3207, zipname: 'Garden City, Port Melbourne' },
{ zipcode: 8001, zipname: 'Melbourne' },
{ zipcode: 8002, zipname: 'East Melbourne' },
{ zipcode: 8003, zipname: 'Collins Street East' },
{ zipcode: 8004, zipname: 'St Kilda Road' },
{ zipcode: 8005, zipname: 'World Trade Centre' },
{ zipcode: 8006, zipname: 'Melbourne' },
{ zipcode: 8007, zipname: 'Collins Street West' },
{ zipcode: 8008, zipname: 'St Kilda Road Central' },
{ zipcode: 8009, zipname: 'Flinders Lane' },
{ zipcode: 8010, zipname: 'Law Courts' },
{
zipcode: 3020,
zipname: 'Albion, Sunshine, Sunshine North, Sunshine West',
},
{ zipcode: 3021, zipname: 'Albanvale, Kealba, Kings Park, St Albans' },
{ zipcode: 3026, zipname: 'Laverton North' },
{ zipcode: 3029, zipname: 'Hoppers Crossing, Tarneit, Truganina' },
{ zipcode: 3004, zipname: 'Melbourne' },
{ zipcode: 3005, zipname: 'World Trade Centre' },
{ zipcode: 3011, zipname: 'Footscray, Seddon' },
{ zipcode: 3012, zipname: 'Brooklyn, Tottenham, West Footscray' },
{ zipcode: 3013, zipname: 'Yarraville' },
{ zipcode: 3019, zipname: 'Braybrook' },
{
zipcode: 3020,
zipname: 'Albion, Sunshine, Sunshine North, Sunshine West',
},
{ zipcode: 3021, zipname: 'Albanvale, Kealba, Kings Park, St Albans' },
{
zipcode: 3023,
zipname: 'Burnside, Cairnlea, Caroline Springs, Deer Park, Ravenhall',
},
{ zipcode: 3029, zipname: 'Truganina' },
{ zipcode: 3034, zipname: 'Avondale Heights' },
{ zipcode: 3036, zipname: 'Keilor, Keilor North' },
{ zipcode: 3059, zipname: 'Greenvale' },
{ zipcode: 3086, zipname: 'La Trobe University' },
{ zipcode: 3126, zipname: 'Canterbury' },
{ zipcode: 3127, zipname: 'Mont Albert, Surrey Hills' },
];
var modal = $('#zapiet-delivery-validator__modal');
var result = $('.zapiet-delivery-validator__modal__container');
var yes = `<div class="zapiet-delivery-validator__modal__container__heading">
<h2 id="zapiet-delivery-validator__modal__container__heading">Good News</h2>
</div>
<div id="zapiet-delivery-validator__modal__container__content">
We deliver to your area.Get in touch.
</div>
<div id="zapiet-delivery-validator__modal__container__footer">
<a href="http://www.ddmilk.com.au/contact" id="zapiet-delivery-validator__modal__primary-action">Contact Us</a>
<a href="#" id="zapiet-delivery-validator__modal__primary-action" class="close-modal">Continue Browsing</a>
</div>`;
var no = `<div class="zapiet-delivery-validator__modal__container__heading">
<h2 id="zapiet-delivery-validator__modal__container__heading">Sorry</h2>
</div>
<div id="zapiet-delivery-validator__modal__container__content">
We do not deliver to your area at this stage
</div>
<div id="zapiet-delivery-validator__modal__container__footer">
<a href="#" id="zapiet-delivery-validator__modal__primary-action" class="close-modal">Continue Browsing</a>
</div>`;
$(document).on('click', '.close-modal', function () {
modal.css('display', 'none');
});
$('#zapiet-delivery-validator__postal_code').on('keypress', function (e) {
if (e.which == 13) {
$('.check-zipcode-btn').trigger('click');
}
});
$('.check-zipcode-btn').click(function (e) {
e.preventDefault();
document.activeElement.blur();
var code = $('#zapiet-delivery-validator__postal_code').val();
if (isNaN(code) == true) {
// is string
for (var i = 0; i < zipcode.length; i++) {
console.log(zipcode[i].zipname);
if (code === zipcode[i].zipname) {
modal.css('display', 'flex');
result.html(yes);
break;
} else {
modal.css('display', 'flex');
result.html(no);
}
}
} else {
// is nummeric
code = parseInt(code);
for (var i = 0; i < zipcode.length; i++) {
if (code == parseInt(zipcode[i].zipcode)) {
modal.css('display', 'flex');
result.html(yes);
break;
} else {
modal.css('display', 'flex');
result.html(no);
}
}
}
});
$(document).mouseup(function (e) {
var container = $('.zapiet-delivery-validator__modal__container');
// if the target of the click isn't the container nor a descendant of the container
if (!container.is(e.target) && container.has(e.target).length === 0) {
$('#zapiet-delivery-validator__modal').hide();
}
});
});
</script>
I grabbed the CSS code from the Squarespace site so you can add this to Page Settings > Custom Code > Head Code:
<style>
#zapiet-delivery-validator #zapiet-delivery-validator__topbar {
position: absolute;
top: 0;
left: 0;
right: 0;
display: flex;
background: rgba(0, 0, 0, 0.7);
align-items: center;
justify-content: center;
padding: 0.5em 0;
z-index: 99998;
}
#zapiet-delivery-validator
#zapiet-delivery-validator__topbar.zapiet-delivery-validator__sticky {
position: fixed;
}
#zapiet-delivery-validator
#zapiet-delivery-validator__topbar
#zapiet-delivery-validator__container {
display: flex;
align-items: center;
justify-content: center;
color: #fff;
width: 100%;
}
#zapiet-delivery-validator
#zapiet-delivery-validator__topbar
#zapiet-delivery-validator__container
#zapiet-delivery-validator__form {
width: 100%;
padding: 0 1em;
margin: 0;
}
#zapiet-delivery-validator
#zapiet-delivery-validator__topbar
#zapiet-delivery-validator__container
#zapiet-delivery-validator__form
#zapiet-delivery-validator__label {
display: block;
}
#zapiet-delivery-validator
#zapiet-delivery-validator__topbar
#zapiet-delivery-validator__container
#zapiet-delivery-validator__form
.zapiet-delivery-validator__fields {
display: flex;
}
#zapiet-delivery-validator
#zapiet-delivery-validator__topbar
#zapiet-delivery-validator__container
#zapiet-delivery-validator__form
.zapiet-delivery-validator__fields
#zapiet-delivery-validator__postal_code {
border-radius: 5px;
font-size: 1em;
flex-grow: 1;
margin: 0 0.5em 0 0;
border: 1px solid #fff;
text-indent: 0.5em;
background: #fff;
color: #333;
}
#zapiet-delivery-validator
#zapiet-delivery-validator__topbar
#zapiet-delivery-validator__container
#zapiet-delivery-validator__form
.zapiet-delivery-validator__fields
#zapiet-delivery-validator__postal_code::-webkit-input-placeholder {
font-size: 0.9em;
}
#zapiet-delivery-validator
#zapiet-delivery-validator__topbar
#zapiet-delivery-validator__container
#zapiet-delivery-validator__form
.zapiet-delivery-validator__fields
.zapiet-delivery-validator__submit {
color: #fff;
padding: 0.5em 1em;
background: #383838;
border-color: #383838;
border-radius: 5px;
}
#zapiet-delivery-validator
#zapiet-delivery-validator__topbar
#zapiet-delivery-validator__container
#zapiet-delivery-validator__form
.zapiet-delivery-validator__fields
.zapiet-delivery-validator__submit
#zapiet-delivery-validator__loading {
display: flex;
}
#zapiet-delivery-validator
#zapiet-delivery-validator__topbar
#zapiet-delivery-validator__close {
display: flex;
padding: 0.5em 0 0.5em 0.5em;
}
#zapiet-delivery-validator
#zapiet-delivery-validator__topbar
#zapiet-delivery-validator__close
svg {
fill: #fff;
}
#zapiet-delivery-validator #zapiet-delivery-validator__modal {
z-index: 99999;
background: rgba(0, 0, 0, 0.5);
display: flex;
justify-content: center;
flex-direction: column;
position: fixed;
top: 0;
bottom: 0;
left: 0;
right: 0;
}
#zapiet-delivery-validator
#zapiet-delivery-validator__modal
#zapiet-delivery-validator__modal__primary-action {
background: #383838;
border-color: #383838;
color: #fff;
padding: 0.5em 1.5em;
border-radius: 5px;
}
#zapiet-delivery-validator
#zapiet-delivery-validator__modal
.zapiet-delivery-validator__modal__container {
border-radius: 5px;
box-shadow: 0 1px 4px rgba(0, 0, 0, 0.5);
background: #fff;
margin: 0 auto;
display: flex;
padding: 1.5em;
flex-direction: column;
text-align: center;
}
#zapiet-delivery-validator
#zapiet-delivery-validator__modal
.zapiet-delivery-validator__modal__container
#zapiet-delivery-validator__modal__container__heading {
font-size: 1.3em;
}
#zapiet-delivery-validator
#zapiet-delivery-validator__modal
.zapiet-delivery-validator__modal__container
#zapiet-delivery-validator__modal__container__content {
font-size: 1em;
}
#zapiet-delivery-validator
#zapiet-delivery-validator__modal
.zapiet-delivery-validator__modal__container
#zapiet-delivery-validator__modal__container__footer {
margin-top: 1em;
display: flex;
justify-content: center;
}
@media (min-width: 900px) {
#zapiet-delivery-validator
#zapiet-delivery-validator__topbar
#zapiet-delivery-validator__container {
max-width: 600px;
}
#zapiet-delivery-validator
#zapiet-delivery-validator__topbar
#zapiet-delivery-validator__container
#zapiet-delivery-validator__form {
display: flex;
align-items: center;
}
#zapiet-delivery-validator
#zapiet-delivery-validator__topbar
#zapiet-delivery-validator__container
#zapiet-delivery-validator__form
#zapiet-delivery-validator__label {
display: initial;
margin-right: 0.5em;
}
#zapiet-delivery-validator
#zapiet-delivery-validator__topbar
#zapiet-delivery-validator__container
#zapiet-delivery-validator__form
.zapiet-delivery-validator__fields {
flex-grow: 1;
}
#zapiet-delivery-validator
#zapiet-delivery-validator__topbar
#zapiet-delivery-validator__close {
position: absolute;
right: 1em;
}
#zapiet-delivery-validator
#zapiet-delivery-validator__modal
.zapiet-delivery-validator__modal__container {
max-width: 800px;
min-width: 460px;
}
#zapiet-delivery-validator
#zapiet-delivery-validator__modal
.zapiet-delivery-validator__modal__container
#zapiet-delivery-validator__modal__container__heading {
font-size: 1.5em;
}
}
/* Hide Zip Finder in Edit Mode */
body.sqs-edit-mode div#zapiet-delivery-validator {
display: none;
}
/* center X icon */
a.zapiet-delivery-validator__close {
position: absolute;
right: 0;
top: 0;
bottom: 0;
padding-right: 20px;
display: flex;
justify-content: center;
align-items: center;
}
i.fa.fa-times {
font-size: 20px;
}
/* Icon position */
@media screen and (max-width: 900px) {
a.zapiet-delivery-validator__close {
display: block;
padding-top: 0.3em;
}
}
div#zapiet-delivery-validator {
font-size: 14px;
font-family: proxima-nova;
}
/* Bar color */
div#zapiet-delivery-validator__topbar {
background: #0076b2 !important;
}
/* button */
button.check-zipcode-btn.zapiet-delivery-validator__submit {
background: #004977 !important;
border-color: #004977 !important;
border-style: solid !important;
box-shadow: none !important;
line-height: 40px;
padding-top: 0 !important;
padding-bottom: 0 !important;
outline: none !important;
border-radius: 4px !important;
}
/* Input height */
.zapiet-delivery-validator__fields {
height: 40px !important;
border-radius: 4px !important;
}
/* Remove input border */
input#zapiet-delivery-validator__postal_code {
outline: none !important;
background-image: url(/universal/images-v6/icons/icon-searchqueries-20-dark.png) !important;
background-repeat: no-repeat !important;
background-position: 10px center !important;
padding-left: 30px !important;
}
/* Sorry - continue button */
a#zapiet-delivery-validator__modal__primary-action {
background: #0076b2 !important;
border: 2px solid #0076b2 !important;
padding-top: 0.2em !important;
padding-bottom: 0.2em !important;
}
/* Good news - continue button */
div#zapiet-delivery-validator__modal__container__footer > a:nth-child(2) {
margin-left: 1em;
color: #0076b2 !important;
background: #fff !important;
border: 2px solid #0076b2;
}
div#zapiet-delivery-validator__modal__container__footer {
align-items: center;
}
/* Mobile Input Text Size */
@media screen and (max-width: 767px) {
input#zapiet-delivery-validator__postal_code {
font-size: 16px !important;
}
}
/* Fix Header Overlap */
header.Header.Header--top {
margin-top: 50px;
transition: all 0.25s;
}
header.Header.Header--top.t-close {
margin-top: 0;
}
.Mobile-bar.Mobile-bar--top {
top: 80px;
transition: all 0.25s;
}
.t-close {
top: 0;
}
</style>
There’s probably going to be some tweaking needed for this to integrate with your new site but hopefully this helps!
