592 lines
16 KiB
Plaintext
592 lines
16 KiB
Plaintext
{% doc %}
|
|
@prompt
|
|
Eine zweis-spaltige promotion für:
|
|
https://shop.linumiq.com/products/linumiq-smart-home-starter-kit-lite
|
|
und
|
|
https://shop.linumiq.com/products/linumiq-all-in-one-smart-home-starter-kit-1, zentriere das Element auf der website
|
|
{% enddoc %}
|
|
{% assign ai_gen_id = block.id | replace: '_', '' | downcase %}
|
|
|
|
{% style %}
|
|
.ai-two-column-promo-{{ ai_gen_id }} {
|
|
display: block;
|
|
/* Uses the setting value, which we've defaulted to 50 */
|
|
width: {{ block.settings.desktop_width_percent }}%;
|
|
max-width: 100%;
|
|
padding: {{ block.settings.section_padding }}px 0;
|
|
/* This centers the element */
|
|
margin: 0 auto;
|
|
}
|
|
|
|
.ai-two-column-promo__container-{{ ai_gen_id }} {
|
|
display: grid;
|
|
grid-template-columns: 1fr 1fr;
|
|
gap: {{ block.settings.column_gap }}px;
|
|
width: 100%;
|
|
}
|
|
|
|
.ai-two-column-promo__column-{{ ai_gen_id }} {
|
|
position: relative;
|
|
display: flex;
|
|
flex-direction: column;
|
|
background-color: {{ block.settings.card_background_color }};
|
|
border-radius: {{ block.settings.card_border_radius }}px;
|
|
overflow: hidden;
|
|
text-decoration: none;
|
|
color: inherit;
|
|
}
|
|
|
|
.ai-two-column-promo__image-wrapper-{{ ai_gen_id }} {
|
|
position: relative;
|
|
width: 100%;
|
|
padding-bottom: {{ block.settings.image_aspect_ratio }}%;
|
|
overflow: hidden;
|
|
}
|
|
|
|
.ai-two-column-promo__image-{{ ai_gen_id }} {
|
|
position: absolute;
|
|
top: 0;
|
|
left: 0;
|
|
width: 100%;
|
|
height: 100%;
|
|
object-fit: cover;
|
|
z-index: 1;
|
|
}
|
|
|
|
.ai-two-column-promo__image-wrapper-{{ ai_gen_id }} .card__badge.bottom.left {
|
|
position: absolute;
|
|
left: 12px;
|
|
bottom: 12px;
|
|
z-index: 3;
|
|
pointer-events: none;
|
|
}
|
|
|
|
.ai-two-column-promo__content-{{ ai_gen_id }} {
|
|
padding: {{ block.settings.content_padding }}px;
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 12px;
|
|
flex-grow: 1;
|
|
}
|
|
|
|
.ai-two-column-promo__title-{{ ai_gen_id }} {
|
|
margin: 0;
|
|
font-size: {{ block.settings.title_size }}px;
|
|
font-weight: 600;
|
|
color: {{ block.settings.text_color }};
|
|
line-height: 1.2;
|
|
}
|
|
|
|
.ai-two-column-promo__description-{{ ai_gen_id }} {
|
|
margin: 0;
|
|
font-size: {{ block.settings.description_size }}px;
|
|
color: {{ block.settings.text_color }};
|
|
line-height: 1.5;
|
|
}
|
|
|
|
.ai-two-column-promo__price-{{ ai_gen_id }} {
|
|
display: flex;
|
|
align-items: baseline;
|
|
gap: 10px;
|
|
font-size: {{ block.settings.price_size }}px;
|
|
font-weight: 600;
|
|
color: {{ block.settings.price_color }};
|
|
margin-top: auto;
|
|
}
|
|
|
|
.ai-two-column-promo__compare-price-{{ ai_gen_id }} {
|
|
font-size: {{ block.settings.price_size | times: 0.75 }}px;
|
|
font-weight: 400;
|
|
color: {{ block.settings.text_color }};
|
|
opacity: 0.7;
|
|
text-decoration: line-through;
|
|
white-space: nowrap;
|
|
}
|
|
|
|
.ai-two-column-promo__button-{{ ai_gen_id }} {
|
|
display: inline-flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
padding: 12px 24px;
|
|
background-color: {{ block.settings.button_background_color }};
|
|
color: {{ block.settings.button_text_color }};
|
|
border: none;
|
|
border-radius: {{ block.settings.button_border_radius }}px;
|
|
font-size: 14px;
|
|
font-weight: 600;
|
|
text-decoration: none;
|
|
cursor: pointer;
|
|
margin-top: 8px;
|
|
}
|
|
|
|
.ai-two-column-promo__button-{{ ai_gen_id }}:hover {
|
|
background-color: {{ block.settings.button_hover_color }};
|
|
}
|
|
|
|
.ai-two-column-promo__badge-{{ ai_gen_id }} {
|
|
position: absolute;
|
|
top: 16px;
|
|
right: 16px;
|
|
background-color: {{ block.settings.badge_background_color }};
|
|
color: {{ block.settings.badge_text_color }};
|
|
padding: 6px 12px;
|
|
border-radius: {{ block.settings.badge_border_radius }}px;
|
|
font-size: 12px;
|
|
font-weight: 600;
|
|
z-index: 2;
|
|
}
|
|
|
|
@media screen and (max-width: 749px) {
|
|
.ai-two-column-promo-{{ ai_gen_id }} {
|
|
/* Forces 100% width on mobile devices */
|
|
width: 100%;
|
|
}
|
|
|
|
.ai-two-column-promo__container-{{ ai_gen_id }} {
|
|
grid-template-columns: 1fr;
|
|
gap: {{ block.settings.column_gap | times: 0.75 }}px;
|
|
}
|
|
|
|
.ai-two-column-promo__title-{{ ai_gen_id }} {
|
|
font-size: {{ block.settings.title_size | times: 0.85 }}px;
|
|
}
|
|
|
|
.ai-two-column-promo__description-{{ ai_gen_id }} {
|
|
font-size: {{ block.settings.description_size | times: 0.9 }}px;
|
|
}
|
|
}
|
|
{% endstyle %}
|
|
|
|
<two-column-promo-{{ ai_gen_id }} class="ai-two-column-promo-{{ ai_gen_id }}" {{ block.shopify_attributes }}>
|
|
<div class="ai-two-column-promo__container-{{ ai_gen_id }}">
|
|
<a href="{{ block.settings.product_1.url }}" class="ai-two-column-promo__column-{{ ai_gen_id }}">
|
|
{% assign product_1_variant = block.settings.product_1.selected_or_first_available_variant %}
|
|
{% if block.settings.show_badge_1 and block.settings.badge_text_1 != blank %}
|
|
<div class="ai-two-column-promo__badge-{{ ai_gen_id }}">
|
|
{{ block.settings.badge_text_1 }}
|
|
</div>
|
|
{% endif %}
|
|
|
|
<div class="ai-two-column-promo__image-wrapper-{{ ai_gen_id }}">
|
|
{% if product_1_variant and product_1_variant.compare_at_price > product_1_variant.price %}
|
|
<div class="card__badge bottom left">
|
|
<span id="NoMediaStandardBadge-{{ ai_gen_id }}-product-1" class="badge badge--bottom-left color-scheme-4">Sale</span>
|
|
</div>
|
|
{% endif %}
|
|
{% if block.settings.product_1.featured_image %}
|
|
<img
|
|
src="{{ block.settings.product_1.featured_image | image_url: width: 800 }}"
|
|
alt="{{ block.settings.product_1.featured_image.alt | escape }}"
|
|
loading="lazy"
|
|
width="800"
|
|
height="{{ 800 | times: block.settings.image_aspect_ratio | divided_by: 100 }}"
|
|
class="ai-two-column-promo__image-{{ ai_gen_id }}"
|
|
>
|
|
{% else %}
|
|
<div class="ai-two-column-promo__image-{{ ai_gen_id }}">
|
|
{{ 'product-1' | placeholder_svg_tag }}
|
|
</div>
|
|
{% endif %}
|
|
</div>
|
|
|
|
<div class="ai-two-column-promo__content-{{ ai_gen_id }}">
|
|
{% if block.settings.product_1.title %}
|
|
<h3 class="ai-two-column-promo__title-{{ ai_gen_id }}">
|
|
{{ block.settings.product_1.title }}
|
|
</h3>
|
|
{% else %}
|
|
<h3 class="ai-two-column-promo__title-{{ ai_gen_id }}">
|
|
Produkt 1
|
|
</h3>
|
|
{% endif %}
|
|
|
|
{% if block.settings.custom_description_1 != blank %}
|
|
<p class="ai-two-column-promo__description-{{ ai_gen_id }}">
|
|
{{ block.settings.custom_description_1 }}
|
|
</p>
|
|
{% elsif block.settings.product_1.description %}
|
|
<p class="ai-two-column-promo__description-{{ ai_gen_id }}">
|
|
{{ block.settings.product_1.description | strip_html | truncate: 120 }}
|
|
</p>
|
|
{% endif %}
|
|
|
|
{% if block.settings.product_1.price %}
|
|
<div class="ai-two-column-promo__price-{{ ai_gen_id }}">
|
|
<span>{{ block.settings.product_1.price | money }}</span>
|
|
{% if product_1_variant and product_1_variant.compare_at_price > product_1_variant.price %}
|
|
<span class="ai-two-column-promo__compare-price-{{ ai_gen_id }}">
|
|
{{ product_1_variant.compare_at_price | money }}
|
|
</span>
|
|
{% endif %}
|
|
</div>
|
|
{% endif %}
|
|
|
|
{% if block.settings.show_button %}
|
|
<span class="ai-two-column-promo__button-{{ ai_gen_id }}">
|
|
{{ block.settings.button_text }}
|
|
</span>
|
|
{% endif %}
|
|
</div>
|
|
</a>
|
|
|
|
<a href="{{ block.settings.product_2.url }}" class="ai-two-column-promo__column-{{ ai_gen_id }}">
|
|
{% assign product_2_variant = block.settings.product_2.selected_or_first_available_variant %}
|
|
{% if block.settings.show_badge_2 and block.settings.badge_text_2 != blank %}
|
|
<div class="ai-two-column-promo__badge-{{ ai_gen_id }}">
|
|
{{ block.settings.badge_text_2 }}
|
|
</div>
|
|
{% endif %}
|
|
|
|
<div class="ai-two-column-promo__image-wrapper-{{ ai_gen_id }}">
|
|
{% if product_2_variant and product_2_variant.compare_at_price > product_2_variant.price %}
|
|
<div class="card__badge bottom left">
|
|
<span id="NoMediaStandardBadge-{{ ai_gen_id }}-product-2" class="badge badge--bottom-left color-scheme-4">Sale</span>
|
|
</div>
|
|
{% endif %}
|
|
{% if block.settings.product_2.featured_image %}
|
|
<img
|
|
src="{{ block.settings.product_2.featured_image | image_url: width: 800 }}"
|
|
alt="{{ block.settings.product_2.featured_image.alt | escape }}"
|
|
loading="lazy"
|
|
width="800"
|
|
height="{{ 800 | times: block.settings.image_aspect_ratio | divided_by: 100 }}"
|
|
class="ai-two-column-promo__image-{{ ai_gen_id }}"
|
|
>
|
|
{% else %}
|
|
<div class="ai-two-column-promo__image-{{ ai_gen_id }}">
|
|
{{ 'product-1' | placeholder_svg_tag }}
|
|
</div>
|
|
{% endif %}
|
|
</div>
|
|
|
|
<div class="ai-two-column-promo__content-{{ ai_gen_id }}">
|
|
{% if block.settings.product_2.title %}
|
|
<h3 class="ai-two-column-promo__title-{{ ai_gen_id }}">
|
|
{{ block.settings.product_2.title }}
|
|
</h3>
|
|
{% else %}
|
|
<h3 class="ai-two-column-promo__title-{{ ai_gen_id }}">
|
|
Produkt 2
|
|
</h3>
|
|
{% endif %}
|
|
|
|
{% if block.settings.custom_description_2 != blank %}
|
|
<p class="ai-two-column-promo__description-{{ ai_gen_id }}">
|
|
{{ block.settings.custom_description_2 }}
|
|
</p>
|
|
{% elsif block.settings.product_2.description %}
|
|
<p class="ai-two-column-promo__description-{{ ai_gen_id }}">
|
|
{{ block.settings.product_2.description | strip_html | truncate: 120 }}
|
|
</p>
|
|
{% endif %}
|
|
|
|
{% if block.settings.product_2.price %}
|
|
<div class="ai-two-column-promo__price-{{ ai_gen_id }}">
|
|
<span>{{ block.settings.product_2.price | money }}</span>
|
|
{% if product_2_variant and product_2_variant.compare_at_price > product_2_variant.price %}
|
|
<span class="ai-two-column-promo__compare-price-{{ ai_gen_id }}">
|
|
{{ product_2_variant.compare_at_price | money }}
|
|
</span>
|
|
{% endif %}
|
|
</div>
|
|
{% endif %}
|
|
|
|
{% if block.settings.show_button %}
|
|
<span class="ai-two-column-promo__button-{{ ai_gen_id }}">
|
|
{{ block.settings.button_text }}
|
|
</span>
|
|
{% endif %}
|
|
</div>
|
|
</a>
|
|
</div>
|
|
</two-column-promo-{{ ai_gen_id }}>
|
|
|
|
<script>
|
|
(function() {
|
|
if (!customElements.get('two-column-promo-{{ ai_gen_id }}')) {
|
|
class TwoColumnPromo{{ ai_gen_id }} extends HTMLElement {
|
|
constructor() {
|
|
super();
|
|
}
|
|
|
|
connectedCallback() {
|
|
this.columns = this.querySelectorAll('.ai-two-column-promo__column-{{ ai_gen_id }}');
|
|
this.setupEventListeners();
|
|
}
|
|
|
|
setupEventListeners() {
|
|
this.columns.forEach((column) => {
|
|
column.addEventListener('mouseenter', () => {
|
|
column.style.transform = 'translateY(-4px)';
|
|
column.style.transition = 'transform 0.3s ease';
|
|
});
|
|
|
|
column.addEventListener('mouseleave', () => {
|
|
column.style.transform = 'translateY(0)';
|
|
});
|
|
});
|
|
}
|
|
}
|
|
customElements.define('two-column-promo-{{ ai_gen_id }}', TwoColumnPromo{{ ai_gen_id }});
|
|
}
|
|
})();
|
|
</script>
|
|
|
|
{% schema %}
|
|
{
|
|
"name": "Zweispaltige Promotion",
|
|
"settings": [
|
|
{
|
|
"type": "header",
|
|
"content": "Produkt 1"
|
|
},
|
|
{
|
|
"type": "product",
|
|
"id": "product_1",
|
|
"label": "Produkt"
|
|
},
|
|
{
|
|
"type": "textarea",
|
|
"id": "custom_description_1",
|
|
"label": "Benutzerdefinierte Beschreibung"
|
|
},
|
|
{
|
|
"type": "checkbox",
|
|
"id": "show_badge_1",
|
|
"label": "Badge anzeigen",
|
|
"default": false
|
|
},
|
|
{
|
|
"type": "text",
|
|
"id": "badge_text_1",
|
|
"label": "Badge-Text",
|
|
"default": "Neu"
|
|
},
|
|
{
|
|
"type": "header",
|
|
"content": "Produkt 2"
|
|
},
|
|
{
|
|
"type": "product",
|
|
"id": "product_2",
|
|
"label": "Produkt"
|
|
},
|
|
{
|
|
"type": "textarea",
|
|
"id": "custom_description_2",
|
|
"label": "Benutzerdefinierte Beschreibung"
|
|
},
|
|
{
|
|
"type": "checkbox",
|
|
"id": "show_badge_2",
|
|
"label": "Badge anzeigen",
|
|
"default": false
|
|
},
|
|
{
|
|
"type": "text",
|
|
"id": "badge_text_2",
|
|
"label": "Badge-Text",
|
|
"default": "Beliebt"
|
|
},
|
|
{
|
|
"type": "header",
|
|
"content": "Layout"
|
|
},
|
|
{
|
|
"type": "range",
|
|
"id": "desktop_width_percent",
|
|
"label": "Desktop-Breite",
|
|
"min": 10,
|
|
"max": 100,
|
|
"step": 5,
|
|
"unit": "%",
|
|
"default": 50
|
|
},
|
|
{
|
|
"type": "range",
|
|
"id": "column_gap",
|
|
"label": "Spaltenabstand",
|
|
"min": 0,
|
|
"max": 60,
|
|
"step": 4,
|
|
"unit": "px",
|
|
"default": 24
|
|
},
|
|
{
|
|
"type": "range",
|
|
"id": "section_padding",
|
|
"label": "Abstand oben/unten",
|
|
"min": 0,
|
|
"max": 100,
|
|
"step": 4,
|
|
"unit": "px",
|
|
"default": 40
|
|
},
|
|
{
|
|
"type": "range",
|
|
"id": "content_padding",
|
|
"label": "Innenabstand",
|
|
"min": 12,
|
|
"max": 48,
|
|
"step": 4,
|
|
"unit": "px",
|
|
"default": 24
|
|
},
|
|
{
|
|
"type": "range",
|
|
"id": "image_aspect_ratio",
|
|
"label": "Bild-Seitenverhältnis",
|
|
"min": 50,
|
|
"max": 150,
|
|
"step": 5,
|
|
"unit": "%",
|
|
"default": 100
|
|
},
|
|
{
|
|
"type": "header",
|
|
"content": "Typografie"
|
|
},
|
|
{
|
|
"type": "range",
|
|
"id": "title_size",
|
|
"label": "Titelgröße",
|
|
"min": 16,
|
|
"max": 40,
|
|
"step": 2,
|
|
"unit": "px",
|
|
"default": 24
|
|
},
|
|
{
|
|
"type": "range",
|
|
"id": "description_size",
|
|
"label": "Beschreibungsgröße",
|
|
"min": 12,
|
|
"max": 20,
|
|
"step": 1,
|
|
"unit": "px",
|
|
"default": 14
|
|
},
|
|
{
|
|
"type": "range",
|
|
"id": "price_size",
|
|
"label": "Preisgröße",
|
|
"min": 14,
|
|
"max": 28,
|
|
"step": 2,
|
|
"unit": "px",
|
|
"default": 20
|
|
},
|
|
{
|
|
"type": "header",
|
|
"content": "Farben"
|
|
},
|
|
{
|
|
"type": "color",
|
|
"id": "card_background_color",
|
|
"label": "Kartenhintergrund",
|
|
"default": "#ffffff"
|
|
},
|
|
{
|
|
"type": "color",
|
|
"id": "text_color",
|
|
"label": "Textfarbe",
|
|
"default": "#121212"
|
|
},
|
|
{
|
|
"type": "color",
|
|
"id": "price_color",
|
|
"label": "Preisfarbe",
|
|
"default": "#121212"
|
|
},
|
|
{
|
|
"type": "header",
|
|
"content": "Button"
|
|
},
|
|
{
|
|
"type": "checkbox",
|
|
"id": "show_button",
|
|
"label": "Button anzeigen",
|
|
"default": true
|
|
},
|
|
{
|
|
"type": "text",
|
|
"id": "button_text",
|
|
"label": "Button-Text",
|
|
"default": "Jetzt kaufen"
|
|
},
|
|
{
|
|
"type": "color",
|
|
"id": "button_background_color",
|
|
"label": "Hintergrundfarbe",
|
|
"default": "#121212"
|
|
},
|
|
{
|
|
"type": "color",
|
|
"id": "button_text_color",
|
|
"label": "Textfarbe",
|
|
"default": "#ffffff"
|
|
},
|
|
{
|
|
"type": "color",
|
|
"id": "button_hover_color",
|
|
"label": "Hover-Farbe",
|
|
"default": "#334fb4"
|
|
},
|
|
{
|
|
"type": "range",
|
|
"id": "button_border_radius",
|
|
"label": "Eckenradius",
|
|
"min": 0,
|
|
"max": 40,
|
|
"step": 2,
|
|
"unit": "px",
|
|
"default": 0
|
|
},
|
|
{
|
|
"type": "header",
|
|
"content": "Badge"
|
|
},
|
|
{
|
|
"type": "color",
|
|
"id": "badge_background_color",
|
|
"label": "Hintergrundfarbe",
|
|
"default": "#334fb4"
|
|
},
|
|
{
|
|
"type": "color",
|
|
"id": "badge_text_color",
|
|
"label": "Textfarbe",
|
|
"default": "#ffffff"
|
|
},
|
|
{
|
|
"type": "range",
|
|
"id": "badge_border_radius",
|
|
"label": "Eckenradius",
|
|
"min": 0,
|
|
"max": 40,
|
|
"step": 2,
|
|
"unit": "px",
|
|
"default": 40
|
|
},
|
|
{
|
|
"type": "header",
|
|
"content": "Stil"
|
|
},
|
|
{
|
|
"type": "range",
|
|
"id": "card_border_radius",
|
|
"label": "Karten-Eckenradius",
|
|
"min": 0,
|
|
"max": 40,
|
|
"step": 2,
|
|
"unit": "px",
|
|
"default": 0
|
|
}
|
|
],
|
|
"presets": [
|
|
{
|
|
"name": "Zweispaltige Promotion"
|
|
}
|
|
]
|
|
}
|
|
{% endschema %} |