Lieferdatum Hinweis im Warenkorb - Shopify

{% schema %}
{
“name”: “Lieferdatum”,
“settings”: [
{
“type”: “color”,
“id”: “background_color”,
“label”: “Hintergrundfarbe”,
“default”: “#ffffff”
},
{
“type”: “select”,
“id”: “icon”,
“label”: “Icon”,
“options”: [
{ “value”: “truck”, “label”: “LKW” },
{ “value”: “box”, “label”: “Box” },
{ “value”: “clock”, “label”: “Uhr” },
{ “value”: “calendar”, “label”: “Kalender” },
{ “value”: “ship”, “label”: “Schiff” },
{ “value”: “plane”, “label”: “Flugzeug” },
{ “value”: “bike”, “label”: “Fahrrad” },
{ “value”: “car”, “label”: “Auto” },
{ “value”: “package”, “label”: “Paket” },
{ “value”: “delivery-man”, “label”: “Lieferant” },
{ “value”: “check”, “label”: “Haken” },
{ “value”: “check-circle”, “label”: “Haken im Kreis” },
{ “value”: “thumbs-up”, “label”: “Daumen hoch” }
],
“default”: “truck”
},
{
“type”: “color”,
“id”: “container_background_color”,
“label”: “Hintergrundfarbe des Containers”,
“default”: “#f5f5f5”
},
{
“type”: “range”,
“id”: “border_radius”,
“label”: “Eckenradius des Containers”,
“default”: 10,
“min”: 0,
“max”: 50,
“unit”: “px”
},
{
“type”: “range”,
“id”: “padding_container”,
“label”: “Abstand im Container”,
“default”: 20,
“min”: 0,
“max”: 50,
“unit”: “px”
},
{
“type”: “color”,
“id”: “icon_color”,
“label”: “Farbe des Icons”,
“default”: “#000000”
},
{
“type”: “range”,
“id”: “icon_size”,
“label”: “Größe des Icons”,
“default”: 24,
“min”: 10,
“max”: 100,
“unit”: “px”
},
{
“type”: “select”,
“id”: “font_family”,
“label”: “Schriftart”,
“options”: [
{ “value”: “Arial, sans-serif”, “label”: “Arial” },
{ “value”: “‘Times New Roman’, serif”, “label”: “Times New Roman” },
{ “value”: “‘Courier New’, monospace”, “label”: “Courier New” },
{ “value”: “‘Georgia’, serif”, “label”: “Georgia” },
{ “value”: “‘Verdana’, sans-serif”, “label”: “Verdana” },
{ “value”: “‘Trebuchet MS’, sans-serif”, “label”: “Trebuchet MS” },
{ “value”: “‘Lucida Sans’, sans-serif”, “label”: “Lucida Sans” },
{ “value”: “‘Tahoma’, sans-serif”, “label”: “Tahoma” },
{ “value”: “‘Comic Sans MS’, cursive, sans-serif”, “label”: “Comic Sans MS” },
{ “value”: “‘Impact’, sans-serif”, “label”: “Impact” },
{ “value”: “‘Helvetica’, sans-serif”, “label”: “Helvetica” },
{ “value”: “‘Roboto’, sans-serif”, “label”: “Roboto” },
{ “value”: “‘Open Sans’, sans-serif”, “label”: “Open Sans” },
{ “value”: “‘Lato’, sans-serif”, “label”: “Lato” },
{ “value”: “‘Montserrat’, sans-serif”, “label”: “Montserrat” },
{ “value”: “‘Oswald’, sans-serif”, “label”: “Oswald” },
{ “value”: “‘Raleway’, sans-serif”, “label”: “Raleway” },
{ “value”: “‘Merriweather’, serif”, “label”: “Merriweather” }
],
“default”: “Arial, sans-serif”
},
{
“type”: “color”,
“id”: “font_color”,
“label”: “Schriftfarbe”,
“default”: “#000000”
},
{
“type”: “range”,
“id”: “font_size”,
“label”: “Schriftgröße”,
“default”: 18,
“min”: 10,
“max”: 36,
“unit”: “px”
},
{
“type”: “range”,
“id”: “delivery_days”,
“label”: “Lieferzeit in Tagen”,
“default”: 3,
“min”: 1,
“max”: 30
},
{
“type”: “text”,
“id”: “text”,
“label”: “Text”,
“default”: “Gute Wahl! Deine Bestellung ist spätestens am <b>(Datum)</b> in deinen Händen.”
},
{
“type”: “select”,
“id”: “alignment”,
“label”: “Ausrichtung”,
“options”: [
{ “value”: “left”, “label”: “Links” },
{ “value”: “center”, “label”: “Mittig” },
{ “value”: “right”, “label”: “Rechts” }
],
“default”: “left”
},
{
“type”: “range”,
“id”: “padding_top_bottom”,
“label”: “Padding oben/unten”,
“default”: 20,
“min”: 0,
“max”: 100,
“unit”: “px”
},
{
“type”: “range”,
“id”: “padding_left”,
“label”: “Padding links (für Links-Ausrichtung)”,
“default”: 20,
“min”: 0,
“max”: 100,
“unit”: “px”
},
{
“type”: “range”,
“id”: “padding_right”,
“label”: “Padding rechts (für Rechts-Ausrichtung)”,
“default”: 20,
“min”: 0,
“max”: 100,
“unit”: “px”
},
{
“type”: “range”,
“id”: “mobile_padding”,
“label”: “Mobiles Padding links/rechts”,
“default”: 0,
“min”: 0,
“max”: 100,
“unit”: “px”
}
],
“presets”: [
{
“name”: “sayweb – voraussichtliche Lieferung”,
“category”: “Info”
}
]
}
{% endschema %}

