initial commit
This commit is contained in:
Gerhard Scheikl
@@ -0,0 +1,592 @@
|
||||
{% 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 %}
|
||||
Reference in New Issue
Block a user