Get Free Delivery On BkashPaymentOnly * Limited time only.

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

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">&times;</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