Laravel Spark Pricing Table

laravel-spark-rotating-pricing-table.md

Rotating Pricing Table for Laravel Spark

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

---

###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

This is brilliant, thanks so much for sharing!