Why isn't the estimated delivery date format displaying correctly on my Shopify product cards?

lenarei
Explorer
52 3 4

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!

 

lenarei_0-1660748205711.png

 

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>&plus;{{ 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>&plus;{{ 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

Replies 2 (2)

Gavinator
Shopify Partner
1318 15 124

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.

 

 

 

www.bookthatapp.com
lenarei
Explorer
52 3 4

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?