changed the way products show

This commit is contained in:
Adrian Hinz 2021-05-24 16:00:12 +02:00
parent 30b770b655
commit c1f716ea77
4 changed files with 108 additions and 5 deletions

View File

@ -12,7 +12,11 @@ class ProductController < ShopController
def show
@product = Product.where('slug = ?', params[:id]).first
raise_404(@product)
render layout: false
respond_to do |format|
format.html
format.js
end
end
private

View File

@ -9,20 +9,20 @@
<div class="header">
<figure style="min-height:338px; background-color: white;">
<% if !product.images.blank? %>
<%= link_to(image_tag(product.cover_image.image.url(:large), style: 'margin: auto;vertical-align: middle;display: inline-block;'), {controller: :product, action: :show, id: product.slug}, 'data-toggle': 'modal', 'data-target': ".productQuickView",
<%= link_to(image_tag(product.cover_image.image.url(:large), style: 'margin: auto;vertical-align: middle;display: inline-block;'), {controller: :product, action: :show, id: product.slug}, remote: true, 'data-toggle': 'modal', 'data-target': ".productQuickView",
style: 'line-height: 338px;') %>
<% else %>
<%= link_to(image_tag('kaktus.png'), {controller: :product, action: :show, id: product.slug}, 'data-toggle': 'modal', 'data-target': ".productQuickView") %>
<%= link_to(image_tag('kaktus.png'), {controller: :product, action: :show, id: product.slug}, remote: true, 'data-toggle': 'modal', 'data-target': ".productQuickView") %>
<% end %>
</figure>
<div class="icons">
<%= raw link_to(raw('<i class="fa fa-search"></i>'), {controller: :product, action: :show, id: product.slug}, class: 'icon', 'data-toggle': 'modal', 'data-target': ".productQuickView") %>
<%= raw link_to(raw('<i class="fa fa-search"></i>'), {controller: :product, action: :show, id: product.slug}, remote: true, class: 'icon', 'data-toggle': 'modal', 'data-target': ".productQuickView") %>
<a class="icon" href="" onclick="addToCart(event,'<%= product.slug %>');">
<i class="fa fa-cart-plus mr-5"></i>Dodaj do koszyka</a>
</div>
</div>
<div class="caption">
<h6 class="regular"><%= link_to(product.name, {controller: :product, action: :show, id: product.slug}, 'data-toggle': 'modal', 'data-target': ".productQuickView") %></h6>
<h6 class="regular"><%= link_to(product.name, {controller: :product, action: :show, id: product.slug}, remote: true, 'data-toggle': 'modal', 'data-target': ".productQuickView") %></h6>
<div class="price">
<span class="amount text-primary">PLN
<%= '%.2f' % product.price %></span>

View File

@ -0,0 +1,97 @@
<div class="modal-dialog modal-lg" role="document">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
<h5><%= @product.name %></h5>
</div>
<!-- end modal-header -->
<div class="modal-body">
<div class="row">
<div class="col-sm-5">
<div class="carousel slide product-slider" data-ride="carousel" data-interval="false">
<div class="carousel-inner">
<% if @product.images.blank? %>
<div class="item active">
<figure>
<%= image_tag 'kaktus.png' %>
</figure>
</div>
<% else %>
<% test = 0 %>
<% @product.images.order('position').each do |image| %>
<div class="item<%= test == 0 ? ' active' : '' %>">
<figure>
<%= image_tag image.image.url(:thickbox) %>
</figure>
</div>
<% test = 1 %><% end %>
<% end %>
<!-- Arrows -->
<a class="left carousel-control" href=".product-slider" data-slide="prev">
<span class="fa fa-angle-left"></span>
</a>
<a class="right carousel-control" href=".product-slider" data-slide="next">
<span class="fa fa-angle-right"></span>
</a>
</div>
<!-- end carousel-inner -->
<!-- thumbs -->
<ol class="carousel-indicators mCustomScrollbar meartlab">
<% if @product.images.blank? %>
<li data-target=".product-slider" data-slide-to="0" class="active"><%= image_tag 'kaktus.png' %></li>
<% else %>
<% test = 0 %>
<% @product.images.order('position').each do |image| %>
<li data-target=".product-slider" data-slide-to="<%= test %>" <%= raw test == 0 ? ' class="active"' : '' %>><%= image_tag image.image.url(:medium) %></li>
<% test += 1 %><% end %>
<% end %>
</ol>
<!-- end carousel-indicators -->
</div>
<!-- end carousel -->
</div>
<!-- end col -->
<div class="col-sm-7">
<p class="text-gray alt-font">
<strong>Kategoria:</strong>
<%= @product.default_category.name %></p>
<h4 class="text-primary">PLN
<%= '%.2f' % @product.price %></h4>
<p><%= raw @product.description %></p>
<hr class="spacer-10">
<div class="row">
<div class="col-md-2 col-sm-4">
Ilość:
</div>
<div class="col-md-4 col-sm-8">
<select class="form-control" name="select" id="product_qty">
<% for i in 1..@product.max_qty %>
<option value="<%= i %>"><%= i %></option>
<% end %>
</select>
</div>
<!-- end col -->
</div>
<!-- end row -->
<hr class="spacer-10">
<ul class="list list-inline">
<li>
<button type="button" class="btn btn-default btn-md round" onclick="addToCart(event, '<%= @product.slug %>', '#product_qty');">
<i class="fa fa-shopping-basket mr-5"></i>Dodaj do koszyka</button>
</li>
</ul>
</div>
<!-- end col -->
</div>
<!-- end row -->
</div>
<!-- end modal-body -->
</div>
<!-- end modal-content -->
</div>
<!-- end modal-dialog -->

View File

@ -0,0 +1,2 @@
$('.productQuickView').html("<%= j render '/product/partials/show' %>");
$('.productQuickView').modal('show');