I am doing a small project with vue.js and laravel. I have a list of products, when I click on a specific product on "Quick view" button I want to show all data about that product in a modal but the data is not showing in the modal.
Can you help me please. Here is my code:
#extends('app')
#section('content')
<div id ="crud" class="row">
<div class="col-xs-12">
<h1 class="page-header">Lista de Articulo</h1>
</div>
<div class="wrap-icon right-section col-md-12" data-toggle="modal" data-target="#list" >
<div class="wrap-icon-section wishlist">
<a href="#" class="link-direction">
<i class="fa fa-heart" aria-hidden="true"></i>
<div class="left-info">
<span class="index">0 item</span>
<br>
<span class="title">Wishlist</span>
</div>
</a>
</div>
</div>
<div class="row">
<div v-for="keep in keeps" class="col-md-4" style="width:25%;" #mouseover="showByIndex = keep" #mouseout="showByIndex = null">
<div class="container">
<img :src="keep.foto" style="width:100%; max-width:150px;">
<button class="btn" v-show="showByIndex === keep" v-on:click.prevent="showKeep(keep)">Quick view</button>
</div>
<h3>
<b> #{{keep.nombre}}</b>
</h3>
<p> #{{keep.descripcion}}</p>
I fixed it. The error was because I called the modal file outside the div. Thanks to everybody.
you can't send data directly from vue in blade structure, you need to write a component for that.
https://v3.vuejs.org/examples/modal.html#modal-component
Related
<div class="col-6 col-md-4 col-lg-3 mb-4 mb-sm-5">
<div class="col-12 h-100 c-bg-offwhite p-0">
<div class="row">
<div class="col-12 text-center">
<img class="w-100" src="{{ url('/storage/photo_images/'.$image) }}" alt="">
</div>
<div class="col-12 text-left">
<p class="p color-black d-block px-4 pt-4 pb-3 mt-0 mb-0">{{$photo->title}}</h3>
</div>
#guest
<div class="col-12">
<div class="px-4 pb-4">
<a href="/contact">
<button class="w-100 btn-primary">Get a quote</button>
</a>
</div>
</div>
#endguest
</div>
</div>
#auth
<div class="col-12 p-0 mt-3">
<a href="/photos/{{$photo->slug}}/edit">
<button class="w-100 btn-primary">Edit</button>
</a>
</div>
#endauth
</div>
The code is a photo, with a title and a button for customers to click to contact the company. When an end-user is logged in it turns into an edit button, but sits underneath so not to confuse it with the customer facing button. It should be a case of one button on, one button off.
auth
guest
I'm so sorry for not really understanding your question.
But based on you question and the screenshot you provides it's already do what it shoud do.
#guest will be showing a button with 'Get A Quote' written on it and links to /contact
and #auth will be showing edit button when a user is logged in.
I am trying to create an application with laravel and I am having some difficulty in understanding how to dynamically load content into a division according to the button clicked from the product icon.
This is the category page
<div class="row justify-content-center">
#foreach($ProductData as $Product)
<div class="col-6 col-md-4 col-lg-4 col-xl-3">
<div class="product product-7 text-center" title="{{$Product->product_name}}">
<figure class="product-media">
<span class="product-label label-new">New</span>
<a href="product.html">
<img src="{{ asset('images/product/thumbnail/'.$Product->photo) }}" alt="{{$Product->photo}}" class="product-image">
</a>
<div class="product-action-vertical">
<span>add to wishlist</span>
<span>Quick view</span>
<span>Compare</span>
</div><!-- End .product-action-vertical -->
<div class="product-action">
<span>add to cart</span>
</div><!-- End .product-action -->
</figure><!-- End .product-media -->
<div class="product-body">
<div class="product-cat">
Women
</div><!-- End .product-cat -->
<h3 class="product-title">{{$Product->product_name}}</h3><!-- End .product-title -->
<div class="product-price">
$ {{$Product->price}}
</div><!-- End .product-price -->
<div class="ratings-container">
<div class="ratings">
<div class="ratings-val" style="width: 20%;"></div><!-- End .ratings-val -->
</div><!-- End .ratings -->
<span class="ratings-text">(2)</span>
</div><!-- End .rating-container -->
<div class="product-nav product-nav-thumbs">
<a href="#" class="active">
<img src="{{ asset('assets/molla/assets/images/products/product-4-thumb.jpg') }}" alt="product desc">
</a>
<a href="#">
<img src="{{ asset('assets/molla/assets/images/products/product-4-2-thumb.jpg') }}" alt="product desc">
</a>
<a href="#">
<img src="{{ asset('assets/molla/assets/images/products/product-4-3-thumb.jpg') }}" alt="product desc">
</a>
</div><!-- End .product-nav -->
</div><!-- End .product-body -->
</div><!-- End .product -->
</div><!-- End .col-sm-6 col-lg-4 col-xl-3 -->
#endforeach
</div>
**and mypopup/quickView.html, where I want to load data dynamically is bellow: **
<div class="container quickView-container">
<div class="quickView-content">
<div class="row">
<div class="col-lg-7 col-md-6">
<div class="row">
<div class="product-left">
<a href="#one" class="carousel-dot active">
<img src="assets/molla/assets/images/popup/quickView/1.jpg">
</a>
<a href="#two" class="carousel-dot">
<img src="assets/molla/assets/images/popup/quickView/2.jpg">
</a>
<a href="#three" class="carousel-dot">
<img src="assets/molla/assets/images/popup/quickView/3.jpg">
</a>
<a href="#four" class="carousel-dot">
<img src="assets/molla/assets/images/popup/quickView/4.jpg">
</a>
</div>
</div>
</div>
</div>
</div>
</div>
There are two ways you can dynamically load the modal/popup
Store the product details in data-* attribute of quick view button/anchor tag. Have a skeleton Quick View modal. On click of 'Quick View', trigger a javascript function to populate the skeleton modal with the product data fetched from data attributes.
Making AJAX call when user click on 'Quick View' button and populate the skeleton modal with the response data
Going by Approach #1 can you save you multiple network calls to the server as all the product related data (required to be shown in Quick View) is stored as data attributes
Updated
Example for Approach #1
<a class="btn btn-primary btnQuickView" data-product-name="Product Name" data-product-img="http://shop.com/product/image.jpg" data-product-price="200.00">Quick View</a>
Modal code
<!-- Quick View Modal -->
<div id="quickViewModal" class="modal fade" role="dialog">
<div class="modal-dialog">
<!-- Modal content-->
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">×</button>
<h4 class="modal-title">Modal Title</h4>
</div>
<div class="modal-body">
<h1 id="modal-product-name"></h1>
<img id="modal-product-image" src="">
<p id="modal-product-price"></p>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
<!-- Load jQuery library -->
<script type="text/javascript">
$(function(){
$('body').on('click','.btnQuickView', function(e){
e.preventDefault();
var data = $(this).data();
$('#quickViewModal #modal-product-name').html(data.productName);
$('#quickViewModal #modal-product-name').attr('src', data.productImage);
$('#quickViewModal #modal-product-name').html(data.productPrice);
$('#quickViewModal').modal();
});
});
</script>
The dropdown is not showing, I won’t mind any assistance on what I’m doing wrong.
<div class=“boxOptions”>
<div data-toggle=“dropdown” arial-haspopup=“true” arial-expanded=“false”>
<i class=“fas fa-ellipsis-v”></i>
</div>
<div class=“dropdown-menu”>
<a class=“dropdown-item” href=“#”>Activate</a>
<a class=“dropdown-item” href=“#”>Delete</a>
</div>
</div>
Make it like this.
<div class="boxOptions dropdown">
<div data-toggle="dropdown">
<i class='fas fa-ellipsis-v'></i>
</div>
<div class='dropdown-menu'>
<a class='dropdown-item' href='#'>Activate</a>
<a class='dropdown-item' href='#'>Delete</a>
</div>
</div>
Try this one
I am passing a route and trying to show on view page, but it's giving me route not found error, please check my code and let me know where i am mistaking.
here is my route.php file..
Route::get('amenities-view', 'PropertyController#amenitiesview');
Here are my controller.php file..
public function amenitiesview()
{
$amenities=Amenity::all();
return view('admin.amenities.amenity', compact($amenities));
}
here are my leftsidebar.blade.php file (Where i am clicking and going to amenity.blade.php file)
<li>
<a href="{{route('amenities.amenity')}}">
Amenities List
</a>
</li>
and here is my amenity.blade.php file..
#extends('layouts.adminPanel')
#section('body')
<body class="page-ecommerce-product">
#endsection
#section('admin-content')
<div class="row">
<div class="col-sm-12">
<div class="alert alert-danger" role="alert" style="display: none;">
<ul id="blogErrors">
</ul>
</div>
</div>
<div class="col-sm-12 col-md-6">
<div class="panel panel-default">
<div class="panel-heading">
<div class="panel-action">
<button class="btn btn-close"></button>
<button class="btn btn-min"></button>
<button class="btn btn-expand"></button>
</div>
<div class="panel-title">Add Amenities</div>
<p>Code Here</p>
</div><!-- /.panel-heading -->
</div><!--/.panel-->
</div>
</div><!-- /.row -->
</div>
#endsection
You are using a route without naming it. use like below
Route::get('amenities-view', 'PropertyController#amenitiesview')->name('amenities.amenity');
Laravel Documentation about named routing.
I am trying to image and its relevant data in bootstrap. For that I am writing code like below
<div class="col-xs-12 col-sm-3 col-sm-push-9">
<p style="padding:20px;"></p>
<h3 align=center>Our Lipsmacking Culinary Creations</h3>
</div>
<div class="col-xs-12 col-sm-9 col-sm-pull-3">
<div class="media">
<div class="media-left media-middle">
<a href="#">
<img class="media-object img-thumbnail" src="img/uthappizza.png" alt="Uthappiza">
</a>
<div class="media-body">
<h2 class="media-heading">Uthappizza</h2>
<p>A unique combination of Indian Uthappam (pancake) and
Italian pizza, topped with Cerignola olives, ripe vine
cherry tomatoes, Vidalia onion, Guntur chillies and
Buffalo Paneer.</p>
<p><a class="btn btn-primary btn-xs" href="#">More »</a></p>
</div>
</div>
</div>
</div>
I am getting output like this:
enter image description here
I want it to be side by side I don't know where I am going wrong.
Add pull-left to your image as a class. Bootply.