I need to reload the entire WooCommerce checkout page after adding a coupon code.
I tried the following code but it doesn't reload it.
The reason why I need this function:
Prices of the review table turns to defalut language prices after adding the coupon code.
When I refresh the page, it shows translated language prices, so I need to reload it.
Would you please let me know how to reload it?
Added this code in a checkout page:
jQuery(document).ajaxComplete(function(event, xhr, settings) {
if (settings.url === '/?wc-ajax=apply_coupon') {
location.reload();
}
});
jQuery(document).ajaxComplete(function(event, xhr, settings) {
if (settings.url === '/?wc-ajax=apply_coupon') {
jQuery('body').trigger('update_checkout');
}
});
Order review table:
<div class="ea-woo-checkout-order-review">
<div class="ea-checkout-review-order-table">
<ul class="ea-order-review-table">
<li class="table-header">
<div class="table-col-1"></div>
<div class="table-col-2"></div>
<div class="table-col-3"></div>
</li>
<li class="table-row cart_item">
<div class="table-col-1 product-thum-name">
<div class="product-thumbnail">
<img width="300" height="200" src="https://www.myweb.com/wp-content/uploads/2021/06/LineOne_22-300x200.jpg" class="attachment-woocommerce_thumbnail size-woocommerce_thumbnail" alt="" loading="lazy"> </div>
<div class="product-name">Template Type </div>
</div>
<div class="table-col-2 product-quantity">1</div>
<div class="table-col-3 product-total"><span class="woocommerce-Price-amount amount"><bdi><span class="woocommerce-Price-currencySymbol">$</span>820,000</bdi></span></div>
</li>
</ul>
<div class="ea-order-review-table-footer">
<div class="footer-content">
<div class="cart-subtotal">
<div></div>
<div><span class="woocommerce-Price-amount amount"><bdi><span class="woocommerce-Price-currencySymbol">$</span>820,000</bdi></span></div>
</div>
<div class="order-total">
<div></div>
<div><strong><span class="woocommerce-Price-amount amount"><bdi><span class="woocommerce-Price-currencySymbol">$</span>820,000</bdi></span></strong> </div>
</div>
</div>
</div>
</div>
</div>
Apply coupon:
<div class="woo-checkout-coupon">
<div class="ea-coupon-icon"><i aria-hidden="true" class="fas fa-percent"></i></div>
<div class="woocommerce-form-coupon-toggle">
<div class="woocommerce-info">
Have a coupon? Click here to enter your code </div>
</div>
<form class="checkout_coupon woocommerce-form-coupon" method="post" style="">
<p>If you have a coupon code, please apply it below.</p>
<p class="form-row form-row-first">
<input type="text" name="coupon_code" class="input-text" placeholder="Coupon code" id="coupon_code" value="">
</p>
<p class="form-row form-row-last">
<button type="submit" class="button" name="apply_coupon" value="Apply Coupon">Apply Coupon</button>
</p>
<div class="clear"></div>
</form>
</div>
You should use
jQuery('body').trigger('update_checkout');
instead of
location.reload();
Alternative
add_action('wp_footer', 'woocommerce_custom_update_checkout', 50);
function woocommerce_custom_update_checkout()
{
if (is_checkout()) {
?>
<script type="text/javascript">
jQuery(document).ready($ => {
$('input').on('change', () => {
$('body').trigger('update_checkout');
});
});
</script>
In case someone who needs it
It's working with the following code:
jQuery( document.body ).on( 'applied_coupon_in_checkout removed_coupon_in_checkout', function () {
location.reload();
} );
In bootstrap with the grid system elements are automatically arranged side by side but is there a way to stack elements one on top of another?
I'm trying to create a photo gallery where i'm displaying 4 images,hiding them and triggering each photo with an assigned button.
But because these images are first arranged side by side,every time I show one image and hide the other the frame is being shifted.
Example:
So if the first image starts at point A the last image ends at point D.
Here is the code that I am using
<script src="jquery/jquery-3.2.1.js"></script>
<script>
$("#gallerytrigger_1").on('click',function(){
$("#gallery_1").toggle();
$("#gallery_2").hide();
$("#gallery_3").hide();
$("#gallery_4").hide();
});
$("#gallerytrigger_2").on('click',function(){
$("#gallery_4").hide();
$("#gallery_3").hide();
$("#gallery_2").toggle();
$("#gallery_1").hide();
});
$("#gallerytrigger_3").on('click',function(){
$("#gallery_4").hide();
$("#gallery_3").toggle();
$("#gallery_2").hide();
$("#gallery_1").hide();
});
$("#gallerytrigger_4").on('click',function(){
$("#gallery_4").toggle();
$("#gallery_3").hide();
$("#gallery_2").hide();
$("#gallery_1").hide();
});
</script
#foreach($gallerys as $gallery)
<div class="col-sm-2">
<br>
<div id="gallery_{{$loop->iteration}}" style="display:none;">
<p style="text-align: center;"><img style="width: 100%;border-radius:
6px;" src="/gallery/{{ $gallery->imagelocation }}"></p>
</div>
</div>
#endforeach
#foreach($gallerys as $gallery)
<div class="col-xs-2">
<br>
<div id="gallerytrigger_{{$loop->iteration}}">
<hr>
<img style="width: 200%;border-radius: 6px;margin-left: -12px;margin-
top: -100px;" src="/gallery/{{ $gallery->imagelocation }}">
</div>
</div>
#endforeach
Try this code
<script src="jquery/jquery-3.2.1.js"></script>
<script>
$(".galleryTrigger").click(function(){
var id = $(this).data('id');
$(".gallery").hide();
$("#gallery_"+id).show();
});
</script>
#foreach($gallerys as $gallery)
<div class="col-sm-2">
<br>
<div id="gallery_{{$loop->iteration}}" style="display:none;" class="gallery">
<p style="text-align: center;"><img style="width: 100%;border-radius:
6px;" src="/gallery/{{ $gallery->imagelocation }}"></p>
</div>
</div>
#endforeach
#foreach($gallerys as $gallery)
<div class="col-xs-2">
<br>
<div id="gallerytrigger_{{$loop->iteration}}" data-id="{{$loop->iteration}}" class="galleryTrigger">
<hr>
<img style="width: 200%;border-radius: 6px;margin-left: -12px;margin-
top: -100px;" src="/gallery/{{ $gallery->imagelocation }}">
</div>
</div>
#endforeach
I am trying to use watir to download files from a web page. Trying to figure out how to click the 'download icon' and then save the file.
The files are in a table, and I want to download each file with the word 'done' in the column and then same it as the report name.
The HTML is below:
<div class="portlet" id="homeStatus">
<div class="portletHeader statusHeader">
Reports and Request Status
</div>
<div class="portletContent" id="statusContent">
<div class="status">
<div class="row-fluid boldText statusHeaderRow">
<div class="span3">Name</div>
<div class="span2">ID</div>
<div class="span3">Date</div>
<div class="span1">Status</div>
<div class="span3">Actions</div>
</div>
<div class="row-fluid statusResultsText">
<div class="span3 bold">
<span class="reportName">report2</span>
</div>
<div class="span2">429696109</div>
<div class="span3">2015-06-14 20:06:55</div>
<div class="span1">Done</div>
<div class="span3 statusResultsActions iconSize16 statusActionPad" id="374189255">
<i class="icon-download-alt mediumBlueIcon downloadIcon" id = "/decision_support/Status_retrieve_request.aspx?questionid=Q10201&applicationid=300&JobId=429696109&status=D&Extension=xls&filename=/Outbound06/q3bk06m_429696109_A14A90C6XB906X4F05X8539XDE448240CE97&reqname=report2,429696109" title="Download"></i>
</i>
<i class="icon-cog mediumBlueIcon modifydrequestIcon" id = "d_/decision_support/Report_Builder.aspx?country_cd=CA&qid=Q10201&exe_id=291&AppId=300&divid=1&JobId=429696109&reopen=true" title="Modify"></i>
</div>
</div>
<div class="row-fluid statusResultsText alternateBackground">
<div class="span3 bold">
<span class="reportName">Report Sun Jun 14 20:56:46 2015</span>
</div>
<div class="span2">429695641</div>
<div class="span3">2015-06-14 20:01:34</div>
<div class="span1">User Error</div>
<div class="span3 statusResultsActions iconSize16 statusActionPad" id="374188794">
</div>
</div>
</div>
</div>
</div>
# iterate through rows
Browser.divs.each do |row|
if row.div(:class => "span1").text == "Done"
report_name = row.span(:class => "reportName").text
row.divs.last.is.each do |i|
# move the mouse to <i> tag and click the <a> link, if <i> is an icon and <a> link is not present
Browser.driver.action.move_to(i.wd).click.perform
end
end
end
I'm having trouble trying to get to some data using the dom crawler.
I want to get the name 'Avocado' and '£1.50' I though I'd be able to do something like
$message = $crawler->filterXPath('h3')->text();
<div class="product">
<div class="productInner">
<div class="productInfoWrapper">
<div class="productInfo">
<h3>
<a href="http://website.com" >
Avocado
<img src="pic.jpg" alt="" />
</a>
</h3>
</div>
</div>
<div class="pricingAndTrolleyOptions">
<div class="pricing">
<p class="pricePerUnit">
£1.50<abbr title="per">/</abbr><abbr title="unit"><span class="pricePerUnitUnit">unit</span></abbr>
</p>
<p class="pricePerMeasure">£1.50<abbr
title="per">/</abbr><abbr
title="each"><span class="pricePerMeasureMeasure">ea</span></abbr>
</p>
</div>
</div>
</div>
To get h3 text:
$message = $crawler->filterXPath('//div[#class="productInfo"]/h3')->text();
To get price (i.e. for class pricePerMeasure):
$price= $crawler->filterXPath('//p[#class="pricePerMeasure"]')->text();
I have some spans on my page that have value attributes.
When i try to get these attributes from the code behind, i only get the first two - the rest are null, even if the the value attributes exist and are not empty.
Howcome? This is my markup:
<div class="ExtraContainer">
<div class="box_slider">
<form id="Form1" runat="server">
<div class="block block1">
<h3>
Vælg områder</h3>
<div class="wraper">
<input id="chkAllAreas" type="radio" name="group1" class="input_radio" runat="server"/>
<label for="chkAllAreas">
Vis alle områder</label>
</div>
<div class="wraper">
<input id="chkCustomAreas" type="radio" name="group1" class="input_radio" runat="server"/>
<label for="chkCustomAreas">
Vælg områder</label>
</div>
</div>
<div class="block block2">
<h3>
Vælg Ledighed</h3>
<div class="wraper">
<input id="chkShowAll" type="radio" name="group2" class="input_radio" runat="server" />
<label for="chkShowAll">
Vis alle boliger</label>
</div>
<div class="wraper">
<input id="chkIsAvailable" type="radio" name="group2" class="input_radio" runat="server" />
<label for="chkIsAvailable">
Vis kun ledige boliger</label>
</div>
</div>
<div class="block block3">
<h3>
Vælg boligtype</h3>
<div class="wraper go_left">
<input id="chkAllTHousingTypes" type="checkbox" class="input_check" runat="server" />
<label for="chkAllTHousingTypes">
Vis alle boligtyper</label>
</div>
<div class="wraper go_left">
<input id="chkFamilieboliger" type="checkbox" class="input_check" runat="server" />
<label for="chkFamilieboliger">
Familieboliger</label>
</div>
<div class="wraper go_left">
<input id="chkUngdomsboliger" type="checkbox" class="input_check" runat="server" />
<label for="chkUngdomsboliger">
Ungdoms- & studieboliger</label>
</div>
<div class="wraper go_left">
<input id="chkAeldrebolig" type="checkbox" class="input_check" runat="server" />
<label for="chkAeldrebolig">
Senior- & ældreboliger</label>
</div>
</div>
<div class="clear">
</div>
<div class="line">
</div>
<div class="block4 go_left">
<h3>
Vælg økonomi</h3>
<div class="slider_info">
<div class="slider_info_leftright_container">
<div class="slider_info_left">
<span>Husleje</span>
</div>
<div class="slider_info_right" style="float: right">
<span id="huslejefra" runat="server"></span> <em>til</em> <span id="huslejetil" runat="server"></span><span>kr</span>
</div>
</div>
<div class="Slider">
<div id="husleje-slider-range">
</div>
</div>
</div>
<div class="slider_info">
<div class="slider_info_leftright_container">
<div class="slider_info_left">
<span>Indskud</span>
</div>
<div class="slider_info_right" style="float: right">
<span id="indskudfra" runat="server"></span> <em>til</em> <span id="indskudtil" runat="server"></span><span>m2</span>
</div>
<div class="Slider">
<div id="indskud-slider-range">
</div>
</div>
</div>
</div>
</div>
<div class="block4 go_right">
<h3>
Vælg størrelse</h3>
<div class="slider_info">
<div class="slider_info_leftright_container">
<div class="slider_info_left">
<span>Antal værelser</span>
</div>
<div class="slider_info_right" style="float: right">
<span id="rumfra" runat="server">3</span> <em>til</em> <span id="rumtil"
runat="server">6</span><span>rum</span>
</div>
</div>
<div class="Slider">
<div id="rum-slider-range">
</div>
</div>
</div>
<div class="slider_info">
<div class="slider_info_leftright_container">
<div class="slider_info_left">
<span>m2</span>
</div>
<div class="slider_info_right" style="float: right">
<span id="storrelsefra" value="2" runat="server"></span> <em>til</em> <span id="storrelsetil" runat="server"></span><span>m2</span>
</div>
</div>
<div class="Slider">
<div id="storrelse-slider-range">
</div>
</div>
</div>
</div>
<asp:Button ID="searchButton" OnClick="ImgSearch_Click" Text="Søg" runat="server" />
</form>
<div class="clear">
</div>
</div>
<div class="block5">
<h3>
Vælg resultatvisning</h3>
<div class="buttonswrapper">
<div class="wraper">
<input id="id9" type="radio" class="input_radio" />
<label for="id9">
Billedevisning</label>
</div>
<div class="wraper">
<input id="id10" type="radio" class="input_radio" />
<label for="id10">
Kortvisning</label>
</div>
</div>
<a class="link_img resetBtn" href="#">
<img src="style/images/select_img.png" alt="" />Nulstil søgningen</a>
</div>
<div class="clear"> </div>
<input id="HDSelectedAreas" type="hidden" runat="server" class="HSelectedArea" />
</div>
the search button looks like this in the aspx:
<asp:Button ID="searchButton" OnClick="ImgSearch_Click" Text="Søg" runat="server" />
And this is the code behind:
protected void ImgSearch_Click(object sender, EventArgs e)
{
String cRoomsFrom = rumfra.Attributes["value"];
String cRoomsTo = rumtil.Attributes["value"];
String cSizeFrom = storrelsefra.Attributes["value"];
String cSizeTo = storrelsetil.Attributes["value"];
String cRentFrom = huslejefra.Attributes["value"];
String cRentTo = huslejetil.Attributes["value"];
String cDepositFrom = indskudfra.Attributes["value"];
String cDepositTo = indskudtil.Attributes["value"];
}
to initialize the values:
<script type="text/javascript" language="javascript">
function setupSlider(min, max, step, values, sliderElement, minelement, maxelement) {
$(sliderElement).slider({
range: true,
min: min,
max: max,
values: values,
step: step,
slide: function (event, ui) {
$(minelement).html(ui.values[0]);
$(maxelement).html(ui.values[1]);
$(minelement).attr('value', ui.values[0]);
$(maxelement).attr('value', ui.values[1]);
__doPostBack();
}
});
$(minelement).html($(sliderElement).slider("values", 0));
$(maxelement).html($(sliderElement).slider("values", 1));
$(minelement).attr('value', $(sliderElement).slider("values", 0));
$(maxelement).attr('value', $(sliderElement).slider("values", 1));
}
function initializeSliders()
{
// størrelse slider
var values = [10, 80];
setupSlider(10, 80, 10, values, "#storrelse-slider-range", "#storrelsefra", "#storrelsetil");
// husleje slider
values = [1000, 7000];
setupSlider(1000, 12000, 1000, values, "#husleje-slider-range", "#huslejefra", "#huslejetil");
/// rum
values = [3, 6];
setupSlider(1, 8, 1, values, "#rum-slider-range", "#rumfra", "#rumtil");
// indskud
values = [3000, 7000];
setupSlider(1000, 10000, 1000, values, "#indskud-slider-range", "#indskudfra", "#indskudtil");
//fix color
fixToolTipColor();
}
$(document).ready(function () {
$('.Udvidet').live('click', function () {
$('.UdvidetSoegning').toggle('slow');
});
$(function () {
initializeSliders();
$(".resetBtn").live("click", function () {
initializeSliders();
__doPostBack();
});
});
});
</script>
I tried changing to InnerHtml and InnerText, but the result is the same. Sometimes the value property is null, but then InnerHtml or InnerText return the actual value :S
On post back only the input elements are posted.
So they are the same as before the post back, what they have before the post back, have and now. So actually you do not "get" this parameters on code behind, you only "set" them and on server controls with viewstate on, you can remember this parametres on post back - but you can not change them on client side and expect to read this change on server.
Here the workaround is. Ether use the viewstate of the page to save some values and keep them on post back, ether use input hidden elements to have them on post back.