Ursprüngliches gift_card.liquid

Gelöst
CelineAlessa
Neues Mitglied
5 0 0

Hallo zusammen,

kann mir jemand helfen und mir eventuell den ursprünglichen html oder ccs Code für das Theme

gift_card.liquid

geben?

 

Durch das ständige umschreiben des Codes funktioniert leider nichts mehr und würde gerne wieder zum ursprünglichen Template zurück! 

 

Vielen Dank Euch!

 

Eure Celine 

1 AKZEPTIERTE LÖSUNG

Anerkannte Lösungen
Gabe
Shopify Staff
5389 934 1279

Erfolg.

@CelineAlessa 

 

Um welches standard Layout geht es? Hast du ein Beispiel (Bildschirmabgriff?) wie es war und wie es jetzt ist?

 

Und was genau wurde geändert? Siehe unten ein frischer Code aber ob er bei Euch der richtige ist kann ich nicht bestätigen. Diesen kannst du in einer kopie testen.

 

Du kannst auch eine frische Kopie deines Themes nochmal zum Shop hinzufügen und darin findest du den frischen Gift Card Code.

 

Spoiler

{% layout none %}

<!doctype html>
<html lang="{{ request.locale.iso_code }}">
<head>
<script src="{{ 'vendor/qrcode.js' | shopify_asset_url }}" defer></script>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width,initial-scale=1">
<meta name="theme-color" content="{{ settings.color_background }}">
<link rel="canonical" href="{{ canonical_url }}">
<link rel="preconnect" href="https://cdn.shopify.com" crossorigin>

{%- if settings.favicon != blank -%}
<link rel="icon" type="image/png" href="{{ settings.favicon | img_url: '32x32' }}">
{%- endif -%}

{%- unless settings.type_header_font.system? -%}
<link rel="preconnect" href="https://fonts.shopifycdn.com" crossorigin>
{%- endunless -%}

{%- assign formatted_initial_value = gift_card.initial_value | money_without_trailing_zeros | strip_html -%}

<title>{{ 'gift_cards.issued.title' | t: value: formatted_initial_value, shop: shop.name }}</title>

<meta name="description" content="{{ 'gift_cards.issued.subtext' | t }}">

{{ content_for_header }}

{%- liquid
assign body_font_bold = settings.type_body_font | font_modify: 'weight', 'bold'
assign body_font_italic = settings.type_body_font | font_modify: 'style', 'italic'
assign body_font_bold_italic = body_font_bold | font_modify: 'style', 'italic'
%}

{% style %}
{{ settings.type_body_font | font_face: font_display: 'swap' }}
{{ body_font_bold | font_face: font_display: 'swap' }}
{{ body_font_italic | font_face: font_display: 'swap' }}
{{ body_font_bold_italic | font_face: font_display: 'swap' }}
{{ settings.type_header_font | font_face: font_display: 'swap' }}

:root {
--font-body-family: {{ settings.type_body_font.family }}, {{ settings.type_body_font.fallback_families }};
--font-body-style: {{ settings.type_body_font.style }};
--font-body-weight: {{ settings.type_body_font.weight }};

--font-heading-family: {{ settings.type_header_font.family }}, {{ settings.type_header_font.fallback_families }};
--font-heading-style: {{ settings.type_header_font.style }};
--font-heading-weight: {{ settings.type_header_font.weight }};

--color-base-text: {{ settings.colors_text.red }}, {{ settings.colors_text.green }}, {{ settings.colors_text.blue }};
--color-base-background-1: {{ settings.colors_background_1.red }}, {{ settings.colors_background_1.green }}, {{ settings.colors_background_1.blue }};
--color-base-background-2: {{ settings.colors_background_2.red }}, {{ settings.colors_background_2.green }}, {{ settings.colors_background_2.blue }};
--color-base-solid-button-labels: {{ settings.colors_solid_button_labels.red }}, {{ settings.colors_solid_button_labels.green }}, {{ settings.colors_solid_button_labels.blue }};
--color-base-outline-button-labels: {{ settings.colors_outline_button_labels.red }}, {{ settings.colors_outline_button_labels.green }}, {{ settings.colors_outline_button_labels.blue }};
--color-base-accent-1: {{ settings.colors_accent_1.red }}, {{ settings.colors_accent_1.green }}, {{ settings.colors_accent_1.blue }};
--color-base-accent-2: {{ settings.colors_accent_2.red }}, {{ settings.colors_accent_2.green }}, {{ settings.colors_accent_2.blue }};

--gradient-base-background-1: {% if settings.gradient_background_1 != blank %}{{ settings.gradient_background_1 }}{% else %}{{ settings.colors_background_1 }}{% endif %};

--page-width: {{ settings.page_width | divided_by: 10 }}rem;
}
{% endstyle %}

