Liquid, JavaScript, Themes
Hallo zusammen,
ich würde gerne für bestimmte Produkte (Unikate) die Preise ausblenden.
Ich hab zwei Produktarten: Standardprodukte und Unikate. Bei den Standardprodukten ist die Theme-Vorlage Standardprodukt (product.json) und bei den Unikaten die Theme-Vorlage Unikat (product.unikat.json) hinterlegt. Als Theme nutze ich "Symmetry".
Ich würde gerne für die Unikate den Preis ausblenden und stattdessen nur "Preis auf Anfrage" anzeigen lassen.
Zwar weiß ich, dass ich die Theme-Vorlage Unikat (product.unikat.json) so gestalten, dass sie kein Preis enthält und ein Rich-Text "Preis auf Anfrage" eingefügt ist. Damit habe ich aber noch nicht gelöst, dass der Preis für die Unikaten noch bei Collections, Featured Collections, etc. angezeigt wird.
Ich würde dies gerne mit einer Änderung des Codes lösen, d.h. das für alle Produkte, die auf der Theme-Vorlage Unikat (product.unikat.json) basieren, der Preis ausgeblendet wird und "Preis auf Anfrage" da steht. Könnte mir hier jemand weiterhelfen?
Vielen lieben Dank schon mal!
Gelöst! Zur Lösung
Erfolg.
@KerstinK grundsätzlich würde ich es nicht empfehlen Änderungen im Code am Template über die JSON-Dateien zu machen. Diese wirken sich nämlich selten auf die Elemente aus, die man letztlich bearbeiten möchte.
In deinem Fall würde es sich ggf. lohnen, mit Tags oder einem Metafeld zu arbeiten. Dann kannst du im Code (product-block.liquid) folgende Kondition anwenden:
{% if product.tags contains 'unikat' %}
<div class="product-price">
<span>Preis auf Anfrage</span>
</div>
{% else %}
<div class="product-price">
[...]<--- Standard-Code
</div>
{% endif %}
Ich hoffe, das hilft dir weiter.
Erfolg.
@KerstinK grundsätzlich würde ich es nicht empfehlen Änderungen im Code am Template über die JSON-Dateien zu machen. Diese wirken sich nämlich selten auf die Elemente aus, die man letztlich bearbeiten möchte.
In deinem Fall würde es sich ggf. lohnen, mit Tags oder einem Metafeld zu arbeiten. Dann kannst du im Code (product-block.liquid) folgende Kondition anwenden:
{% if product.tags contains 'unikat' %}
<div class="product-price">
<span>Preis auf Anfrage</span>
</div>
{% else %}
<div class="product-price">
[...]<--- Standard-Code
</div>
{% endif %}
Ich hoffe, das hilft dir weiter.
Hallo,
vielen lieben Dank für deine schnelle Antwort! Das klingt nach einer sehr guten Lösung. Ich hab sowieso schon das Produkt-Tag "unikat" bei den Unikat-Produkten angelegt. Leider ist mir noch nicht ganz klar an welcher Stelle ich den Code im product-block.liquid einfügen muss ... ?
{%- liquid
if collection and settings.prod_thumb_url_within_coll and product.collections contains collection
assign product_url = product.url | within: collection
else
assign product_url = product.url
endif
assign product_images = product.media | where: 'media_type', 'image'
if settings.prod_thumb_hover_image and product_images.size > 1
assign show_hover_image = true
else
assign show_hover_image = false
endif
assign cheapest_variant = product.variants | sort: 'price' | first
-%}
<div data-product-id="{{ product.id }}" class="product-block" {% if animate %}data-cc-animate{% endif %}>
<div class="block-inner">
<div class="block-inner-inner">
{% if product.featured_media %}
{%- liquid
assign aspect_ratios_same = true
for media in product.media offset: 1
if media.preview_image.aspect_ratio != product.media.first.preview_image.aspect_ratio
assign aspect_ratios_same = false
break
endif
endfor
-%}
<div class="image-cont {% if show_hover_image %}image-cont--with-secondary-image {% if aspect_ratios_same %}image-cont--same-aspect-ratio{% endif %}{% endif %}">
<a class="product-link{% if settings.quickbuy_style == 'whole' %} quickbuy-toggle{% endif %}" href="{{ product_url }}" aria-label="{{ product.title | escape }}" tabindex="-1">
<div class="image-label-wrap">
<div>
{%- if show_hover_image -%}
<div class="product-block__image product-block__image--primary{% if product.featured_media.id == product.media.first.id %}{% assign active_media_found = true %} product-block__image--active{% endif %}{% if product_images.last.id == product.featured_media.id %} product-block__image--show-on-hover{% endif %}" data-media-id="{{ product.media.first.id }}">
{%- render 'responsive-image', image: product.media.first.preview_image, manual_image_load: manual_image_load, min_aspect_ratio: 0.6, aspect_ratio: custom_aspect_ratio, no_max_width: true, cover: settings.prod_thumb_crop -%}
</div>
{%- for media in product_images offset: 1 -%}
{%- liquid
assign image_state_class = ''
if media.id == product.featured_media.id
assign active_media_found = true
assign image_state_class = 'product-block__image--active'
else
if active_media_found
assign active_media_found = false
assign image_state_class = 'product-block__image--show-on-hover product-block__image--inactivated'
else
assign image_state_class = 'product-block__image--inactivated'
endif
endif
-%}
<div class="product-block__image product-block__image--secondary rimage-wrapper lazyload--placeholder {{ image_state_class }}"
data-media-id="{{ media.id }}"
data-image-index="{{ forloop.index }}">
<div class="lazyload--manual rimage-background fade-in{% if settings.prod_thumb_crop %} cover{% endif %}"
data-lazy-bgset-src="{{ media.preview_image | img_url: 'master' }}"
data-lazy-bgset-aspect-ratio="{{ media.preview_image.aspect_ratio }}"
data-lazy-bgset-width="{{ media.preview_image.width }}"
data-sizes="auto"
data-parent-fit="{% if settings.prod_thumb_crop %}cover{% else %}contain{% endif %}"></div>
</div>
{%- endfor -%}
{%- else -%}
<div class="product-block__image product-block__image--primary product-block__image--active" data-media-id="{{ product.featured_media.id }}">
{%- render 'responsive-image', image: product.featured_media.preview_image, manual_image_load: manual_image_load, min_aspect_ratio: 0.6, aspect_ratio: custom_aspect_ratio, no_max_width: true, cover: settings.prod_thumb_crop -%}
</div>
{%- endif -%}
</div>
{%- if show_hover_image -%}
{%- unless no_swiping -%}
<div class="product-block__image-dots" aria-hidden="true">
<div class="product-block__image-dot product-block__image-dot--active"></div><div class="product-block__image-dot"></div>
{%- if product_images.size > 2 -%}
<div class="product-block__image-dot product-block__image-dot--more"></div>
{%- endif -%}
</div>
{%- endunless -%}
{%- endif -%}
{% render 'product-label', product: product, cheapest_variant: cheapest_variant %}
</div>
</a>
{%- if show_hover_image -%}
<a class="image-page-button image-page-button--previous ltr-icon" href="#" aria-label="{{ 'general.accessibility_labels.previous' | t | escape }}" tabindex="-1">{%- render 'svg-chevron-left', stroke_width: 1.3 -%}</a>
<a class="image-page-button image-page-button--next ltr-icon" href="#" aria-label="{{ 'general.accessibility_labels.previous' | t | escape }}" tabindex="-1">{%- render 'svg-chevron-right', stroke_width: 1.3 -%}</a>
{%- endif -%}
{% if settings.quickbuy_style == 'button' %}
{% unless no_quick_buy %}
<a class="btn btn--secondary quickbuy-toggle" href="{{ product_url }}">{{ 'products.quick_buy.launch' | t }}</a>
{% endunless %}
{% endif %}
</div>
{% else %}
<div class="image-cont">
<div class="placeholder-image">{{ 'product-1' | placeholder_svg_tag }}</div>
</div>
{% endif %}
<div class="product-info">
<div class="inner">
<div class="innerer">
<a class="product-link{% if settings.quickbuy_style == 'whole' %} quickbuy-toggle{% endif %}" href="{{ product_url }}">
{%- if section.settings.show_vendor -%}
<div class="vendor">{{ product.vendor | escape }}</div>
{%- endif -%}
<div class="product-block__title">{{ product.title | escape }}</div>
{%- if settings.prod_thumb_show_subtitle and product.metafields.descriptors.subtitle != blank -%}
<div class="product-block__subtitle">{{ product.metafields.descriptors.subtitle }}</div>
{%- endif -%}
<div class="product-price">
{% if product.price_varies %}
<span class="product-price__item product-price__from">{{ 'products.listing.from' | t }}</span>
{% endif %}
<span class="product-price__item product-price__amount {% if cheapest_variant.compare_at_price > cheapest_variant.price %}product-price__amount--on-sale{% endif %} theme-money">
{%- if settings.product_currency_code_enabled -%}
{{ cheapest_variant.price | money_with_currency }}
{%- else -%}
{{ cheapest_variant.price | money }}
{%- endif -%}
</span>
{% if cheapest_variant.compare_at_price > cheapest_variant.price %}
<span class="product-price__item product-price__compare theme-money">{{ cheapest_variant.compare_at_price | money }}</span>
{% endif %}
{% if settings.prod_sold_out_show and product.available == false %}
<span class="product-price__item price-label price-label--sold-out">{{ 'products.labels.sold_out' | t }}</span>
{% elsif settings.prod_pre_order_label_show and product.template_suffix contains 'preorder' %}
<span class="product-price__item price-label price-label--preorder">{{ 'products.product.preorder' | t }}</span>
{% elsif settings.prod_sale_show and cheapest_variant.compare_at_price > cheapest_variant.price %}
<span class="product-price__item price-label price-label--sale">{{ 'products.labels.sale' | t }}</span>
{% endif %}
</div>
{% render 'unit-price', variant: cheapest_variant %}
</a>
{%- if settings.prod_thumb_show_options -%}
{%- liquid
assign option_limit = 3
assign options_to_show = settings.swatch_option_name | append: ',' | append: settings.prod_thumb_options_names | replace: ', ', ',' | split: ','
-%}
{%- for product_option in product.options_with_values -%}
{%- if options_to_show contains product_option.name -%}
{%- liquid
if settings.swatch_enabled and settings.swatch_option_name contains product_option.name
assign is_swatch = true
else
assign is_swatch = false
endif
-%}
<div class="product-block-options{% if is_swatch %} product-block-options--swatch{% endif %}" data-option-name="{{ product_option.name | escape }}">
<div class="product-block-options__inner">
{%- if product.options.size == 1 -%}
{%- for variant in product.variants -%}
{%- liquid
if is_swatch and settings.swatch_method == 'image' and variant.featured_media == blank
continue
endif
-%}
<span class="product-block-options__item{% unless settings.prod_thumb_options_disable_unavailable == false or variant.available %} product-block-options__item--unavailable{% endunless %}{% if forloop.index > option_limit and is_swatch %} product-block-options__item--truncated{% endif %}{% if is_swatch %} lazyload{% if manual_image_load %}--manual{% endif %}{% endif %}"
data-option-item="{{ variant.title | escape }}"
{% if variant.featured_media %}data-media="{{ variant.featured_media.id }}"{% endif %}
{% if is_swatch -%}
{%- if settings.swatch_method == 'standard' -%}
data-swatch="{{ variant.title | replace: '"', '' | downcase }}"
{%- elsif settings.swatch_method == 'image' and variant.featured_media.preview_image -%}
data-bgset="{{ variant.featured_media.preview_image | img_url: '48x48', crop: settings.swatch_crop_align }}"
{%- endif -%}
{%- endif %}><span class="product-block-options__item__text">{{ variant.title | escape }}</span></span>
{%- endfor -%}
{%- if product.variants.size > option_limit and is_swatch -%}
{%- assign remaining = product.variants.size | minus: option_limit -%}
<span class="product-block-options__more-label">{{ 'collections.general.more_swatches' | t: count: remaining }}</span>
{%- endif -%}
{%- else -%}
{%- assign product_option_position_0index = product_option.position | minus: 1 -%}
{%- for product_option_value in product_option.values -%}
{%- liquid
assign option_value_variant = false
for variant in product.variants
if variant.options[product_option_position_0index] == product_option_value
assign option_value_variant = variant
break
endif
endfor
if settings.prod_thumb_options_disable_unavailable
assign is_unavailable = true
for variant in product.variants
if variant.available and variant.options[product_option_position_0index] == product_option_value
assign is_unavailable = false
break
endif
endfor
else
assign is_unavailable = false
endif
if is_swatch and settings.swatch_method == 'image' and option_value_variant.featured_media == blank
continue
endif
-%}
<span class="product-block-options__item{% if is_unavailable %} product-block-options__item--unavailable{% endif %}{% if forloop.index > option_limit and is_swatch %} product-block-options__item--truncated{% endif %}{% if is_swatch %} lazyload{% if manual_image_load %}--manual{% endif %}{% endif %}"
data-option-item="{{ product_option_value | escape }}"
{% if option_value_variant.featured_media %}data-media="{{ option_value_variant.featured_media.id }}"{% endif %}
{% if is_swatch %}
{%- if settings.swatch_method == 'standard' -%}
data-swatch="{{ product_option_value | replace: '"', '' | downcase }}"
{%- elsif settings.swatch_method == 'image' and option_value_variant.featured_media -%}
data-bgset="{{ option_value_variant.featured_media.preview_image | img_url: '48x48', crop: settings.swatch_crop_align }}"
{%- endif -%}
{% endif %}><span class="product-block-options__item__text">{{ product_option_value | escape }}</span></span>
{%- endfor -%}
{%- if product_option.values.size > option_limit and is_swatch -%}
{%- assign remaining = product_option.values.size | minus: option_limit -%}
<span class="product-block-options__more-label">{{ 'collections.general.more_swatches' | t: count: remaining }}</span>
{%- endif -%}
{%- endif -%}
</div>
</div>
{%- endif -%}
{%- endfor -%}
{%- endif -%}
{%- if settings.enable_product_reviews_collection and product.metafields.reviews.rating_count != blank -%}
{%- assign rating_count = product.metafields.reviews.rating_count | plus: 0 -%}
{%- if rating_count > 0 -%}
<div class="product-block__rating">
{% render 'rating', rating_value: product.metafields.reviews.rating.value %}
<span class="cc-rating-custom-caption">
{{ rating_count }} {{ 'products.product.reviews_link' | t: count: rating_count | downcase }}
</span>
</div>
{%- endif -%}
{%- endif -%}
</div>
</div>
</div>
</div>
</div>
{%- if settings.quickbuy_style != 'off' -%}
{%- unless no_quick_buy_markup or no_quick_buy -%}
<div class="quickbuy-container">
<a href="#" class="close-detail" aria-label="{{ 'products.quick_buy.close' | t }}" tabindex="-1">{% render 'svg-x', stroke_width: 1 %}</a>
<div class="inner"></div>
</div>
{%- endunless -%}
{%- endif -%}
</div>
Vielen lieben Dank schon mal!
Hallo, es hat sich erledigt. Ich weiß jetzt wo ich den Code einfügen muss. Vielen lieben Dank!
@Finer Guten Morgen, ich habe das gleiche Problem in einem anderen Kontext. Allerdings nutze ich das Studio Theme.. Ich habe mehrere Ansätze recherchiert, allerdings finde ich in keinem Falle die passende (beschriebene) liquid Datei.
Die product-block.liquid für deine Lösung gibt es in meinem Theme z.B. nicht. Weißt du zufällig in der welcher Datei ich das Tag abfragen muss, um einzelne Preise in meiner Kollektion durch "Preis auf Anfrage" zu ersetzen? Darüber würde ich mich freuen..
VG
Danke.. diese Frage hast ja dann bereits in dem andern Thread "Ausblenden Einiger Preise In Der Kollektion (Studio Theme)" beantwortet... Dankeschön!
Hi @KerstinK,
vielen Dank für deinen Post und das Update dazu.
Es freut mich sehr zu hören, dass du eine Lösung für die Codeanpassung deines Symmetry Themes finden konntest.
Würdest du hier mit uns teilen wie du das geschafft hast, sodass andere Forumsnutzer mit derselben Frage auch von deinem Wissen profitieren können? Das wäre super!
Was für Unikate verkaufst du in deinem Shopify Shop und tust du dies ausschließlich online oder auch in Person und wenn auch nur durch die Möglichkeit, dass Kunden ihre Bestellungen bei dir abholen können?
Kai | 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
<div class="product-price">
{% if product.tags contains 'Unikate' %}
<span class="Unikate">Preis auf Anfrage</span>
{% else %}
<span class="price">{{ product.price | money }}</span>
{% endif %}
{% comment %}
{% if product.price_varies %}
<span class="product-price__item product-price__from">{{ 'products.listing.from' | t }}</span>
{% endif %}
<span class="product-price__item product-price__amount {% if cheapest_variant.compare_at_price > cheapest_variant.price %}product-price__amount--on-sale{% endif %} theme-money">
{%- if settings.product_currency_code_enabled -%}
{{ cheapest_variant.price | money_with_currency }}
{%- else -%}
{{ cheapest_variant.price | money }}
{%- endif -%}
</span>
{% if cheapest_variant.compare_at_price > cheapest_variant.price %}
<span class="product-price__item product-price__compare theme-money">{{ cheapest_variant.compare_at_price | money }}</span>
{% endif %}
{% endcomment %}
Ich hab im product-block.liquid den neuen Code nach <div class="product-price"> eingefügt und einen Teil des Codes auskommentiert, dann hat es bei mir funktioniert ...
Teil 2 - Wie die Prinzipien des UX-Designs dir dabei helfen können einen großartigen Shop ...
By Kai Sep 16, 2024Teil 1 - Wie die Prinzipien des UX-Designs dir dabei helfen können einen großartigen Shop ...
By Kai Sep 9, 2024Anpassungen des benutzerdefinierten Codes an Shopify-Themes (CSS) leicht gemachtIn diesem...
By Gabe Aug 28, 2024