Zapiet - Produkt-Optionen bietet zwei App-Blöcke: den App-Block für Produkt-Optionen auf der Produktseite und den App-Block für die Warenkorbseite im Warenkorb.
Der App-Block für Produkt-Optionen muss aktiviert sein, damit unsere App korrekt funktioniert.
Der App-Block für Warenkorb-Optionen ist optional und erfordert zusätzliche Anpassungen an der Design-Datei, um wie gewünscht zu funktionieren.
Vorraussetzungen
Um den App-Block zu aktivieren, benötigen Sie die Erlaubnis des Shop-Inhabers, um Apps zu verwalten.
Um den App-Block zu aktivieren, müssen Sie ein Online Store 2.0-Theme verwenden. Wir unterstützen keine älteren Themes.
Aktivieren Sie den App-Block für Produkt-Optionen
Der Produkt-Optionen-App-Block ermöglicht es Ihren Kunden, Optionen auf den Produktseiten Ihres Shops auszuwählen.
Klicken Sie in Zapiet - Produkt-Optionen auf Einstellungen.
Wählen Sie im Abschnitt Themen das Theme aus, das Sie bearbeiten möchten.
Wir empfehlen, unsere App zunächst auf einem Duplikat-Theme zu aktivieren.
Klicken Sie im Abschnitt Produkt-Options-App-Block auf Aktivieren.
Dies öffnet die Anpassungseinstellungen für Ihr Theme und aktiviert den App-Block.
Sie können die Platzierung des App-Blocks entsprechend den Bedürfnissen Ihres Unternehmens ändern.
Klicken Sie auf Speichern.
Das App-Block für Produktoptionen wird nun in Ihrem Shop sichtbar sein. Stellen Sie sicher, dass Sie sowohl Optionen als auch Optionssets erstellt haben, bevor Sie testen.
Wenn Sie den App-Block auf einem Duplikat-Thema aktiviert haben, veröffentlichen Sie das Thema nach dem Testen, damit Ihre Kunden Produktoptionen in Ihrem Shop auswählen können.
Aktivieren Sie den App-Block für die Warenkorb-Seite
Der App-Block für die Warenkorb-Seite ermöglicht es Ihren Kunden, Änderungen an den ausgewählten Optionen direkt auf der Warenkorb-Seite vorzunehmen.
Klicken Sie in Zapiet - Produkt-Optionen auf Einstellungen.
Wählen Sie im Abschnitt Themen das Theme aus, das Sie bearbeiten möchten.
Wir empfehlen, unsere App zunächst auf einem Duplikat-Theme zu aktivieren.
Klicken Sie im Abschnitt für den App-Block der Warenkorb-Seite auf Aktivieren.
Dies öffnet die Anpassungseinstellungen in Ihrem Theme und aktiviert die App-Einbettung.
Klicken Sie auf Speichern.
Nachdem Sie die App-Einbettung aktiviert haben, müssen Sie den Code in Ihrem Theme bearbeiten.
Bearbeiten Sie Ihr Theme
Wenn Sie sich nicht sicher sind, den Code zu bearbeiten, lassen Sie es uns bitte im Chat wissen, und wir helfen Ihnen gerne weiter!
Gehen Sie zu Online-Shop > Themes, erweitern Sie das Menü neben dem Theme, das Sie bearbeiten möchten, und klicken Sie dann auf Code bearbeiten.
Öffnen Sie die Liquid-Datei für die Warenkorb-Seite.
Gewöhnlich befinden sich die mit dem Warenkorb verbundenen Dateien in: templates (zum Beispiel cart.liquid), sections (zum Beispiel cart-template.liquid) oder snippets für wiederverwendbare Code-Snippets im Zusammenhang mit dem Warenkorb (zum Beispiel cart-item.liquid)
Suchen Sie nach diesem Snippet im Code.
{%- for property in item.properties -%}
{%- assign property_first_char = property.first | slice: 0 -%}
{%- if property.last != blank and property_first_char != '_' -%}
<div class="product-option">
<dt>{{ property.first }}: </dt>
<dd>
{%- if property.last contains '/uploads/' -%}
<a href="{{ property.last }}" class="link" target="_blank">
{{ property.last | split: '/' | last }}
</a>
{%- else -%}
{{ property.last }}
{%- endif -%}
</dd>
</div>
{%- endif -%}
{%- endfor -%}
Fügen Sie diese Codezeile hinzu, um eine neue Klasse zu erstellen.
<div class ="edit-cart-options-button-container" id="{{ item.id }}"> </div>
Öffnen Sie die Liquid-Datei für die Warenkorb-Schublade.
Suchen Sie in den sections oder snippets nach Dateien, die möglicherweise mit der Warenkorb-Schublade zusammenhängen. Häufige Dateinamen sind: cart-drawer.liquid, cart.liquid, drawer-cart.liquid, mini-cart.liquid.
Suchen Sie nach diesem Snippet im Code.
{%- for property in item.properties -%}
{%- assign property_first_char = property.first | slice: 0 -%}
{%- if property.last != blank and property_first_char != '_' -%}
<div class="product-option">
<dt>{{ property.first }}: </dt>
<dd>
{%- if property.last contains '/uploads/' -%}
<a href="{{ property.last }}" class="link" target="_blank" aria-describedby="a11y-new-window-message">
{{ property.last | split: '/' | last }}
</a>
{%- else -%}
{{ property.last }}
{%- endif -%}
</dd>
</div>
{%- endif -%}
{%- endfor -%}
Fügen Sie diese Zeile Code hinzu, um eine neue Klasse zu erstellen.
<div class ="edit-cart-options-button-container" id="{{ item.id }}"> </div>
Klicken Sie auf Speichern.
Jetzt können Ihre Kunden die ausgewählten Optionen direkt auf der Warenkorbseite bearbeiten.
Wenn etwas schief geht und Sie die ausgewählten Optionen auf der Warenkorbseite nicht bearbeiten können, lassen Sie es uns bitte im Chat wissen!
Hinweise
Wenn Sie ein kostenloses Theme aus dem Shopify Theme Store verwenden, müssen Sie wahrscheinlich den Code in Zeile 159 der
main-cart-item.liquid-Datei und in Zeile 206 dercart-drawer.liquid-Datei hinzufügen.