Shopify商店 - Variant不添加到购物车

时间:2016-10-14 03:18:56

标签: variables shopify product

我无法使用我的样本变体来更改正在添加到购物车的产品。无论我添加什么,它都是添加'emerson'产品。这是我的product.liquid代码。我也在使用色板应用程序。

{% include 'bold-product' with product, hide_action: 'break' %}{% if bold_hidden_product %}{% break %}{%endif %}
<!-- Bold D&H //product -->
{% if product.metafields.inventory.ShappifyHidden == "true" %}
Product is not available
{% break %}{% endif %}
<!-- // end product D&H -->

{% include 'shappify-bdl-no-select' %}

<!-- Bold: Discount D&H -->
{% if product.metafields.inventory.ShappifyHidden == "true" %}
Product is not available
{% else %}
<div id="col-main" class="span12 bva">
    <div itemscope itemtype="http://schema.org/Product" class="product-scope">
        <meta itemprop="url" content="{{ shop.url }}{{ product.url }}" />
        <meta itemprop="name" content="{{ product.title }}" />

        <!-- NEW -->

        <div class="gallery span8">
               <span class=”desc”> {{ product.metafields.lifestyle.gallery }} </span>
        </div>


        <div class="product-top bva span9">
            <div id="product-image" class="product-image bva">
                <div id="product" class="row-fluid clearfix">
                    <div id="product-image" class="span12 product-image">
                        <div class="product-image-wrapper bva">
                            <div class="product-thumb-slides">
                                {% for variant in product.variants %}
                              {% include 'bold-hidden-variants' with variant, bold_loop: 'loop' %}
                                    {% assign image_variant_available = true %}

                                        {% assign image = variant.image %}
                                        {% assign index = forloop.index | minus: 1 %}
                                    <div data-swatch="{{ image.alt | downcase | handleize }}" data-swatch-color="{{ image.alt }}"  data-index="{{ index }}" data-variant-id="{{ variant.id }}">
                                        <img src="{{ image | img_url: 'compact' }}" alt="{% if image.alt contains 'youtube' %}{{ product.title }}{% else %}{{ image.alt | escape }}{% endif %}" />
                                    </div>

                                {% endfor %}


                            </div>

        <div id="product-image" class="span12 product-image">
          <div class="product-image-wrapper">

              <a target="_blank" href="{{ product.featured_image | product_img_url: 'original' }}" class="main-image{% if settings.main_image_display == 'zoom' or settings.main_image_display == 'both' %} elevatezoom{% endif %}{% if settings.main_image_display == 'lightbox' %} fancybox{% endif %}">
                <img  itemprop="image"id="main-image" class="img-zoom img-responsive image-fly" src="{% if shappify_bdl_options_count > 1 %}{{ product.featured_image | product_img_url: 'grande' }}{% else %}{{ product.featured_image | product_img_url: 'original' }}{% endif %}" alt="{{ product.title | escape }}" />
                <span class="main-image-bg"></span>
              </a>

                  {% if product.images.size > 1 %}
                  {% if settings.viewmore_image_display == 'carousel' %}
                  <div class="gallery_main_wrapper">
                                {% endif %}
                        <div id="gallery_main" class="product-image-thumb {% if settings.viewmore_image_display == 'scroll' %}scroll scroll-mini{% endif %} clearfix">
                              {% for image in product.images %}
                                {% assign image_variant_available = false %}
                                {% if image.variants.size > 0 %}
                                    {% for variant in image.variants %}
                                        {% if variant.available %}
                                            {% assign image_variant_available = true %}
                                        {% endif %}
                                    {% endfor %}
                                {% else %}
                                    {% assign image_variant_available = true %}
                                {% endif %}
                              {% if image_variant_available %}
                                {% if image.alt contains '-alt' %}
                                {% else %}
                                <a class="image-thumb{% if forloop.index == 1 %} active{% endif %}" href="{{ image | product_img_url: 'original' }}" data-image-zoom="{{ image | product_img_url: 'original' }}" data-image="{{ image | product_img_url: 'original' }}"onclick="if($('.selector-wrapper .single-option-selector[data-option=\'option1\'] option[value=\'{{ image.alt | replace: "'", "\\'" }}\']').length > 0 && $('.selector-wrapper .single-option-selector[data-option=\'option1\']').val() != '{{ image.alt | replace: "'", "\\'" }}') $('.selector-wrapper .single-option-selector[data-option=\'option1\']').val('{{ image.alt | replace: "'", "\\'" }}'), $('.selector-wrapper .single-option-selector[data-option=\'option1\']').trigger('change');">
                                  <img src="{{ image | product_img_url: 'small' }}" alt="{% if image.alt contains 'youtube' %}{{ product.title }}{% else %}{{ image.alt | escape }}{% endif %}" />
                                </a>
                                {% endif %}
                              {% endif %}
                              {% endfor %}
                              {% for image in product.images %}

                              {% if image.alt contains 'youtube' %}
                              {% assign embed_url = image.alt %}
                                    <div class="image-thumb-video play-icon">
                                      <img src="{{ image | product_img_url: 'small' }}" alt="{{ product.title | escape }}" />
                                      <a class="play-container fancy" href="{{ embed_url }}" title="{{ product.title }}">
                                        {{ 'play-icon.svg' | asset_url | img_tag: 'Play Video', 'play-image' }}
                                      </a>
                                      <p>WATCH<br>VIDEO</p>
                                    </div>
                              {% endif %}

                              {% endfor %}
                          </div>
                        {% if settings.viewmore_image_display == 'carousel' %}
                      </div>
                      {% endif %}
                      {% endif %}
                    </div>

        {% if settings.tweet_code == 'below' %}
        {% if settings.tweet_code_page != empty %}
        <a id="tweet_code" class="btn btn-2" href="{{pages[settings.tweet_code_page].url}}"><i class="icon-hand-right"></i> {{settings.tweet_code_discount_button}}</a>
        {% endif %}
        {% endif %}
      </div>



                            <script>
                            jQuery(document).ready(function($){




                                $('.product-thumb-slides').slick({
                                    slidesToShow: 4,
                                    slidesToScroll: 1,
                                    asNavFor: '.product-slick-gallery',
                                    dots: false,
                                    arrows: true,
                                    focusOnSelect: true,
                                    vertical: true,
                                    centerMode: false,
                                    infintie: false,
                                    nextArrow: '<i class="fa fa-chevron-down slick-next"></i>',
                                    prevArrow: '<i class="fa fa-chevron-up slick-prev"></i>',

                                });

                                $('.product-slick-gallery').slick({
                                    arrows: false,
                                    dots : false,
                                    asNavFor: '.product-thumb-slides'

                                });


                                $('.quantity').spinner({
                                    min: 1,
                                    change: function(event,ui){
                                        $(this).attr("value", this.value);
                                        //$('.add-cart').attr('data-quantity', this.value);
                                    }
                                });

                                $('.product-thumb-slides').on('beforeChange', function(event, slick, currentSlide, nextSlide){
                                    var variantID = $('.product-thumb-slides .slick-slide[data-index="'+nextSlide+'"]').data('variant-id');
                                    var swatch_color = $('.product-thumb-slides .slick-slide[data-index="'+nextSlide+'"]').data('swatch-color');
                                    // console.log(variantID);
                                  //$('.add-cart').attr('data-variant-id', variantID);
                                  $('.hidden-variant-field').attr('value', variantID);
                                  $('.color-name-dynaimc').html(swatch_color);

                                var $swatch = $('.swatch-element[data-variant-id="'+variantID+'"]');
                                // console.log($swatch);
                                if($swatch.hasClass('soldout')){
                                    $('.add-cart').addClass('out-of-stock');
                                    $('.cart-button').html('SOLD OUT');
                                }else{
                                    $('.add-cart').removeClass('out-of-stock');
                                    $('.cart-button').html('ADD TO CART');
                                }


                                });


                                var productDesc = $('.product-info .product-description p:nth-child(2)').html();
                                $('.product-info .product-description p:nth-child(2)').html('<strong>DESCRIPTION</strong>'+productDesc);

                                $('.color-name-dynaimc').html( $('.product-thumb-slides .slick-slide[data-index="0"]').data('swatch-color') );
                                //$('.add-cart').attr('data-variant-id', $('.product-thumb-slides .slick-slide[data-index="0"]').data('variant-id') );
                                $('.hidden-variant-field').attr('value', $('.product-thumb-slides .slick-slide[data-index="0"]').data('variant-id') );


                                // $('.add-cart').click(function(event){
                                //     event.preventDefault();
                                //     var variantID = $(this).data('variant-id');
                                //     var quantity = $(this).data('quantity');
                                //     CartJS.addItem( variantID, quantity);

                                //     setTimeout(function(){
                                //         location.reload();
                                //     },500);


                                // });
                            });
                            </script>
                        </div>
                    </div>
                </div>
                <div class="product-share">
                    SHARE THIS PRODUCT:

                    <img src="{{ 'facebook-logo-01.png' | asset_url }}" class="fa fa-facebook social-sharing-icon" style="max-width: 30px" data-network="facebook">
                    <img src="{{ 'twitter-logo-silhouette-01.png' | asset_url }}" class="fa fa-twitter social-sharing-icon" style="max-width: 30px" data-network="twitter">
                    <img src="{{ 'pinterest-logo-button-01.png' | asset_url }}" class="fa fa-pinterest social-sharing-icon" style="max-width: 30px" data-network="pinterest">
                </div>
            </div>

            <div class="product-details bva">
                <div class="titles">
                    <div itemprop="name" class="product-name">
                        <h1>{{ product.title }} <span class="mobile-only">- <span class="color-name-dynaimc"></span></span></h1>
                    </div>
                    <div class="detail-price" itemprop="price">
                        <span class="price">{{ product.price | money }}</span>
                    </div>
                </div>



              <div class="variants-wrapper clearfix{% if hide_default_title %} hide{% endif %}"> 
                  <select id="product-select-{{ product.id }}" name="id">
                    {% for variant in product.variants %}
                    {% include 'bold-hidden-variants' with variant, bold_loop: 'loop' %}
                    {% if variant.metafields.shappify_bundle.is_bundle == "true" %}{% else %}
                    <option value="{{ variant.id }}">{{ variant.title | escape }} - {{ variant.price | money }}</option>
                   {% endif %}
                    {% endfor %}
                  </select>
                </div>


                     <form action="/cart/add" method="post" class="product-actions variants " enctype="multipart/form-data">
                        <div id="product-actions-{{ product.id }}"  class="options qty-cart">
                            <!--<input id="quantity" type="number" name="quantity" value="1" min="1" class="span4 item-quantity" />-->
                            <div class="input-box">
                                <input id="quantity" type="text" name="quantity" class="quantity item-quantity" value="1" min="1" />
                            </div>
                            <div class="action-wrapper product add-cart">
                                <div class="product-wait"></div>
                                <input type="hidden" name="id" value="{{ variant.id }}" class="hidden-variant-field"/>
                                <button class="cart-button   {% if variant.inventory_quantity < 0 %}out-of-stock{% endif %}" unbxdattr="AddToCart" unbxdparam_sku="{{product.id}}" data-parent=".product-information" type="submit" name="add">ADD TO CART</button>
                            </div>
                        </div>
                    </form>
              {% unless bundle_loaded == 'true' %}
  {% include 'shappify-bdl-load-bundle' %}
  {% assign bundle_loaded = 'true' %}
{% endunless %}       
              <div class="rumepoints">
                       <strong>You Will Earn:</strong> <span class=”desc”> {{ product.metafields.totes.rumepoints }} </span> <u>RuMe Rewards Points</u> for this item
                    </div>


                    </div>
                </div>
            </div>
        </div>
