Support

Account

Forum Replies Created

  • any suggestions on how to add event listener and info window popup for the marker?

  • that’s what I already have… I’m not looking for a static marker. I’m trying to figure out how to add an event listener and info window popup for the marker.

  • thanks John, but there should be a way to access specific image by the index value right? I need to do something different with each of the first 5 values and that’s a lot of unnecessary code to create an if statement for each.

  • Also… one of the date formats I need is to be able to work with this snippet:

    
    var countDownDate = new Date("Jan 5, 2022 15:37:25").getTime();
    
  • Thanks John, The main issue with the plugin is that it’s not overriding the existing values which is needed to maintain the same ID’s. None of the free plugins seem to handle this with Advanced custom fields unless you can figure out some difficult workarounds. I paid $150 for this plugin and their tech support was not too helpful on the issue. I was hoping for some way to do it with this plugin before paying for another which is likely to have the same issue. .

  • Here is the full template file with both layouts. It might not be the prettiest WordPress code, but I’m more of a static html guy haha:

    
    <?php
    /*
    Template Name: Property Page
    
     */
    
      get_header(); 
    
      $cf_property_title  = get_field('cf_property_title');
      $cf_property_address = get_field('cf_property_address');
    
      $main_banner_image = get_field('main_banner_image');
      $mls_number = get_field('mls_number');
      $listing_price = get_field('listing_price');
      $bedrooms = get_field('bedrooms');
      $bathrooms  = get_field('bathrooms');
      $square_feet  = get_field('square_feet');
      $garage = get_field('garage');
      $property_description = get_field('property_description');
      $map_short_code = get_field('map_short_code');
      $matterport_iframe = get_field('matterport_iframe');
      $floor_plan = get_field('floor_plan');
    
      $area_title = get_field('area_title');
      $area_description = get_field('area_description');
      $area_image = get_field('area_image');
    
      
      if ( get_query_var( 'subpage' ) ) {
          // if ?subpage=flyer is used, load the content for flyer-1
       ?>
    
       <?php  the_post(); ?>
    
         <!--  ==================== -->
         <!--  flyer section -->
         <!--  ==================== -->
    
          <?php
            //contact info
          $first_name = get_the_author_meta('first_name');
          $last_name = get_the_author_meta('last_name');
          $id = get_the_author_meta('ID');
          $author_id = "user_".$id;
          $agency = get_field('agency', $author_id );
          $agency_logo = get_field('agency_logo', $author_id );
          
          $website_url = get_field('website_url', $author_id);
          $email_address = get_field('email_address', $author_id);
          $phone_main = get_field('phone_main', $author_id);
          $cell_phone = get_field('cell_phone', $author_id);
          $fax_number = get_field('fax_number', $author_id);
          $street_address = get_field('street_address', $author_id);
          $address_line_2 = get_field('address_line_2', $author_id);
          $city = get_field('city', $author_id);
          $zipcode = get_field('zipcode', $author_id);
          $profile_pic = get_field('profile_pic', $author_id);
          $email_address = get_field('email_address', $author_id);
    
          ?>
    
            <section class="header">
              <div class="container">
                <div class="row">
    
                  <div class="col-xs-6 text-left">
                    <h1 class="company"><?php echo $agency;?></h1>
                    <h2 class="realtor"><?php echo $first_name." ".$last_name; ?></h2>
                  </div><!-- close col -->
                  
                  <div class="col-xs-6 text-right">
                    <h1 class="price"><?php echo $listing_price;?></h1>
                    <h2 class="address"><?php echo $cf_property_address?></h2>
                  </div><!-- close col -->
    
                </div><!-- close row -->
              </div><!-- close container -->
            </section>
    
            <section class="banner-image">
              <div class="container">
                <div class="row">
                  <div class="col-xs-12">
                    <img class="img-responsive" src="<?php echo $main_banner_image ?>'">
                  </div><!-- close col -->
                </div><!-- close row -->
              </div><!-- close container -->
            </section>
    
            <section class="main-content">
              <div class="container">
                <div class="row">
                  <div class="col-xs-3 left-column">
    
                    <img class="img-responsive logo" src="<?php echo $agency_logo; ?>">
                    <div class="contact-info">
                      <ul class="list-unstyled">
                        <li class="name"><?php echo $first_name." ".$last_name;?> </li>
                        <li>Phone: <?php echo $phone_main;?></li>
                        <li>Email: <?php echo $phone_main;?></li>
                        <li>Website: <?php echo $website_url;?></li>
                      </ul>
                    </div><!-- close contact info -->
                    <img class="img-responsive profile" src="<?php echo $profile_pic; ?>">
                  </div><!-- close col -->
    
                  <div class="col-xs-8 col-xs-offset-1 right-column">
    
                    <h1 class="title text-center"><?php echo $cf_property_title; ?></h1>
                    <p class="mls text-center">MLS <?php echo $mls_number;?></p>
    
                    <div class="row icons">
                      <div class="col-xs-3 detail">
                        <img class="img-responsive" src="<?php bloginfo('stylesheet_directory'); ?>/assets/img/icons/bed.svg">
                        <p><?php echo $bedrooms;?> Bedrooms</p>
                      </div><!-- close col  -->
    
                      <div class="col-xs-3 detail">
                        <img class="img-responsive" src="<?php bloginfo('stylesheet_directory'); ?>/assets/img/icons/bath.svg">
                        <p><?php echo $bathrooms;?> Baths</p>
                      </div><!-- close col  -->
    
                      <div class="col-xs-3 detail">
                        <img class="img-responsive" src="<?php bloginfo('stylesheet_directory'); ?>/assets/img/icons/plan.svg">
                        <p><?php echo $square_feet;?> Sq. Ft.</p>
                      </div><!-- close col  -->
    
                      <div class="col-xs-3 detail">
                        <img class="img-responsive" src="<?php bloginfo('stylesheet_directory'); ?>/assets/img/icons/garage.svg">
                        <p><?php echo $garage;?> Car Garage</p>
                      </div><!-- close col  -->
                        
                    </div><!-- close row  -->
    
                    <div class="overview">
                      <h4 class="sub">Highlights</h4>
                      <?php echo $property_description ?>
                    </div><!-- close overview -->
    
                  
                  </div><!-- close col -->
    
                </div><!-- close row -->
              </div><!-- close container -->
            </section>
    
           <!--  ==================== -->
           <!--  end of flyer section -->
           <!--  ==================== -->
    
        <?php 
    
      } else {
          // load normal landing-1
    ?>
    
         <!--  ==================== -->
         <!--  landing page section -->
         <!--  ==================== -->
    
          <header>  
            <div class="above-nav">
              <div class='main-image-wrap limit'> 
                <img class="img-responsive" src='<?php echo $main_banner_image ?>' />
                <div class='main-image-overlay'>
                  <h2 class='title text-center'><?php echo $cf_property_title; ?></h2>
                  <h4 class='subtitle text-center'><?php echo $cf_property_address; ?></h4>
                </div><!-- end description div -->
              </div><!-- close main-image-wrap -->
            </div><!-- close above-nav -->
    
            <div class="nav-wrapper" style="height:51px;"> <!-- Prevents content jump when navbar becomes fixed -->
              <nav class="navbar navbar-default navbar-inverse" role="navigation">
                <div class="container-fluid">
                  <!-- Brand and toggle get grouped for better mobile display -->
                  <div class="navbar-header">
                    <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1">
                      <span class="sr-only">Toggle navigation</span>
                      <span class="icon-bar"></span>
                      <span class="icon-bar"></span>
                      <span class="icon-bar"></span>
                    </button>
                  </div>
    
                  <!-- Collect the nav links, forms, and other content for toggling -->
                  <div class="collapse navbar-collapse" id="">
                    <ul class="nav navbar-nav">
                      <!-- <li class="pull-left"><a href="#">logo</a></li> -->
                      <li class=""><a href="#overview">Overview</a></li>
                      <li><a href="#photos">Photos</a></li>
                      <?php
                      if( !empty($matterport_iframe) ): ?>
    
                        <li><a href="#matterport">Matterport 3D Tour</a></li>
                      <?php endif; ?>
                      <li><a href="#map">Map</a></li>
                      <li><a href="#area">About The Area</a></li>
                      <li><a href="#contact-section">Contact</a></li>
                              
                      <li class="social pull-right"><a href="#social">Social Links</a></li>
                      <li class='pull-right'><a href="?subpage=flyer" target="_new">Print Version</a></li>
                      
    
                      <?php 
                      if($floor_plan){
                        echo "<li class='pull-right'><a href='".$floor_plan."' target='_new'>Floor Plan</a></li>";
                      }
                      ?>
                      
                    </ul>
                  </div><!-- /.navbar-collapse -->
                </div><!-- /.container-fluid -->
              </nav>
            </div>
          </header>
    
          <section class="overview" id="overview">
            <div class="container">
              <h2 class="section-title">Property Overview</h2>
              <h3 class="list-price"><?php echo $listing_price; ?></h3>
              <?php 
                if ($mls_number){
                  echo "<p class='mls'> MLS: ".$mls_number.'</p>';
                }
              ?>
             
              <div class="row icons">
                <div class="col-xs-3 col-md-2 col-md-offset-2 detail">
                  <img class="img-responsive" src="<?php bloginfo('stylesheet_directory'); ?>/assets/img/icons/bed.svg">
                  <p><?php echo $bedrooms; ?> Bedrooms</p>
                </div><!-- close col  -->
    
                <div class="col-xs-3 col-md-2 detail">
                  <img class="img-responsive" src="<?php bloginfo('stylesheet_directory'); ?>/assets/img/icons/bath.svg">
                  <p><?php echo $bathrooms; ?> Baths</p>
                </div><!-- close col  -->
    
                <div class="col-xs-3 col-md-2 detail">
                  <img class="img-responsive" src="<?php bloginfo('stylesheet_directory'); ?>/assets/img/icons/plan.svg">
                  <p><?php echo $square_feet; ?> Sq. Ft.</p>
                </div><!-- close col  -->
    
                <?php 
    
                  if($garage){
                    ?>
                    <div class="col-xs-3 col-md-2 detail">
                      <img class="img-responsive" src="<?php bloginfo('stylesheet_directory'); ?>/assets/img/icons/garage.svg">
                      <p><?php echo $garage; ?> Car Garage</p>
                    </div><!-- close col  -->
                   <?php 
                  }
                  
                ?>
              </div><!-- close row  -->
    
              <div class="row short-description">
                <div class="col-xs-12  col-md-8 col-md-offset-2  text-justify">
                  <?php echo $property_description; ?>
                </div><!-- close col  -->
              </div><!-- close row  -->
    
             <!-- property details section can go here -->
               
            </div><!-- close container -->
            
          </section>
    
          <section id="photos">
            <div class="container">
              <h2 class="section-title">Photos</h2>
              <div class="panel " id="togglePanel">
                  
                  <div class="text-center">
                      <div class="btn-group btn-group-lg btn-toggle">
                          <!-- <button class="btn  active btn-info" data-toggle="tab" data-target="#gallery-carousel">Slides</button>
    
                          <button class="btn btn-default" data-toggle="tab" data-target="#gallery-thumbs">Gallery</button> -->
    
                          <ul class="nav nav-tabs">
                            <li><button class="btn btn-default" data-toggle="tab" data-target="#gallery-carousel">Carousel</button></li>
                            <li class="active"><button class="btn btn-default" data-toggle="tab" data-target="#gallery-thumbs">Gallery</button></li>
                          </ul>
    
                      </div>
                      
                  </div>
    
                  <div class="panel-body tab-content">
    
                      <!-- carousel section -->
                      <div class="tab-pane" id="gallery-carousel">
                      
                        <div id="carousel-example-generic" class="carousel slide" data-ride="carousel">
                          <!-- Indicators -->
                         
    
                          <!-- Wrapper for slides -->
                          <div class="carousel-inner" role="listbox">
    
                            <?php
                            $carousel = get_field('gallery');
    
                            if( $carousel ): 
                                $i = 0;
                                foreach( $carousel as $item ): 
    
                                  // if first item make active
                                  if ($i == 0) { ?>
                                      <div class="item active">
                                        <img src="<?php echo $item['url']; ?>" alt="<?php echo $item['alt']; ?>">
                                        <div class="carousel-caption"><?php echo $item['caption']; ?></div>
                                      </div><!-- close item -->
    
                                  <?php  
                                   }
                                   else{ 
                                    ?>
                                      <div class="item">
                                        <img src="<?php echo $item['url']; ?>" alt="<?php echo $item['alt']; ?>">
                                        <div class="carousel-caption"><?php echo $item['caption']; ?></div>
                                      </div><!-- close item -->
                                   <?php
                                   }
                                   $i++;
                                   endforeach; 
                                 
                                endif; ?>
    
                           
                            
                          </div><!-- close carousel-inner -->
    
                          <!-- Controls -->
                          <a class="left carousel-control" href="#carousel-example-generic" role="button" data-slide="prev">
                            <span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span>
                            <span class="sr-only">Previous</span>
                          </a>
                          <a class="right carousel-control" href="#carousel-example-generic" role="button" data-slide="next">
                            <span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
                            <span class="sr-only">Next</span>
                          </a>
                        </div><!-- close carousel -->
    
                      </div><!-- close tab-pane gallery-carousel -->
                      <!-- end carousel section -->
    
                      <!-- thumbnail gallery section -->
                      <div class="tab-pane active" id="gallery-thumbs">
                         <div class="content-holder">
                            <div class="container">
                              <div class="row">
    
                                <?php 
    
                                $images = get_field('gallery');
                                // (thumbnail, medium, large, full or custom size)
    
                                if( $images ): ?>
                                    
                                        <?php foreach( $images as $image ): ?>
                                            <div class="col-xs-6 col-sm-4 col-md-3 gallery-img">
                                                <a href="#">
                                                  <img class="thumbnail img-responsive img-rounded " src="<?php echo $image['sizes']['large']; ?>" alt="<?php echo $image['alt']; ?>">
                                                </a>
                                            </div><!-- close col -->
                                        <?php endforeach; ?>
                                    
                                <?php endif; ?>
    
                              </div>
                            </div>
                          </div>
    
                          <!-- lightbox modal -->
                          <div class="modal" id="myModal" role="dialog">
                            <div class="modal-dialog modal-lg">
                              <div class="modal-content">
                                <div class="modal-header">
                                  <button type="button" class="close" data-dismiss="modal">&times;</button>
                                </div>
                                <div class="modal-body">
                                  <div id="modalCarousel" class="carousel">
                                    <div class="carousel-inner"></div>
                                    <a class="carousel-control left" href="#modalCarousel" data-slide="prev">
                                      <i class="glyphicon glyphicon-chevron-left"></i>
                                    </a>
                                    <a class="carousel-control right" href="#modalCarousel" data-slide="next">
                                      <i class="glyphicon glyphicon-chevron-right"></i>
                                    </a>
                                  </div>
                                </div>
                              </div>
                            </div>
                          </div>
                          <!-- end lightbox modal -->
                          
                      </div><!-- close tab-pane gallery-thumbs -->
                      <!-- thumbnail gallery section -->
    
                  </div><!-- close panel-body tab-content -->
              </div><!-- close panel -->
    
            </div><!-- close container -->
          </section>
    
          <?php
    
          if( !empty($matterport_iframe) ): ?>
            
            <section class="matterport" id="matterport">
              <div class="container"> 
                <h2 class="section-title">Matterport 3D Tour</h2>  
                <div class="row example">  
                  <div class="col-sm-12">
                    <div class="embed-responsive embed-responsive-16by9">
                    
                      <!-- iFrame-->
                      <?php echo $matterport_iframe; ?>
    
                    </div>
                  </div><!-- close col -->
    
                </div><!-- close row  -->
              </div><!-- close container -->
            </section>
    
          <?php endif; ?>
    
          <!-- custom map section -->
          <section id="map"> 
            <div class="map-responsive">
    
               <?php
                while ( have_posts() ) : the_post();
    
                  the_content();
    
                endwhile; // End of the loop.
                ?>
    
            </div>
          </section>
    
          <section class="about-area" id="area">
            <div class="container">
              <h2 class="section-title">About The Area</h2>
              <div class="row">
                <div class="col-sm-5 col-md-5">
    
                  <?php
    
                  if( !empty($area_image) ): ?>
                    
                    <img class="img-responsive img-circle img-thumbnail" src="<?php echo $area_image['url']; ?>" alt="<?php echo $area_image['alt']; ?>" />
    
                  <?php endif; ?>
    
                </div><!-- close col -->
    
                <div class=" col-sm-7  col-md-7">
                  <h3><?php echo $area_title; ?></h3>
                  <?php echo $area_description; ?>
    
                </div><!-- close col -->
              </div><!-- close row -->
            </div><!-- close container -->
          </section>
    
          <!-- contact info -->
    
         
    
          <?php
            //contact info
          $first_name = get_the_author_meta('first_name');
          $last_name = get_the_author_meta('last_name');
          $id = get_the_author_meta('ID');
          $author_id = "user_".$id;
          $agency = get_field('agency', $author_id );
          $website_url = get_field('website_url', $author_id);
          $email_address = get_field('email_address', $author_id);
          $phone_main = get_field('phone_main', $author_id);
          $cell_phone = get_field('cell_phone', $author_id);
          $fax_number = get_field('fax_number', $author_id);
          $street_address = get_field('street_address', $author_id);
          $address_line_2 = get_field('address_line_2', $author_id);
          $city = get_field('city', $author_id);
          $zipcode = get_field('zipcode', $author_id);
          $profile_pic = get_field('profile_pic', $author_id);
          $email_address = get_field('email_address', $author_id);
    
          ?>
    
          <section class="contact-block" id="contact-section">
            <div class="container">
              <div class="row" id="contact">
                
                <div class="col-sm-3 col-md-2  text-center profile-img">
                  <img class="img-responsive img-thumbnail img-rounded" src="<?php echo $profile_pic; ?>">
                  <p><?php echo $first_name." ".$last_name; ?></p>
                  <p><?php echo $agency;?></p>
                </div>
    
                <div class="col-sm-4 ">
                  
                  <div class="title">
                    <h3>Contact Info</h3>
                  </div>
                  <div class="address">
                    <ul class="contact-address">
                      <li>
                        <i class="fa fa-globe"></i>
                       <?php echo $website_url; ?>
                      </li>
                      <?php 
    
                      if($street_address && $city && $zipcode):
                      ?>
                        <li>
                          <i class="fa fa-map-marker"></i>
                          <?php echo $street_address;?><br>
                          
                          <?php
                          if($address_line_2): 
                            echo $address_line_2."<br>";
                            endif;
    
                           echo $city.", FL ".$zipcode; ?>
                        </li>
                      <?php endif; ?>
                     
                      <li>
                        <i class="fa fa-phone"></i>
                        p. <?php echo $phone_main; ?>
                      </li>
                      <li>
                        <i class="fa fa-fax"></i>
                        f. <?php echo $fax_number; ?>
                      </li>
                      <li>
                        <i class="fa fa-envelope"></i>
                        <?php echo $email_address; ?>
                      </li>
                    </ul>
                  </div>
                </div><!-- close col -->
    
                <div class="col-sm-6 col-md-5 col-md-offset-1 ">
                  <div class="title">
                    <h3>Contact Form</h3>
                  </div>
                  <form role="form" id="contactForm">
                    <div class="row">
                      <div class="col-sm-6">
                        <div class="form-group">
                          <input type="text" class="form-control" id="fName" name="fName" placeholder="First Name">
                        </div>
                      </div>
                      <div class="col-sm-6">
                        <div class="form-group">
                          <input type="text" class="form-control" id="lName" name="lName" placeholder="Last Name">
                        </div>
                      </div>
                    </div>
                    <div class="form-group">
                      <input type="email" class="form-control" id="email" name="email" placeholder="Email">
                    </div>
                    <div class="form-group">
                      <textarea id="description" name="description" class="form-control" rows="3" placeholder="Your Comments"></textarea>
                    </div>
                    <input type="hidden" name="realtor" id="realtor" value="<?php echo $first_name." ".$last_name; ?>">
                    <input type="hidden" name="authorEmail" id="authorEmail" value="<?php echo $email_address; ?>">
                    <input type="hidden" name="property" id="property" value="<?php echo $cf_property_address; ?>">
                    <input type="hidden" name="page" id="page" value="<?php echo get_permalink(); ?>">
    
                    
    
                    <input type="hidden" class="hiddenRecaptcha required" name="hiddenRecaptcha" id="hiddenRecaptcha">
                    <div class="g-recaptcha" data-sitekey="6LdMEEAUAAAAAMVWGRniq9FYwBpmHtQF6xWf3Het"></div>
    
                    
                    <div id="confirmation"></div>
                    <input type="submit" value="Submit" class="btn btn-info">
                  </form>
                </div><!-- close col -->
    
              </div><!-- close row -->
              <hr>
              <div class="row" id="social">
                <div class="col-sm-8 col-sm-offset-2 text-center">
                  <h4>Share this listing on your favorite social media network</h4>
    
                  <div class="a2a_kit a2a_kit_size_32 a2a_default_style text-center">
    
                    <ul class="list-inline">
                      <li><a class="a2a_dd" href="https://www.addtoany.com/share"></a></li>
                      <li><a class="a2a_button_facebook"></a></li>
                      <li><a class="a2a_button_twitter"></a></li>
                      <li><a class="a2a_button_google_plus"></a></li>
                      <li><a class="a2a_button_pinterest"></a></li>
                      <li><a class="a2a_button_linkedin"></a></li>
                      <li><a class="a2a_button_google_gmail"></a></li>
                      <li><a class="a2a_button_facebook_messenger"></a></li>
                      <li><a class="a2a_button_houzz"></a></li>
                    </ul>
                  </div>
                  <script async src="https://static.addtoany.com/menu/page.js"></script>
    
                </div><!-- close col -->
              </div><!-- close row -->
    
            </div><!-- close container -->
           
          </section>
    
          <?php get_footer(); ?>
         <!--  ==================== -->
         <!--  end landing page section -->
         <!--  ==================== -->
    
     <?php
      }//end else
      ?>
    

    Here is the final page. If you click the flyer link on the nav bar it opens the printable flyer in a new window.
    http://941.media/1234-main-street-sarasota-florida-34231/

    Hope that helps

  • As beee said everything I used is above.

    The functions.php I used was exactly as listed above.

    For the template here is my version with the actual template code removed:

    
    <?php
    /*
    Template Name: Property Page
    
     */
    
      get_header(); 
    
      if ( get_query_var( 'subpage' ) ) {
          // if ?subpage=flyer is used, load the content for flyer-1
       ?>
    
       <?php  the_post(); ?>
    
      
         <!--  ==================== -->
         <!--  flyer/subpage code here -->
         <!--  ==================== -->
    
        <?php 
    
      } else {
    ?>
    
         <!--  ==================== -->
         <!--  main page code here -->
         <!--  ==================== -->
              
          <?php
                while ( have_posts() ) : the_post();
    
                  the_content();
    
                endwhile; // End of the loop.
                ?>
    
         
          <?php get_footer(); ?>
         <!--  ==================== -->
         <!--  end landing page section -->
         <!--  ==================== -->
    
     <?php
      }//end else
      ?>
    
  • I get it now. That make makes perfect sense. That’s again!!!!

  • Thanks beee, but I’m not exactly sure what you mean. Could you please help me understand this better.

    So let’s say my landing page is domain.com/landing-1 and uses the page template of page-property.php

    and I create a new page for the flyer at domain.com/flyer-1.

    how do I access the custom fields for landing-1 on flyer-1 ? Would I also create a page-flyer.php template?

    Sorry, I’m not very experienced at WordPress but I’m learning 🙂

Viewing 10 posts - 1 through 10 (of 10 total)