When $post don’t reload page

Dear WordPress users and developers.

The last weeks i am trying togheter with a friend to build a little script into my wordpress website. All functions are working properly but we don’t want the page to reload when $post.

This is the code of the page:

<?php
/**
 * Template Name: Product template
 *
 * Description: A page template that provides a key component of WordPress as a CMS
 * by meeting the need for a carefully crafted introductory page. The front page template
 * in Twenty Twelve consists of a page content area for adding text, images, video --
 * anything you'd like -- followed by front-page-only widgets in one or two columns.
 *
 * @package WordPress
 * @subpackage Twenty_Twelve
 * @since Twenty Twelve 1.0
 */
	get_header(); 

?> 

<?php
session_start();
$message = '';

$products = array ();

// get attahment ids for Carousal img slider
$carousal_attchment_ids = get_field( "carousal_slider_images", $post_id );
$att_id_arr = explode(',', $carousal_attchment_ids);

for($i=0; $i<count($att_id_arr); $i++)
{		
    $img_url = wp_get_attachment_url( $att_id_arr[$i] );
    $alt = get_post_meta( $att_id_arr[$i], '_wp_attachment_image_alt', true );

    $products[$i] =  array('src'   => $img_url ,
                           'alt'   =>  $alt,  
                           'width' => 275, 
                           'height'=> 180,
                           'aantal'=> 1);
}

if($_SERVER['REQUEST_METHOD'] == 'GET') {
    if(!isset($_SESSION['productImageOfferte'])) {
        $_SESSION['productImageOfferte'] = array();
    }
} else {
    header("https://simbeton.nl/".$_SERVER['REQUEST_URI']."#show-slider");
    if(array_key_exists("addToOfferte" , $_POST)) { 
        if(!isset($_SESSION['productImageOfferte'])) {
            $_SESSION['productImageOfferte'][$_POST['addToOfferte']] = $products[$_POST['addToOfferte']];
        } else {

            if ($_SESSION['productImageOfferte'] == null) {
                addProductToOfferte($_POST['addToOfferte'], $products);
            } else {
                if(array_key_exists($_POST['addToOfferte'], $_SESSION['productImageOfferte'])) {
                   changeNumberOfItemsOfOfferte($_POST['addToOfferte'], 1); 
                } else {
                    addProductToOfferte($_POST['addToOfferte'], $products);
                }
            }
        }
    } else if(array_key_exists("removeOfferte" , $_POST)) { 
        if(array_key_exists($_POST['removeOfferte'], $_SESSION['productImageOfferte'])) {       
            if($_SESSION['productImageOfferte'][$_POST['removeOfferte']]['aantal'] > 1) {
                changeNumberOfItemsOfOfferte($_POST['removeOfferte'], -1);
            } else {
                array_splice( $_SESSION['productImageOfferte'], $_POST['removeOfferte'], 1);
            }
         } 
    }
    if(array_key_exists("removeProductsFromImageOfferte" , $_POST)) {             
        unset($_SESSION['productImageOfferte']);
    } 

    if(array_key_exists("offerteAanvraag" , $_POST)) { 
           if(checkValidValue($_POST['klantNaam']) or 
           checkValidValue($_POST['klantEmail']) or 
           checkValidValue($_POST['klantPhoneNumber'])) {
            $message = 'Incorrecte gegevens!';
        } else {

            sendMail($_POST['klantNaam'], $_POST['klantEmail'], $_POST['klantPhoneNumber'], $_POST['klantComments'], $_SESSION['productImageOfferte']);    
        }
    }
}

function displayProducts($products) {
    echo'<form method="post">';
    foreach($products as $key => $val) {
        echo'<div class="slick-image-slide">'; 
        echo'<input type="image" name="addToOfferte" value="'.$key.'" 
                src="'.$products[$key]['src'].'" alt="'.$products[$key]['alt'].'" width="'.$products[$key]['width'].'" height="'.$products[$key]['height'].'" class="attachment-medium size-medium wp-post-image c-imgae">';
        echo'</div>';
    }
    echo'</form>';
}

