Home Forums Plugins WooCommerce Photo Reviews HTML cache breaks dynamic review form

HTML cache breaks dynamic review form

  • Author
    Posts
  • #45953

    jarfar
    Participant

    Hi, I have a cache problem with review form on single product page. It’s generated as HTML by PHP, which is later cached by CloudFlare. So it’s impossible to serve this as dynamic content, but this form is dynamic by design. The review form can be rendered in different states depending on user, product and many other factors, so it has to be rendered every time on server. To solve this problem I created Ajax function with sends dynamically rendered form. The result is appended to #reviews element and it kind of works. The problem is, the generated form has some extra product image on the right and it forces another request. The layout also looks different from original which were single column, without this image with name and pricing.

    I’m not sure if I do generate this form right. Can you tell me what would be proper way to generate the form and how to load all related JS & CSS to make it look and work right.

    In ajax endpoint I generate review form with shortcode. Maybe there is better way. Code below.
    do_shortcode('[woocommerce_photo_reviews_form]', [ 'product_id' => $product_id]);

    To have it looks ok and work it also requires loading scripts & CSS so I do in wp_head action:

    $wpr = new VI_WOOCOMMERCE_PHOTO_REVIEWS_Frontend_Reviews_Form;
    $wpr->wp_enqueue_scripts();
    $wpr->reviews_form(['product_id' => get_the_ID()]);

    I also amanded Woocommerce template woocommerce/single-product-reviews.php accordingly, removing the dynamic part: (we are happy to cache reviews grid and other not form related elements). Code below:

    <?php
    /**
     * This template can be overridden by copying it to yourtheme/woocommerce/single-product-reviews.php.
     */
    
    defined( 'ABSPATH' ) || exit;
    
    global $product;
    
    if ( ! comments_open() ) {
    	return;
    }
    
    ?>
    <div id="reviews" class="woocommerce-Reviews">
    	<div id="comments">
    		<h2 class="woocommerce-Reviews-title">
    			<?php
    			$count = $product->get_review_count();
    			if ( $count && wc_review_ratings_enabled() ) {
    				/* translators: 1: reviews count 2: product name */
    				$reviews_title = sprintf( esc_html( _n( '%1$s review for %2$s', '%1$s reviews for %2$s', $count, 'woocommerce' ) ), esc_html( $count ), '<span>' . get_the_title() . '</span>' );
    				echo apply_filters( 'woocommerce_reviews_title', $reviews_title, $count, $product ); // WPCS: XSS ok.
    			} else {
    				esc_html_e( 'Reviews', 'woocommerce' );
    			}
    			?>
    		</h2>
    
    		<?php if ( have_comments() ) : ?>
    			<ol class="commentlist">
    				<?php wp_list_comments( apply_filters( 'woocommerce_product_review_list_args', array( 'callback' => 'woocommerce_comments' ) ) ); ?>
    			</ol>
    
    			<?php
    			if ( get_comment_pages_count() > 1 && get_option( 'page_comments' ) ) :
    				echo '<nav class="woocommerce-pagination">';
    				paginate_comments_links(
    					apply_filters(
    						'woocommerce_comment_pagination_args',
    						array(
    							'prev_text' => '&larr;',
    							'next_text' => '&rarr;',
    							'type'      => 'list',
    						)
    					)
    				);
    				echo '</nav>';
    			endif;
    			?>
    		<?php else : ?>
    			<p class="woocommerce-noreviews"><?php esc_html_e( 'There are no reviews yet.', 'woocommerce' ); ?></p>
    		<?php endif; ?>
    	</div>
    	<div id="review_form_wrapper"></div>
    	<div class="clear"></div>
    </div>

    What I want to achieve is generating the same review form in the ajax endpoint as the plugin does on bare system without cache, so result frontend looks the same.
    I need this injected block to have the same functionality as the one generated by default by the plugin – no extra image.

    I work on local, vagrant isolated environment so it’s impossible to share access information.

    I attach screenshot how rendered form look like.

    Attachments:
    You must be logged in to view attached files.

You must be logged in to see replies to this topic. Click here to login or register