[Gizan86]

Thanks Mohammad,

About point 1, I do know how to write the text for the banner. At the moment I have it written in english just like the demo. My question is how can I translate the strings of the banner to Dutch? I tried by search in wpml but they do not show up there..

Also I cannot get the google maps on my contact page to show up. I have everything filled in, including the coordinates but it comes up as a white area, any idea what I am doing wrong?

Thanks in advance..

Attachments:

You must be logged in to view attached files.

[Gizan86]

This reply has been marked as private.

[Gizan86]

Thanks Mohammad, the problem is that I am testing this offline on my testing site (desktopserver) so I don’t think its possible to give you access to my site.

Ill try to be as clear as possible so maybe its possible to help me without access.

To be able to get a datepicker on my checkout page, I am using this code in my childs theme function.php:

<?php

wp_enqueue_style('jquery-style', 'http://code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css');

/**
 * Add Pickup & Dropoff DIV
 */
add_action( 'woocommerce_before_checkout_billing_form', 'pickup_dropoff' );

function pickup_dropoff( $checkout ) {

    echo '<div id="pickup_dropoff"><h2>' . __('Pickup & Dropoff') . '</h2>';

    woocommerce_form_field( 'pickup_day', array(
        'type'          => 'text',
        'id'            => 'datepickerpickup',
        'class'         => array('my-field-class form-row-wide'),
        'label'         => __('Pickup Day'),
        'required'      => true,
        'placeholder'   => __('Select'),
        ), $checkout->get_value( 'pickup_day' ));
        
            woocommerce_form_field( 'pickup_time', array(
        'label'       => __('Pickup Time', 'woocommerce'),
        'placeholder' => _x('', 'time', 'woocommerce'),
        'required'    => true,
        'clear'       => false,
        'type'        => 'select',
        'options'     => array(
            '3-5' => __('15.00 - 17.00', 'woocommerce' ),
            '5-7' => __('17.00 - 19.00', 'woocommerce' ),
            '7-9' => __('19.00 - 21.00', 'woocommerce' )),
        ), $checkout->get_value( 'pickup_time' ));
        
            woocommerce_form_field( 'dropoff-day', array(
        'type'          => 'text',
        'id'            => 'datepickerdropoff',
        'class'         => array('my-field-class form-row-wide'),
        'label'         => __('Dropoff Day'),
        'required'      => true,
        'placeholder'   => __('Select'),
        ), $checkout->get_value( 'dropoff-day' ));
        
            woocommerce_form_field( 'dropoff_time', array(
        'label'       => __('Dropoff Time', 'woocommerce'),
        'placeholder' => _x('', 'time', 'woocommerce'),
        'required'    => true,
        'clear'       => false,
        'type'        => 'select',
        'options'     => array(
            '3-5' => __('15.00 - 17.00', 'woocommerce' ),
            '5-7' => __('17.00 - 19.00', 'woocommerce' ),
            '7-9' => __('19.00 - 21.00', 'woocommerce' )),
        ), $checkout->get_value( 'dropoff_time' ));
        

    echo '</div>';

}

/**
 * Make fields required
 */

add_action('woocommerce_checkout_process', 'error_if_no_pickup_selected');

function error_if_no_pickup_selected() {
    // Check if set, if its not set add an error.
    if ( ! $_POST['pickup_day'] || ! $_POST['dropoff-day'])
        wc_add_notice( __( 'Please select a pickup & dropoff slot' ), 'error' );
}

/**
 * Update the order meta with field value
 */
add_action( 'woocommerce_checkout_update_order_meta', 'update_order_meta_delivery_time' );

function update_order_meta_delivery_time( $order_id ) {
    if ( ! empty( $_POST['pickup_day'] ) ) {
        update_post_meta( $order_id, 'Pickup Day', sanitize_text_field( $_POST['pickup_day'] ) );
        update_post_meta( $order_id, 'Pickup Time', sanitize_text_field( $_POST['pickup_time'] ) );
        update_post_meta( $order_id, 'Dropoff Day', sanitize_text_field( $_POST['dropoff-day'] ) );
        update_post_meta( $order_id, 'Dropoff Time', sanitize_text_field( $_POST['dropoff_time'] ) );
    }
}

