product-alternate-template.liquid

{%- assign current_variant = product.selected_or_first_available_variant -%}
{%- assign current_variant_sale = false -%}
{% if current_variant.compare_at_price > current_variant.price %}
  {%- assign current_variant_sale = true -%}
{% endif %}
{% assign featured_media = current_variant.featured_media | default: product.featured_media %}

<div class="product-template" data-section-id="{{ section.id }}" data-section-type="product-template" data-variant-id="{{ current_variant.id }}" itemscope itemtype="http://schema.org/Product">
  <meta itemprop="name" content="{{ product.title }}">
  <meta itemprop="url" content="{{ shop.url }}{{ product.url }}">
  <meta itemprop="image" content="{{ featured_media | img_url: 'grande' }}">

   
  {% comment %}
  ------------------------------------------------------------------------------
  Product Form & Description
  ------------------------------------------------------------------------------
  {% endcomment %}
  <div class="product__content page-width">
    <div class="grid">
      <div class="grid__item medium-up--push-one-twelfth medium-up--ten-twelfths">
        <div class="product__content-header">

          {% if section.settings.show_vendor %}
            <span class="product__vendor text-small text-center" itemprop="brand">{{ product.vendor }}</span>
          {% endif %}

          <h1 class="product__title h2 text-center" itemprop="name">{{ product.title }}</h1>

          <p class="product__price text-center{% if current_variant_sale %} product__price--sale{% endif %}" data-product-price aria-live="polite">

            <span class="product__sale-price-label visually-hidden">{{ 'products.product.sale_price' | t }}</span>
            <span class="product__regular-price-label visually-hidden">{{ 'products.product.price' | t }}</span>

            <span class="product__current-price" data-regular-price>Preis auf Anfrage</span>

            <span class="product__compare-price-label visually-hidden">{{ 'products.product.regular_price' | t }}</span>
            <s class="product__compare-price" data-compare-price>{{ current_variant.compare_at_price | money }}</s>
            
            {% include 'product-unit-price', variant: current_variant %}

          </p>

          {%- if shop.taxes_included or shop.shipping_policy.body != blank -%}
            <div class="product__policies rte">
              {%- if shop.taxes_included -%}
                {{ 'products.product.include_taxes' | t }}
              {%- endif -%}
              {%- if shop.shipping_policy.body != blank -%}
                {{ 'products.product.shipping_policy_html' | t: link: shop.shipping_policy.url }}
              {%- endif -%}
            </div>
          {%- endif -%}
        </div>


        <div class="product__content-main">        
          <div class="product__description flexslider" itemprop="photos" style="order:1">
              <ul class="slides">
                {% for image in product.images %}
                <li>{% include 'product-preview-image' media: image, featured_media: false %} </li>
                {% endfor %}
              </ul>
          </div>

            <div class="product__description rte" itemprop="description" class="rte">
              {{ product.description }}
            </div>
  
        </div>
   
          <div class="product__form-container" itemprop="offers" itemscope itemtype="http://schema.org/Offer" style="order:2">
            <div class="product__form-wrapper">
              <meta itemprop="price" content="{{ current_variant.price | divided_by: 100.00 }}">
              <meta itemprop="priceCurrency" content="{{ cart.currency.iso_code }}">
              <link itemprop="availability" href="http://schema.org/{% if current_variant.available %}InStock{% else %}OutOfStock{% endif %}">
           
              {% include 'product-form' %}              
              {% if section.settings.show_share_buttons %}
                {% if settings.share_facebook or settings.share_twitter or settings.share_pinterest %}
                  <div class="product__share-wrapper small--hide">
                    <div class="product__share">
                        {% include 'social-sharing', type: "product", links: 'bottom' share_title: product.title, share_permalink: product.url, share_image: featured_media %}
                    </div>
                  </div>
                {% endif %}
              {% endif %}
            </div>
          </div>
      </div>
    </div>
  </div>

  {% comment %}
  ------------------------------------------------------------------------------
  Product Share Buttons
  ------------------------------------------------------------------------------
  {% endcomment %}
  {% if section.settings.show_share_buttons %}
    {% if settings.share_facebook or settings.share_twitter or settings.share_pinterest %}
      <div class="product__share-wrapper product__share-wrapper--mobile medium-up--hide">
        <div class="product__share">
            {% include 'social-sharing', type: 'mobile', share_title: product.title, share_permalink: product.url, share_image: featured_media %}
        </div>
      </div>
    {% endif %}
  {% endif %}


  {% comment %}
  ------------------------------------------------------------------------------
  Product Slideshow
  ------------------------------------------------------------------------------
  {% endcomment %}
  {% unless product.media.size == 0 %}
    <div class="product-slideshow{% if product.media.size == 1 %} product-slideshow--single{% endif %} critical-hide" data-product-slideshow data-media-group aria-hidden="true">
      <button class="product-slideshow__close btn btn--clear btn--square" tabindex="-1" data-product-slideshow-close>{% include 'icon-close' %}</button>

      <div class="product-slideshow__content">
        <div class="product-slideshow__slide-list slider" data-product-slider>
          {% for media in product.media %}
            {%- capture product_media_wrapper_class -%}
              product-slideshow__slide slider__slide{%- if forloop.first %} slider__slide--active {%- endif -%}
            {%- endcapture -%}

            {% include 'media' with media,
              section_type: 'slideshow',
              parent_fit: 'contain',
              featured_media: true,
              data_image: 'data-product-slideshow-image',
              product_media_wrapper_class: product_media_wrapper_class,
              product_media_wrapper_data: 'data-product-slideshow-slide',
              image_class: 'fade-in'
            %}
          {% endfor %}
        </div>

        {% include 'shopify-xr-button' %}

        {% unless product.media.size == 1 %}
          <div class="product-slideshow__controls">
            <button class="product-slideshow__arrow product-slideshow__arrow--previous btn btn--secondary btn--square"
              tabindex="-1"
              data-product-slideshow-previous>

              {% include 'icon-arrow-left' %}
              <span class="visually-hidden">{{ 'general.pagination.previous' | t }}</span>
            </button>

            <button class="product-slideshow__arrow product-slideshow__arrow--next btn btn--secondary btn--square"
              tabindex="-1"
              data-product-slideshow-next>

              {% include 'icon-arrow-right' %}
              <span class="visually-hidden">{{ 'general.pagination.next' | t }}</span>
            </button>

            <div class="product-slideshow__slide-select-list">
              {% for media in product.media %}
                <button class="product-slideshow__slide-select {% if forloop.first %} product-slideshow__slide-select--active{% endif %}" tabindex="-1" data-product-slideshow-select="{{ forloop.index0 }}">
                  <span class="visually-hidden">{{ 'sections.product_template.slide' | t: number: forloop.index }}</span>
                </button>
              {% endfor %}
            </div>
          </div>
        {% endunless %}
      </div>
    </div>
  {% endunless %}
  {% endcomment %}

  {% comment %}
  ------------------------------------------------------------------------------
  Product Data
  ------------------------------------------------------------------------------
  {% endcomment %}
  <script type="application/json" data-product-json>
    {{ product | json }}
  </script>

  <script type="application/json" data-model-json="{{ section.id }}">
    {{ product.media | where: 'media_type', 'model' | json }}
  </script>
</div>