single-bundle-product.liquid

<div data-section-id="{{ section.id }}" data-section-type="product" data-enable-history-state="true"
     class="{% if forloop.first == true %}p-single-product--bundle-single-active{% endif %} {% unless forloop.first == true %}p-single-product--bundle-single-disabled{% endunless %} {% if forloop.last == true %}p-single-product--bundle-single-last-step{% endif %} js-scroll-to-{{ forloop.index }}">

    <section class="p-single-product p-single-product--bundle">

        <!--single product slideshow and config-->
        <div class="p-single-product__wrapper">

            <div class="c-product-showcase c-product-showcase--bundle js-product-showcase">

                <div class="c-product-showcase__main">
                    <div class="o-row o-row--md-fixed">
                        <div class="c-product-showcase__mobile-top-info">
                            <div class="c-product-config c-product-config--condensed">
                                <div class="c-product-config__top-wrap">
                                    <div class="c-product-config__title-wrap">
                                        <h2 class="u-a7 u-uppercase">

                                            {% assign pack_product_title = product.title %}
                                            {% assign stringSplit = pack_product_title | split:'-' %}

                                            {% for word in stringSplit %}

                                                {% unless forloop.first == true %}
                                                    {{ word | strip }}
                                                {% endunless %}

                                            {% endfor %}

                                        </h2>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>

                    {%- comment -%} data-product-showcase-id must be unique number {%- endcomment -%}
                    <div class="c-product-showcase__preview c-product-preview js-product-showcase-preview"
                         data-product-showcase-id="{{ product-loop-index }}">

                        {%- assign current_variant = product.selected_or_first_available_variant -%}
                        {%- assign featured_image = current_variant.featured_image | default: product.featured_image -%}

                        <div class="c-product-preview__main-images">
                            {% for image in product.images %}
                                {% capture wrapper_class %}
                                    {%- unless featured_image == image -%}
                                        hide
                                    {%- endunless -%}
                                {% endcapture %}

                                {% include 'responsive-image' with
                                    image: image,
                                    image_class: 'c-product-preview__big-image'
                                    max_width: 700,
                                    max_height: 800,
                                    image_attributes: "data-product-featured-image",
                                    wrapper_class: wrapper_class,
                                    wrapper_attributes: "data-product-image-wrapper", %}
                            {% endfor %}
                        </div>

                        {% if product.images.size > 1 %}

                            <div class="c-product-preview__product-list-group">

                                {% for image in product.images %}

                                    {% if image.variants.size > 0 and forloop.first == true %}
                                        {% assign current_color = image.variants[0].option1 %}
                                        <ul class="c-product-preview__product-list js-product-preview-thumbnail-list is-current" data-color="{{ current_color | handleize }}">
                                    {% endif %}

                                    {% if image.variants.size > 0 and image.variants[0].option1 != current_color and forloop.last == false %}
                                        </ul>
                                        {% assign current_color = image.variants[0].option1 %}
                                        <ul class="c-product-preview__product-list js-product-preview-thumbnail-list" data-color="{{ current_color | handleize }}">
                                    {% endif %}

                                    <li class="c-product-preview__product-list-item">
                                        <a class="c-product-preview__product-link js-product-showcase-preview-link {% if forloop.first == true %} active-thumbnail {% endif %}"
                                           href="{{ image.src | img_url: '480x480' }}"
                                           data-color="{{ current_color | handleize }}"
                                           data-variant="{{ image.variants[0].option1 }}"
                                           data-thumbnail-id="{{ image.id }}"
                                           data-product-single-thumbnail>
                                            <img class="product-single__thumbnail-image c-product-preview__small-image"
                                                 src="{{ image.src | img_url: '160x160' }}"
                                                 alt="{{ image.alt | escape }}">
                                        </a>
                                    </li>

                                    {% if forloop.last == true %}
                                        </ul>
                                    {% endif %}

                                {% endfor %}

                            </div>

                        {% endif %}

                    </div>

                    <div class="js-product-showcase-sliders-group c-product-showcase__sliders-group"
                         data-product-showcase-id="{{ product-loop-index }}">

                        {% if product.images.size > 1 %}

                            {% for image in product.images %}

                                {% if image.variants.size > 0 and forloop.first == true %}
                                    {% assign current_color = image.variants[0].option1 %}
                                    <div class="c-preview-slider c-slider js-preview-slider-component is-current" data-color="{{ current_color | handleize }}">
                                    <div class="c-preview-slider__slider-container swiper-container js-preview-slider-container">
                                    <div class="c-slider__wrapper swiper-wrapper">
                                {% endif %}

                                {% if image.variants.size > 0 and image.variants[0].option1 != current_color and forloop.last == false %}
                                    </div><!-- .c-slider__wrapper -->
                                    </div><!-- .c-preview-slider__slider-container -->

                                    <div class="c-preview-slider__bullets js-slider-bullets">

                                    </div><!-- .c-preview-slider__bullets -->
                                    </div><!-- .c-preview-slider -->

                                    {% assign current_color = image.variants[0].option1 %}
                                    <div class="c-preview-slider c-slider js-product-showcase-preview-slider js-preview-slider-component" data-color="{{ current_color | handleize }}">
                                    <div class="c-preview-slider__slider-container swiper-container js-preview-slider-container">
                                    <div class="c-slider__wrapper swiper-wrapper">
                                {% endif %}

                                <div class="c-slider__item swiper-slide">
                                    <div class="c-slider__image js-slide-image"
                                         style="background-image: url('{{ image.src | img_url: '480x480' }}')"></div>
                                </div><!-- .c-slider__item -->


                                {% if forloop.last == true %}
                                    </div><!-- .c-slider__wrapper -->
                                    </div><!-- .c-preview-slider__slider-container -->

                                    <div class="c-preview-slider__bullets js-slider-bullets">
                                    </div><!-- .c-preview-slider__bullets -->

                                    </div><!-- .c-preview-slider -->
                                {% endif %}

                            {% endfor %}

                        {% endif %}

                    </div><!-- .js-product-showcase-sliders-group -->

                </div>

                <div class="c-product-showcase__side">
                    <div class="p-single-product__config p-single-product__config--bundle">
                        {% assign color = 'black' %}
                        {% assign mobileTitleHidden = true %}
                        {% assign hideReviews = true %}
                        {% assign firstChunk = 'data-product-showcase-id="' %}
                        {% assign lastChunk =  '"' %}
                        {% assign colorPickerDataAttributes = firstChunk | append: product-loop-index | append: lastChunk %}

                        <div class="c-product-config {% if mobileTitleHidden %} c-product-config--mobile-title-hidden {% endif %}">

                            <div class="c-product-config__top-wrap">

                                <div class="c-product-config__title-wrap c-product-config__title-wrap--bundle">

                                    <!--bundle info-->
                                    <div class="c-product-config__bundle-info">

                                        <!--bundle step-->
                                        <div class="c-product-config__bundle-step u-b4">
                                            step 0{{ product-loop-index }} / 0{{ product-loop-length }}
                                        </div>
                                        <!--end bundle step-->

                                        <!--bundle price-->
                                        <div class="c-product-config__bundle-price u-b4">
                                            Clinton Pack $75
                                        </div>
                                        <!--end bundle price-->

                                    </div>
                                    <!--end bundle info-->

                                    <h2 class="u-a7 u-uppercase">

                                        <a href="{{ product.url | within: collection }}">

                                            {% assign pack_product_title = product.title %}
                                            {% assign stringSplit = pack_product_title | split:'-' %}

                                            {% for word in stringSplit %}

                                                {% unless forloop.first == true %}
                                                    {{ word | strip }}
                                                {% endunless %}

                                            {% endfor %}

                                        </a>

                                    </h2>

                                </div>

                            </div>

                            <!--product form-->
                            <form action="/cart/add" method="post" enctype="multipart/form-data"
                                  class="js-ajax-bundle-form js-ajax-bundle-form-{{ product-loop-index }}"
                                  data-product-id="{{ product.selected_or_first_available_variant.id }}">

                                <!--product variants-->
                                {% unless product.has_only_default_variant %}

                                    {% for option in product.options_with_values %}

                                        {% assign option-name = option.name | downcase %}

                                        {% assign is_color = false %}

                                        {% assign stripped-value = value | split: ' ' | last | handle %}

                                        {% assign product-handle = product.handle %}

                                        {% if option-name contains 'color' or option-name contains 'colour' %}

                                            {% assign is_color = true %}

                                        {% endif %}

                                        {% if is_color %}

                                            <div class="c-product-config__color-picker">
                                                {% include "color-picker" with option-name, stripped-value, product-handle %}
                                            </div>

                                        {% endif %}

                                        {% assign is_size = false %}

                                        {% if option-name contains 'size' %}

                                            {% assign is_size = true %}

                                        {% endif %}

                                        {% if is_size %}

                                            <div class="c-product-config__size-picker">
                                                {% include "size-picker-bundle" with option-name, stripped-value, product-handle %}
                                            </div>

                                        {% endif %}

                                    {% endfor %}

                                {% endunless %}

                                <select name="id" class="no-js" data-product-select>
                                    {% for variant in product.variants %}
                                        <option
                                                {% if variant == current_variant %}selected="selected"{% endif %}
                                                {% unless variant.available %}disabled="disabled"{% endunless %}
                                                value="{{ variant.id }}">
                                            {{ variant.title }}
                                        </option>
                                    {% endfor %}
                                </select>
                                <!--end product variants-->

                                {% if forloop.last == true %}

                                    <!--product add to cart-->
                                    <button
                                            class="button button--black button--full-width c-product-config__add-to-cart js-button js-ajax-add-bundle-to-cart"
                                            type="submit"
                                            name="add"
                                            data-add-to-cart
                                            disabled="disabled">
                                        <span data-add-to-cart-text>
                                            {% if current_variant.available %}
                                                Complete previous step
                                            {% else %}
                                                {{ 'products.product.sold_out' | t }}
                                            {% endif %}
                                        </span>

                                    </button>
                                    <!--end product add to cart-->

                                    <div class="c-form-errors js-ajax-bundle-error"></div>

                                    {% elsif forloop.first == true %}

                                    <!--product next step-->
                                    <button
                                            class="button button--black button--full-width c-product-config__add-to-cart js-button js-ajax-disabled-bundle-button"
                                            type="submit"
                                            name="add"
                                            data-scroll-to="on"
                                            data-scroll-to-target=".js-scroll-to-{{ forloop.index | plus:1 }}"
                                            data-add-to-cart
                                            disabled="disabled">
                                        <span data-add-to-cart-text>
                                            {% if current_variant.available %}
                                                Select your size
                                            {% else %}
                                                {{ 'products.product.sold_out' | t }}
                                            {% endif %}
                                        </span>

                                    </button>
                                    <!--end product next step-->

                                {% else %}

                                    <!--product next step-->
                                    <button
                                            class="button button--black button--full-width c-product-config__add-to-cart js-button js-ajax-disabled-bundle-button"
                                            type="submit"
                                            name="add"
                                            data-scroll-to="on"
                                            data-scroll-to-target=".js-scroll-to-{{ forloop.index | plus:1 }}"
                                            data-add-to-cart
                                            disabled="disabled">
                                        <span data-add-to-cart-text>
                                            {% if current_variant.available %}
                                                Complete previous step
                                            {% else %}
                                                {{ 'products.product.sold_out' | t }}
                                            {% endif %}
                                        </span>

                                    </button>
                                    <!--end product next step-->

                                {% endif %}

                            </form>
                            <!--end product form-->

                            <p class="c-product-config__additional-info u-b4">
                                Free shipping on all domestic orders
                            </p>

                        </div>


                    </div>
                </div>

            </div><!-- .c-product-showcase -->

        </div>
        <!--end single product slideshow and config-->

        {% unless product == empty %}
            <script type="application/json" data-product-json>{{ product | json }}</script>
        {% endunless %}

    </section>