<div class="descriptionusesfeatures">
            <div class="product-description">
                <strong>DESCRIPTION</strong><br><br>
                {{ product.description }}
            </div>
            <div class="description-right">
<div class="usesforhtml"><strong>USES FOR:</strong><br><br>
  <span class=”desc”> {{ product.metafields.usesfor.usesforhtml }} </span>
</div>
<br>
<div class="productfeatures"><strong>FEATURES:</strong><br><br>
  <span class=”desc”> {{ product.metafields.features.productfeatures }} </span>
  </div>
        </div>
  </div>
        <!-- END -->




{% if settings.product_description_show == 'below' %}
<div itemprop="description" class="description text-left">
    <h1>{{ product.title }}</h1>
    <!-- {{ product.description }} Replaced with shortcodes version,below -->
    {% include 'shortcodes' with product.description %}
</div>
{% endif %}

{% if settings.reviews_enable %}
<div id="shopify-product-reviews" data-id="{{product.id}}">{{ product.metafields.spr.reviews }}</div>
{% endif %}
</div>

{% include 'related-products' %}


  <!-- yotpo -->
  <div class="yotpo yotpo-main-widget"
    data-product-id="{{ product.id }}"
    data-name="{{ product.title | escape }}"
    data-url="{{ shop.url }}{{ product.url }}"
    data-image-url="{{ product.featured_image | product_img_url: "large" |replace: '?', '%3F' | replace: '&','%26'}}"
    data-description="{{ product.description | escape }}">
  </div>
  <!-- yotpo -->