{%- unless settings.type_body_font.system? -%}
<link rel="preload" as="font" href="{{ settings.type_body_font | font_url }}" type="font/woff2" crossorigin>
{%- endunless -%}
{%- unless settings.type_header_font.system? -%}
<link rel="preload" as="font" href="{{ settings.type_header_font | font_url }}" type="font/woff2" crossorigin>
{%- endunless -%}

{{ 'template-giftcard.css' | asset_url | stylesheet_tag }}
</head>

<body class="gradient">
<header class="gift-card__title">
<span class="h2">{{ shop.name }}</span>
<h1 class="gift-card__heading">{{ 'gift_cards.issued.subtext' | t }}</h1>
<div class="gift-card__price">
<p>
{% if settings.currency_code_enabled %}
{{ gift_card.initial_value | money_with_currency }}
{% else %}
{{ gift_card.initial_value | money }}
{% endif %}
</p>
{%- if gift_card.enabled == false or gift_card.expired -%}
<p class="gift-card__label badge badge--{{ settings.sold_out_badge_color_scheme }}">{{ 'gift_cards.issued.expired' | t }}</p>
{%- endif -%}
</div>

{% if settings.currency_code_enabled %}
{%- assign gift_card_balance = gift_card.balance | money_with_currency -%}
{% else %}
{%- assign gift_card_balance = gift_card.balance | money -%}
{% endif %}
{%- if gift_card.balance != gift_card.initial_value -%}
<p class="gift-card__label caption-large">{{ 'gift_cards.issued.remaining_html' | t: balance: gift_card_balance }}</p>
{%- endif -%}
</header>

<main class="gift-card">
<div class="gift-card__image-wrapper">
<img src="{{ 'gift-card/card.svg' | shopify_asset_url }}" alt="" class="gift-card__image" height="{{ 570 | divided_by: 1.5 }}" width="570" loading="lazy">
</div>
<div class="gift-card__qr-code" data-identifier="{{ gift_card.qr_identifier }}"></div>
<div class="gift-card__information">
<input
type="text"
class="gift-card__number"
value="{{ gift_card.code | format_code }}"
aria-label="{{ 'gift_cards.issued.gift_card_code' | t }}"
readonly
>
<div class="gift-card__copy-code">
<button class="link gift-card__copy-link">{{ 'gift_cards.issued.copy_code' | t }}</button>
<span class="gift-card__copy-success form__message" role="status"></span>
<template>
{%- render 'icon-success' -%}{{ 'gift_cards.issued.copy_code_success' | t }}
</template>
</div>
{%- if gift_card.pass_url -%}
<a href="{{ gift_card.pass_url }}" class="gift_card__apple-wallet">
<img src="{{ 'gift-card/add-to-apple-wallet.svg' | shopify_asset_url }}" width="120" height="40" alt="{{ 'gift_cards.issued.add_to_apple_wallet' | t }}" loading="lazy">
</a>
{%- endif -%}
<div class="gift-card__buttons no-print">
<a
href="{{ shop.url }}"
class="button"
target="_blank"
rel="noopener"
aria-describedby="a11y-new-window-message"
>
{{ 'gift_cards.issued.shop_link' | t }}
</a>
<button
class="button button--secondary"
onclick="window.print();"
>
{{ 'gift_cards.issued.print_gift_card' | t }}
</button>
</div>
</div>
</main>

<div hidden>
<span id="a11y-new-window-message">{{ 'accessibility.link_messages.new_window' | t }}</span>
</div>
</body>
</html>

<script>
var string = { qrImageAlt: {{ 'gift_cards.issued.qr_image_alt' | t | json }} };
document.addEventListener('DOMContentLoaded', function() {
new QRCode( document.querySelector('.gift-card__qr-code'), {
text: document.querySelector('.gift-card__qr-code').dataset.identifier,
width: 120,
height: 120,
imageAltText: string.qrImageAlt
});
});

var template = document.getElementsByTagName("template")[0];
var clonedTemplate = template.content.cloneNode(true);

var isMessageDisplayed = false
document
.querySelector('.gift-card__copy-link')
.addEventListener('click', () => {
navigator.clipboard.writeText(document.querySelector('.gift-card__number').value).then(function () {
if (!isMessageDisplayed) {
document.querySelector('.gift-card__copy-success').appendChild(clonedTemplate);
isMessageDisplayed = true
}
});
});
</script>

 