function addProductToOfferte($id, $array) {
    $_SESSION['productImageOfferte'][$id] = $array[$id];
}

function changeNumberOfItemsOfOfferte($id, $value) {
    $_SESSION['productImageOfferte'][$id]['aantal'] += $value; 
}

function sendMail ($originatorName, $originatorMail, $originatorPhoneNumber, $comments, $products) {
    $productsHtml = '';
    foreach($products as $key => $val) {
        $productsHtml = $productsHtml.'<tr><td><img src="'.$products[$key]['src'].'" width="200px" height="auto"></tr></td><td>'.$products[$key]['aantal'].'</td>';
     }

    $mailSendTo  = '[email protected]';
    $mailsubject = 'Simbeton - Offerte aanvraag - '.$originatorName.'';
    $mailHeaders = array('Content-Type: text/html; charset=UTF-8');
    $mailMessage = '<body>
                    <div class="emailcontainer" style="width: 500px;background-image: url(https://simbeton.nl/wp-content/uploads/2017/04/gradient-1.png);background-repeat: repeat-y no-repeat;background-color: #333;max-width: 500px;min-height: 500px;margin-left: 30%;margin-top: 100px;padding-bottom: 40px;border-radius: 3px;">
                        <div class="emailtop">
                            <div class="simbetonlogo" style="	text-align:right;padding-top:10px;width:133px;float:left;padding-left:10px;">
                                <img src="https://simbeton.nl/wp-content/themes/simbeton/images/logo.jpg" width="90px" height="auto">
                            </div>
                            <div class="headinglogoemail" style="color: #1ca458;
                    display: inline-block;
                    font-variant: small-caps;
                    text-decoration: none;
                    font-family: arial;
                    float: left;
                    width: 256px;
                    font-size: 1rem!important;
                    padding-left:10px"><h1>Sierbeton Industrie Markelo bv</h1></div>
                        </div>
                        <div class="emailinfo" style="height: 20px;
                    width: 480px;
                    border-top: 1px solid #d9d9d9;
                    border-bottom: 1px solid #d9d9d9;
                    padding: 10px;
                    box-sizing: border-box;
                    background-color: #e7e7e7;
                    float:left;
                    font-family:arial;">
                            <strong>Naam klant:</strong><span style="	margin-left:10px;
                        font-weight: lighter;
                        color: #1ca458;">'.$originatorName.'</span>
                        </div>
                        <div class="emailinfo" style="height: 20px;
                    width: 480px;
                    border-top: 1px solid #d9d9d9;
                    border-bottom: 1px solid #d9d9d9;
                    padding: 10px;
                    box-sizing: border-box;
                    background-color: #e7e7e7;
                    float:left;
                    font-family:arial;">
                            <strong>Telefoonnummer klant:</strong><span style="	margin-left:10px;
                        font-weight: lighter;
                        color: #1ca458;">'.$originatorPhoneNumber.'</span>
                        </div>
                        <div class="emailinfo" style="height: 20px;
                    width: 480px;
                    border-top: 1px solid #d9d9d9;
                    border-bottom: 1px solid #d9d9d9;
                    padding: 10px;
                    box-sizing: border-box;
                    background-color: #e7e7e7;
                    float:left;
                    font-family:arial;">
                            <strong>Emailadres klant:</strong><span style="	margin-left:10px;
                        font-weight: lighter;
                        color: #1ca458;">'.$originatorMail.'</span>
                        </div>
                    <div class="productholder" style="width: 460px;
                        min-height: 150px;
                        text-align: center;
                        margin: auto;
                        margin-top: 40px;
                        padding-bottom: 30px;
                        margin-bottom: 40px;">
                        <div class="productsemail" style="width: auto;
                        height: 162px;
                        float: left;
                        margin-top: 25px;">
                            '.$productsHtml.'
                            <div class="infoimagemail" style="width: 170px;
                    height: 50px;
                    float: left;
                    position: relative;
                    margin-top: -4px;
                    background-color: rgba(28, 164, 88, 0.32);
                    color:#FFF;
                    font-family:arial;
                    padding:15px;
                    border-radius:0px 0px 3px 3px;">
                                <strong>Aantal: </strong><span>2</span>
                            </div>
                        </div>
                    </div>
                    </div>
                    </body>';

    $status = wp_mail($mailSendTo, $mailsubject, $mailMessage, $mailHeaders);

}

