How to pass variable through different method from Controller to Blade - laravel

I want to pass a variable from my controller to a Blade file in Laravel. I have two different methods in my controller. The variable in the view is coming from two different methods; one variable output is depending on another. I want it to be saved my first variable output which is coming from a method, and when I am passing another variable, it will execute without the undefined variable error. How can I do this in Laravel?
Controller
public function index2($id)
{
$categories1 = Category::find($id);
$products = $categories1->products->take(8);
$carousel = carousel::all();
$second_carousel = SecondCarousel::all();
$second_carousel2 = SecondCarousel::all();
$carousel1 = $second_carousel->first();
$carousel2 = $second_carousel->take(-4);
$categories = Category::all()->take(-3);
$category = Category::all()->first();
return view('onlineshop.index',
compact('carousel', 'carousel1', 'carousel2', 'categories', 'category', 'products'));
}
public function quickview($id)
{
$product_quickview = Product::find(1);
return view('onlineshop.index', compact('product_quickview'));
}
Blade
#isset($products)
#foreach($products as $product)
<li>
<figure>
<a class="aa-product-img" href="#">
<img src="{{ URL::to('/') }}/uploads/product/{{$product->image ? $product->image->name: 'no carousel photo'}}"
alt="polo shirt img">
</a>
<a class="aa-add-card-btn" href="#"><span class="fa fa-shopping-cart"></span>Add To Cart</a>
<figcaption>
<h4 class="aa-product-title">{{$product->name}}</h4>
<span class="aa-product-price">${{$product->price}}</span><span class="aa-product-price"></span>
</figcaption>
</figure>
<div class="aa-product-hvr-content">
<a href="#" data-toggle="tooltip" data-placement="top" title="Add to Wishlist"><span
class="fa fa-heart-o"></span></a>
<a href="#" data-toggle="tooltip" data-placement="top" title="Compare"><span
class="fa fa-exchange"></span></a>
<a href="{{route('product.quick_view',$product->id)}}" data-toggle2="tooltip" data-placement="top"
title="Quick View" data-toggle="modal" data-target="#quick-view-modal">
<button><span class="fa fa-search"></span></button>
</a>
</div>
<!-- product badge -->
<span class="aa-badge aa-sale">SALE!</span>
</li>
#endforeach
#endisset
#isset($product_quickview)
<div class="col-md-6 col-sm-6 col-xs-12">
<div class="aa-product-view-content">
<h3>T-Shirt</h3>
<div class="aa-price-block">
<span class="aa-product-view-price">{{$product->price}}</span>
<p class="aa-product-avilability">Avilability: <span>In stock</span></p>
</div>
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Officiis animi, veritatis quae repudiandae
quod nulla porro quidem, itaque quis quaerat!
</p>
<h4>Size</h4>
<div class="aa-prod-view-size">
S
M
L
XL
</div>
<div class="aa-prod-quantity">
<form action="">
<select name="prod" id="prod">
<option value="0" selected>1</option>
<option value="1">2</option>
<option value="2">3</option>
<option value="3">4</option>
<option value="4">5</option>
<option value="5">6</option>
</select>
</form>
<p class="aa-prod-category">
Category: Polo T-Shirt
</p>
</div>
<div class="aa-prod-view-bottom">
<span class="fa fa-shopping-cart"></span>Add To Cart
View Details
</div>
</div>
</div>
#endisset

Step1 :Create new blade file product_quiqe_view.blade.php
#isset($product_quickview)
<div class="col-md-6 col-sm-6 col-xs-12">
<div class="aa-product-view-content">
<h3>T-Shirt</h3>
<div class="aa-price-block">
<span class="aa-product-view-price">{{$product->price}}</span>
<p class="aa-product-avilability">Avilability: <span>In stock</span></p>
</div>
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Officiis animi, veritatis quae repudiandae
quod nulla porro quidem, itaque quis quaerat!
</p>
<h4>Size</h4>
<div class="aa-prod-view-size">
S
M
L
XL
</div>
<div class="aa-prod-quantity">
<form action="">
<select name="prod" id="prod">
<option value="0" selected>1</option>
<option value="1">2</option>
<option value="2">3</option>
<option value="3">4</option>
<option value="4">5</option>
<option value="5">6</option>
</select>
</form>
<p class="aa-prod-category">
Category: Polo T-Shirt
</p>
</div>
<div class="aa-prod-view-bottom">
<span class="fa fa-shopping-cart"></span>Add To Cart
View Details
</div>
</div>
</div>
#endisset
Step2 :Include product_quiqe_view.blade.php file in index.blade.php file like:
#isset($products)
#foreach($products as $product)
-------
#endforeach
#endisset
#include('product_quiqe_view');
step3:In controller:
public function quickview($id)
{
$product_quickview = Product::find(1);
return view('onlineshop.product_quiqe_view',compact('product_quickview'))->render();
}