/**
 * Display field value on the order edit page
 */
add_action( 'woocommerce_admin_order_data_after_billing_address', 'update_user_info_delivery_time', 10, 1 );

function update_user_info_delivery_time($order){
    echo '<p><strong>'.__('Pickup Day').':</strong> ' . get_post_meta( $order->id, 'Pickup Day', true ) . '</p>';
    echo '<p><strong>'.__('Pickup Time').':</strong> ' . get_post_meta( $order->id, 'Pickup Time', true ) . '</p>';
    echo '<p><strong>'.__('Dropoff Day').':</strong> ' . get_post_meta( $order->id, 'Dropoff Day', true ) . '</p>';
    echo '<p><strong>'.__('Dropoff Time').':</strong> ' . get_post_meta( $order->id, 'Dropoff Time', true ) . '</p>';
}

?>

I then pasted this is my theme’s custom JS area:

<script src="//code.jquery.com/jquery-1.10.2.js"></script>
<script src="//code.jquery.com/ui/1.11.4/jquery-ui.js"></script>
<script>
  $(function() {
    $( "#datepickerpickup" ).datepicker({ minDate: +0, firstDay: 1, dateFormat: "dd-mm-yy" });
  });
  
  $(function() {
    $( "#datepickerdropoff" ).datepicker({ minDate: +1, firstDay: 1, dateFormat: "dd-mm-yy" });
  });
</script>

Finally to make the datepicker fields look good I pasted this in my themes custom CSS area:

/*CHECKOUT PAGE*/
#pickup_time {width: 110px;}
#dropoff_time {width: 110px;}
/*CHECKOUT PAGE*/

The Problem:
At the moment the fields on the checkout page work correctly but I have some JS problems (the variations for my variable products cannot be selected). If I remove this code
<script src=”//code.jquery.com/jquery-1.10.2.js”></script>
<script src=”//code.jquery.com/ui/1.11.4/jquery-ui.js”></script>`
from the JS theme area, the JS error is gone but then my checkout fields do not work anymore.

Hopefully you can see what I am doing wrong.
Thanks again

[Gizan86]

Hi Mohammad,

I’m sorry I don’t understand. If I remove this code

<script src="//code.jquery.com/jquery-1.10.2.js"></script>
<script src="//code.jquery.com/ui/1.11.4/jquery-ui.js"></script>

then my datepicker does not work anymore..

At the moment I have this code:

<script src="//code.jquery.com/jquery-1.10.2.js"></script>
<script src="//code.jquery.com/ui/1.11.4/jquery-ui.js"></script>

<script>
  $(function() {
    $( "#datepickerpickup" ).datepicker({ minDate: +0, firstDay: 1, dateFormat: "dd-mm-yy" });
  });
  
  $(function() {
    $( "#datepickerdropoff" ).datepicker({ minDate: +1, firstDay: 1, dateFormat: "dd-mm-yy" });
  });
</script>

pasted in my theme’s custom JS area. The datepicker does work like this but it causes other errors on my site so I think I have pasted the code in the wrong place. Looking forward to your advice.
Kind regards

[Gizan86]

This reply has been marked as private.

[Gizan86]

This reply has been marked as private.

[Gizan86]

Hi Ed,
Lucy from wp-rocket has created a video about the problem.
https://infinit. io/_/3a7AUQ9 (remove space before io)
Just to be clear please follow steps underneath to replicate the issue to see what I mean.
I think since you have problems replicating the issue maybe its best to do this on my live site. Here you can also test it with wp-rocket (or any other caching plugin Ihave installed). It is far from ideal but I think its the only way to really test it and to solve it. Can you please deactivate any caching plugin that you use after testing?