Gabe | Social Care @ Shopify
 - War meine Antwort hilfreich? Klicke Like um es mich wissen zu lassen! 
 - Wurde deine Frage beantwortet? Markiere es als Akzeptierte Lösung 
 - Um mehr zu erfahren, besuche das Shopify Help Center oder den Shopify Blog

Lösung in ursprünglichem Beitrag anzeigen

5 ANTWORTEN 5
Gabe
Shopify Staff
5389 934 1279

Hey Celine! @CelineAlessa 

 

Dein gift_card.liquid dürftest du wie folgt zum Original Code zurücksetzen können. Siehe meine Schritte im eigenen Testshop hier:

 

image.png

 

Gabe | Social Care @ Shopify
 - War meine Antwort hilfreich? Klicke Like um es mich wissen zu lassen! 
 - Wurde deine Frage beantwortet? Markiere es als Akzeptierte Lösung 
 - Um mehr zu erfahren, besuche das Shopify Help Center oder den Shopify Blog

CelineAlessa
Neues Mitglied
5 0 0

Hey Gabe,

 

vielen lieben Dank für deine Hilfe :)

Lieder reicht die "Dropdown-Liste" nicht weit genug zurück, um auf das ursprüngliche Standard Layout zu kommen.. 

Hast du noch eine Idee wie ich das lösen könnte? 

 

 

Gabe
Shopify Staff
5389 934 1279

Erfolg.

@CelineAlessa 

 

Um welches standard Layout geht es? Hast du ein Beispiel (Bildschirmabgriff?) wie es war und wie es jetzt ist?

 

Und was genau wurde geändert? Siehe unten ein frischer Code aber ob er bei Euch der richtige ist kann ich nicht bestätigen. Diesen kannst du in einer kopie testen.

 

Du kannst auch eine frische Kopie deines Themes nochmal zum Shop hinzufügen und darin findest du den frischen Gift Card Code.

 

Spoiler

{% layout none %}

<!doctype html>
<html lang="{{ request.locale.iso_code }}">
<head>
<script src="{{ 'vendor/qrcode.js' | shopify_asset_url }}" defer></script>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width,initial-scale=1">
<meta name="theme-color" content="{{ settings.color_background }}">
<link rel="canonical" href="{{ canonical_url }}">
<link rel="preconnect" href="https://cdn.shopify.com" crossorigin>

{%- if settings.favicon != blank -%}
<link rel="icon" type="image/png" href="{{ settings.favicon | img_url: '32x32' }}">
{%- endif -%}

{%- unless settings.type_header_font.system? -%}
<link rel="preconnect" href="https://fonts.shopifycdn.com" crossorigin>
{%- endunless -%}

{%- assign formatted_initial_value = gift_card.initial_value | money_without_trailing_zeros | strip_html -%}

<title>{{ 'gift_cards.issued.title' | t: value: formatted_initial_value, shop: shop.name }}</title>

<meta name="description" content="{{ 'gift_cards.issued.subtext' | t }}">

{{ content_for_header }}

{%- liquid
assign body_font_bold = settings.type_body_font | font_modify: 'weight', 'bold'
assign body_font_italic = settings.type_body_font | font_modify: 'style', 'italic'
assign body_font_bold_italic = body_font_bold | font_modify: 'style', 'italic'
%}

{% style %}
{{ settings.type_body_font | font_face: font_display: 'swap' }}
{{ body_font_bold | font_face: font_display: 'swap' }}
{{ body_font_italic | font_face: font_display: 'swap' }}
{{ body_font_bold_italic | font_face: font_display: 'swap' }}
{{ settings.type_header_font | font_face: font_display: 'swap' }}

:root {
--font-body-family: {{ settings.type_body_font.family }}, {{ settings.type_body_font.fallback_families }};
--font-body-style: {{ settings.type_body_font.style }};
--font-body-weight: {{ settings.type_body_font.weight }};

--font-heading-family: {{ settings.type_header_font.family }}, {{ settings.type_header_font.fallback_families }};
--font-heading-style: {{ settings.type_header_font.style }};
--font-heading-weight: {{ settings.type_header_font.weight }};

--color-base-text: {{ settings.colors_text.red }}, {{ settings.colors_text.green }}, {{ settings.colors_text.blue }};
--color-base-background-1: {{ settings.colors_background_1.red }}, {{ settings.colors_background_1.green }}, {{ settings.colors_background_1.blue }};
--color-base-background-2: {{ settings.colors_background_2.red }}, {{ settings.colors_background_2.green }}, {{ settings.colors_background_2.blue }};
--color-base-solid-button-labels: {{ settings.colors_solid_button_labels.red }}, {{ settings.colors_solid_button_labels.green }}, {{ settings.colors_solid_button_labels.blue }};
--color-base-outline-button-labels: {{ settings.colors_outline_button_labels.red }}, {{ settings.colors_outline_button_labels.green }}, {{ settings.colors_outline_button_labels.blue }};
--color-base-accent-1: {{ settings.colors_accent_1.red }}, {{ settings.colors_accent_1.green }}, {{ settings.colors_accent_1.blue }};
--color-base-accent-2: {{ settings.colors_accent_2.red }}, {{ settings.colors_accent_2.green }}, {{ settings.colors_accent_2.blue }};

--gradient-base-background-1: {% if settings.gradient_background_1 != blank %}{{ settings.gradient_background_1 }}{% else %}{{ settings.colors_background_1 }}{% endif %};

--page-width: {{ settings.page_width | divided_by: 10 }}rem;
}
{% endstyle %}

