0
Я использую woocommerce и плагин, чтобы он соответствовал потребностям немецкого рынка. Я использую аддон, который реализует время доставки. Но только в нормальном черном цвете. Я действительно работаю с 2 сроками доставки, 1 - 3 и 5 - 10 дней. Если время доставки составляет 1 - 3 дня, оно должно отображаться зеленым цветом, если срок доставки составляет 5 - 10 дней, я хочу видеть его оранжевым.изменение стиля разного класса с помощью document.getElementsByClassName
Я уже сделал это, чтобы изменить отображаемый цвет на мои потребности на статических страницах (продукты без вариантов, таких как цвета). Полный класс CSS называется "туалет-ГЖД-дополнительный-информация по доставке времени-инфо"
Я добавил некоторые Java в сноске:
<script type='text/javascript'>
var elementsa = document.getElementsByClassName("delivery-time-info")[0];
var elementsb = elementsa.innerHTML;
var elementsc = elementsa.innerHTML;
if (elementsb == "Lieferzeit: 1 - 3 Tage")
{
elementsa.innerHTML = "<span style='color:green;font-weight:bold;'>"+elementsb+"</span>";
}
if (elementsc == "Lieferzeit: 5 - 10 Tage")
{
elementsa.innerHTML = "<span style='color:orange;font-weight:bold;'>"+elementsc+"</span>";
}
</script>В результате в код, например:
<p class="wc-gzd-additional-info delivery-time-info"><span style="color:orange;font-weight:bold;">Lieferzeit: 5 - 10 Tage</span></p>Но моя проблема состоит в том, чтобы внести эти изменения в страницы продуктов С вариантами, например, цветами.
Проблема заключается в том, что линия с
<p class="wc-gzd-additional-info delivery-time-info">НЕ отображается, если и нету выбран цвет. После принял решение изменяет линия/добавляет элемент класса CSS для:
<p class="wc-gzd-additional-info delivery-time-info variation_modified" style="display: block;">Lieferzeit: 1 - 3 Tage</p>Я пробовал различные вещи, как изменение document.getElementsByClassName ("поставки время-инфо") к document.getElementsByClassName ("доставка-времени-Инфо" +» "+ variation_modified")
и другие варианты.
Но я думаю, что проблема в том, что код изменяется после загрузки страницы?
Любой совет, как это сделать? Вид повторного сканирования страницы или около того?
С наилучшими пожеланиями и благодарю вас!
Редактировать после первого ответа, слишком долго, чтобы оставлять комментарии: метода поста я думаю, просто просмотрел код вручную снова и Тайс является то, что ehind кнопки вариации ... Кажется, все уже загружен ...
<form class="variations_form cart" method="post" enctype="multipart/form-data" data-product_id="658" data-product_variations="[{"variation_id":662,"variation_is_visible":true,"variation_is_active":true,"is_purchasable":true,"display_price":37.37,"display_regular_price":37.37,"attributes":{"attribute_farbe":"Pink"},"image_src":"","image_link":"","image_title":"","image_alt":"","price_html":"<span class=\"price\"><span class=\"amount\">37,37 €<\/span><\/span>","availability_html":"","sku":"440072","weight":" kg","dimensions":"","min_qty":1,"max_qty":"","backorders_allowed":false,"is_in_stock":true,"is_downloadable":false,"is_virtual":false,"is_sold_individually":"no","variation_description":"","delivery_time":"Lieferzeit: 1 - 3 Tage","unit_price":"","product_units":"","tax_info":"inkl. 19% MwSt."},{"variation_id":663,"variation_is_visible":true,"variation_is_active":true,"is_purchasable":true,"display_price":37.37,"display_regular_price":37.37,"attributes":{"attribute_farbe":"Gelb"},"image_src":"","image_link":"","image_title":"","image_alt":"","price_html":"<span class=\"price\"><span class=\"amount\">37,37 €<\/span><\/span>","availability_html":"","sku":"440074","weight":" kg","dimensions":"","min_qty":1,"max_qty":"","backorders_allowed":false,"is_in_stock":true,"is_downloadable":false,"is_virtual":false,"is_sold_individually":"no","variation_description":"","delivery_time":"Lieferzeit: 1 - 3 Tage","unit_price":"","product_units":"","tax_info":"inkl. 19% MwSt."},{"variation_id":664,"variation_is_visible":true,"variation_is_active":true,"is_purchasable":true,"display_price":45.16,"display_regular_price":45.16,"attributes":{"attribute_farbe":"Blau"},"image_src":"","image_link":"","image_title":"","image_alt":"","price_html":"<span class=\"price\"><span class=\"amount\">45,16 €<\/span><\/span>","availability_html":"","sku":"440073","weight":" kg","dimensions":"","min_qty":1,"max_qty":"","backorders_allowed":false,"is_in_stock":true,"is_downloadable":false,"is_virtual":false,"is_sold_individually":"no","variation_description":"","delivery_time":"Lieferzeit: 1 - 3 Tage","unit_price":"","product_units":"","tax_info":"inkl. 19% MwSt."}]">
<table class="variations" cellspacing="0">
<tbody>
<tr>
<td class="product_label"><label for="farbe">Farbe</label></td>
<td class="product_value">
<div class="select2-container kad-select select2-dropdown-open select2-container-active" id="s2id_farbe"><a href="javascript:void(0)" class="select2-choice" tabindex="-1"> <span class="select2-chosen" id="select2-chosen-2">Pink</span><abbr class="select2-search-choice-close"></abbr> <span class="select2-arrow" role="presentation"><b role="presentation"></b></span></a><label for="s2id_autogen2" class="select2-offscreen">Farbe</label><input class="select2-focusser select2-offscreen" type="text" aria-haspopup="true" role="button" aria-labelledby="select2-chosen-2" id="s2id_autogen2" disabled=""></div><select id="farbe" class="kad-select select2-offscreen" name="attribute_farbe" data-attribute_name="attribute_farbe" title="Farbe" tabindex="-1"><option value="">Wählen Sie eine Ausführung</option><option value="Pink" class="attached enabled">Pink</option><option value="Gelb" class="attached enabled">Gelb</option><option value="Blau" class="attached enabled">Blau</option></select><a class="reset_variations" href="#" style="visibility: visible; display: inline;">Lösche Auswahl</a> </td>
</tr>
</tbody>
</table>
<div class="single_variation_wrap_kad" style="display:block;">
<div class="single_variation headerfont"><span class="price" style="display: none;"><span class="amount">37,37 €</span></span></div> <div class="variations_button" style="">
<div class="quantity buttons_added"><input type="button" value="-" class="minus"><input type="number" step="1" name="quantity" value="1" title="Menge" class="input-text qty text" size="4" min="1"><input type="button" value="+" class="plus"></div>
<button type="submit" class="kad_add_to_cart headerfont kad-btn kad-btn-primary single_add_to_cart_button">In den Warenkorb</button>
<input type="hidden" name="add-to-cart" value="658">
<input type="hidden" name="product_id" value="658">
<input type="hidden" name="variation_id" class="variation_id" value="662">
</div>
</div>
Это.JS файл, который запрашивает для конкретных информаций продукта из вариантов:
/*!
* Variations Plugin
*/
;(function ($, window, document, undefined) {
\t $.fn.wc_gzd_variation_form = function() {
\t \t $.fn.wc_gzd_variation_form.reset_variation = function() {
\t \t \t if ($('.type-product').find('.org_price').length > 0) {
\t \t \t \t $('.type-product .price.variation_modified:not(.price-unit)').html($('.type-product').find('.org_price').html()).removeClass('variation_modified').show();
\t \t \t }
\t \t \t if ($('.type-product').find('.org_delivery_time').length > 0) {
\t \t \t \t $('.type-product .delivery-time-info').html($('.type-product').find('.org_delivery_time').html()).removeClass('variation_modified').show();
\t \t \t }
\t \t \t if ($('.type-product').find('.org_unit_price').length > 0) {
\t \t \t \t $('.type-product .unit-price').html($('.product').find('.org_unit_price').html()).removeClass('variation_modified').show();
\t \t \t }
\t \t \t if ($('.type-product').find('.org_tax_info').length > 0) {
\t \t \t \t $('.type-product .tax-info').html($('.product').find('.org_tax_info').html()).removeClass('variation_modified').show();
\t \t \t }
\t \t \t if ($('.type-product').find('.org_product_units').length > 0) {
\t \t \t \t $('.type-product .product-units').html($('.product').find('.org_product_units').html()).removeClass('variation_modified').show();
\t \t \t }
\t \t \t $('.org_product_info').remove();
\t \t \t $('.variation_modified').remove();
\t \t }
\t \t $form = this
\t \t $wrapper = $form.parents('.type-product')
\t \t .on('found_variation', function(event, variation) {
\t \t \t if (! $wrapper.find('.price:first').hasClass('variation_modified')) {
\t \t \t \t $wrapper.append('<div class="org_price org_product_info">' + $wrapper.find('.price:not(.price-unit):first').html() + '</div>');
\t \t \t \t if ($wrapper.find('.delivery-time-info:first').length > 0)
\t \t \t \t \t $wrapper.append('<div class="org_delivery_time org_product_info">' + $wrapper.find('.delivery-time-info:first').html() + '</div>');
\t \t \t \t if ($wrapper.find('.tax-info:first').length > 0)
\t \t \t \t \t $wrapper.append('<div class="org_tax_info org_product_info">' + $wrapper.find('.tax-info:first').html() + '</div>');
\t \t \t \t if ($wrapper.find('.price-unit:first').length > 0)
\t \t \t \t \t $wrapper.append('<div class="org_unit_price org_product_info">' + $wrapper.find('.price-unit:first').html() + '</div>');
\t \t \t \t if ($wrapper.find('.product-units:first').length > 0)
\t \t \t \t \t $wrapper.append('<div class="org_product_units org_product_info">' + $wrapper.find('.product-units:first').html() + '</div>');
\t \t \t \t $('.org_product_info').hide();
\t \t \t }
\t \t \t if (variation.price_html != '') {
\t \t \t \t $('.single_variation .price').hide();
\t \t \t \t $wrapper.find('.price:not(.price-unit):first').html(variation.price_html).addClass('variation_modified');
\t \t \t }
\t \t \t $wrapper.find('.delivery-time-info:first').hide();
\t \t \t $wrapper.find('.price-unit:first').hide();
\t \t \t $wrapper.find('.tax-info:first').hide();
\t \t \t $wrapper.find('.product-units:first').hide();
\t \t \t if (variation.delivery_time != '')
\t \t \t \t $wrapper.find('p.delivery-time-info:first').html(variation.delivery_time).addClass('variation_modified').show();
\t \t \t if (variation.tax_info != '')
\t \t \t \t $wrapper.find('.tax-info:first').html(variation.tax_info).addClass('variation_modified').show();
\t \t \t if (variation.unit_price != '') {
\t \t \t \t $wrapper.find('.price-unit:first').remove();
\t \t \t \t $wrapper.find('div[itemprop="offers"]:first').after('<p class="price price-unit smaller variation_modified">' + variation.unit_price + '</p>').show();
\t \t \t }
\t \t \t if (variation.product_units != '') {
\t \t \t \t $wrapper.find('.product-units:first').remove();
\t \t \t \t $wrapper.find('.product_meta').prepend('<span class="product-units-wrapper product-units variation_modified">' + variation.product_units + '</span>').show();
\t \t \t }
\t \t })
\t \t // Check variations
\t \t .on('update_variation_values', function(event, matching_variations) {
\t \t \t setTimeout(function() {
\t \t \t if (! $('.single_variation_wrap').is(':visible')) {
\t \t \t \t $.fn.wc_gzd_variation_form.reset_variation();
\t \t \t }
\t \t }, 250); \t
\t \t })
\t \t .on('click', '.reset_variations', function(event) {
\t \t \t $.fn.wc_gzd_variation_form.reset_variation();
\t \t });
\t };
\t $(function() {
\t \t // wc_add_to_cart_variation_params is required to continue, ensure the object exists
\t \t if (typeof wc_add_to_cart_variation_params === 'undefined')
\t \t \t return false;
\t \t $('.variations_form').wc_gzd_variation_form();
\t \t $('.variations_form .variations select').change();
\t \t $('.variations_form .variations input:radio:checked').change();
\t });
})(jQuery, window, document);Я actualy могу сделать ITT O Отредактируйте вариации, потому что, как я пытался выше должен отсканировать после каждого «выбрали OFA вариант».
Ваше «повторное сканирование» верно. Вам нужно как-то прослушать изменение времени доставки, а затем снова запустить код. Например. если время доставки выбрано с помощью '
метод - это сообщение, я думаю, просто отсканировал код вручную снова, и theis - вот что такое кнопка изменения ... похоже, что все уже загружено ... посмотрите, пожалуйста, добавьте его в исходное сообщение –
Как вы генерируете доставку времени? Являются ли сроки доставки конкретными для каждого варианта? Мне сложно понять, что происходит со всеми вашими блоками кода. Не могли бы вы как-то упростить его для моего бедного, с запасом сил мозгов? – helgatheviking