Liquid, JavaScript, themes, sales channels
Dear community,
I am trying to implement an estimated delivery time on my product cards. I will get the information to show up, but only on the first card. And then, the date format is not in the right language, even though I tried to access and change it via CSS. Which levers am I missing? Any clues will be much appreciated!
Here is my code:
{%- liquid
assign cheapest_variant = product.variants | sort: 'price' | first
assign on_sale = false
if cheapest_variant.compare_at_price > cheapest_variant.price
assign on_sale = true
endif
assign product_url = product.url | within: collection
if animation_type == blank
assign animation_type = "cc-fade-in-up"
endif
assign primary_image = product.featured_media.preview_image
assign secondary_image = product.media[1].preview_image
if settings.prod_show_videos
assign videos = product.media | where: "media_type", "video"
unless videos == blank
for source in videos[0].sources
if source != blank and source.format == "mp4"
assign video_source = source
break
endif
endfor
assign mp4_url = video_source.url
endunless
endif
assign product_has_swatches = false
if settings.swatch_enabled and settings.prod_block_swatches and hide_swatches != true
for product_option in product.options_with_values
if settings.swatch_option_name == product_option.name
assign product_has_swatches = true
break
endif
endfor
endif
assign param_symbol = "?"
if product.url contains "?"
assign param_symbol = "&"
endif
-%}
<div class="product-block
cc-product-block
{% unless product.available %} sold-out{% endunless %}
{% if on_sale %} on-sale{% endif %}
{% if settings.prod_hover == "second_image" %}hover-image{% endif %}
{% if settings.prod_hover == "all_images" and product.images.size > 1 %}all-images{% endif %}
{% if product.tags contains 'meta-layout-right' %}layout-right{% endif %}
{% if settings.prod_label_layout == 'marquee_on_hover' %} product-block--marquee-on-hover {% endif%}
{% if settings.quickbuy_enabled %}product-block--quickbuy{% endif %}
{% if mp4_url != blank %}product-block--video{% endif %}
{% if product_has_swatches %}product-block--has-swatches{% endif %}
{{ product_class }}"
data-loop-index="{{ i }}"
style="padding-top: 8px; padding-bottom: 8px;";
{% if animate %} data-cc-animate="{{ animation_type }}" data-cc-animate-delay="{{ animate | times: 0.15 }}s" {% endif %}
{% if product.images.size > 1 %}
{% if settings.prod_hover == "all_images" or product_has_swatches %}
{%- liquid
assign images = ""
for image in product.images
assign image_placeholder = image | img_url: '1x1' | replace: '_1x1.', '_{width}x.'
assign images = images | append: "," | append: image_placeholder
endfor
-%}
data-product-images="{{ images | remove_first: "," }}"
{% endif %}
{% endif %}
>
<div class="flex-container">
<div class="flex-half">
<div class="image {% if settings.prod_hover == "second_image" and product.media.size > 1 %}image--hover-second {% if primary_image.aspect_ratio == secondary_image.aspect_ratio %}image--same-aspect-ratio{% endif %}{% endif %}">
{% if settings.prod_label_layout contains 'marquee' %}
<div class="product-marquee">
{% render 'product-label', product: product, cheapest_variant: cheapest_variant %}
</div>
{% endif %}
<a data-cc-animate-click class="image-inner" href="{{ product_url }}" aria-label="{{ product.title | escape }}" tabindex="-1">
<div class="image__first">
{% if mp4_url != blank %}
{% render 'inline-video', video: mp4_url, image: primary_image %}
{% else %}
{% render 'responsive-image', image: primary_image %}
{% endif %}
{% unless settings.prod_label_layout contains 'marquee' %}
{% render 'product-label', product: product, cheapest_variant: cheapest_variant %}
{% endunless %}
</div>
{% if settings.prod_hover == "second_image" and product.media.size > 1 %}
<div class="image__second">
{% render 'responsive-image', image: secondary_image, aspect_ratio: primary_image.aspect_ratio %}
</div>
{% endif %}
</a>
{%- if settings.swatch_enabled and settings.prod_block_swatches and hide_swatches != true -%}
{%- assign option_limit = 3 -%}
{%- for product_option in product.options_with_values -%}
{%- if settings.swatch_option_name == product_option.name -%}
<div style="text-align: center;">
<ul class="cc-swatches {% if settings.swatch_use_prod_images == true %}cc-swatches-prod-img cc-swatches-prod-img-{{ settings.swatch_prod_images_shape }}{% endif %}" style="padding-top:12px; display: inline-block;" data-option-name="{{ product_option.name | escape }}">
{%- if product.options.size == 1 -%}
{%- for variant in product.variants -%}
{%- assign variant_image = variant.featured_media.preview_image | img_url: '1x1' | replace: '_1x1.', '_{width}x.' -%}
{% if forloop.index <= option_limit %}
<li>
<a rel="nofollow"
href="{{ product.url }}{{ param_symbol }}variant={{ variant.id }}"
title="{{ variant.title | escape }}"
{% if variant.featured_media.preview_image %}
data-variant-image="{{ variant_image }}"
{% endif %}
class="{% unless variant.available %}unavailable{% endunless %} lazyload"
data-option-item="{{ variant.title | downcase | escape }}"
{% if variant.featured_media %}data-media="{{ variant.featured_media.id }}"{% endif %}
{% if settings.swatch_method == "image" and settings.swatch_use_prod_images == false %}
data-bgset="{{ variant.title | handle | append: '.png' | file_img_url: '48x48', crop: 'center' }}"
{% elsif settings.swatch_use_prod_images == true %}
data-bgset="{{ variant.featured_media.preview_image | img_url: '72x', crop: 'center' }}"
style="{% if settings.swatch_prod_images_shape == "natural" %}padding-top: {{ 1 | divided_by: variant.featured_media.preview_image.aspect_ratio | times: 100 }}%;{% endif %}"
{% else %}
style="background-color:{{ variant.title | downcase | remove: ' ' | escape }}"
{% endif %}>
{{ variant.title }}
</a>
</li>
{% endif %}
{%- endfor -%}
{%- if product.variants.size > option_limit -%}
<li class="product-block__more-label"><span>+{{ product.variants.size | minus: option_limit }}</span></li>
{%- 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
assign is_unavailable = true
for variant in product.variants
if variant.options[product_option_position_0index] == product_option_value
assign option_value_variant = variant
break
endif
endfor
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
assign variant_image = option_value_variant.featured_media.preview_image | img_url: '1x1' | replace: '_1x1.', '_{width}x.'
-%}
{% if forloop.index <= option_limit %}
<li>
<a rel="nofollow"
href="{{ product.url }}{{ param_symbol }}variant={{ option_value_variant.id }}"
title="{{ product_option_value | escape }}"
class="{% if is_unavailable %} unavailable{% endif %} lazyload"
{% if option_value_variant.featured_media.preview_image %}
data-variant-image="{{ variant_image }}"
{% endif %}
data-option-item="{{ product_option_value | downcase | escape }}"
{% if option_value_variant.featured_media %}data-media="{{ option_value_variant.featured_media.id }}"{% endif %}
{% if settings.swatch_method == "image" and settings.swatch_use_prod_images == false %}
data-bgset="{{ product_option_value | handle | append: '.png' | file_img_url: '48x48', crop: 'center' }}"
{% elsif settings.swatch_use_prod_images == true %}
data-bgset="{{ option_value_variant.featured_media.preview_image | img_url: '72x', crop: 'center' }}"
style="{% if settings.swatch_prod_images_shape == "natural" %}padding-top: {{ 1 | divided_by: option_value_variant.featured_media.preview_image.aspect_ratio | times: 100 }}%;{% endif %}"
{% else %}
style="background-color:{{ product_option_value | downcase | remove: ' ' | escape }}"
{% endif %}>
{{ product_option_value }}
</a>
</li>
{% endif %}
{%- endfor -%}
{%- if product_option.values.size > option_limit -%}
<li class="product-block__more-label"><span>+{{ product_option.values.size | minus: option_limit }}</span></li>
{%- endif -%}
{%- endif -%}
</ul>
</div>
{%- endif -%}
{%- endfor -%}
{%- endif -%}
</div>
</div>
<div class="flex-half vertical-center-desktop" style="padding-left: 16px; margin-top: 4px;">
{% if show_custom_title %}
<span class="title" style="text-align: left; font-size: 1.15rem; padding-top: 4px; color:#000;">{{ product.metafields.custom.description }}</span>
<span class="vendor" style="padding-top: 0px; padding-bottom: 2px; font-size: 14px; color: #7E7E7E;">{{ product.metafields.custom.subdescription }}</span>
{% else %}
<span class="title" style="font-size: 1.15rem; padding-top: 4px; color:#000;">Weiche Babydecke</span>
<span class="vendor" style="padding-top: 0px; padding-bottom: 2px; font-size: 14px; color: #7E7E7E;">Traumhaft kuschelig</span>
{% endif %}
{% if settings.show_product_block_reviews and hide_reviews != true %}
<a data-cc-animate-click href="{{ product_url }}" class="themed-product-reviews" tabindex="-1" style="margin-top: 0; padding-top: 3%;">
{% render 'rating', rating_value: product.metafields.reviews.rating.value %}
{% if product.metafields.reviews.rating_count != blank and product.metafields.reviews.rating_count > 0 %}
<span class="cc-rating-custom-caption">
{{ product.metafields.reviews.rating_count }}
</span>
{% endif %}
</a>
{% endif %}
{% if show_vendor %}
<span class="vendor">{{ product.vendor }}</span>
{% endif %}
<div class="price" style="padding-top: 6%; padding-bottom: 4%;">
{% if product.price_varies %}{{ 'products.listing.from' | t }}{% endif %}
<span class="theme-money" style="font-size: 1.1rem;">{%- render "price", price: cheapest_variant.price -%}</span>
{% if on_sale %}<span class="was-price theme-money" style="font-size: 0.9 rem;">{%- render "price", price: cheapest_variant.compare_at_price -%}</span>{% endif %}
{% render 'unit-price', variant: cheapest_variant %}
</div>
</a>
<span class="vendor" style="padding-top: 0px; padding-bottom: 2px; font-size: 14px; color: #7E7E7E;">
<p>Erhalte deine neue Lieblingsdecke bis zum <i><span id="fromDate"></span></i></p>
{{ '//cdnjs.cloudflare.com/ajax/libs/datejs/1.0/date.min.js' | script_tag }}
<script>
var fromDate = Date.today().addDays(3);
if (fromDate.is().saturday() || fromDate.is().sunday()) {
fromDate = fromDate.next().monday();
}
document.getElementById('fromDate').innerHTML = fromDate.toString('dddd, dd.MMMM');
</script>
</span>
{%- if settings.quickbuy_enabled -%}
<div class="cc-quick-buy-btn-container">
<a href="{{ product_url }}" data-cc-quick-buy class="button alt cc-quick-buy-btn">
{{ 'products.listing.quick_view' | t }}
</a>
</div>
{%- endif -%}
</div>
</div>
<center>
<div class="button-row inherit-colors" style="margin-top:24px;">
<a data-cc-animate-click
class="button"
href="{{ product_url }}">
Jetzt Entdecken
</a>
</div>
</center>
</div>
And the CSS part
html body #fromDate {
Date.CultureInfo={dayNames:["Sonntag","Montag","Dienstag","Mittwoch","Donnerstag","Freitag","Samstag"],monthNames:["Januar","Februar","März","April","Mai","Juni","Juli","August","September","Oktober","November","Dezember"];
}
Here is the preview to my shop: https://fj8yby43zgc6h0nu-60850798810.shopifypreview.com
There are multiple product cards on the page so the id attribute of the date span is not unique. My guess is this bit of code is only finding the first date element:
document.getElementById('fromDate').innerHTML = fromDate.toString('dddd, dd.MMMM');
You can either add a CSS class to the element and use document.getElementsByClassName, or make each fromDate element ID unique in the page e.g. by appending the product handle.
HTH, Gavin.
Thanks a lot for the hint, Gavin! I will try and work with that 🙂
Do you also have any idea in regards to how to edit the language?
Portrait of Stephen positioned next to an image of planet Earth, with the Stephen's World ...
By JasonH Mar 18, 2024Digital marketers and app developers have tracked activity in apps and websites for yea...
By Ollie Mar 13, 2024February was an exciting month with Shopify Editions, informative webinars, and more! F...
By JasonH Mar 7, 2024