Функция триггера Shopify при выборе варианта, но не переопределяет существующую функциональность - PullRequest
Новая
       23

Функция триггера Shopify при выборе варианта, но не переопределяет существующую функциональность

1 голос
/ 29 июня 2019

Я использую тему 'Loft' на Shopify. Когда я выбираю вариант на странице продукта, они обновляют SKU и цену на этот вариант. Мне нужно больше функциональности, чем эта, поскольку я хотел бы показать размеры каждого варианта с использованием метаполей.

Я создал функцию и вызвал ее для варианта, подобного так: 

jQuery(function($) {
  new Shopify.OptionSelectors('productSelect', {
    product: {{ product | json }},
    onVariantSelected: selectCallback,
    enableHistoryState: true
  });
});

Моя функция вызывается, и я могу выполнять нужные действия. Но это останавливает действия по умолчанию, такие как обновление цены и SKU. Есть ли способ, которым я могу назвать оба?

Ответы [ 2 ]

1 голос
/ 01 июля 2019

Есть несколько способов заставить эту работу.

Во-первых, вам нужно знать, как ваша тема изначально обрабатывает варианты.Для loft он использует объект theme.Variant, поэтому выбор пользовательского варианта так же прост: 

jQuery('#shopify-section-product-template').on('theme:variants:changed', function(evt, variantObj){

   console.log('theme event for '+ variantObj.sku); // limited view of variant.
   console.log(variantObj);
});

Для тем, которые используют старый Shopify.OptionSelectors, вы можете либо сделать эту старую школу, переопределив глобальный selectCallbackфункция как: 

(function(){
   var original_selectCallback = window.selectCallback;
   window.selectCallback = function(variant, selector) {
    original_selectCallback(variant, selector); // call the original function
    myCustomHandler(variant); // called with the full jsonified variant object.
};

})();

Наконец, большинство современных тем, с которыми я имел дело, и темы, которые используют Shopify.OptionSelectors с enableHistoryState: true, позволяют вам пропустить беспорядок переопределений и установить свой собственный обработчик истории.Вот где вам нужен собственный скрипт / жидкость для сборки JSON, который вам понадобится для получения варианта и свойств продукта: 

document.addEventListener('DOMContentLoaded', function(){

function usePushState(handler){

    //modern themes use pushstate to track variant changes without reload
    function track (fn, handler, before) {
        return function interceptor () {
            if (before) {
                handler.apply(this, arguments);
                return fn.apply(this, arguments);
            } else {
                var result = fn.apply(this, arguments);
                handler.apply(this, arguments);
                return result;
            }
        };
    }

    var currentVariantId = null;
    function variantHandler () {
        var selectedVariantId = window.location.search.replace(/.*variant=(\d+).*/, '$1');
        console.log('checking variant change to '+ selectedVariantId);
        if(!selectedVariantId) return;
        if(selectedVariantId != currentVariantId){
            currentVariantId = selectedVariantId;
            handler(selectedVariantId);
        }
    }

    // Assign listeners
    window.history.pushState = track(history.pushState, variantHandler);
    window.history.replaceState = track(history.replaceState, variantHandler);
    window.addEventListener('popstate', variantHandler);
}


usePushState(function(variantId){
    console.log('variant: '+ variantId +' selected');
});
});
0 голосов
/ 29 июня 2019

Рецепт для вас следующий.Когда исходный Liquid рендерится (происходит один раз), вы сохраняете продукт как json в некоторую переменную Javascript.У вас есть дополнительная задача циклически проходить по вариантам и назначать каждому варианту их метаполя.Чтобы упростить свою жизнь, вы могли бы выбрать сохранение вариантов вариантов в виде метаполя JSON_STRING на уровне продукта, где идентификатор варианта - это ваш ключ, а измерения - это значение.

Тем не менее, вы сохраняете измерения, привязанные к идентификатору варианта.Теперь, когда происходит событие смены селектора, вы передаете вариант на блюде в существующем обратном вызове селектора опции.Напишите себе функцию, которая использует предоставленный идентификатор варианта, чтобы получить размеры от уже сохраненного объекта.С этими значениями обновите DOM, и все готово.

...