How to Show “Read Demo Book” & Book Information on a single product page
How to Show “Read Demo Book” & Book Information on a single product page
To show these ACF fields we need to add some code on our functions.php (child theme) file or use Code Snippets plugin.
//Action hook to showing all ACF fields on Before Add To Card Button. add_action('woocommerce_before_add_to_cart_form','book_info_single_product'); function book_info_single_product() {?> <!--To Add Book Information Field "Author, Edition, Language, Publisher"--> <ul class="book_infolist"> <?php if ( $book_author = get_field( 'book_author' ) ) : ?> <li><b>Author: </b><?php echo esc_html( $book_author ); ?></li> <?php endif; ?> <?php if ( $book_edition = get_field( 'book_edition' ) ) : ?> <li><b>Edition: </b><?php echo esc_html( $book_edition ); ?></li> <?php endif; ?> <?php if ( $book_language = get_field( 'book_language' ) ) : ?> <li><b>Language: </b><?php echo esc_html( $book_language ); ?></li> <?php endif; ?> <?php if ( $book_publisher = get_field( 'book_publisher' ) ) : ?> <li><b>Publisher: </b><?php echo esc_html( $book_publisher ); ?></li> <?php endif; ?> </ul> <!-- To Add Read Demo Book Feature--> <?php if ( $preview_pdf = get_field( 'preview_pdf' ) ){ ?> <button id="myBtn" class="preview_book_btn button">Read Demo Book</button> <!-- The Modal --> <div id="myModal" class="modal"> <!-- Modal content --> <div class="modal-content"> <span class="close">×</span> <?php echo do_shortcode('[pdf-embedder url="'.get_field('preview_pdf').'"]');?> </div> </div> <?php } }
After adding this code we have to add another code to show JavaScript modal box while customers click on the “Read Demo Book” button. You can add custom CSS or JS code using Simple Custom CSS and JS Plugin. Just install this plugin and paste these codes.
// Get the modal Javascript Code var modal = document.getElementById("myModal"); // Get the button that opens the modal var btn = document.getElementById("myBtn"); // Get the <span> element that closes the modal var span = document.getElementsByClassName("close")[0]; // When the user clicks the button, open the modal btn.onclick = function() { modal.style.left = "0"; } // When the user clicks on <span> (x), close the modal span.onclick = function() { modal.style.left = "-100%"; } // When the user clicks anywhere outside of the modal, close it window.onclick = function(event) { if (event.target == modal) { modal.style.left = "-100%"; } }
And you can add this CSS code to the design button, list items, etc.
/* The Modal (background) */ .modal { /* Hidden by default */ position: fixed; /* Stay in place */ z-index: 999; /* Sit on top */ padding-top: 100px; /* Location of the box */ left: -100%; top: 0; width: 100%; /* Full width */ height: 100%; /* Full height */ overflow: scroll; /* Enable scroll if needed */ } /* Modal Content */ .modal-content { background-color: #fefefe; margin: auto; padding: 20px; border: 1px solid #888; width: 80%; } /* The Close Button */ .close { color: #aaaaaa; float: right; font-size: 14px; font-weight: bold; } .close:hover, .close:focus { color: #000; text-decoration: none; cursor: pointer; } /* CSS for Read Book Button */ .preview_book_btn { width: 100%; background: #ffe400; color: #000; } ul.book_infolist { list-style: none; padding: 0px; } ul.book_infolist li { border-bottom: solid 1px #f1f1f1; padding: 5px; }
LEAVE A COMMENT
You must be logged in to post a comment.