Bundle Crossel

site demo  futternasera
main-product.liquid

 {% when 'bundle' %}
                {% assign vrtpdp = product.metafields.custom.bundle %} 
                    {% if vrtpdp != blank %}
                    <div id="bundlel-{{ section.id }}" data-bundle class="bundlel-sec-custom">
                      {% render 'bundle-product', block: block %}   
                    </div>
              {% endif %}

  {
      "type": "bundle",
      "name": "Bundle",
        "settings":[
        {
          "type": "inline_richtext",
          "id":"head",
          "label":"Head"
        }
      ]
    },
bundle-product.liquid
{% assign vrtpdp = product.metafields.custom.bundle %} 
    {% if vrtpdp != blank %}
      <div class="crosscell_pdp">
    
      <div class="crosscell_pdp_sec">
        <div class="min_head">
         {% if block.settings.head != blank %}
              <h5>
                <span>{{ block.settings.head }}</span>
              </h5>
            {% endif %}

        </div>
         <ul> 
              {% for crspdp in vrtpdp.value %}
                  {% assign product_form_id = 'product-form-' | append: section.id | append: crspdp.id %}
                  <li class="pdp_detail"  data-variants='{{ crspdp.variants | json | escape }}' >
                    <div class="pdp_img">
                      <img src="{{ crspdp.featured_image | img_url: 'master' }}" alt="{{ crspdp.title }}">
                    </div>
                    <div class="pdp_content_block">
                      <div class="pdp_heading_with_price">
                        <div class="pdp_title">{{ crspdp.title }}</div>
                       
                      </div>
                      <div class="pdp-add-to-card">
                        <div class="Product_variant">
                          <variant-radios-card
                            id="variant-radios-{{ section.id }}"
                            class="no-js-hidden"
                            data-section="{{ product_form_id }}"
                            data-url="{{ crspdp.url }}"
                            {% if update_url == false %}data-update-url="false"{% endif %}
                            {{ block.shopify_attributes }}>
                            
                          {% for option in crspdp.options_with_values %}
                          {% unless option.name == 'Title' %}
                            <div class="js product-form__input product-form__input--dropdown {{ option.name | handleize }}">
                              <select
                                id="Option-{{ section.id }}-{{ forloop.index0 }}"
                                class="select__select"
                                name="options[{{ option.name | escape }}]"
                                form="{{ product_form_id }}">
                                
                                {% for value in option.values %}
                                  <option
                                    value="{{ value }}"
                                    {% if crspdp.selected_or_first_available_variant.options[forloop.parentloop.index0] == value %}selected{% endif %}
                                  >
                                    {{ value }}
                                  </option>
                                {% endfor %}
                              </select>
                            </div>
                          {% endunless %}
                        {% endfor %}

                            
                          </variant-radios-card>
                        </div>
                        <product-form data-section-id="{{ section.id }}">
                          {% form 'product', crspdp, id: product_form_id, class: 'form', novalidate: 'novalidate', data-type: 'add-to-cart-form' %}
                            <input
                              type="hidden"
                              name="id"
                              value="{{ crspdp.selected_or_first_available_variant.id }}"
                              class="product-variant-id"
                              {% if crspdp.selected_or_first_available_variant.available == false %}disabled{% endif %}>
                             <input type="hidden" name="id" value="{{ crspdp.selected_or_first_available_variant.id }}" class="product-variant-id" {% if crspdp.selected_or_first_available_variant.available == false %}disabled{% endif %}>

                            <button
                              id="{{ product_form_id }}-submit"
                              type="submit"
                              name="add"
                              class="quick-add__submit button button--full-width button--secondary{% if horizontal_quick_add %} card--horizontal__quick-add{% endif %}"
                              aria-haspopup="dialog"
                              aria-labelledby="{{ product_form_id }}-submit title-{{ section.id }}-{{ crspdp.id }}"
                              aria-live="polite"
                              {% if crspdp.selected_or_first_available_variant.available == false %}disabled{% endif %}>
                              <span>
                                {% if crspdp.selected_or_first_available_variant.available %}
                                  {{ 'add_to_cart_icon.svg' | inline_asset_content }}
                                {% else %}
                                 <span class="out-qty-custom"> {{ 'add_to_cart_icon.svg' | inline_asset_content }}   </span>
                                {% endif %}
                              </span>
                              <span class="sold-out-message hidden">
                              </span>
                              {% render 'loading-spinner' %}
                            </button>
                          {% endform %}
                        </product-form>
                      </div>
                       <div class="price-custom">
                          {% assign variant = crspdp.selected_or_first_available_variant %}
    
                          {% if variant.compare_at_price > variant.price %}
                            <span class="sale-price">{{ variant.price | money }}</span>
                            <span class="original-price" style="text-decoration: line-through;">{{ variant.compare_at_price | money }}</span>
                               <span class="du-sparst">
                              Du sparst {{ variant.compare_at_price | minus: variant.price | money }}
                            </span>
                         
                            {% else %}
                            <span class="regular-price">{{ variant.price | money }}</span>
                          {% endif %}
                        </div>
                      
                    </div>
                  </li>
              {% endfor %}
        </ul>
      </div>
    </div>
{% endif %}



js


  
function formatMoney(cents) {
  return (cents / 100).toLocaleString('de-DE') + '€\u00A0';
}

$(document).on('change', '.select__select', function () {
  var $select = $(this);
  var $productItem = $select.closest('.pdp_detail');

  var selectedOptions = [];

  $productItem.find('.select__select').each(function () {
    selectedOptions.push($(this).val());
  });

  var variants = JSON.parse($productItem.attr('data-variants'));

  var matchedVariant = variants.find(function (variant) {
    return variant.options.every(function (opt, index) {
      return opt === selectedOptions[index];
    });
  });

  if (matchedVariant) {
    var $priceContainer = $productItem.find('.price-custom');
    var priceHtml = '';

    if (matchedVariant.compare_at_price > matchedVariant.price) {
      priceHtml += '<span class="sale-price">' + formatMoney(matchedVariant.price) + '</span>';
      priceHtml += '<span class="original-price">' + formatMoney(matchedVariant.compare_at_price) + '</span>';
      priceHtml += '<span class="du-sparst">Du sparst ' + formatMoney(matchedVariant.compare_at_price - matchedVariant.price) + '</span>';
    } else {
      priceHtml += '<span class="regular-price">' + formatMoney(matchedVariant.price) + '</span>';
    }

    $priceContainer.html(priceHtml);

    $productItem.find('.product-variant-id').val(matchedVariant.id);
    var $btn = $productItem.find('button[type="submit"]');
    if (matchedVariant.available) {
      $btn.prop('disabled', false);
    } else {
      $btn.prop('disabled', true);
    }
  }
});