java - changing style of a varying class with document.getElementsByClassName -
i using woocommerce , plugin fit needs of german market. use addon implements delivery times. in normal black colour. actualy work 2 delivery times, 1 - 3 , 5 - 10 days. if delivery time 1 - 3 days should displayed in green, if delivery time 5 - 10 days want see in orange.
i made change displayed colour needs on static pages (products without variants colors). complete css class called "wc-gzd-additional-info delivery-time-info"
i added java footer:
<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>the result in code example:
<p class="wc-gzd-additional-info delivery-time-info"><span style="color:orange;font-weight:bold;">lieferzeit: 5 - 10 tage</span></p>but problem make these changes product pages variants colors example.
the problem line
<p class="wc-gzd-additional-info delivery-time-info">is not displayed if u havent chosen color. after made decision line changes / adds css class element to:
<p class="wc-gzd-additional-info delivery-time-info variation_modified" style="display: block;">lieferzeit: 1 - 3 tage</p>i tried various things changing document.getelementsbyclassname("delivery-time-info") document.getelementsbyclassname("delivery-time-info"+" "+variation_modified")
and other variations.
but think problem code changes after page loaded?
any tip how make it? kind of rescanning page or so?
best regards , thank much!
edit after first answer, long comment: method post think, scanned code manually again , theis ehind variation button...seems loaded...
<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> this .js file asks specific product informations of variants:
/*! * variations plugin */ ;(function ( $, window, document, undefined ) { $.fn.wc_gzd_variation_form = function () { $.fn.wc_gzd_variation_form.reset_variation = function() { if ( $('.type-product').find('.org_price').length > 0 ) { $( '.type-product .price.variation_modified:not(.price-unit)' ).html( $('.type-product').find('.org_price').html() ).removeclass('variation_modified').show(); } if ( $('.type-product').find('.org_delivery_time').length > 0 ) { $( '.type-product .delivery-time-info' ).html( $('.type-product').find('.org_delivery_time').html() ).removeclass('variation_modified').show(); } if ( $('.type-product').find('.org_unit_price').length > 0 ) { $( '.type-product .unit-price' ).html( $('.product').find('.org_unit_price').html() ).removeclass('variation_modified').show(); } if ( $('.type-product').find('.org_tax_info').length > 0 ) { $( '.type-product .tax-info' ).html( $('.product').find('.org_tax_info').html() ).removeclass('variation_modified').show(); } if ( $('.type-product').find('.org_product_units').length > 0 ) { $( '.type-product .product-units' ).html( $('.product').find('.org_product_units').html() ).removeclass('variation_modified').show(); } $('.org_product_info').remove(); $('.variation_modified').remove(); } $form = $wrapper = $form.parents( '.type-product' ) .on( 'found_variation', function( event, variation ) { if ( ! $wrapper.find( '.price:first' ).hasclass( 'variation_modified' ) ) { $wrapper.append( '<div class="org_price org_product_info">' + $wrapper.find( '.price:not(.price-unit):first' ).html() + '</div>' ); if ( $wrapper.find( '.delivery-time-info:first' ).length > 0 ) $wrapper.append( '<div class="org_delivery_time org_product_info">' + $wrapper.find( '.delivery-time-info:first' ).html() + '</div>' ); if ( $wrapper.find( '.tax-info:first' ).length > 0 ) $wrapper.append( '<div class="org_tax_info org_product_info">' + $wrapper.find( '.tax-info:first' ).html() + '</div>' ); if ( $wrapper.find( '.price-unit:first' ).length > 0 ) $wrapper.append( '<div class="org_unit_price org_product_info">' + $wrapper.find( '.price-unit:first' ).html() + '</div>' ); if ( $wrapper.find( '.product-units:first' ).length > 0 ) $wrapper.append( '<div class="org_product_units org_product_info">' + $wrapper.find( '.product-units:first' ).html() + '</div>' ); $( '.org_product_info' ).hide(); } if ( variation.price_html != '' ) { $( '.single_variation .price' ).hide(); $wrapper.find( '.price:not(.price-unit):first' ).html( variation.price_html ).addclass( 'variation_modified' ); } $wrapper.find( '.delivery-time-info:first' ).hide(); $wrapper.find( '.price-unit:first' ).hide(); $wrapper.find( '.tax-info:first' ).hide(); $wrapper.find( '.product-units:first' ).hide(); if ( variation.delivery_time != '' ) $wrapper.find( 'p.delivery-time-info:first' ).html( variation.delivery_time ).addclass('variation_modified').show(); if ( variation.tax_info != '' ) $wrapper.find( '.tax-info:first' ).html( variation.tax_info ).addclass('variation_modified').show(); if ( variation.unit_price != '' ) { $wrapper.find( '.price-unit:first' ).remove(); $wrapper.find( 'div[itemprop="offers"]:first' ).after('<p class="price price-unit smaller variation_modified">' + variation.unit_price + '</p>').show(); } if ( variation.product_units != '' ) { $wrapper.find( '.product-units:first' ).remove(); $wrapper.find( '.product_meta' ).prepend('<span class="product-units-wrapper product-units variation_modified">' + variation.product_units + '</span>').show(); } }) // check variations .on( 'update_variation_values', function( event, matching_variations ) { settimeout(function() { if ( ! $('.single_variation_wrap').is(':visible') ) { $.fn.wc_gzd_variation_form.reset_variation(); } }, 250); }) .on( 'click', '.reset_variations', function( event ) { $.fn.wc_gzd_variation_form.reset_variation(); }); }; $( function() { // wc_add_to_cart_variation_params required continue, ensure object exists if ( typeof wc_add_to_cart_variation_params === 'undefined' ) return false; $( '.variations_form' ).wc_gzd_variation_form(); $( '.variations_form .variations select' ).change(); $( '.variations_form .variations input:radio:checked' ).change(); }); })( jquery, window, document );i actualy cant make itt o edit variations because way tried above has rescan after each "chose ofa variation".
[solved]
okay way more easy....
just go wp_terms right row , change name "1 - 3 tage"
<span style='color:green;font-weight:bold;'>1 - 3 tage</span>i tried enter in wp backend, didnt work.
but worked entering via phpmyadmin.
thanks , best regards!
Comments
Post a Comment