<style>
.estimated-delivery {
display: flex;
align-items: center;
padding-top: {{ section.settings.padding_top_bottom }}px;
padding-bottom: {{ section.settings.padding_top_bottom }}px;
background-color: {{ section.settings.background_color }};
}

.estimated-delivery–left {
justify-content: flex-start;
padding-left: {{ section.settings.padding_left }}px;
}

.estimated-delivery–center {
justify-content: center;
padding-left: {{ section.settings.mobile_padding }}px;
padding-right: {{ section.settings.mobile_padding }}px;
}

.estimated-delivery–right {
justify-content: flex-end;
padding-right: {{ section.settings.padding_right }}px;
}

.estimated-delivery__icon {
margin-right: 15px;
}

.estimated-delivery__icon svg {
width: {{ section.settings.icon_size }}px;
height: auto;
fill: {{ section.settings.icon_color }};
}

.estimated-delivery__text {
font-size: {{ section.settings.font_size }}px;
color: {{ section.settings.font_color }};
font-family: {{ section.settings.font_family }};
}

.estimated-delivery__container {
border-radius: {{ section.settings.border_radius }}px;
background-color: {{ section.settings.container_background_color }};
padding: {{ section.settings.padding_container }}px;
display: flex;
align-items: center;
}

/* Media Queries for Mobile */
@media (max-width: 767px) {
.estimated-delivery {
justify-content: center;
padding-left: {{ section.settings.mobile_padding }}px;
padding-right: {{ section.settings.mobile_padding }}px;
}
}
</style>
<a href=”https://sayweb.de” style=”display:none;”>Sayweb Webagentur</a>

{% assign delivery_days = section.settings.delivery_days | default: 3 %}
{% assign delivery_days_in_seconds = delivery_days | times: 86400 %}
{% assign delivery_timestamp = ‘now’ | date: ‘%s’ | plus: delivery_days_in_seconds %}
{% assign delivery_date = delivery_timestamp | date: “%d.%m.%Y” %}

{% assign icon_svg = ” %}
{% case section.settings.icon %}
{% when ‘truck’ %}
{% assign icon_svg = ‘<svg xmlns=”http://www.w3.org/2000/svg” viewBox=”0 0 640 512″><path d=”M624 368h-16V256c0-17.7-14.3-32-32-32h-85.3l-75-99.9C408.8 110.6 390.5 96 369.9 96H352V64c0-17.7-14.3-32-32-32H64C46.3 32 32 46.3 32 64v304H16c-8.8 0-16 7.2-16 16v48c0 44.2 35.8 80 80 80s80-35.8 80-80v-16h256v16c0 44.2 35.8 80 80 80s80-35.8 80-80v-16h16c8.8 0 16-7.2 16-16v-48c0-8.8-7.2-16-16-16zM80 416c-17.7 0-32-14.3-32-32v-16h64v16c0 17.7-14.3 32-32 32zm464 0c-17.7 0-32-14.3-32-32v-16h64v16c0 17.7-14.3 32-32 32zM544 288h-96V192h96v96z”/></svg>’ %}
{% when ‘box’ %}
{% assign icon_svg = ‘<svg xmlns=”http://www.w3.org/2000/svg” viewBox=”0 0 448 512″><path d=”M50.7 129.9L224 208.6l173.3-78.7c4.2-1.9 6.7-6.1 6.7-10.6V80c0-17.7-14.3-32-32-32H76c-17.7 0-32 14.3-32 32v39.3c0 4.5 2.5 8.7 6.7 10.6zM448 144.1L224 242.6 0 144.1V400c0 17.7 14.3 32 32 32h384c17.7 0 32-14.3 32-32V144.1z”/></svg>’ %}
{% when ‘clock’ %}
{% assign icon_svg = ‘<svg xmlns=”http://www.w3.org/2000/svg” viewBox=”0 0 512 512″><path d=”M256 8C119 8 8 119 8 256s111 248 248 248 248-111 248-248S393 8 256 8zm64 264H256c-8.8 0-16-7.2-16-16V136c0-8.8 7.2-16 16-16s16 7.2 16 16v104h64c8.8 0 16 7.2 16 16s-7.2 16-16 16z”/></svg>’ %}
<!– Add other icons as needed –>
{% endcase %}

{% if cart.item_count > 0 %}
<!– Sichtbar für Website-Besucher, wenn Produkte im Warenkorb sind –>
<div class=”estimated-delivery estimated-delivery–{{ section.settings.alignment }}”>
<div class=”estimated-delivery__container”>
{% if icon_svg != ” %}
<div class=”estimated-delivery__icon”>
{{ icon_svg }}
</div>
{% endif %}
<div class=”estimated-delivery__text”>
{{ section.settings.text | replace: ‘(Datum)’, delivery_date }}
</div>
</div>
</div>
{% endif %}

{% comment %}
Sichtbar im Theme-Editor unabhängig vom Warenkorb
{% endcomment %}
{% if shopify.theme.editor %}
<div class=”estimated-delivery estimated-delivery–{{ section.settings.alignment }}”>
<div class=”estimated-delivery__container”>
{% if icon_svg != ” %}
<div class=”estimated-delivery__icon”>
{{ icon_svg }}
</div>
{% endif %}
<div class=”estimated-delivery__text”>
{{ section.settings.text | replace: ‘(Datum)’, delivery_date }}
</div>
</div>
</div>
{% endif %}