{%- unless settings.type_body_font.system? -%}
<link rel="preload" as="font" href="{{ settings.type_body_font | font_url }}" type="font/woff2" crossorigin>
{%- endunless -%}
{%- unless settings.type_header_font.system? -%}
<link rel="preload" as="font" href="{{ settings.type_header_font | font_url }}" type="font/woff2" crossorigin>
{%- endunless -%}

{{ 'template-giftcard.css' | asset_url | stylesheet_tag }}
</head>

<body class="gradient">
<header class="gift-card__title">
<span class="h2">{{ shop.name }}</span>
<h1 class="gift-card__heading">{{ 'gift_cards.issued.subtext' | t }}</h1>
<div class="gift-card__price">
<p>
{% if settings.currency_code_enabled %}
{{ gift_card.initial_value | money_with_currency }}
{% else %}
{{ gift_card.initial_value | money }}
{% endif %}
</p>
{%- if gift_card.enabled == false or gift_card.expired -%}
<p class="gift-card__label badge badge--{{ settings.sold_out_badge_color_scheme }}">{{ 'gift_cards.issued.expired' | t }}</p>
{%- endif -%}
</div>

{% if settings.currency_code_enabled %}
{%- assign gift_card_balance = gift_card.balance | money_with_currency -%}
{% else %}
{%- assign gift_card_balance = gift_card.balance | money -%}
{% endif %}
{%- if gift_card.balance != gift_card.initial_value -%}
<p class="gift-card__label caption-large">{{ 'gift_cards.issued.remaining_html' | t: balance: gift_card_balance }}</p>
{%- endif -%}
</header>

<main class="gift-card">
<div class="gift-card__image-wrapper">
<img src="{{ 'gift-card/card.svg' | shopify_asset_url }}" alt="" class="gift-card__image" height="{{ 570 | divided_by: 1.5 }}" width="570" loading="lazy">
</div>
<div class="gift-card__qr-code" data-identifier="{{ gift_card.qr_identifier }}"></div>
<div class="gift-card__information">
<input
type="text"
class="gift-card__number"
value="{{ gift_card.code | format_code }}"
aria-label="{{ 'gift_cards.issued.gift_card_code' | t }}"
readonly
>
<div class="gift-card__copy-code">
<button class="link gift-card__copy-link">{{ 'gift_cards.issued.copy_code' | t }}</button>
<span class="gift-card__copy-success form__message" role="status"></span>
<template>
{%- render 'icon-success' -%}{{ 'gift_cards.issued.copy_code_success' | t }}
</template>
</div>
{%- if gift_card.pass_url -%}
<a href="{{ gift_card.pass_url }}" class="gift_card__apple-wallet">
<img src="{{ 'gift-card/add-to-apple-wallet.svg' | shopify_asset_url }}" width="120" height="40" alt="{{ 'gift_cards.issued.add_to_apple_wallet' | t }}" loading="lazy">
</a>
{%- endif -%}
<div class="gift-card__buttons no-print">
<a
href="{{ shop.url }}"
class="button"
target="_blank"
rel="noopener"
aria-describedby="a11y-new-window-message"
>
{{ 'gift_cards.issued.shop_link' | t }}
</a>
<button
class="button button--secondary"
onclick="window.print();"
>
{{ 'gift_cards.issued.print_gift_card' | t }}
</button>
</div>
</div>
</main>

<div hidden>
<span id="a11y-new-window-message">{{ 'accessibility.link_messages.new_window' | t }}</span>
</div>
</body>
</html>

