Skip to content

Instantly share code, notes, and snippets.

@dillinghamio
Last active August 13, 2019 13:53
Show Gist options
  • Save dillinghamio/e86204633e607f04517383a8884bfca6 to your computer and use it in GitHub Desktop.
Save dillinghamio/e86204633e607f04517383a8884bfca6 to your computer and use it in GitHub Desktop.
Laravel Spark Pricing Table

Rotating Pricing Table for Laravel Spark

Can be placed anywhere, try it out on welcome.blade.php


Laravel Spark Pricing Table ###If you're using team plans just swap out $sparkPlans = Spark::plans(); with $sparkPlans = Spark::teamPlans();


###Snippet

<style type="text/css">
    #spark-pricing-table .carousel-inner { z-index: 1; }
    #spark-pricing-table .carousel-control {background: none !important; top: -75px; color: #333;}
</style>
<div class="container">
    <div class="row">
        <h1 class="text-center">
            Pricing
        </h1>
        <hr>
        <div id="spark-pricing-table" class="carousel slide" data-ride="carousel">
            <div class="carousel-inner" role="listbox">
            
            <?php $sparkPlans = Spark::plans(); ?> <!-- or Spark::teamPlans() -->
            
            @foreach($sparkPlans->chunk(3) as $plans)
                <div class="item {{ ($sparkPlans->first()->id != $plans->first()->id) ?: 'active' }}">
                    <div class="row">                                    
                        @foreach($plans as $plan)
                            <div class="col-md-4">
                                <div class="panel panel-default">                                
                                    <div class="panel-body">
                                        <h1>
                                            {{ $plan->name }}
                                            <span class="small pull-right">${{ $plan->price }}</span>
                                        </h1>
                                        <hr>
                                        <ul class="list-group">
                                            @foreach($plan->features as $feature)
                                                <li class="list-group-item">{{ $feature }}</li>
                                            @endforeach    
                                        </ul>
                                    </div>
                                </div>                            
                            </div>
                        @endforeach
                    </div>
                </div>
            @endforeach         
        </div>
        <a class="left carousel-control" href="#spark-pricing-table" role="button" data-slide="prev">
            <span class="fa fa-chevron-left" aria-hidden="true"></span>
            <span class="sr-only">Previous</span>
        </a>
        <a class="right carousel-control" href="#spark-pricing-table" role="button" data-slide="next">
            <span class="fa fa-chevron-right" aria-hidden="true"></span>
            <span class="sr-only">Next</span>
        </a>
    </div>
</div>

Made by: @dillinghamio Find More Awesome Spark Stuff Here

@benbowler
Copy link

This is brilliant, thanks so much for sharing!

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment