We help IT Professionals succeed at work.

How to remove unwanted text with Javascript on a webpage

200 Views
Last Modified: 2018-03-13
I had this question after viewing Conditionally hide product variety label and field in WooCommerce Basket.

Woocommerce has had an update since my previous question was posed, and now the JQuery which worked before no longer does.

So now we need to remove "- None" if it appears in the basket and order confirmation presented by WooCommerce. Following is the html of the table, showing a table cell with "- None" after the product name. Can you say what javascript we should apply to remove the variation if it is "-None" but keep it if it is anything else?

<td class="product-name" data-title="Product">
<a href="http://sudsnax.com/product/Ab00282-2-0/?attribute_pa_variation=st">Anti-CD41 [7E3 (Abciximab)] Standard size, 200 μg, Ab00282-2.0 - None</a>						
</td>

Open in new window

Comment
Watch Question

Sr. System Analyst
CERTIFIED EXPERT
Commented:
Unlock this solution and get a sample of our free trial.
(No credit card required)
UNLOCK SOLUTION
Tim BrocklehurstHead of Digital

Author

Commented:
Thank you Huseyin

Your solution has been really helpful. We are still working on the configuration of this output however, so many apologies for the delay in coming back to you, but its still not entirely finished.
Tim BrocklehurstHead of Digital

Author

Commented:
Hi again Huseyin

I have been trying to get your solution to work, but I'm unable to. I think it is because I can't get the correct CSS syntax for the elements we need to edit.

We also now need proceed each item in the basket which doesn't contain "- None" with the word "conjugated". perhaps with an ::after call...?

This is a typical basket page, (access pw: ababs) - so you can look at the css identifiers, on our staging site. Please could you let me know what the js code should be to replace "- None" with "" and also to add the text " conjugated" on the end when a product doesn't have "- None" in it?

Thank you so much for your patience with us.

Tim
aa12.png
HainKurtSr. System Analyst
CERTIFIED EXPERT

Commented:
This site can’t be reached

The webpage at http://www.sudsnax.com/basket/?cxecrt-retrieve-cart=20685 might be temporarily down or it may have moved permanently to a new web address.

here new code

https://jsfiddle.net/6peood2t/

HTML
<div id=divProducts>

  <a href="http://sudsnax.com/product/Ab00282-2-0/?attribute_pa_variation=st">Anti-CD41 [7E3 (Abciximab)] Standard size, 200 μg, Ab00282-2.0 - None</a>
  <br>
  <a href="http://sudsnax.com/product/Ab00282-2-0/?attribute_pa_variation=st">Anti-CD41 [7E3 (Abciximab)] Small size, 100 μg, Ab00282-2.0</a>
  <br>
  <a href="http://sudsnax.com/product/Ab00282-2-0/?attribute_pa_variation=st">Anti-CD41 [7E3 (Abciximab)] Large size, 600 μg, Ab00282-2.0 - None</a>

</div>

Open in new window


CODE
String.prototype.endsWith = function(pattern) {
  var d = this.length - pattern.length;
  return d >= 0 && this.lastIndexOf(pattern) === d;
};

$("#divProducts a").each(function(index) {
  if ($(this).text().endsWith("- None"))
    $(this).text($(this).text().replace("- None", ""))
  else
    $(this).text($(this).text() + " conjugated");
});

Open in new window

Tim BrocklehurstHead of Digital

Author

Commented:
Thank you for that Husayin. I really appreciate it.
Sorry you can't see the site - it loads OK here, so it must be a firewall thing on the server or something.

Following is the actual html leading to the real table on the page. Are you able to just tell me what the correct syntax should be therefore, for identifying the product section of the table, for the java and jquery to alter?

I tried  " .woocommerce table.shop_table td.product_name a " and a few others, but I couldn't get it to work...

Thank you again
Tim


	<table class="shop_table shop_table_responsive cart woocommerce-cart-form__contents" cellspacing="0">
		<thead>
			<tr>
				<th class="product-remove">&nbsp;</th>
				<th class="product-thumbnail">&nbsp;</th>
				<th class="product-name">Product</th>
				<th class="product-price">Price</th>
				<th class="product-quantity">Quantity</th>
				<th class="product-subtotal">Total</th>
			</tr>
		</thead>
		<tbody>
			<tr><td></td></tr>
								<tr class="woocommerce-cart-form__cart-item cart_item">

						<td class="product-remove">
							<a href="http://sudsnax.com/basket/?remove_item=ce3b0aeb5df9d59032fe5c41351b56d2&#038;_wpnonce=12994da8c4" class="remove" aria-label="Remove this item" data-product_id="19572" data-product_sku="Ab00282-2.0ac        ">&times;</a>						</td>

						<td class="product-thumbnail">
							<a href="http://sudsnax.com/product/ab00282-2-0/?attribute_pa_variation=ac"><img width="95" height="95" src="//sudsnax.com/wp-content/uploads/Null_logo.png" class="attachment-shop_thumbnail size-shop_thumbnail wp-post-image" alt="" /></a>						</td>

						<td class="product-name" data-title="Product">
							<a href="http://sudsnax.com/product/ab00282-2-0/?attribute_pa_variation=ac">Anti-CD41 [7E3 (Abciximab)] Standard size, 200 &mu;g, Ab00282-2.0 - Allophycocyanin</a>						</td>

						<td class="product-price" data-title="Price">
							<span class="woocommerce-Price-amount amount"><span class="woocommerce-Price-currencySymbol">&pound;</span>360</span>						</td>

						<td class="product-quantity" data-title="Quantity">
								<div class="quantity">
		<input type="number" class="input-text qty text" step="1" min="0" max="" name="cart[ce3b0aeb5df9d59032fe5c41351b56d2][qty]" value="1" title="Qty" size="4" pattern="[0-9]*" inputmode="numeric" />
	</div>
							</td>

						<td class="product-subtotal" data-title="Total">
							<span class="woocommerce-Price-amount amount"><span class="woocommerce-Price-currencySymbol">&pound;</span>360</span>						</td>
					</tr>
										<tr class="woocommerce-cart-form__cart-item cart_item">

						<td class="product-remove">
							<a href="http://sudsnax.com/basket/?remove_item=ab29e26b62b3bd164a2926b53b99bdfa&#038;_wpnonce=12994da8c4" class="remove" aria-label="Remove this item" data-product_id="19572" data-product_sku="Ab00282-2.0st        ">&times;</a>						</td>

						<td class="product-thumbnail">
							<a href="http://sudsnax.com/product/ab00282-2-0/?attribute_pa_variation=st"><img width="95" height="95" src="//sudsnax.com/wp-content/uploads/Null_logo.png" class="attachment-shop_thumbnail size-shop_thumbnail wp-post-image" alt="" /></a>						</td>

						<td class="product-name" data-title="Product">
							<a href="http://sudsnax.com/product/ab00282-2-0/?attribute_pa_variation=st">Anti-CD41 [7E3 (Abciximab)] Standard size, 200 &mu;g, Ab00282-2.0 - None</a>						</td>

						<td class="product-price" data-title="Price">
							<span class="woocommerce-Price-amount amount"><span class="woocommerce-Price-currencySymbol">&pound;</span>240</span>						</td>

						<td class="product-quantity" data-title="Quantity">
								<div class="quantity">
		<input type="number" class="input-text qty text" step="1" min="0" max="" name="cart[ab29e26b62b3bd164a2926b53b99bdfa][qty]" value="2" title="Qty" size="4" pattern="[0-9]*" inputmode="numeric" />
	</div>
							</td>

						<td class="product-subtotal" data-title="Total">
							<span class="woocommerce-Price-amount amount"><span class="woocommerce-Price-currencySymbol">&pound;</span>480</span>						</td>
					</tr>
										<tr class="woocommerce-cart-form__cart-item cart_item">

						<td class="product-remove">
							<a href="http://sudsnax.com/basket/?remove_item=fb9cecfd2979095339c5437f656581a0&#038;_wpnonce=12994da8c4" class="remove" aria-label="Remove this item" data-product_id="12338" data-product_sku="Ab00674-23.0fl        ">&times;</a>						</td>

						<td class="product-thumbnail">
							<a href="http://sudsnax.com/product/Ab00674-23-0/?attribute_pa_variation=fl"><img width="95" height="95" src="//sudsnax.com/wp-content/uploads/Null_logo.png" class="attachment-shop_thumbnail size-shop_thumbnail wp-post-image" alt="" /></a>						</td>

						<td class="product-name" data-title="Product">
							<a href="http://sudsnax.com/product/Ab00674-23-0/?attribute_pa_variation=fl">Anti-WNV Envelope protein DIII [E16] Standard size, 200 &mu;g, Ab00674-23.0 - Fluorescein</a>						</td>

						<td class="product-price" data-title="Price">
							<span class="woocommerce-Price-amount amount"><span class="woocommerce-Price-currencySymbol">&pound;</span>390</span>						</td>

						<td class="product-quantity" data-title="Quantity">
								<div class="quantity">
		<input type="number" class="input-text qty text" step="1" min="0" max="" name="cart[fb9cecfd2979095339c5437f656581a0][qty]" value="1" title="Qty" size="4" pattern="[0-9]*" inputmode="numeric" />
	</div>
							</td>

						<td class="product-subtotal" data-title="Total">
							<span class="woocommerce-Price-amount amount"><span class="woocommerce-Price-currencySymbol">&pound;</span>390</span>						</td>
					</tr>
					
			<tr><td></td></tr>
			<tr>
				<td colspan="6" class="actions">

					
					<input type="submit" class="button" name="update_cart" value="Update basket" />

					
					<input type="hidden" id="_wpnonce" name="_wpnonce" value="12994da8c4" /><input type="hidden" name="_wp_http_referer" value="/basket/" />				</td>
			</tr>

			<tr><td></td></tr>		</tbody>
	</table>

