Shopify——Banner+Title+P组件及其移动端适配

Dawn模版的基础模块太少了，但是Banner+Title+P又是日常布局常用的，于是自己写一个吧。

组件功能：Banner标题、字体大小、对齐方式、字体颜色、标题上下间距、Banner板块数量、Banner板块移动端适配模式、自定义版心类名

组件块功能：Banner图片、Banner背景、Banner标题、Banner文本、标题和文本字体大小、标题和文本对齐方式、标题和文本间距、标题和文本颜色、按钮及其链接、按钮大小颜色字体

都工作了，那么就拿来主义吧，我就不多解释了。

<style>
    .doace-banner-section {
        text-align: center;
        margin-bottom: 20px;
    }

    .doace-banner-image {
        display: block;
        margin: 0 auto;
        border-radius: var(--banner-image-border-radius, 0px);
    }

    .doace-banner-row {
        display: flex;
        flex-wrap: wrap;
    }

    .doace-banner-content {
        box-sizing: border-box;
        padding: 10px;
        background-color: var(--banner-background-color, #ffffff);
    }

    .doace-banner-title,
    .doace-banner-text,
    .doace-banner-button {
        transition: color 0.3s ease;
    }

    .doace-banner-button-container {
        display: flex;
        justify-content: var(--banner-button-alignment, center);
    }

    @media (min-width: 768px) {
        .doace-banner-content {
            width: calc(100% / var(--pc-banners-per-row));
        }
    }

    @media (max-width: 767px) {
        .doace-banner-content {
            width: calc(100% / var(--mobile-banners-per-row));
        }
    }
</style>

<div class="doace-banner-section {{ section.settings.custom_class }}"
    style="--pc-banners-per-row: {{ section.settings.pc_banners_per_row }}; --mobile-banners-per-row: {{ section.settings.mobile_banners_per_row }};">
    {% if section.settings.main_title != blank %}
    <h1 class="doace-main-title"
        style="--main-title-size: {{ section.settings.main_title_size }}px; --main-title-alignment: {{ section.settings.main_title_alignment }}; --main-title-color: {{ section.settings.main_title_color }}; margin-top: {{ section.settings.main_title_margin_top }}px; margin-bottom: {{ section.settings.main_title_margin_bottom }}px;">
        {{ section.settings.main_title }}
    </h1>
    {% endif %}
    <div class="doace-banner-row">
        {% for block in section.blocks %}
        {% if block.type == 'banner_block' %}
        {% if block.settings.banner_image != blank %}
        <div class="doace-banner-content"
            style="--banner-background-color: {{ block.settings.banner_background_color }};">
            <img src="{{ block.settings.banner_image | img_url: 'master' }}" class="doace-banner-image"
                alt="{{ block.settings.banner_image.alt }}" width="100%" height="auto" loading="lazy"
                style="border-radius: {{ block.settings.banner_image_border_radius }}px;">
            {% if block.settings.banner_title != blank %}
            <h2 class="doace-banner-title"
                style="font-size: {{ block.settings.banner_title_size }}px; text-align: {{ block.settings.banner_title_alignment }}; margin-top: {{ block.settings.banner_title_margin_top }}px; margin-bottom: {{ block.settings.banner_title_margin_bottom }}px; color: {{ block.settings.banner_title_color }};">
                {{ block.settings.banner_title }}
            </h2>
            {% endif %}
            {% if block.settings.banner_text != blank %}
            <p class="doace-banner-text"
                style="font-size: {{ block.settings.banner_text_size }}px; text-align: {{ block.settings.banner_text_alignment }}; margin-top: {{ block.settings.banner_text_margin_top }}px; margin-bottom: {{ block.settings.banner_text_margin_bottom }}px; color: {{ block.settings.banner_text_color }};">
                {{ block.settings.banner_text }}
            </p>
            {% endif %}
            {% if block.settings.banner_button_text != blank and block.settings.banner_button_url != blank %}
            <div class="doace-banner-button-container"
                style="--banner-button-alignment: {{ block.settings.banner_button_alignment }};">
                <a href="{{ block.settings.banner_button_url }}" class="doace-banner-button"
                    style="display: inline-block; margin: {{ block.settings.banner_button_margin_top }}px {{ block.settings.banner_button_margin_right }}px {{ block.settings.banner_button_margin_bottom }}px {{ block.settings.banner_button_margin_left }}px; padding: 10px 20px; background-color: {{ block.settings.banner_button_background_color | default: 'transparent' }}; color: {{ block.settings.banner_button_text_color }}; text-decoration: none; border-radius: 5px; font-size: {{ block.settings.banner_button_text_size }}px;">
                    {{ block.settings.banner_button_text | default: 'Learn More' }}
                </a>
            </div>
            {% endif %}
        </div>
        {% else %}
        <p>请至少选择一张图片作为Banner</p>
        {% endif %}
        {% endif %}
        {% endfor %}
    </div>
</div>

{% schema %}
{
"name": "My Banner",
"settings": [
{
"type": "text",
"id": "main_title",
"label": "Main Title",
"default": "Main Banner Title"
},
{
"type": "range",
"id": "main_title_size",
"label": "Main Title Size (px)",
"default": 36,
"unit": "px",
"min": 20,
"max": 100
},
{
"type": "select",
"id": "main_title_alignment",
"label": "Main Title Alignment",
"options": [
{ "value": "left", "label": "Left" },
{ "value": "center", "label": "Center" },
{ "value": "right", "label": "Right" }
],
"default": "center"
},
{
"type": "color",
"id": "main_title_color",
"label": "Main Title Color",
"default": "#000000"
},
{
"type": "range",
"id": "main_title_margin_top",
"label": "Main Title Margin Top (px)",
"default": 20,
"unit": "px",
"min": 0,
"max": 50
},
{
"type": "range",
"id": "main_title_margin_bottom",
"label": "Main Title Margin Bottom (px)",
"default": 20,
"unit": "px",
"min": 0,
"max": 50
},
{
"type": "number",
"id": "pc_banners_per_row",
"label": "Banners per Row (PC)",
"default": 4
},
{
"type": "number",
"id": "mobile_banners_per_row",
"label": "Banners per Row (Mobile)",
"default": 2
},
{
"type": "text",
"id": "custom_class",
"label": "Custom Class Name",
"default": "page-width"
}
],
"blocks": [
{
"type": "banner_block",
"name": "Banner Block",
"settings": [
{
"type": "image_picker",
"id": "banner_image",
"label": "Banner"
},
{
"type": "text",
"id": "banner_title",
"label": "Banner Title",
"default": "DOACE"
},
{
"type": "text",
"id": "banner_text",
"label": "Banner Text",
"default": "doace"
},
{
"type": "range",
"id": "banner_title_size",
"label": "Banner Title Size (px)",
"default": 24,
"unit": "px",
"min": 10,
"max": 100
},
{
"type": "range",
"id": "banner_text_size",
"label": "Banner Text Size (px)",
"default": 16,
"unit": "px",
"min": 10,
"max": 100
},
{
"type": "select",
"id": "banner_title_alignment",
"label": "Banner Title Alignment",
"options": [
{ "value": "left", "label": "Left" },
{ "value": "center", "label": "Center" },
{ "value": "right", "label": "Right" }
],
"default": "center"
},
{
"type": "select",
"id": "banner_text_alignment",
"label": "Banner Text Alignment",
"options": [
{ "value": "left", "label": "Left" },
{ "value": "center", "label": "Center" },
{ "value": "right", "label": "Right" }
],
"default": "center"
},
{
"type": "range",
"id": "banner_title_margin_top",
"label": "Banner Title Margin Top (px)",
"default": 10,
"unit": "px",
"min": 0,
"max": 50
},
{
"type": "range",
"id": "banner_title_margin_bottom",
"label": "Banner Title Margin Bottom (px)",
"default": 10,
"unit": "px",
"min": 0,
"max": 50
},
{
"type": "range",
"id": "banner_text_margin_top",
"label": "Banner Text Margin Top (px)",
"default": 10,
"unit": "px",
"min": -10,
"max": 50
},
{
"type": "range",
"id": "banner_text_margin_bottom",
"label": "Banner Text Margin Bottom (px)",
"default": 10,
"unit": "px",
"min": -10,
"max": 50
},
{
"type": "color",
"id": "banner_title_color",
"label": "Banner Title Color",
"default": "#000000"
},
{
"type": "color",
"id": "banner_text_color",
"label": "Banner Text Color",
"default": "#777777"
},
{
"type": "text",
"id": "banner_button_text",
"label": "Banner Button Text",
"default": "Learn More"
},
{
"type": "url",
"id": "banner_button_url",
"label": "Banner Button URL"
},
{
"type": "range",
"id": "banner_button_text_size",
"label": "Banner Button Text Size (px)",
"default": 14,
"unit": "px",
"min": 10,
"max": 50
},
{
"type": "select",
"id": "banner_button_alignment",
"label": "Banner Button Alignment",
"options": [
{ "value": "left", "label": "Left" },
{ "value": "center", "label": "Center" },
{ "value": "right", "label": "Right" }
],
"default": "center"
},
{
"type": "color",
"id": "banner_button_text_color",
"label": "Banner Button Text Color",
"default": "#ffffff"
},
{
"type": "color",
"id": "banner_button_background_color",
"label": "Banner Button Background Color",
"default": "#007bff"
},
{
"type": "range",
"id": "banner_button_margin_top",
"label": "Banner Button Margin Top (px)",
"default": 10,
"unit": "px",
"min": -50,
"max": 50
},
{
"type": "range",
"id": "banner_button_margin_right",
"label": "Banner Button Margin Right (px)",
"default": 10,
"unit": "px",
"min": -50,
"max": 50
},
{
"type": "range",
"id": "banner_button_margin_bottom",
"label": "Banner Button Margin Bottom (px)",
"default": 10,
"unit": "px",
"min": -50,
"max": 50
},
{
"type": "range",
"id": "banner_button_margin_left",
"label": "Banner Button Margin Left (px)",
"default": 10,
"unit": "px",
"min": -50,
"max": 50
},
{
"type": "range",
"id": "banner_image_border_radius",
"label": "Banner Image Border Radius (px)",
"default": 0,
"unit": "px",
"min": 0,
"max": 50
},
{
"type": "color",
"id": "banner_background_color",
"label": "Banner Background Color",
"default": "#ffffff"
}
]
}
],
"presets": [
{
"name": "My Banner",
"category": "image",
"blocks": [
{
"type": "banner_block"
}
]
}
]
}
{% endschema %}