function checkValidValue($value) {
    return (!isset($value) or $value == null);
}

function displayProductsInTable($productList) {
    $productSrc = array_column($productList, 'src');
    $productOccurrences = array_count_values($productSrc);

    foreach($productList as $key => $val) {
        echo '<div class="offerteimage">';
            //min button img
            echo '<input type="image" name="removeOfferte" value="'.$key.'" src="https://simbeton.nl/wp-content/uploads/2017/04/ic_exposure_neg_1_black_24dp_1x.png" width="10px" height="10px">';

            //product image
            echo '<img src="'.$productList[$key]['src'].'" alt="'.$productList[$key]['alt'].'" width="100px" height="auto">';

            //plus button img
            echo '<input type="image" name="addToOfferte" value="'.$key.'" src="https://simbeton.nl/wp-content/uploads/2017/04/ic_exposure_plus_1_black_24dp_1x.png" width="10px" height="10px">';
        echo '</div>';

        //show number if greater than 1 product
        if($productList[$key]['aantal'] > 1) {
            echo '<div class="aantalofferte">';
                echo $productList[$key]['aantal'];
            echo '</div>';
        }
           
    }
}
?>

<style type="text/css">
    .table_overflow{ overflow:auto; width:100%;}
    .bg_con{ background:#EEEEEE; border:#CCC solid; border-width:1px 0; float:left; width:100%; padding:20px 0; margin:20px 0;}
    .w_bg_con{ background:#fff; float:left; width:100%; padding:20px 0; margin:20px 0;}
    .g_bg_con{ background:#eee; float:left; width:100%; padding:20px 0; margin:20px 0;}
    .b_bot{border-bottom:#CCC solid 1px;}
    .gallery img{padding:10px !important; width:100% !important; height:auto; box-sizing:border-box;}
    .gallery a{ float:left; width:25%; margin-bottom:30px;}
    .contact-btn{ padding:15px 20px; text-decoration:none; color:#FFF; font-size:20px; font-weight:bold; background:#1CA458; float:left; width:100%; box-sizing:border-box; border-radius:8px; text-align:center;}
    @media (max-width: 400px){
        .slick-image-slide, .slide-wrap{height:200px !important;}
        .c-imgae{max-width:300px !important;}
    }
</style>

<div class="breadcrumb">
	<div class="center">
		<?php if (function_exists('dimox_breadcrumbs')) dimox_breadcrumbs(); ?>
	</div>
</div>

<!--
<div class="call_btn">
  <a href="tel:+310547352190"><img src="<?php //echo get_template_directory_uri(); ?>/images/call-us-button.png" alt="Call us at +31 (0)547 352 190" /></a>
</div>
-->
<div id="primary" class="site-content">
    <div id="content" role="main">
        <?php 
        global $post;
        while ( have_posts() ) : the_post(); 
            $post_id = $post->ID;
        ?>	
            <header class="entry-header">
                <h1 class="entry-title"><?php echo the_title(); ?></h1>
            </header>

            <div class="entry-content">
                <?php echo the_content(); ?>
            </div>
        <?php endwhile; // end of the loop. ?>
    </div><!-- #content -->
</div><!-- #primary -->
<?php //get_sidebar( '3' );?>

<div id="secondary" class="widget-area" role="complementary">
    <div class="second front-widgets">
        <aside id="text-2" class="widget widget_text">
            <h4 class="widget-title">Offerte aanvragen?</h4>
            <div class="textwidget"><p>Bel of mail ons voor een vrijblijvende offerte.</p>
                <p>
                    Tel: +31 (0)547 352 190<br>
                    Fax:+31 (0)548 522 226<br>
                    <a href="mailto:[email protected]">[email protected]</a>
                </p>
            </div>
        </aside>
    </div>

    <a class="contact-btn" href="https://simbeton.nl/contact/">Contact opnemen</a>
</div>
</div>
</div>

<div class="bg_con">	
    <div class="site" style="background:none;">

    <?php
    // get attahment ids for Carousal img slider
    $carousal_attchment_ids = get_field( "carousal_slider_images", $post_id );
    $att_id_arr = explode(',', $carousal_attchment_ids);

    ?>
    <div id='show-slider' class="wpsisac-slick-carousal-1 wpsisac-slick-carousal design-6 variablewidthv gallery-size-large">	
            
        <?php
                displayProducts($products); 
            ?>
    </div>
    </div>
    <?php 
        if(array_key_exists('productImageOfferte', $_SESSION)) { 
            if(count($_SESSION['productImageOfferte']) > 0) {
    ?>
    <div id="refreshId" class="site" style="background-color: #eee;">
        <form method="post">

                <?php
                    if(isset($_SESSION['productImageOfferte'])) {
                        displayProductsInTable($_SESSION['productImageOfferte']);
                    }
                ?>
            <div class="offertecontain">	
                <?php echo $message; ?>
                <div class="offertform">
                    <div class="formgrid ">
                    <subhead>
                        <h2>Vraag gratis een offerte aan voor de door u geselecteerde producten.</h2>
                        <h3>Snel een offerte voor u opgesteld en u zit nergens aan vast.</h3>
                    </subhead>
                    <div class="formtop">
                        <input name="klantNaam" type="text" placeholder="Uw naam">
                        <input name="klantEmail" type="email" placeholder="Uw E-mailadres">
                        <input name="klantPhoneNumber" type="number" placeholder="Uw telefoonnummer">
                    </div>
                    <input type="submit" name="offerteAanvraag" value="Vraag offerte aan">
                    <input type="submit" name="removeProductsFromImageOfferte" value="Annuleer offerte">
                    </div>
                </div>
            </div>

        </form>
    </div>
    <?php 
        }
    } 
    ?> 
</div>
    
<?php //echo do_shortcode('[slick-carousel-slider variablewidth="true"]'); ?>
</div>
<div class="site entry-content">
    <?php echo get_field( "text_content_below_carousal_slider", $post_id ); ?>
</div>
<div class="bg_con">
    <div class="site"  style="background:none;">
        <div class="entry-content">
            <h2>Afmetingen</h2>
        </div>
        <div style="height:400px; overflow:auto;">
            <?php echo get_field( "table_data", $post_id ); ?>
        </div>	
    </div>
</div>
<div class="site"  style="background:#FFF;">
    <h3>Afbeeldingen</h3><br/>
        <div class="gerwin-slider">
            <div class="wpsisac-slick-carousal-2 wpsisac-slick-carousal design-6 variablewidthv gallery gallery-columns-1 gallery-size-large">	
            <?php			
                    $gallery_attchment_ids = get_field( "image_gallery", $post_id );
                    $galimg_id_arr = explode(',', $gallery_attchment_ids);			

                        for($i=0; $i<count($galimg_id_arr); $i++)
                        {
                            $big_img_url = wp_get_attachment_url( $galimg_id_arr[$i] );
                            $gal_img_url = wp_get_attachment_image_src( $galimg_id_arr[$i], array(180, 100) );
                            //print_r( $gal_img_url);

                    ?>
                        <!-- children = slides -->
                        <div class="slick-image-slide"> 
                            <dt class="gallery-icon landscape">
                                <a href="<?=$big_img_url?>" class="lightbox-enabled">
                                    <img src="<?=$gal_img_url[0]?>" class="attachment-thumbnail size-thumbnail fancybox" id="fancybox"alt="<?=$post->post_title?>" width="180" height="100">
                                </a>
                            </dt>
                        </div>

                    <?
                    }
                    ?>
            </div>
        </div>
</div>

 
<div class="g_bg_con  entry-content">
    <div class="site"  style="background:none;">	
        <?php echo get_field( "referenties", $post_id ); ?>
    </div>
</div>
<div class="w_bg_con  entry-content"  style="border-bottom:#eee solid 0px;">
    <div class="site"  style="background:none;">
        <?php 
            echo get_field( "contact_form_text", $post_id );
        ?>
        <?php 
            $cf_code = get_field( "cform_code", $post_id );
            echo do_shortcode($cf_code);
        ?>
    </div>
</div>
<?php get_footer(); ?>

 
<script type="text/javascript">                  
    jQuery(document).ready(function(){
		jQuery('.wpsisac-slick-carousal-1').slick({
			dots: false,
			infinite: true,
			arrows: true,
			speed: 300,
			autoplay: true,
			autoplaySpeed: 3000,
			slidesToShow: 4,
			slidesToScroll: 1,
			centerMode: false,
			variableWidth :true,
			responsive: 
            [
                {
                    breakpoint: 769,
                    settings: {
                    slidesToShow: 2,
                    slidesToScroll: 1,
                    infinite: true,
                    variableWidth :true,	
                    dots: false
                  }
                },
                {
                    breakpoint: 641,
                    settings: {
                    slidesToShow: 2,
                    slidesToScroll: 1,
                    variableWidth :true,
                    dots: false
                  }
                },
                {
                    breakpoint: 310,
                    settings: {
                    slidesToShow: 1,
                    variableWidth :true,
                    slidesToScroll: 1,
                    dots: false
                  }
                }
            ]
		});
	});

    jQuery(document).ready(function(){
        jQuery('.wpsisac-slick-carousal-2').slick({
			dots: false,
			infinite: true,
			arrows: true,
			speed: 300,
			autoplay: true,
			autoplaySpeed: 3000,
			slidesToShow: 4,
			slidesToScroll: 1,
			centerMode: false,
			variableWidth :true,
			responsive: 
            [
                {
                    breakpoint: 769,
                    settings: {
                        slidesToShow: 2,
                        slidesToScroll: 1,
                        infinite: true,
                        dots: false
                    }
                },
                {
                    breakpoint: 641,
                    settings: {
                      slidesToShow: 2,
                      slidesToScroll: 1,
                      dots: false
                    }
                },
                {
                    breakpoint: 310,
                    settings: {
                        slidesToShow: 1,
                        slidesToScroll: 1,
                        dots: false
                    }
                }
            ]
		});
	});
    $(function() {
        var demo1 = $("#demo1").slippry({
             transition: 'fade',
            // useCSS: true,
             speed: 1000,
            // pause: 3000,
             auto: true,
             preload: 'visible',
            // autoHover: false
        });

    });
</script>

The function is in the carrousel1 division. Its a long code so i hope you guys understand what we are doing.
We are trying to do this with Ajax but we don’t fully understand it, how does it work?

The link where you can find the slider and the problem with the reloading is:
click here for the page with the problem.

Its about the first slider with the images of the products, when click on one of the products, it will reload and show the selected product underneath the slider, after that i can submit and send the products to get an offer. The reloading needs to be gone, and just instant show the products that will be much more userfriendly.

Thanks for looking into this, i will look forward for the answer.

• This topic was modified 7 years, 11 months ago by gerwinmorren.