Related

Want to print two different div using for loop using one single db object

I have two different div for two different blogs. One need to be only once, and the second one need to be print again and again. I am not able to write the loop for the same. So the first section need to get rendered once and second needs to get repeated again and again.
I have tried many loops and methods but none of them are working properly for me.
Not able to form any loop.
<section class="blog_main">
<div class="blog_left">
<img src="uploads/blogs/<?php echo $mythical[0]->image;?>">
</div>
<div class="blog_right">
<h1>Scaling design sprints: Spreading the gospel 4 min read</h1>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. In quas similique atque labore illum libero vero
sit, esse adipisci quis accusantium quisquam eos velit corporis doloremque soluta ducimus ipsum
voluptas?</p>
<h4>4 min read.</h4>
<a href="#" class="author">ARTICLE BY <span>DANIEL SPATZEK</span> IN <span>WEB DESIGN</span> - OCTOBER
02</a>
<ul>
<li><i class="fab fa-facebook-f"></i></li>
<li><i class="fab fa-instagram"></i></li>
<li><i class="fab fa-twitter"></i></li>
<li><i class="fab fa-pinterest-p"></i></li>
</ul>
</div>
</section>
<section class="same_sec">
<div class="row no-gutters">
<?php
if(count($mythical)>0){
foreach($mythical as $mythicals){
?>
<div class="col-md-3">
<a href="<?php echo base_url();?>home/blog_detail/<?php echo $mythicals->slug;?>">
<div class="small_curve_section">
<div class="image_S">
<img src="uploads/blogs/<?php echo $mythicals->image;?>">
</div>
<div class="content_for_curve">
<h3><?php echo $mythicals->blog_heading;?></h3>
<div class="bookar_mark_White">
<i class="fas fa-bookmark"></i>
<div class="div_black">
<p><?php echo $mythicals->read_time;?>min read</p>
</div>
</div>
</div>
</div>
</a>
</div>
<?php }} ?>
</div>
Edit code like this..
"same_sec" will loop upto to the count($mythical) array.
<?php
if(count($mythical)>0){
foreach($mythical as $mythicals){
?>
<section class="same_sec">
<div class="row no-gutters">
<div class="col-md-3">
<a href="<?php echo base_url();?>home/blog_detail/<?php echo $mythicals->slug;?>">
<div class="small_curve_section">
<div class="image_S">
<img src="uploads/blogs/<?php echo $mythicals->image;?>">
</div>
<div class="content_for_curve">
<h3><?php echo $mythicals->blog_heading;?></h3>
<div class="bookar_mark_White">
<i class="fas fa-bookmark"></i>
<div class="div_black">
<p><?php echo $mythicals->read_time;?>min read</p>
</div>
</div>
</div>
</div>
</a>
</div>
</div>
</section>
<?php
}
}
?>

How to change layout in bootstrap