</div>

<script type="application/ld+json">
{
  "@context": "http://schema.org/",
  "@type": "Product",
  "name": "{{ product.title | escape }}",
  "url": "{{ shop.url }}{{ product.url }}",
  {% if product.featured_image %}
    {% assign image_size = product.featured_image.width | append: 'x' %}
    "image": [
      "https:{{ product.featured_image.src | img_url: image_size }}"
    ],
  {% endif %}
  "description": "{{ product.description | strip_html | escape }}",
  {% if current_variant.sku != blank %}
    "sku": "{{ current_variant.sku }}",
  {% endif %}
  "brand": {
    "@type": "Thing",
    "name": "{{ product.vendor | escape }}"
  },
  {% if product.variants %}
    "offers": [
      {% for variant in product.variants %}
        {
          "@type" : "Offer",
          "availability" : "http://schema.org/{% if product.available %}InStock{% else %}OutOfStock{% endif %}",
          "price" : "{{ variant.price | divided_by: 100.00 }}",
          "priceCurrency" : "{{ shop.currency }}",
          "url" : "{{ shop.url }}{{ variant.url }}",
          "itemOffered" :
          {
              "@type" : "Product",
              {% if variant.image %}
    {% assign variant_image_size = variant.image.width | append: 'x' %}
                "image": "http:{{ variant.image.src | img_url: variant_image_size }}",
              {% endif %}
    {% if variant.title != blank %}
                "name" : "{{ variant.title | escape }}",
              {% endif %}
    {% if variant.sku != blank %}
                "sku": "{{ variant.sku }}",
              {% endif %}
    {% if variant.weight != blank %}
                "weight": {
                  "@type": "QuantitativeValue",
                  {% if variant.weight_unit != blank %}
                    "unitCode": "{{ variant.weight_unit }}",
                  {% endif %}
                  "value": "{{ variant.weight | weight_with_unit: variant.weight_unit }}"
                },
              {% endif %}
              "url": "{{ shop.url }}{{ variant.url }}"
          }
        }{% unless forloop.last %},{% endunless %}
    {% endfor %}
    ]
  {% endif %}
}



</script>