2

I am trying to link from my homepage to a page where I have Foundation Reveal modals that open up on a user click revealing a recipe.

I want to feature some recipes on my homepage and when a user clicks on one of the recipes on the homepage, I want it to open the recipes page and open the specific modal on the recipes page that goes with that recipe.

Here is my code on the homepage for the featured recipe:

<div class="content grid-x">
    <?php 
        $args = array(
            'post_type' => 'recipes',
            'orderby'   => 'rand',
            'posts_per_page' => 3
        );
        $query = new WP_Query( $args );
        $counter = 0;
        if( $query->have_posts() ) : while( $query->have_posts() ) : $query->the_post(); 
            global $post;
            $slug = $post->post_name; 
    ?>

    <a class="cell small-12 large-4 recipeCell" data-open="recipe-<?php echo $slug; ?>">
        <div class="cell text-left" >
            <img src="<?php the_field('image'); ?>"/>
            <div class="recipeTitle" data-sr><div class="doubleUnderline"><h4><?php the_title(); ?></h4></div></div>
        </div>
    </a>
    <?php $counter++; endwhile; endif; ?>
</div>

And here is the code for the modal (I am using Foundation Reveal modals):

<div class="reveal recipeModal" id="recipe-<?php echo $slug; ?>"  style="background:url(<?php the_field('image'); ?>) center center;background-size: cover;" data-reveal>
    <div class="grid-container">
        <div class="grid-x recipeDetails">
            <img src="<?php the_field('image'); ?>" class="printableImage" />
                <div class="cell small-12 doubleUnderline"><h4><?php the_title(); ?></h4></div>
                    <h6 class="cell small-9 time">Start to Finish: <?php the_field('preparation_time'); ?></h6>
                    <h6 class="cell small-3 text-right servings">Servings: <?php the_field('servings'); ?></h6>
                    <div class="recipeInstructions">
                        <p><?php the_content(); ?></p>
                    </div>
                    <a href="#"><button class="button large printButton darkButton" style="margin:0;" onclick="window.print();return false;">Print Recipe</button></a>
                </div>   
        </div>   

        <button class="close-button" data-close aria-label="Close modal" type="button">
            <span aria-hidden="true">&times;</span>
        </button>
    </div>
</div>

As you can see I am using "recipe-" + the post slug to create the ID for each recipe card so that I can associate it with the modal it needs to open. Is there a way to send that data to the recipe page and open that specific modal there rather than on the homepage?

Ben Cavenagh
  • 608
  • 1
  • 6
  • 22

1 Answers1

0

On your homepage, make sure your recipe links include the recipe ID as a parameter in the URL. Right now your recipe links are missing 'href'; are you loading pages with AJAX or something other than regular page loads? I believe data-attributes are only useful on a single page instance.

Ultimately you'd want the request URL to be something along these lines: http://www.mywebsite.com/recipes/?recipe=34512

Then on your recipes page, run a Javascript after page load, which will check the URL parameters and if a specific recipe exists in the request URL, then open the modal accordingly, otherwise just show the recipes page as-is. Ideally you have a custom template for the recipe page where you could put the JS.

$(document).ready(function(){
    var url_string = window.location.href
    var url = new URL(url_string);
    var recipeToLoad = url.searchParams.get("recipe");
    if(recipeToLoad) {
         jQuery('#recipeToLoad').foundation('reveal', 'open')});
    }
}
Kalnode
  • 9,386
  • 3
  • 34
  • 62