</div>
<!-- end slider wrapper -—>

<!-- Bold: Discount D&H -->



{% endif %}
<script type="text/javascript">
(function e(){var e=document.createElement("script");e.type="text/javascript",e.async=true,e.src="//staticw2.yotpo.com/V3G5rrxyCEg9hXApffAzbDMC6CsghmTdUpbf8D2z/widget.js";var t=document.getElementsByTagName("script")[0];t.parentNode.insertBefore(e,t)})();
</script>


<script type="text/javascript">

$("a.fancy").click(function() {
    $.fancybox({
        'padding'             : 40,
        'autoScale'         : false,
        'transitionIn'        : 'fade',
        'transitionOut'       : 'fade',
        'title'               : this.title,
        'width'               : 1280,
        'height'              : 720,
        'href'                : this.href.replace(new RegExp("watch\\?v=", "i"), 'v/') + '?autoplay=1',
'type'                : 'swf',    // <--add a comma here
'swf'                 : {'allowfullscreen':'true'} // <-- flashvars here
});
    return false;

});

</script>

<script>
// To change what your customers would see if they try to
// add to cart without completing an option, edit the yellow text enclosed within the quotation marks.
var errorMessages = {
    for_text_inputs  : "Please add your personalized text before adding to cart.",
    for_number_inputs: "Please enter a custom quantity.",
    for_checkboxes   : "Please select your options before adding to cart",
    for_dropdowns    : "Please select an option before adding to cart"
};

