Copy of Is Your Vehicle Supported?

{% doc %} @prompt Update the "Is Your Vehicle Supported?" vehicle compatibility checker section. The Year dropdown must include every year from 1949 to 2019 in descending order (2019, 2018, 2017 ... down to 1949). Keep the Make and Model dropdowns as placeholders for now. The section should still have the same layout: heading, subheading, three dropdowns (Year, Make, Model), a "Check Compatibility" button, and a compatible/not compatible result message in green or red. Keep all existing section settings for heading and subheading customization. {% enddoc %} {% assign ai_gen_id = block.id | replace: '_', '' | downcase %} {% style %} .ai-vehicle-checker-{{ ai_gen_id }} { display: block; width: {{ block.settings.desktop_width_percent }}%; max-width: 100%; padding: 40px; background-color: {{ block.settings.background_color }}; border-radius: {{ block.settings.border_radius }}px; } .ai-vehicle-checker__content-{{ ai_gen_id }} { max-width: 600px; margin: 0 auto; text-align: center; } .ai-vehicle-checker__heading-{{ ai_gen_id }} { margin: 0 0 12px; color: {{ block.settings.heading_color }}; font-size: {{ block.settings.heading_size }}px; } .ai-vehicle-checker__subheading-{{ ai_gen_id }} { margin: 0 0 32px; color: {{ block.settings.subheading_color }}; font-size: {{ block.settings.subheading_size }}px; } .ai-vehicle-checker__form-{{ ai_gen_id }} { display: flex; flex-direction: column; gap: 16px; } .ai-vehicle-checker__select-{{ ai_gen_id }} { width: 100%; padding: 12px 16px; font-size: 16px; border: 1px solid {{ block.settings.input_border_color }}; border-radius: {{ block.settings.input_border_radius }}px; background-color: {{ block.settings.input_background_color }}; color: {{ block.settings.input_text_color }}; cursor: pointer; } .ai-vehicle-checker__select-{{ ai_gen_id }}:focus { outline: 2px solid {{ block.settings.input_border_color }}; outline-offset: 2px; } .ai-vehicle-checker__button-{{ ai_gen_id }} { padding: 14px 28px; font-size: 16px; font-weight: 600; background-color: {{ block.settings.button_background_color }}; color: {{ block.settings.button_text_color }}; border: none; border-radius: {{ block.settings.button_border_radius }}px; cursor: pointer; transition: background-color 0.3s ease; } .ai-vehicle-checker__button-{{ ai_gen_id }}:hover { background-color: {{ block.settings.button_hover_color }}; } .ai-vehicle-checker__result-{{ ai_gen_id }} { margin-top: 24px; padding: 16px; border-radius: 8px; font-size: 16px; font-weight: 600; opacity: 0; visibility: hidden; transition: opacity 0.3s ease, visibility 0.3s ease; } .ai-vehicle-checker__result-{{ ai_gen_id }}.visible { opacity: 1; visibility: visible; } .ai-vehicle-checker__result-{{ ai_gen_id }}.compatible { background-color: {{ block.settings.compatible_bg_color }}; color: {{ block.settings.compatible_text_color }}; } .ai-vehicle-checker__result-{{ ai_gen_id }}.not-compatible { background-color: {{ block.settings.not_compatible_bg_color }}; color: {{ block.settings.not_compatible_text_color }}; } @media screen and (max-width: 749px) { .ai-vehicle-checker-{{ ai_gen_id }} { padding: 24px; } .ai-vehicle-checker__heading-{{ ai_gen_id }} { font-size: calc({{ block.settings.heading_size }}px * 0.8); } .ai-vehicle-checker__subheading-{{ ai_gen_id }} { font-size: calc({{ block.settings.subheading_size }}px * 0.9); } } {% endstyle %}
{% if block.settings.heading != blank %}

{{ block.settings.heading }}

{% endif %} {% if block.settings.subheading != blank %}

{{ block.settings.subheading }}

{% endif %}
{% schema %} { "name": "Vehicle checker", "settings": [ { "type": "header", "content": "Content" }, { "type": "inline_richtext", "id": "heading", "label": "Heading", "default": "Is Your Vehicle Supported?" }, { "type": "inline_richtext", "id": "subheading", "label": "Subheading", "default": "Check if your vehicle is compatible with our products" }, { "type": "text", "id": "button_text", "label": "Button text", "default": "Check Compatibility" }, { "type": "text", "id": "compatible_message", "label": "Compatible message", "default": "Great news! Your vehicle is compatible." }, { "type": "text", "id": "not_compatible_message", "label": "Not compatible message", "default": "Sorry, your vehicle is not compatible." }, { "type": "header", "content": "Heading style" }, { "type": "range", "id": "heading_size", "label": "Heading size", "min": 16, "max": 48, "step": 2, "unit": "px", "default": 32 }, { "type": "color", "id": "heading_color", "label": "Heading color", "default": "#000000" }, { "type": "header", "content": "Subheading style" }, { "type": "range", "id": "subheading_size", "label": "Subheading size", "min": 12, "max": 24, "step": 1, "unit": "px", "default": 16 }, { "type": "color", "id": "subheading_color", "label": "Subheading color", "default": "#666666" }, { "type": "header", "content": "Layout" }, { "type": "range", "id": "desktop_width_percent", "label": "Desktop width", "min": 50, "max": 100, "step": 5, "unit": "%", "default": 100 }, { "type": "color", "id": "background_color", "label": "Background color", "default": "#f5f5f5" }, { "type": "range", "id": "border_radius", "label": "Border radius", "min": 0, "max": 24, "step": 2, "unit": "px", "default": 8 }, { "type": "header", "content": "Input fields" }, { "type": "color", "id": "input_background_color", "label": "Background color", "default": "#ffffff" }, { "type": "color", "id": "input_text_color", "label": "Text color", "default": "#000000" }, { "type": "color", "id": "input_border_color", "label": "Border color", "default": "#cccccc" }, { "type": "range", "id": "input_border_radius", "label": "Border radius", "min": 0, "max": 16, "step": 2, "unit": "px", "default": 4 }, { "type": "header", "content": "Button" }, { "type": "color", "id": "button_background_color", "label": "Background color", "default": "#2f4f4f" }, { "type": "color", "id": "button_text_color", "label": "Text color", "default": "#ffffff" }, { "type": "color", "id": "button_hover_color", "label": "Hover background color", "default": "#142929" }, { "type": "range", "id": "button_border_radius", "label": "Border radius", "min": 0, "max": 40, "step": 2, "unit": "px", "default": 4 }, { "type": "header", "content": "Result messages" }, { "type": "color", "id": "compatible_bg_color", "label": "Compatible background", "default": "#d4edda" }, { "type": "color", "id": "compatible_text_color", "label": "Compatible text", "default": "#155724" }, { "type": "color", "id": "not_compatible_bg_color", "label": "Not compatible background", "default": "#f8d7da" }, { "type": "color", "id": "not_compatible_text_color", "label": "Not compatible text", "default": "#721c24" } ], "presets": [ { "name": "Vehicle checker" } ] } {% endschema %}