{"id":4804,"date":"2025-11-30T06:14:52","date_gmt":"2025-11-30T11:14:52","guid":{"rendered":"https:\/\/pretected-wp.cerebralex.com\/?post_type=hestia_layouts&#038;p=4804"},"modified":"2026-01-21T11:37:40","modified_gmt":"2026-01-21T16:37:40","slug":"page-zipcode-breadcrumbs","status":"publish","type":"hestia_layouts","link":"https:\/\/pretected.com\/articles\/hestia_layouts\/page-zipcode-breadcrumbs\/","title":{"rendered":"Page zipcode &amp; breadcrumbs"},"content":{"rendered":"\n<div id=\"custom-breadcrumbs\"><\/div>\n<style>\n#custom-breadcrumbs{font-size:14px!important;color:#666;padding:15px 0;margin-bottom:0;display:flex;align-items:center;overflow:hidden}\n#custom-breadcrumbs a{color:#0066cc;text-decoration:none;transition:color .3s ease;flex-shrink:0}\n#custom-breadcrumbs a:hover{color:#004080;text-decoration:underline}\n#custom-breadcrumbs .current{color:#333;font-weight:500;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;flex:1;min-width:0}\n#custom-breadcrumbs .separator{margin:0 8px;flex-shrink:0}\n#custom-breadcrumbs .breadcrumb-item{display:flex;align-items:center;flex-shrink:0}\n#custom-breadcrumbs .breadcrumb-item:last-child{min-width:0;flex:1;overflow:hidden}\n@media (max-width:768px){#custom-breadcrumbs{font-size:12px;padding:10px 0}#custom-breadcrumbs .separator{margin:0 6px}}\n<\/style>\n<script>\n(function(){\n    const config={\n        separator:' \/ ',\n        homeText:'Home',\n        homeUrl:'https:\/\/pretected.com\/get-car-insurance',\n        basePath:'\/articles'\n    };\n    \n    \/\/ Get geolocation data from the page (set by PHP plugin)\n    function getGeoLocationData(){\n        \/\/ Check if WordPress localized the data\n        if(typeof geoLocationData!=='undefined'){\n            return geoLocationData;\n        }\n        \n        \/\/ Fallback: return defaults\n        return{\n            city:'your city',\n            state:'your state',\n            state_code:''\n        };\n    }\n    \n    \/\/ Replace location tags in text\n    function replaceLocationTags(text){\n        if(!text)return text;\n        \n        const geoData=getGeoLocationData();\n        let result=text;\n        \n        \/\/ Replace lowercase tags\n        result=result.replace(\/\\[city\\]\/gi,geoData.city);\n        result=result.replace(\/\\[state\\]\/g,geoData.state);\n        result=result.replace(\/\\[state_code\\]\/gi,geoData.state_code);\n        \n        \/\/ Replace capitalized tags\n        const cityCapitalized=geoData.city.charAt(0).toUpperCase()+geoData.city.slice(1);\n        const stateCapitalized=geoData.state.charAt(0).toUpperCase()+geoData.state.slice(1);\n        \n        result=result.replace(\/\\[City\\]\/g,cityCapitalized);\n        result=result.replace(\/\\[State\\]\/g,stateCapitalized);\n        \n        return result;\n    }\n    \n    function getCategoryFromPage(){\n        const categoryLink=document.querySelector('a[rel=\"category tag\"]');\n        if(categoryLink){\n            return{\n                name:replaceLocationTags(categoryLink.textContent.trim()),\n                url:categoryLink.href\n            };\n        }\n        \n        const bodyClasses=document.body.className;\n        const categoryMatch=bodyClasses.match(\/category-([^\\s]+)\/);\n        if(categoryMatch){\n            const categorySlug=categoryMatch[1];\n            const categoryName=categorySlug.replace(\/-\/g,' ').replace(\/\\b\\w\/g,l=>l.toUpperCase());\n            return{\n                name:replaceLocationTags(categoryName),\n                url:config.homeUrl+'\/category\/'+categorySlug\n            };\n        }\n        \n        const categoryLinks=document.querySelectorAll('a[href*=\"\/category\/\"]');\n        if(categoryLinks.length>0){\n            const firstCat=categoryLinks[0];\n            return{\n                name:replaceLocationTags(firstCat.textContent.trim()),\n                url:firstCat.href\n            };\n        }\n        \n        return null;\n    }\n    \n    function isBlogPost(){\n        return document.body.classList.contains('single-post')||\n               document.body.classList.contains('single')||\n               document.querySelector('article.post')!==null;\n    }\n    \n    function createBreadcrumbs(){\n        const breadcrumbContainer=document.getElementById('custom-breadcrumbs');\n        if(!breadcrumbContainer)return;\n        \n        \/\/ Debug: log geolocation data\n        console.log('Geo Location Data:',typeof geoLocationData!=='undefined'?geoLocationData:'not found');\n        \n        let path=window.location.pathname;\n        \n        if(path.startsWith(config.basePath)){\n            path=path.substring(config.basePath.length);\n        }\n        \n        const parts=path.split('\/').filter(part=>part!=='');\n        \n        if(parts.length===0){\n            breadcrumbContainer.style.display='none';\n            return;\n        }\n        \n        let breadcrumbHTML='<span class=\"breadcrumb-item\"><a href=\"'+config.homeUrl+'\">'+config.homeText+'<\/a><span class=\"separator\">'+config.separator+'<\/span><\/span>';\n        \n        const isPost=isBlogPost();\n        \n        if(isPost){\n            const category=getCategoryFromPage();\n            \n            if(category){\n                breadcrumbHTML+='<span class=\"breadcrumb-item\"><a href=\"'+category.url+'\">'+category.name+'<\/a><span class=\"separator\">'+config.separator+'<\/span><\/span>';\n            }\n        }\n        \n        let currentPath=config.basePath;\n        \n        parts.forEach((part,index)=>{\n            currentPath+='\/'+part;\n            \n            let displayText;\n            \n            \/\/ For the last item (current page), try to get the actual page title\n            if(index===parts.length-1){\n                \/\/ Try to get the page title from various sources\n                const h1=document.querySelector('h1.entry-title, h1.post-title, h1');\n                const titleTag=document.querySelector('title');\n                \n                if(h1&&h1.textContent.trim()){\n                    displayText=h1.textContent.trim();\n                    \/\/ Remove site name if present (after | or - or \u2013)\n                    displayText=displayText.split(\/\\s+[\\|\\-\u2013]\\s+\/)[0].trim();\n                }else if(titleTag){\n                    displayText=titleTag.textContent.trim();\n                    \/\/ Remove site name if present\n                    displayText=displayText.split(\/\\s+[\\|\\-\u2013]\\s+\/)[0].trim();\n                }else{\n                    \/\/ Fallback to URL slug\n                    displayText=part\n                        .replace(\/-\/g,' ')\n                        .replace(\/\\b\\w\/g,l=>l.toUpperCase())\n                        .replace(\/\\.(html|php|htm)$\/i,'');\n                }\n            }else{\n                \/\/ For intermediate paths, use URL slug\n                displayText=part\n                    .replace(\/-\/g,' ')\n                    .replace(\/\\b\\w\/g,l=>l.toUpperCase())\n                    .replace(\/\\.(html|php|htm)$\/i,'');\n            }\n            \n            console.log('Before replacement:',displayText);\n            \n            \/\/ Replace location tags in breadcrumb text\n            displayText=replaceLocationTags(displayText);\n            \n            console.log('After replacement:',displayText);\n            \n            if(index===parts.length-1){\n                breadcrumbHTML+='<span class=\"breadcrumb-item\"><span class=\"current\">'+displayText+'<\/span><\/span>';\n            }else{\n                breadcrumbHTML+='<span class=\"breadcrumb-item\"><a href=\"'+currentPath+'\">'+displayText+'<\/a><span class=\"separator\">'+config.separator+'<\/span><\/span>';\n            }\n        });\n        \n        breadcrumbContainer.innerHTML=breadcrumbHTML;\n    }\n    \n    if(document.readyState==='loading'){\n        document.addEventListener('DOMContentLoaded',createBreadcrumbs);\n    }else{\n        createBreadcrumbs();\n    }\n})();\n<\/script>\n\n\n\n<div class=\"inline-zip-cta\">\n  <div class=\"inline-zip-cta__trust-badge\">\n    <svg class=\"inline-zip-cta__shield\" viewBox=\"0 0 24 24\" aria-hidden=\"true\">\n      <path d=\"M12 2L4 6v6c0 5.5 3.8 10.7 8 12 4.2-1.3 8-6.5 8-12V6l-8-4z\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\"\/>\n      <path d=\"M9 12l2 2 4-4\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"\/>\n    <\/svg>\n    <span>Trusted by 10M+ Drivers<\/span>\n  <\/div>\n  \n  <div class=\"inline-zip-cta__header\">\n    <strong>Enter your ZIP code<\/strong> to compare your different options and stop overpaying!\n  <\/div>\n  \n  <p class=\"inline-zip-cta__text\">\n    Insurance rates change constantly. Find out if you&#8217;re eligible for lower premiums from leading providers.\n  <\/p>\n  \n  <form class=\"inline-zip-cta__form\" action=\"https:\/\/pretected.com\/get-car-insurance?nozip=1\" method=\"get\" novalidate>\n    <label class=\"sr-only\" for=\"zip-inline\">Zip Code<\/label>\n    <input\n      id=\"zip-inline\"\n      name=\"zip\"\n      class=\"inline-zip-cta__input\"\n      type=\"text\"\n      inputmode=\"numeric\"\n      autocomplete=\"postal-code\"\n      placeholder=\"Enter ZIP Code\"\n      pattern=\"^\\d{5}$\"\n      title=\"Enter a 5-digit ZIP code\"\n      required\n    \/>\n    <button class=\"inline-zip-cta__button\" type=\"submit\">\n      GET RATES\n      <svg class=\"inline-zip-cta__icon\" viewBox=\"0 0 24 24\" aria-hidden=\"true\">\n        <path d=\"M13.5 5l7 7-7 7M3.5 12h16\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"\/>\n      <\/svg>\n    <\/button>\n  <\/form>\n  \n  <div class=\"inline-zip-cta__trust-line\">\n    <span class=\"inline-zip-cta__trust-item\">\n      <svg viewBox=\"0 0 20 20\" aria-hidden=\"true\">\n        <circle cx=\"10\" cy=\"10\" r=\"9\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\"\/>\n        <path d=\"M6 10l3 3 5-6\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"\/>\n      <\/svg>\n      100% Free\n    <\/span>\n    <span class=\"inline-zip-cta__trust-item\">\n      <svg viewBox=\"0 0 20 20\" aria-hidden=\"true\">\n        <circle cx=\"10\" cy=\"10\" r=\"9\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\"\/>\n        <path d=\"M6 10l3 3 5-6\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"\/>\n      <\/svg>\n      No Obligation\n    <\/span>\n    <span class=\"inline-zip-cta__trust-item\">\n      <svg viewBox=\"0 0 20 20\" aria-hidden=\"true\">\n        <circle cx=\"10\" cy=\"10\" r=\"9\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\"\/>\n        <path d=\"M6 10l3 3 5-6\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"\/>\n      <\/svg>\n      Secure &#038; Private\n    <\/span>\n  <\/div>\n  \n  <!-- Insurance Logos Section -->\n  <div class=\"inline-zip-cta__logos\">\n    <img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/pretected.com\/articles\/wp-content\/uploads\/2025\/11\/Liberty-Mutual.png\" alt=\"Liberty Mutual\" class=\"inline-zip-cta__logo\" width=\"175\" height=\"46\">\n    <img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/pretected.com\/articles\/wp-content\/uploads\/2025\/11\/Progressive.png\" alt=\"Progressive\" class=\"inline-zip-cta__logo\" width=\"108\" height=\"32\">\n    <img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/pretected.com\/articles\/wp-content\/uploads\/2025\/11\/The-Hartford.png\" alt=\"The Hartford\" class=\"inline-zip-cta__logo\" width=\"175\" height=\"45\">\n    <img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/pretected.com\/articles\/wp-content\/uploads\/2025\/11\/Direct-Auto-Insurance.png\" alt=\"Direct Auto Insurance\" class=\"inline-zip-cta__logo\" width=\"77\" height=\"49\">\n    <img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/pretected.com\/articles\/wp-content\/uploads\/2025\/11\/Kemper.png\" alt=\"Kemper\" class=\"inline-zip-cta__logo\" width=\"123\" height=\"49\">\n  <\/div>\n<\/div>\n\n<style>\n  .inline-zip-cta {\n    background: linear-gradient(135deg, #f8f9fa 0%, #ffffff 100%) !important;\n    border: 2px solid #e5e7eb !important;\n    border-radius: 20px !important;\n    padding: 24px !important;\n    margin: 0px 0 15px 0 !important;  \/* top right bottom left *\/\n    box-sizing: border-box !important;\n    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08) !important;\n  }\n  \n  .inline-zip-cta__trust-badge {\n    display: inline-flex !important;\n    align-items: center !important;\n    gap: 8px !important;\n    padding: 6px 14px !important;\n    margin: 0 0 16px 0 !important;\n    background: linear-gradient(135deg, #3b82f6 0%, #2563eb 100%) !important;\n    border: none !important;\n    border-radius: 20px !important;\n    color: #ffffff !important;\n    font-size: 13px !important;\n    font-weight: 600 !important;\n    letter-spacing: 0.3px !important;\n    box-shadow: 0 4px 12px rgba(59, 130, 246, 0.25) !important;\n  }\n  \n  .inline-zip-cta__shield {\n    width: 16px !important;\n    height: 16px !important;\n    color: #ffffff !important;\n    flex-shrink: 0 !important;\n  }\n  \n  .inline-zip-cta__header {\n    margin: 0 0 8px 0 !important;\n    padding: 0 !important;\n    color: #1f2937 !important;\n    font-size: 20px !important;\n    line-height: 1.4 !important;\n    font-weight: 400 !important;\n    text-align: left !important;\n  }\n  \n  .inline-zip-cta__header strong {\n    color: #111827 !important;\n    font-weight: 700 !important;\n  }\n  \n  .inline-zip-cta__text {\n    margin: 0 0 20px 0 !important;\n    padding: 0 !important;\n    color: #4b5563 !important;\n    font-size: 15px !important;\n    line-height: 1.5 !important;\n    font-weight: 400 !important;\n    text-align: left !important;\n  }\n  \n  .inline-zip-cta__form {\n    position: relative !important;\n    display: block !important;\n    margin: 0 0 16px 0 !important;\n    padding: 0 !important;\n  }\n  \n  .inline-zip-cta__input {\n    width: 100% !important;\n    height: 60px !important;\n    padding: 0 140px 0 24px !important;\n    font-size: 17px !important;\n    line-height: 1.4 !important;\n    border: 2px solid #d1d5db !important;\n    border-radius: 12px !important;\n    background: #ffffff !important;\n    outline: none !important;\n    transition: all 0.3s ease !important;\n    box-sizing: border-box !important;\n    color: #1a1a1a !important;\n    font-weight: 500 !important;\n    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05) !important;\n  }\n  \n  .inline-zip-cta__input:focus {\n    border-color: #6ec04d !important;\n    box-shadow: 0 0 0 3px rgba(110, 192, 77, 0.15), \n                0 2px 4px rgba(0, 0, 0, 0.05) !important;\n  }\n  \n  .inline-zip-cta__input::placeholder {\n    color: #9ca3af !important;\n    opacity: 1 !important;\n  }\n  \n  .inline-zip-cta__button {\n    position: absolute !important;\n    right: 6px !important;\n    top: 50% !important;\n    transform: translateY(-50%) !important;\n    display: inline-flex !important;\n    justify-content: center !important;\n    align-items: center !important;\n    gap: 8px !important;\n    padding: 0 26px !important;\n    height: 48px !important;\n    margin: 0 !important;\n    font-size: 15px !important;\n    font-weight: 700 !important;\n    line-height: 1 !important;\n    letter-spacing: 0.5px !important;\n    border: none !important;\n    border-radius: 10px !important;\n    background: linear-gradient(135deg, #6ec04d 0%, #5fb03d 100%) !important;\n    color: #fff !important;\n    cursor: pointer !important;\n    white-space: nowrap !important;\n    box-shadow: 0 4px 12px rgba(110, 192, 77, 0.4), \n                inset 0 1px 0 rgba(255, 255, 255, 0.2) !important;\n    transition: all 0.3s ease !important;\n    box-sizing: border-box !important;\n    text-decoration: none !important;\n  }\n  \n  .inline-zip-cta__button:hover { \n    transform: translateY(-50%) scale(1.02) !important;\n    box-shadow: 0 6px 16px rgba(110, 192, 77, 0.5), \n                inset 0 1px 0 rgba(255, 255, 255, 0.2) !important;\n    background: linear-gradient(135deg, #7dd15d 0%, #6ec04d 100%) !important;\n  }\n  \n  .inline-zip-cta__button:active { \n    transform: translateY(-50%) scale(0.98) !important;\n    box-shadow: 0 2px 8px rgba(110, 192, 77, 0.3) !important;\n  }\n  \n  .inline-zip-cta__icon { \n    width: 20px !important; \n    height: 20px !important;\n    flex-shrink: 0 !important;\n  }\n  \n  .inline-zip-cta__trust-line {\n    display: flex !important;\n    flex-wrap: wrap !important;\n    gap: 16px !important;\n    margin: 0 0 20px 0 !important;\n    padding: 0 !important;\n  }\n  \n  .inline-zip-cta__trust-item {\n    display: inline-flex !important;\n    align-items: center !important;\n    gap: 6px !important;\n    color: #374151 !important;\n    font-size: 13px !important;\n    font-weight: 500 !important;\n    line-height: 1 !important;\n  }\n  \n  .inline-zip-cta__trust-item svg {\n    width: 16px !important;\n    height: 16px !important;\n    color: #6ec04d !important;\n    flex-shrink: 0 !important;\n  }\n  \n  \/* Insurance Logos Section *\/\n  .inline-zip-cta__logos {\n    display: flex !important;\n    flex-wrap: wrap !important;\n    align-items: center !important;\n    justify-content: center !important;\n    gap: 30px !important;\n    padding: 16px 0 0 0 !important;\n    margin: 0 !important;\n    border-top: 2px solid #e5e7eb !important;\n  }\n  \n  .inline-zip-cta__logo {\n    height: 32px !important;\n    width: auto !important;\n    max-width: 120px !important;\n    object-fit: contain !important;\n    opacity: 0.6 !important;\n    transition: opacity 0.3s ease !important;\n    filter: grayscale(100%) brightness(0.3) !important;\n  }\n  \n  .inline-zip-cta__logo:hover {\n    opacity: 0.8 !important;\n  }\n  \n  .sr-only {\n    position: absolute !important;\n    width: 1px !important; \n    height: 1px !important;\n    padding: 0 !important; \n    margin: -1px !important; \n    overflow: hidden !important;\n    clip: rect(0,0,0,0) !important; \n    white-space: nowrap !important; \n    border: 0 !important;\n  }\n  \n  @media (max-width: 640px) {\n    .inline-zip-cta {\n      padding: 20px !important;\n    }\n    \n    .inline-zip-cta__header {\n      font-size: 18px !important;\n    }\n    \n    .inline-zip-cta__input {\n      padding-right: 20px !important;\n      margin-bottom: 12px !important;\n    }\n    \n    .inline-zip-cta__button {\n      position: static !important;\n      transform: none !important;\n      width: 100% !important;\n      height: 52px !important;\n    }\n    \n    .inline-zip-cta__button:hover {\n      transform: scale(1.02) !important;\n    }\n    \n    .inline-zip-cta__button:active {\n      transform: scale(0.98) !important;\n    }\n    \n    .inline-zip-cta__trust-line {\n      gap: 12px !important;\n      justify-content: center !important;\n    }\n    \n    .inline-zip-cta__trust-item {\n      font-size: 12px !important;\n    }\n    \n    .inline-zip-cta__logos {\n      gap: 16px !important;\n    }\n    \n    .inline-zip-cta__logo {\n      height: 28px !important;\n      max-width: 100px !important;\n    }\n  }\n<\/style>\n\n<script>\n(function() {\n  \/\/ Wait for everything to load\n  if (document.readyState === 'loading') {\n    document.addEventListener('DOMContentLoaded', init);\n  } else {\n    init();\n  }\n  \n  function init() {\n    var form = document.querySelector('.inline-zip-cta__form');\n    if (!form) return;\n    \n    var zipInput = document.getElementById('zip-inline');\n    if (!zipInput) return;\n    \n    \/\/ Prefill zip from URL\n    try {\n      var urlParams = new URLSearchParams(window.location.search);\n      var urlZip = urlParams.get('zip');\n      if (urlZip && \/^\\d{5}$\/.test(urlZip) && !zipInput.value) {\n        zipInput.value = urlZip;\n      }\n    } catch(e) {}\n    \n    \/\/ Handle form submission\n    form.addEventListener('submit', function(e) {\n      e.preventDefault();\n      \n      try {\n        var currentParams = new URLSearchParams(window.location.search);\n        var actionUrl = new URL(form.action);\n        var zipValue = zipInput.value;\n        \n        \/\/ Preserve all existing URL parameters\n        for (var entry of currentParams.entries()) {\n          if (entry[0] !== 'zip') {\n            actionUrl.searchParams.set(entry[0], entry[1]);\n          }\n        }\n        \n        \/\/ Add the zip parameter\n        if (zipValue) {\n          actionUrl.searchParams.set('zip', zipValue);\n        }\n        \n        window.location.href = actionUrl.toString();\n      } catch(e) {\n        \/\/ Fallback to regular form submission\n        form.submit();\n      }\n    });\n  }\n})();\n<\/script>\n","protected":false},"template":"","class_list":["post-4804","hestia_layouts","type-hestia_layouts","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/pretected.com\/articles\/wp-json\/wp\/v2\/hestia_layouts\/4804","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/pretected.com\/articles\/wp-json\/wp\/v2\/hestia_layouts"}],"about":[{"href":"https:\/\/pretected.com\/articles\/wp-json\/wp\/v2\/types\/hestia_layouts"}],"wp:attachment":[{"href":"https:\/\/pretected.com\/articles\/wp-json\/wp\/v2\/media?parent=4804"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}