jQuery("form[action='/cart/add'] [type=submit]").on("click", function(e) {
    if (
        window.Shoppad &&
        window.Shoppad.apps &&
        window.Shoppad.apps.customizery &&
        window.Shoppad.apps.customizery.overrideDeprecatedValidation
        ) return true;

        $io = $('#infiniteoptions-container');

    var invalidTextInputs = $io.find("input[type=text][required], textarea").filter(function (idx, el) {
        return $(el).val() === '';
    });

    var invalidNumberInputs = $io.find('input[type=number][required]').filter(function (idx, el) {
        return $(el).val() === '';
    });

    var invalidFieldSets = $io.find('fieldset[data-required=true]').filter(function (idx, fieldSet) {
        if ($(fieldSet).find('input[type=checkbox]').length === 0) {
            return false;
        } else {
            return $(fieldSet).find('input[type=checkbox]').filter(function (idx, el) {
                return el.checked === true;
            }).length === 0;
        }
    });

    var invalidDropdowns = $io.find('select[required]').filter(function (idx, select) {
        return !select.selectedOptions[0] || select.selectedOptions[0].disabled === true;
    });

    var onFail = function (messageType) {
        e.stopImmediatePropagation();
        alert( errorMessages[messageType] );
        return false;
    };

    if (invalidTextInputs.length > 0) {
        return onFail( 'for_text_inputs' );

    } else if (invalidNumberInputs.length > 0) {
        return onFail( 'for_number_inputs' );

    } else if (invalidFieldSets.length > 0) {
        return onFail( 'for_checkboxes' );

    } else if (invalidDropdowns.length > 0) {
        return onFail( 'for_dropdowns' );

    } else {
        return true;
    }
});
</script>

            {% include 'shappify-bdl-load-bundle' %}
