Liquid, JavaScript, Themes
Hallo zusammen,
ich würde gerne bestimmte Dinge ausblenden, wenn ein Produkt ein bestimmtes Template zugeordnet ist. Was ich in der theme.css.liquid probiert habe:
{% if template_suffix == 'product.preorder' %}
.product_inventory {
display: none;
}
{% endif %}
Aber hier passiert nichts..
Diesen Snippet habe ich noch in der product-form.liquid gefunden. Kann ich es vielleicht hier reinbasteln?
{%- liquid
assign default_text = 'products.product.add_to_cart' | t
assign button_text = 'products.product.add_to_cart' | t
if template == 'product.preorder'
assign default_text = 'products.product.preorder' | t
assign button_text = 'products.product.preorder' | t
endif
unless current_variant.available
assign button_text = 'products.product.sold_out' | t
endunless
-%}
Grüße
Robb
@PinkybreakShop – die css-Datei wird ja als "externe" Datei inkludiert. Damit hat die keinen Template-Kontext, aus dem Du as Suffix oder andere Parameter ableiten könntest.
Wenn du's so machen magst, kannst Du eine eigene CSS-Datei anlegen, und diese in der theme.liquid nur dann inkludieren, wenn die von Dir genannte if-Abfrage true ergibt.
Alternativ kannst Du (und das ist der Weg, wie's oft gemacht wird), eine CSS Klasse mit dem Template-Namen (z.B. template-product-preorder) auf den Body-Tag legst – das kannst Du mit Deiner if-Abfrage ja beeinflussen. Die betreffenden Regeln im CSS kannst Du dann mit den Selektor body.template-product-preorder scopen; z.B. so:
body.template-product-preorder h1 {
font-family: "Comic Sans MS";
}
LG, Mario
Hey - danke für die Antwort.
ich habe jetzt so viel probiert, dass ich maximal verwirrt bin 🙂
Also Variante 1 wäre: ich lege unter Assets ein neues asset an. Dort schreibe ich die CSS rein, die kommen soll, wenn die if abfrage true ergibt.
Die if Abfrage mache ich in die theme.liquid? Oder in der product-form.liquid? Wie spreche ich dort meine CSS Datei an?
{%- if template == 'product.preorder' -%}
...?
{%- endif -%}
Und Variante 2:
Wo genau soll ich den Codeschnipsel einfügen? Ich hab es mal testweise in die theme.liquid gesetzt, da passiert nichts.
Dann habe ich es in die theme.css.liquid eingefügt. Auch hier nichts. Wenn ich es so einfüge, funktioniert es für "normale" Produkte und auch nur mit der h1, nicht mit dem gewünschten Attribut:
.template-product h1 {
font-family: "Comic Sans MS";
}
So nicht:
.template-product .product_inventory {
display: none;
}
Scheinbar fühlt sich das preorder Produkt nicht angesprochen..
Danke & Gruß
Robb
Wurde im anderen Thema gelöst. Kann hier also geschlossen werden. Danke!
Mit dem Lernpfad der Shopify Academy und dem Verified Skills-Badge Expanding Your Sho...
By Shopify Feb 7, 2025Den Verkauf im Großhandel steigern: In der Shopify Academy lernst du, wie das geht, zum...
By Shopify Feb 3, 2025Teil 2 - Wie die Prinzipien des UX-Designs dir dabei helfen können einen großartigen Shop ...
By Kai Sep 16, 2024