Как отобразить цвета на архиве WooCommerce?

Question

[Alien93]

Это срин чужого сайта, на котором сделанно то, что я хочу сделать у себя, то есть, чтобы на архиве с продуктами можно было выбрать цвет и картинка товара также поменялась бы. Есть какие-то идеи?

Comments

[Alex Vasilyev]

Если нет желания самому писать то используй готовые решение. Вот пример https://ru.wordpress.org/plugins/color-and-image-s...
Таких плагинов полно, просто используй гугл.

[Alien93]

Alex Vasilyev, дело вовсе не в стилизации кружочков. Я уже вовожу цвета на страницу архива, но когда кликаю по ним, главная картинка не меняется... я хоть убей... я уже не знаю что делать

[Alex Vasilyev]

Alien93, Допишите js, который при клике будет менять картинку. В чем сложность?)

[Alien93]

Alex Vasilyev,

сложность в том, что я вариация продуктов создает в коде такую штуку и я не знаю, как можно решить этот вопрос.

[Alex Vasilyev]

Там json массив.
При клике на black. Проходите по массиву и выбираете те пункты в которых есть в поле "attributes" значение "atribute_pa_color" == "black". Далее из этого пункта берете image.url и меняете src атрибуту картинки. Все)

[Alien93]

я с json совсем не знаком... только с jquery)) можете, пожалуйста, хоть приблезительно прикинуть, как оно будет выглядеть? И спасибо что даете мне лучики надежды решения этой проблемы.. ибо я почти 2 дня ломаю голову....

[Alex Vasilyev]

Alien93, Вот пример но я не проверял код, главное что бы логику поняли

jQuery(document.body).on('change', '#pa_color', function (event) {
    var selectElement = jQuery(event.currentTarget),
        color = selectElement.val(),
        formElement = selectElement.parents('.variations_form'),
        productVariations = JSON.parse(formElement.attr('data-product_variations'));

    for ( var index in productVariations ) {
        var productVariation = productVariations[index];

        if (productVariation.attributes.hasOwnProperty('attribute_pa_color') && productVariation.attributes.attribute_pa_color == color) {
            var productElement = formElement.parents('.product:first');

            productElement.find('.attachment-woocommerce_thumbnail').attr('src', productVariation.image.url);

            break;
        }
    }
});

[Alien93]

Alex Vasilyev, Товарищь, большое вам человеческое СПАСИБО за то, что направили меня в нужном направлении! СПАСИБО!!!