<script type="text/javascript">

              // initialize multi selector for product
              jQuery(document).ready(function($){

                /* selectCallback */
                var selectOptionsCallback = function(variant, selector) {

                  var add_to_cart = '#add-to-cart';
                  var $price = '#purchase-' + selector.product.id.toString() + ' .detail-price';
                  if (variant && variant.available) {
                    // selected a valid variant
                    $(add_to_cart).removeClass('disabled').removeAttr('disabled'); // remove unavailable class from add-to-cart button, and re-enable button

                    if(variant.compare_at_price == null){
                      $($price).html('<span class="price">'+Shopify.formatMoney(variant.price, "{{shop.money_format}}")+'</span>');

                      {% if settings.show_multiple_currencies %}
                      /* Update currency */
                      currenciesCallbackSpecial('#product-information span.money');
                       {% endif %}
                       } else {
                         $($price).html('<del class="price_compare">' + Shopify.formatMoney(variant.compare_at_price, "{{shop.money_format}}") + '</del>' + '<span class="price_sale">'+Shopify.formatMoney(variant.price, "{{shop.money_format}}") + '</span>');

                         {% if settings.show_multiple_currencies %}
                         /* Update currency */
                         currenciesCallbackSpecial('#product-information span.money');
                          {% endif %}
                          }
                         } else {
                           $(add_to_cart).addClass('disabled').attr('disabled', 'disabled'); // set add-to-cart button to unavailable class and disable button
                           var message = variant ? "Sold Out" : "Unavailable";
                           $($price).html('<span class="unavailable">' + message + '</span>');
                         }

                         if (variant && variant.inventory_quantity && variant.inventory_management == 'shopify') {
                           jQuery("#stock").html(variant.inventory_quantity).parent().show(); 
                         }
                         else{
                           jQuery("#stock").parent().hide(); 
                         }

                         {% if settings.trans_product_sku %}
                         if (variant && variant.sku) { 
                           jQuery("#sku").html(variant.sku).parent().show(); 
                         }
                          else{
                            jQuery("#sku").parent().hide(); 
                          }
                         {% endif %}

                         {% if settings.product_barcode_show %}
                         if (variant && variant.barcode) { 
                           jQuery("#barcode").html(variant.barcode).parent().show(); 
                         }
                          else{
                            jQuery("#barcode").parent().hide(); 
                          }
                          {% endif %}


                          //Swapping images JS
                          $('.product-image-thumb img[alt="'+ $('.selector-wrapper .single-option-selector[data-option=\'option1\']').val() +'"]').first().parent().trigger('click');
                       };


                  new Shopify.OptionSelectors("product-select-{{ product.id }}", { product: {{ product | json | remove:'\u003E' | remove:'\u003C' | remove:'\u00a0' }}, onVariantSelected: selectOptionsCallback });
                  <!-- START Hide OOS Product Varients -->      
                    {% if product.options.size == 1 %}
                    {% for variant in product.variants %}
                    {% include 'bold-hidden-variants' with variant, bold_loop: 'loop' %}
                    {% if variant.metafields.shappify_bundle.is_bundle == "true" %}{% else %}
                    {% unless variant.available %}
                    jQuery('.single-option-selector option').filter(function() { return jQuery(this).html() === {{ variant.title | json }}; }).remove();
                  {% endunless %}
                  {% endif %}       
                  {% endfor %}
                  //jQuery('.single-option-selector').trigger('change');
                  {% endif %}     
                  <!-- END Hide OOS Product Varients -->    
                    // Add label if only one product option and it isn't 'Title'.
                    {% if product.options.size == 1 and product.options.first != 'Title' %}
                    $('#product-actions-{{ product.id }} .selector-wrapper:eq(0)').prepend('<label>{{ product.options.first }}</label>');
                    {% endif %}

                    // Auto-select first available variant on page load.
                    {% assign found_one_in_stock = false %}
                    {% for variant in product.variants %}
                    {% include 'bold-hidden-variants' with variant, bold_loop: 'loop' %}
                    {% if variant.metafields.shappify_bundle.is_bundle == "true" %}{% else %}
                    {% if variant.available and found_one_in_stock == false %}
                    {% assign found_one_in_stock = true %}
                    {% for option in product.options %}
                    $('.single-option-selector:eq({{ forloop.index0 }})').val({{ variant.options[forloop.index0] | json }}).trigger('change');
                  {% endfor %}
                  {% endif %}
                  {% endif %}      
                  {% endfor %}
                });
            </script>

{% include 'windsor-product-tracking' %}Ò

1 个答案:

答案 0 :(得分:1)

这最终导致javascript无法触发问题。我们在文件中将脚本移到更高位置并更正了问题。