1. activate wp-rocket
2. Visit product page: https://freshfolds.nl/service/wasserette/was-service/
3. Add a product to cart (fill in pickup day and time first): You will see the blue cart notification is acting strange and the cart in the header shows false results
4. Switch to a different page for example: https://freshfolds.nl/contact. You will see the cart is acting strange

To answer your question, the issue is with every productpage (simple or variable) and is there wheter the user is logged in or not.
Kind regards

[Gizan86]

Thanks for the help:

@Ed: I included the zip file of wp-rocket in the attachment.

@Rui: I tested the test site but I found still the same problem. After I added a product to the cart and shifted pages, the cart in the header showed false amounts.

Looking forward to your results.
Kind regards

Attachments:

You must be logged in to view attached files.

[Gizan86]

Thank you Ed, I will wait for your findings..

[Gizan86]

Hi David,

Thank you for including him. I will wait for his reply.
(Don’t know if it helps but in the meantime my developer has tested the issue with the woocommerce storefront theme and there the cart issue disappeared. If you need more info from me or my developer, please let me know.)

Kind regards!

[Gizan86]

Hi David,
This is what my programmer answered to your reply. Looking forward to your reply.
Kind regards!
—

The only Ajax call that is triggered is the standard one used by WooCommerce, which calls https://freshfolds.nl/?wc-ajax=get_refreshed_fragments. The JavaScript code attached to that call alters the mini-cart widget as long as said widget has some specific CSS classes. Your theme uses different classes and a different structure, therefore the Ajax call runs, but then its result is discarded.
In other words, there is an Ajax call that should update the mini-cart, but, since said mini-cart uses a different identifier, no update is performed.

[Gizan86]

Thanks, I will tell him right away

[Gizan86]

Hi David,

I hired a woocommerce programmer to look into the bug. He pointed me to my theme developer for some checks. Could you please help me with this since I have no clue how else to solve this issue. This was the result of his investigation:

Hello,
The broken code was due to the minification, that’s something I could determine for sure. When the page ecnounters broken JavaScript, any other script after that cannot run. This, amongst other effects, prevented the script that updates the mini-cart from running properly, therefore you would see the wrong total (the cart page was not affected).

In relation to the issue, I’m getting confused, as the results are mixed. I reverse engineered the code of your theme, and now have an idea of why you might see the mini-cart with the wrong content (it doesn’t always happen, though). The cause seems to be a mix of caching and theme architecture.

This is what I found by repeating the tests multiple times:
You open a page. The cart is rendered as empty.
You add an item to the cart.
The page is reloaded.
When the page is rendered, its content is taken from the cache. In the cache, the mini-cart was stored as “empty”, and it appears as such.
To cover this kind of issue, WooCommerce uses an Ajax call to retrieve the content of the mini-cart and update it on the fly. The call always returns the correct mini-cart content (you can see this easily by checking the Network calls in browser’s developer tools).

The result would be that, even if the page is rendered with the cart widget as “empty”, the Ajax call, which is never cached, replaces its content after the page is loaded, showing the correct cart data. The issue, in your case, is that your theme uses its own, custom mini-cart (see function sf_get_cart() in your theme’s functions.php), that doesn’t hook into the Ajax call, therefore the content that comes from the cached page remains unchanged.

Next steps
I double checked the configuration of WP Rocket, it’s now ready to be used with WooCommerce. I disabled the plugin so that the site can work normally during the weekend. You should not have to change any settings when you will enable WP Rocket again.
I would recommend to contact the theme author and ask to perform the tests I described above with the cache enabled.
The objective is to have the mini-cart at the top right of the page updated dynamically, using Ajax, in order to bypass the cached page content. Make sure that you specify that you are talking about the mini-cart widget, not the cart page (the cart page is not cached and always shows the correct content).

[Gizan86]

I appreciate the help. I am not looking to change my hosting however. Its a simple woocommerce – Dante – cache issue which should be possible to fix since the dante people are using woocommerce & a cache plugin too without the issue.. The cache plugins give me good results, which is not the problem

[Gizan86]

Thanks, I have exported your w3settings to my live website (www.freshfolds.nl) and included the string as mentioned. The problem is still there however..