I want to show my products in horizontal. In one line only three pics shown and 3 rows only 9 latest pics shown. How can I do this?
blade file:
<div class="gallery-grids-row">
<div class="col-md-4">
#foreach($data as $row)
<div class="wpf-demo-4">
<a href="{{ URL::to('/') }}/images/{{ $row->image }}" class="jzBoxLink item-hover" title="Maecenas sodales tortor ac ligula ultrices dictum et quis urna.">
<img src="{{ URL::to('/') }}/images/{{ $row->image }}" class="img-responsive" alt=" " style="width: 380px; height: 263px;" />
<div class="view-caption">
<p>{{ $row->name }}</p>
</div>
</a>
</div>
#endforeach
<div class="clearfix"> </div>
</div>
<div class="clearfix"> </div>
</div>
controller:
public function index()
{
$data = Post::all();
return view('index', compact('data'));
}
change your blade to this: one whole line in top of foreach and 1/3 of each line in each foreach:
<div class="gallery-grids-row">
<div class="row"><!-- this changed -->
#php($index = 0)
#foreach($data as $row)
#if($index < 9)
<div class="wpf-demo-4 col-md-4"><!-- this line changed -->
<a href="{{ URL::to('/') }}/images/{{ $row->image }}" class="jzBoxLink item-hover" title="Maecenas sodales tortor ac ligula ultrices dictum et quis urna.">
<img src="{{ URL::to('/') }}/images/{{ $row->image }}" class="img-responsive" alt=" " style="width: 380px; height: 263px;" />
<div class="view-caption">
<p>{{ $row->name }}</p>
</div>
</a>
</div>
#endif
#php($index += 1)
#endforeach
<div class="clearfix"> </div>
</div>
<div class="clearfix"> </div>
</div>
in your controller you can limit the collection that you are getting
like this:
$data = Post::orderBy('created_at', 'desc')->get(); //this line gets the posts record ordering by date
This last example looks like this:
Example of display tested
You can try filtering the query and limiting the results to 9 or paginate.
Controller
public function index()
{
$data = Post::orderBy('created_at', 'desc')->limit(9)->get();
return view('home')->with(['data' => $data]);
}
View
<div class="gallery-grids-row">
<div class="row">
#foreach($data as $row)
<div class="wpf-demo-4 col-md-4">
<a href="{{ URL::to('/') }}/images/{{ $row->image }}" class="jzBoxLink item-hover" title="Maecenas sodales tortor ac ligula ultrices dictum et quis urna.">
<img src="{{ URL::to('/') }}/images/{{ $row->image }}" class="img-responsive" alt=" " style="width: 380px; height: 263px;" />
<div class="view-caption">
<p>{{ $row->name }}</p>
</div>
</a>
</div>
#endforeach
<div class="clearfix"></div>
</div>
<div class="clearfix"> </div>
</div>
This last example looks like this:
Example of display without pagination tested
Or alternative paginated
Controller
public function index()
{
$data = Post::orderBy('created_at', 'desc')->paginate(9);
return view('home')->with(['data' => $data]);
}
View
<div class="gallery-grids-row">
<div class="row">
#foreach($data as $row)
<div class="wpf-demo-4 col-md-4">
<a href="{{ URL::to('/') }}/images/{{ $row->image }}" class="jzBoxLink item-hover" title="Maecenas sodales tortor ac ligula ultrices dictum et quis urna.">
<img src="{{ URL::to('/') }}/images/{{ $row->image }}" class="img-responsive" alt=" " style="width: 380px; height: 263px;" />
<div class="view-caption">
<p>{{ $row->name }}</p>
</div>
</a>
</div>
#endforeach
<div class="clearfix"></div>
</div>
<div class="clearfix"> </div>
{{ $data->links() }}
</div>
This last example looks like this:
Example of display tested

Change Bootstraps column order for mobile while inside a loop

Trying to change Bootstraps column order for mobile, .col-order doesn't work cause its in a loop. Have $loop->iteration set for displaying different backgrounds on column 1, 4 or 5 for desktop, but for mobile i need some way of displaying them stacked as odds or evens, thanks.
<div class="row no-gutters bg-light">
#foreach ($products as $product)
<div class="col-12 col-xl-6 div-wo-bg #if($loop->iteration === 1 || $loop->iteration === 4 || $loop->iteration === 5) div-w-bg #endif">
Have tried an if statement:
<div class="row no-gutters bg-light">
#foreach ($products as $product)
#if ('className' == 'col-12')
<div class="col-12 col-xl-6 div-wo-bg #if($loop->iteration === 1 || $loop->iteration === 4 || $loop->iteration === 5) div-w-bg #endif">
#elseif ('className' == 'col-xl-6')
<div class="col-12 col-xl-6 div-wo-bg #if($loop->odd) div-w-bg #endif">
#endif
This just throws all the column display out of wack (for both mobile and desktop).
Try this
<div class="row no-gutters bg-light">
#foreach ($products as $key => $product)
<div class="col-12 col-xl-6 div-wo-bg {{ $key == 1 ? 'div-w-bg' : ($key == 4 ? 'div-w-bg' : ( $key == 5 ? 'div-w-bg' )) }}">
<!-- Latest Products Showcase Section
- The showcase design calls for columns to be side by side for desktop, but stacked for mobile. There are 2 differently styled bg's repeated throughout the layout of the columns.
- Because these columns are layed out differently, they both require 2 different $loop extensions to retrieve the bg's. So from within an if statement we use $loop->iteration for desktop but $loop->odd for mobile -->
<!-- Desktop Layout -->
<div class="container-fluid p-0">
<div class="row showcase-shop-products no-gutters bg-light">
#foreach ($products as $product)
<div class="col-6 d-none d-lg-flex div-wo-bg #if($loop->iteration === 1 || $loop->iteration === 4 || $loop->iteration === 5) div-w-bg #endif">
<div class="container-fluid">
<div class="row">
<!-- Column a (Text) -->
<div class="col-6 showcase-col">
<div class="overlay"></div>
<div class="showcase-hero">
<h2 class="card-title mb-4">{{ $product->name }}</h2>
<h3 class="card-subtitle text-muted">{{ $product->details }}</h3>
<h4 class="mb-3">{{ $product->presentPrice() }}</h4>
<p class="card-text mb-4 d-lg-none d-xxl-block">Lorem ipsum dolor sit amet consectetur adipisicing elit. At dicta accusamus quia aliquid minima animi alias.</p>
Add to Cart
</div>
</div>
<!-- Column b (Image) -->
<div class="col-6 showcase-col">
<img class="card-img-top products-img img-fluid" src="{{ asset("img/shop/products/".$product->slug.".png") }}" alt="Random product item">
<div class="overlay"></div>
</div>
</div>
</div>
</div>
#endforeach
</div>
</div>
<!-- Mobile Layout -->
<div class="container-fluid p-0">
<div class="row showcase-shop-products no-gutters bg-light">
#foreach ($products as $product)
<div class="col-12 d-flex d-lg-none div-wo-bg #if($loop->odd) div-w-bg #endif">
<div class="container-fluid">
<div class="row">
<!-- Top Column (Image) -->
<div class="col-12 showcase-col">
<img class="card-img-top products-img img-fluid" src="{{ asset("img/shop/products/".$product->slug.".png") }}" alt="Random product item">
<div class="overlay"></div>
</div>
<!-- Bottom Column (Text) -->
<div class="col-12 showcase-col">
<div class="overlay"></div>
<div class="showcase-hero text-center pb-5">
<h2 class="card-title mb-4">{{ $product->name }}</h2>
<h3 class="card-subtitle text-muted">{{ $product->details }}</h3>
<h4 class="mb-3">{{ $product->presentPrice() }}</h4>
<p class="card-text mb-4 d-none xl-block">Lorem ipsum dolor sit amet consectetur adipisicing elit. At dicta accusamus quia aliquid minima animi alias.</p>
Add to Cart
</div>
</div>
</div>
</div>
</div>
#endforeach
</div>
</div>
Works perfectly now.