Open in new window

HainKurtSr. System Analyst
CERTIFIED EXPERT

Commented:
in your case, use productname class
String.prototype.endsWith = function(pattern) {
  var d = this.length - pattern.length;
  return d >= 0 && this.lastIndexOf(pattern) === d;
};

$(".product-name a").each(function(index) {
  if ($(this).text().endsWith("- None"))
    $(this).text($(this).text().replace("- None", ""))
  else
    $(this).text($(this).text() + " conjugated");
});

Open in new window


demo
https://jsfiddle.net/5m29pasn/

or even better

$(".shop_table .cart_item .product-name a").each(function(index)

in the select...
Tim BrocklehurstHead of Digital

Author

Commented:
Thank you Huseyin

Yes -  $(".shop_table .cart_item .product-name a").each(function(index)   worked in the select and the Cart page is now showing as needed.

One final thing if I may:

After the Cart page is the Order confirmation page. But that still shows the products with variations  as we don't want them, so we need to apply the same css rules there.

Attached is the html of the table on that page, can you say what the code should be, or what we should add to the existing code, to include the same rules please:

<table class="shop_table woocommerce-checkout-review-order-table">
	<thead>
		<tr>
			<th class="product-name">Product</th>
			<th class="product-total">Total</th>
		</tr>
	</thead>
	<tbody>
							<tr class="cart_item">
						<td class="product-name">
							Anti-CD41 [7E3 (Abciximab)] Standard size, 200 &mu;g, Ab00282-2.0 - Allophycocyanin&nbsp;							 <strong class="product-quantity">&times; 1</strong>													</td>
						<td class="product-total">
							<span class="woocommerce-Price-amount amount"><span class="woocommerce-Price-currencySymbol">&pound;</span>360</span>						</td>
					</tr>
										<tr class="cart_item">
						<td class="product-name">
							Anti-CD41 [7E3 (Abciximab)] Standard size, 200 &mu;g, Ab00282-2.0 - None&nbsp;							 <strong class="product-quantity">&times; 2</strong>													</td>
						<td class="product-total">
							<span class="woocommerce-Price-amount amount"><span class="woocommerce-Price-currencySymbol">&pound;</span>480</span>						</td>
					</tr>
								

Open in new window

HainKurtSr. System Analyst
CERTIFIED EXPERT

Commented:
https://jsfiddle.net/tmhdrrz0/
String.prototype.endsWith = function(pattern) {
  var d = this.length - pattern.length;
  return d >= 0 && this.lastIndexOf(pattern) === d;
};
String.prototype.includes = function(search, start) {
  'use strict';
  if (typeof start !== 'number') {
    start = 0;
  }

  if (start + search.length > this.length) {
    return false;
  } else {
    return this.indexOf(search, start) !== -1;
  }
};
$(".shop_table .cart_item .product-name").each(function(index) {
  if ($(this).html().includes("- None"))
    $(this).html($(this).html().replace("- None", ""))
  else
    $(this).html($(this).html().replace("&nbsp;", " conjugated&nbsp;"));
});

Open in new window

Tim BrocklehurstHead of Digital

Author

Commented:
Hi again Huseyin

I have applied that code instead, but I'm afraid it doesn't make the necessary change in the Order Confirmation page. It also prevented the change from happening on the cart page too, so I modified it to read as below. (Only the bottom 2 jQuery functions are modified, one to take account of the 'a' identifier on the cart page, the other to apply to the Order Confirmation page without the a - that oned doesn't work.)

So currently, with this, cart page works, Order Confirmation page doesn't. (see attachments)


String.prototype.endsWith = function(pattern) {
  var d = this.length - pattern.length;
  return d >= 0 && this.lastIndexOf(pattern) === d;
};

String.prototype.includes = function(search, start) {
  'use strict';
  if (typeof start !== 'number') {
    start = 0;
  }

  if (start + search.length > this.length) {
    return false;
  } else {
    return this.indexOf(search, start) !== -1;
  }
};

/*Cart Page Rules Here*/
jQuery(".shop_table .cart_item .product-name a").each(function(index) {
  if (jQuery(this).html().includes("- None"))
    jQuery(this).html(jQuery(this).html().replace("- None", ""))
  else
    jQuery(this).text(jQuery(this).text() + " conjugated");
});

/*Order Confirmation Page Rules Here */
jQuery(".shop_table .cart_item .product-name").each(function(index) {
  if (jQuery(this).html().includes("- None"))
    jQuery(this).html(jQuery(this).html().replace("- None", ""))
  else
    jQuery(this).html(jQuery(this).html().replace("&nbsp;", " conjugated&nbsp;"));
});

Open in new window


Your help is much appreciated. Thank you.
Tim
HainKurtSr. System Analyst
CERTIFIED EXPERT

Commented:
it is what op wants to do...
HainKurtSr. System Analyst
CERTIFIED EXPERT

Commented:
ok, I thought they are different pages...

if they are different pages then just include relevant code, not both
either 19-25 or 27-33
you cannot use both of them at the same time...

or we need to find what page we are on
and after that, we put a condition to the code...

also, on line 24, I guess you should use html not text

Gain unlimited access to on-demand training courses with an Experts Exchange subscription.

Get Access
Why Experts Exchange?

Experts Exchange always has the answer, or at the least points me in the correct direction! It is like having another employee that is extremely experienced.

Jim Murphy
Programmer at Smart IT Solutions

When asked, what has been your best career decision?

Deciding to stick with EE.

Mohamed Asif
Technical Department Head

Being involved with EE helped me to grow personally and professionally.

Carl Webster
CTP, Sr Infrastructure Consultant
Empower Your Career
Did You Know?

We've partnered with two important charities to provide clean water and computer science education to those who need it most. READ MORE

Ask ANY Question

Connect with Certified Experts to gain insight and support on specific technology challenges including:

  • Troubleshooting
  • Research
  • Professional Opinions
Unlock the solution to this question.
Thanks for using Experts Exchange.

Please provide your email to receive a sample view!

*This site is protected by reCAPTCHA and the Google Privacy Policy and Terms of Service apply.

OR

Please enter a first name

Please enter a last name

8+ characters (letters, numbers, and a symbol)

By clicking, you agree to the Terms of Use and Privacy Policy.