Slick Slider с Shopify option-select.js: slickGoTo в selectCallback, вызывающий ошибку типа консоли при загрузке - PullRequest
Новая
       43

Slick Slider с Shopify option-select.js: slickGoTo в selectCallback, вызывающий ошибку типа консоли при загрузке

1 голос
/ 24 октября 2019

Извиняюсь, если этот вопрос действительно простой, но я новичок в этом. Я изменяю тему моего магазина Shopify (сделанную кем-то другим), чтобы слайдер Slick мог перейти к изображению варианта, выбранного с помощью option-select.js Shopify.

Вы можете наблюдать за функциональностью здесь: https://villagebooks.co/products/i-d-357

Я сделал это, поставив $ ('# images_wrap.slider'). Slick ('slickGoTo', optionImagePos);внутри функции selectCallback. Функционально работает абсолютно нормально. Но это выдает ошибку в консоли при загрузке (см. Ниже):

Вызов slickGoTo в консоли работает нормально. Так что я либо делаю очень простую ошибку при вызове функции (см. Код ниже), либо что-то, что связано с порядковыми сценариями, загружается на страницу.

Любая помощь будет высоко оценена.

Спасибо!

  • Очистка кеша
  • Изменение порядка тегов скрипта на странице темы
  • оборачивание метода в setTimeout (method, 0)

Страница продукта: 

<select id="product-select" name="id">
    {% for variant in product.variants %}
        <option value="{{ variant.id }}" {% if variant == product.selected_or_first_available_variant %} selected {% endif %}>{{ variant.title }} - {{ variant.price | money }}</option>
    {% endfor %}
</select>
{{ 'option_selection.js' | shopify_asset_url | script_tag }}
<script>
// <![CDATA[
var selectCallback = function(variant, selector) {
    if (variant) {
        var variantImagePos = variant.featured_image.position - 1;
        if (variant.available) {
            // Selected a valid variant that is available.
            $('#add').removeClass('disabled').removeAttr('disabled').val('Add to Cart').fadeTo(200,1);
        } else {
            // Variant is sold out.
            $('#add').val('Out of Stock').addClass('disabled').attr('disabled', 'disabled').fadeTo(200,0.25);
        }
        // Whether the variant is in stock or not, we can update the price and compare at price.
        if ( variant.compare_at_price > variant.price ) {
            $('#product_price').html('<span class="product-price on-sale">'+ Shopify.formatMoney(variant.price, "{{ shop.money_format }}") +'</span>'+'&nbsp;<s class="product-compare-price">'+Shopify.formatMoney(variant.compare_at_price, "{{ shop.money_format }}")+ '</s>');
        } else {
            $('#product_price').html('<span class="product-price">'+ Shopify.formatMoney(variant.price, "{{ shop.money_format }}") + '</span>' );
        }
        $('#images_wrap.slider').slick('slickGoTo', variantImagePos);
    } else {
        // variant doesn't exist.
        $('#add').val('Select an Option').addClass('disabled').attr('disabled', 'disabled').fadeTo(200,0.5);
    }
}

// initialize multi selector for product
jQuery(function($) {
  new Shopify.OptionSelectors("product-select", {
    product: {{ product | json }},
    onVariantSelected: selectCallback,
    enableHistoryState: true
  });
});
// ]]>
</script>

Помимо этой ошибки, все работает как положено. 

Uncaught TypeError: Cannot read property 'slickGoTo' of undefined
    at init.a.fn.slick (plugins.js?580:125)
    at Shopify.OptionSelectors.selectCallback [as onVariantSelected] (i-d-357?_pos=1&_sid=8279d5dd2&_ss=r:901)
    at Shopify.OptionSelectors.updateSelectors (option_selection-fe6b72c2bbdd3369ac0bfefe8648e3c889efca213baefd4cfb0dd9363563831f.js:1)
    at HTMLSelectElement.element.onchange (option_selection-fe6b72c2bbdd3369ac0bfefe8648e3c889efca213baefd4cfb0dd9363563831f.js:1)
    at Object.trigger (plugins.js?580:5)
    at HTMLSelectElement.<anonymous> (plugins.js?580:5)
    at Function.each (plugins.js?580:4)
    at init.each (plugins.js?580:4)
    at init.trigger (plugins.js?580:5)
    at Shopify.OptionSelectors.selectVariant (option_selection-fe6b72c2bbdd3369ac0bfefe8648e3c889efca213baefd4cfb0dd9363563831f.js:1)
...