How to get value of html attribute value with v-on:click inside anchor tag in Vue.js?

Here is the code with vue.js , laravel.......
I want 'h5' attribute value that is {{$subcategory->name}} in my vue app, So I can perform other purpose.
<div class="container" id = "showProd">
<div class = "row">
<div class = "row" align = "center" id = "flash">
<div class="tabpanel">
<ul class="nav nav-tabs" role="tablist">
#foreach($data['subcategories'] as $count => $subcategory)
<li role="presentation" #if($count == 0) class="active" #endif>
<a href="#tab-{{ $subcategory->id }}" aria-controls="#tab-{{ $subcategory->id }}" role="tab" data-toggle="tab" v-on:click = "greet">
<div class="card" id = "category_list" style="width: 17rem;"><img id = "product_image" class="card-img-top" src="/images/0a09d8530691a1c23a4e4f4ec3eeff2a.jpg" alt="Card image cap" style="height:170px;">
<div class="card-body" >
<h5 class="card-title" id = "product_name" >{{$subcategory->name}}</h5>
</div>
</div>
</a>
</li>
#endforeach
</ul>
<div class="tab-content">
#foreach($data['subcategories'] as $count => $subcategory)
<div role="tabpanel" #if($count == 0) class="tab-pane active" #else class="tab-pane" #endif id="tab-{{ $subcategory->id }}">
<h2>{{ $subcategory->name }}</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Alias enim obcaecati praesentium repellat. Est explicabo facilis fuga illum iusto, obcaecati saepe voluptates! Dolores eaque porro quaerat sunt totam ut, voluptas.</p>
</div>
#endforeach
</div>
</div>
</div>
</div>
</div>
<script>
new Vue({
el: '#showProd',
data: {
name: 'Vue.js'
},
methods: {
greet: function (event) {
// `this` inside methods point to the Vue instance
var val = this.
alert('Hello ' + this.name + '!')
}
}
});
</script>
You can generate the data object from laravel and use vuejs binding and constructs to generate the html. This means that you won't rely on blade templating for generating the html, but on vuejs.
data () {
return JSON.parse( '{{json_decode($data['subcategories'])}}' )
}
Now you need to update your template to use the info from data and not directly from php via blade.
<div class="container" id = "showProd">
<div class = "row">
<div class = "row" align = "center" id = "flash">
<div class="tabpanel">
<ul class="nav nav-tabs" role="tablist">
<li v-for="(subcategory, subindex) in subcategories" role="presentation" :class="{'active': subindex === 0}">
<a :href="'#tab-' + subcategory.id" :aria-controls="'#tab-'+ subcategory.id" role="tab" data-toggle="tab" v-on:click = "greet">
<div class="card" id = "category_list" style="width: 17rem;"><img id = "product_image" class="card-img-top" src="/images/0a09d8530691a1c23a4e4f4ec3eeff2a.jpg" alt="Card image cap" style="height:170px;">
<div class="card-body" >
<h5 class="card-title" id = "product_name" >{{subcategory.name}}</h5>
</div>
</div>
</a>
</li>
</ul>
<div class="tab-content">
<div v-for="(subcategory, subindex) in subcategories" role="tabpanel" :class="{'tab-pane': subindex === 0, 'active': subindex === 0}" #else class="tab-pane" :id="'tab-'+subcategory.id">
<h2>{{ subcategory.name }}</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Alias enim obcaecati praesentium repellat. Est explicabo facilis fuga illum iusto, obcaecati saepe voluptates! Dolores eaque porro quaerat sunt totam ut, voluptas.</p>
</div>
</div>
</div>
</div>
</div>
</div>
Also, don't rely on id's in vue. Use refs or rely on vue binding.
There are several solutions to this, this is one:
In your html add a ref to your h5
<h5 class="card-title" id = "product_name" ref="product_name_{{$count" >{{$subcategory->name}}</h5>
You could add a parameter to the greet function that will receive the index that has been clicked
greet: function (pIndex) { //
// `this` inside methods point to the Vue instance
console.log(this.$refs['product_name_'pIndex].textContent) // Here
alert('Hello ' + this.name + '!')
}