<script>
var string = { qrImageAlt: {{ 'gift_cards.issued.qr_image_alt' | t | json }} };
document.addEventListener('DOMContentLoaded', function() {
new QRCode( document.querySelector('.gift-card__qr-code'), {
text: document.querySelector('.gift-card__qr-code').dataset.identifier,
width: 120,
height: 120,
imageAltText: string.qrImageAlt
});
});

var template = document.getElementsByTagName("template")[0];
var clonedTemplate = template.content.cloneNode(true);

var isMessageDisplayed = false
document
.querySelector('.gift-card__copy-link')
.addEventListener('click', () => {
navigator.clipboard.writeText(document.querySelector('.gift-card__number').value).then(function () {
if (!isMessageDisplayed) {
document.querySelector('.gift-card__copy-success').appendChild(clonedTemplate);
isMessageDisplayed = true
}
});
});
</script>

 

Gabe | Social Care @ Shopify
 - War meine Antwort hilfreich? Klicke Like um es mich wissen zu lassen! 
 - Wurde deine Frage beantwortet? Markiere es als Akzeptierte Lösung 
 - Um mehr zu erfahren, besuche das Shopify Help Center oder den Shopify Blog

Lösung in ursprünglichem Beitrag anzeigen

CelineAlessa
Neues Mitglied
5 0 0

Hey Gabe,

entschuldigung für die späte Antwort! Vielen Dank für deine Hilfe :) 

Genau das Layout meinte ich. Kannst du mir noch zufällig verraten wie ich die blaue Umrandung wegbekomme :)? 

Beste Grüße Celine 

Gabe
Shopify Staff
5389 934 1279

Hey Celine! @CelineAlessa 

 

An erster Stelle, hast du vielleicht einen Bildschirmabgriff dieses blauen Randes den du meinst, so dass ich das anschauen kann? Gerne kann dir auch einer unserer Experten wie Mario (@r8r) helfen den Gutschein im Code zu gestalten.

 

Lass uns das Thema hier weiter anschauen wie du den Geschenkgutschein weiter bearbeiten kannst und dafür werden ich jetzt hier eine Reihe hilfreiche Ressourcen beifügen. Unsere Geschenkkarten Funktion ist in allen Tarifen verfügbar und ein toller Weg deinen Shop auf den BFCM und auch auf die Weihnachtssaison vorzubereiten wenn die Online Shopper nach Geschenke für ihre Freunde und Familie suchen. Siehe unseren tollen Blogartikel dazu hier der alle notwendigen Schritte durchgeht. Siehe hier auch die Dos and Don’ts beim Gutscheinversand.

 

Dann kann dir unsere Anleitung hier helfen den Geschenkgutscheine mit einem benutzerdefinierten Bild personalisieren. 

 

Die Änderung des Wortlauts im Gutschein ist eigentlich recht einfach und erfordert keine Bearbeitung im gift_card.liquid.

 

Stattdessen kannst du das im Theme Spracheditor machen. Diesen erreichst du, indem du zu Onlineshop > Theme > Aktionen > Sprachen bearbeiten gehst. Gib einfach "Geschenkkarte" oder "gift card" ein und du bekommst eine Reihe von Bereichen angezeigt:

 

image.png

 

Sobald diese Felder aktualisiert sind, sieht die Seite für die Einlösung der Geschenkkarte wie folgt aus:

 

image.png

 

Du kannst auch den Wortlaut der E-Mail-Benachrichtigung "Geschenkkarte erstellt" ändern, die Kunden beim Kauf einer Geschenkkarte erhalten. Dazu musst du nur zu Einstellungen > Benachrichtigungen > Geschenkkarte erstellt gehen, wo du die Vorlage dann bearbeiten kannst. Damit alles einheitlich bleibt, empfehle ich, auch diese Vorlage zu aktualisieren.

image.png

 

Good News, Celine: Die Gutscheine kannst du auch gerne etwas umgestalten so wie du sie gerne hättest. Dafür habe ich hier eine Anleitung aus unserer Community wo man den Gutschein umgestalten kann. Mit einer unserer Digital downloads Apps (wie Sendowl oder Sky Pilot) kann man auch die Gutscheine als tolle pdf Downloads den Kunden anbieten, wenn man die nicht nur über eine E-Mail versenden will.

 

Ich hoffe, das hilft dir! Wenn du weitere Fragen hast, kannst du dich gerne hier melden, Ben.

Gabe | Social Care @ Shopify
 - War meine Antwort hilfreich? Klicke Like um es mich wissen zu lassen! 
 - Wurde deine Frage beantwortet? Markiere es als Akzeptierte Lösung 
 - Um mehr zu erfahren, besuche das Shopify Help Center oder den Shopify Blog