Using Contact form 7 in foundation reveal modal

So I'm having a little problem with using contact form 7 in a foundation reveal modal and was wondering if someone can help me a little with the following.
On a project I'm working on I have a product overview with lots of products. On every product there's a link that opens a contact form in a modal (reveal from foundation). In this modal I'm loading the contact form with get_template_part. This is working nicely but when I click on "send" the modal closes without sending the form and without a feedback message.
I would like to keep the modal open and include the "thank you" message or error message in this modal. I read something about using ajax but I'm not sure how to load the template part with ajax and not sure if thats the way to go.
I hope someone can help me in the right direction with this.
I added some code to make this a little bit more clear.
<div class="<?php echo $termsString; ?> item columns small-12 medium-6 large-3">
<div class="product-item">
<img class="assort-img" src="<?php the_post_thumbnail_url('td-product'); ?>" class="" alt="">
<div class="item-content">
<h5 class="item-title"><?php the_title(); ?></h5>
<div class="origin">
<span class="muted">Origin:</span> <br>
<span><?php the_field('origin'); ?></span>
</div>
<div class="availability">
<span class="muted">Availability:</span> <br>
<span><?php get_template_part('template-parts/content','availability'); ?></span>
</div>
Product Details
<hr>
<div class="more-info text-center">
<span class="hide">More info</span>
</div>
</div>
</div>
</div>
<div class="reveal full" id="itemContactModal-<?php the_ID(); ?>" data-reveal>
<?php get_template_part('template-parts/content','itemcontact'); ?>
</div>
And in content-item-contact i have the following:
<div class="contactdetails">
<div class="row">
<div class="small-12 columns">
<div class="row collapse">
<div class="column small-12 medium-4 large-3 white">
<div class="product-item">
<button class="close-button show-for-small-only" data-close aria-label="Close modal" type="button">
<span aria-hidden="true">×</span>
</button>
<img class="assort-img" src="<?php the_post_thumbnail_url('td-product'); ?>" class="" alt="">
<div class="item-content">
<h5 class="item-title"><?php the_title(); ?></h5>
<div class="origin">
<span class="muted">Origin:</span> <br>
<span><?php the_field('origin'); ?></span>
</div>
<div class="despription">
<p>Here you find productdetails and availability. Please contact us for more specific information.</p>
</div>
Product Details
</div>
</div>
</div>
<div class="column small-12 medium-8 large-9">
<div class="contact-wrapper">
<header >
<h4 class="contrast">Request more information</h4>
<button class="close-button show-for-medium" data-close aria-label="Close modal" type="button">
<span aria-hidden="true">×</span>
</button>
</header>
<div class="contact-content clearfix">
<div class="">
<div class="column small-12">
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. +31 (0) 76 522 1155</p>
</div>
<div class="column small-12">
<form>
<?php echo do_shortcode('[contact-form-7 id="138" title="Product Info"]'); ?>
</form>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>

Resources