Skip to content

dhp-venshop
dhp-venshop
Commit 30bbcb60 by Hoang Phuc Do
Options

Refactor code - Fix pull request #1

parent 0f75f6bb
Showing with 685 additions and 404 deletions
app/assets/stylesheets/main_style.css
@charset "UTF-8";
/* ----------- 1.General --------------
--------------------------------------*/
/******************************************
1. Common styles
******************************************/
body {
position: relative;
color: #717179;
font: 400 13px/2.15 "Poppins", sans-serif;
background-color: #f4f4f4;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
overflow-x: hidden;
background: #f7f7f7;
color: #333333;
font-family: 'Poppins', Arial, Helvetica, sans-serif;
font-size: 12px;
font-weight: 400;
line-height: 15px;
text-align: left;
letter-spacing: 0.8px;
}
#wrapper {
width: 100%;
background-color: #ffffff;
* {
margin: 0;
padding: 0
}
@media (min-width: 1280px) {
.container {
width: 1200px;
}
img {
border: 0;
max-width: 100%
}
::-moz-selection {
color: #fff;
background-color: #262634;
a {
color: #333333;
text-decoration: none;
transition: 0.5s all ease
}
::selection {
color: #fff;
background-color: #262634;
a:hover {
text-decoration: none;
color: #ffd401
}
iframe {
border: none;
a:focus {
outline: 0;
text-decoration: none;
color: #666
}
:focus {
outline: none;
}
pre {
border: none;
border-radius: 0;
padding: 16px;
background-color: #fff;
h1, h2, h3, h4, h5, h6 {
margin: 0 0 5px;
line-height: 1.35;
color: #333333
}
ul,
ol {
list-style: none;
h1 {
font-weight: normal
}
h2 {
font-weight: normal;
margin-bottom: 15px
}
h3 {
font-weight: 500
}
h4 {
font-weight: 500
}
h5 {
font-weight: 500
}
h6 {
font-weight: 500
}
form {
display: inline
}
fieldset {
border: 0
}
legend {
display: none
}
table {
border: 0;
border-spacing: 0;
empty-cells: show;
font-size: 100%; background-color:#fff;
}
caption, th, td {
vertical-align: top;
text-align: left;
font-weight: normal;background-color:#fff;
}
thead tr th {
font-weight: bold;
text-transform: uppercase;
font-size: 12px
}
p {
margin: 0 0 10px
}
strong {
font-weight: 600
}
address {
font-style: normal;
line-height: 1.35
}
cite {
font-style: normal
}
q, blockquote {
quotes: none
}
q:before, q:after {
content: ''
}
small, big {
font-size: 1em
}
ul, ol {
padding: 0;
margin: 0;
margin: 0 0 10px 25px
}
a:focus, a:active,
select:focus,
select:active,
input:focus,
input:active,
textarea:focus,
textarea:active,
button:focus,
button:active {
outline: none;
ul ul, ul ol, ol ol, ol ul {
margin-bottom: 0
}
hr {
margin: 25px 0;
border: none;
width: 100%;
height: 1px;
background-color: #e9e9ea;
ul.unstyled, ol.unstyled {
margin-left: 0;
list-style: none
}
/* ----------- 2.Typography -----------
--------------------------------------*/
/* Typography */
h1, .h1,
h2, .h2,
h3, .h3,
h4, .h4,
h5, .h5,
h6, .h6 {
font-weight: 400;
font-family: "Oswald", sans-serif, Arial, sans-serif;
line-height: 1.1;
color: #262634;
margin-top: 0;
margin-bottom: 20px;
letter-spacing: 0.075em;
ul.inline, ol.inline {
margin-left: 0;
list-style: none
}
h1 small, .h1 small,
h2 small, .h2 small,
h3 small, .h3 small,
h4 small, .h4 small,
h5 small, .h5 small,
h6 small, .h6 small {
color: inherit;
ul.inline>li, ol.inline>li {
display: inline-block;
*display:inline;
padding-right: 5px;
padding-left: 5px;
*zoom:1
}
h1, .h1 {
font-size: 26px;
ul ul, ol ul {
list-style-type: circle
}
h2, .h2 {
font-size: 20px;
.hidden {
display: block !important;
border: 0 !important;
margin: 0 !important;
padding: 0 !important;
font-size: 0 !important;
line-height: 0 !important;
width: 0 !important;
height: 0 !important;
overflow: hidden !important
}
h3, .h3 {
font-size: 18px;
.nobr {
white-space: nowrap !important
}
h4, .h4 {
font-size: 16px;
.wrap {
white-space: normal !important
}
h5, .h5 {
font-size: 14px;
.a-left {
text-align: left !important
}
h6, .h6 {
font-size: 12px;
.a-center {
text-align: center !important
}
.a-right {
text-align: right !important
}
.v-top {
vertical-align: top
}
.v-middle {
vertical-align: middle
}
.f-left, .left {
float: left !important
}
.f-right, .right {
float: right !important
}
.f-none {
float: none !important
}
.f-fix {
float: left;
width: 100%
}
.no-display {
display: none
}
.no-margin {
margin: 0 !important
}
.no-padding {
padding: 0 !important
}
.no-bg {
background: none !important
}
small {
font-size: 85%;
font-weight: normal;
text-transform: lowercase;
color: #999999
}
input:focus {
outline: none
}
a {
.page-title h1, .page-title h2 {
color: #333333;
font-size: 22px;
font-weight: 600;
text-transform: uppercase;
margin-top: 0px;
line-height: normal;
margin-bottom: 5px;
letter-spacing: 0.5px;
}
@media (max-width:767px) {
.page-title h1, .page-title h2 {
font-size: 26px
}
}
/******************************************
9. product hover
******************************************/
.product-item {
list-style: none;
}
.product-item .product-thumb {
position: relative;
color: #262634;
transition: color 0.4s;
}
a:hover, a:focus {
color: #dc9831;
text-decoration: none;
.product-item .pr-info-area {
position: absolute;
bottom: 15px;
text-align: center;
width: 100%;
}
p {
margin-bottom: 20px;
.product-item .pr-info-area a {
margin: 0 8px;
}
blockquote {
.product-item .has-hover-img .hover-img {
position: absolute;
right: 0;
left: 0;
top: 0;
width: 100%;
transition: opacity 0.5s ease-in-out 0s;
-moz-transition: opacity 0.5s ease-in-out 0s;
-webkit-transition: opacity 0.5s ease-in-out 0s;
backface-visibility: hidden;
-moz-backface-visibility: hidden;
-webkit-backface-visibility: hidden;
opacity: 0;
}
.product-item .has-hover-img:hover .hover-img {
opacity: 1;
}
.product-item .wishlist, .product-item .compare, .product-item .quick-view {
position: relative;
padding: 5px 0 5px 35px;
margin: 20px 0;
font-size: 16px;
border-left: 2px solid transparent;
text-align: center;
line-height: 35px;
margin-bottom: 10px;
background-color: #fff;
-webkit-box-shadow: 0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.24);
box-shadow: 0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.24);
opacity: 0;
filter: alpha(opacity=0);
color: #222;
display: inline-block;
transform: rotate(-45deg);
-webkit-transform: rotate(-45deg);
width: 35px;
height: 35px;
margin: 0 5px;
}
.product-item:hover .wishlist, .product-item:hover .compare, .product-item:hover .quick-view {
opacity: 1;
transform: rotate(-45deg);
-webkit-transform: rotate(-45deg);
}
.product-item .wishlist i, .product-item .compare i, .product-item .quick-view i {
transform: rotate(45deg);
-webkit-transform: rotate(45deg);
}
.product-item .wishlist i span, .product-item .compare i span, .product-item .quick-view i span {
display: none;
}
.product-item .wishlist:hover, .product-item .compare:hover, .product-item .quick-view:hover {
color: #fff;
background-color: #ffd401;
}
blockquote p {
margin-bottom: 12px;
.product-item .item-inner:hover:hover .animate1 {
-webkit-animation-name: flip;
animation-name: flip;
}
blockquote cite {
font-size: 16px;
font-weight: 400;
.product-item .item-inner:hover:hover .animate2 {
-webkit-animation-name: bounce;
animation-name: bounce;
}
/* ----------- 3.Elements -------------
--------------------------------------*/
/* Pagination & Pager */
.pagination {
margin: 0 0 50px;
.product-item .item-inner:hover:hover .animate3 {
-webkit-animation-name: rubberBand;
animation-name: rubberBand;
}
@media (min-width: 768px) {
.pagination {
margin-bottom: 60px;
}
.product-item .item-inner:hover:hover .animate4 {
-webkit-animation-name: lightSpeedIn;
animation-name: lightSpeedIn;
}
.pagination > li > a,
.pagination > li > span {
border: 1px solid transparent;
border-radius: 50% !important;
transition: all .3s;
padding: 0px 3px;
margin: 0 6px 0 0;
min-width: 36px;
height: 36px;
line-height: 36px;
color: #717179;
font-weight: 500;
font-size: 16px;
.product-item .item-inner:hover .animate5 {
-webkit-animation-name: rotateIn;
animation-name: rotateIn;
}
.product-item .item-inner:hover .animate6 {
-webkit-animation-name: zoomInUp;
animation-name: zoomInUp;
}
.add-to-cart-mt {
background: #f8f8f8;
border: 0 none;
bottom: 0;
text-align: center;
text-transform: uppercase;
background: transparent;
transition: all .5s ease-out 0s;
padding: 0px 15px 0px 0px;
color: #333333;
border: 1px #eee solid;
}
.add-to-cart-mt i {
position: relative;
text-align: center;
line-height: 35px;
background-color: #ffd401;
filter: alpha(opacity=0);
color: #fff;
display: inline-block;
width: 35px;
height: 35px;
}
@media (min-width: 768px) {
.pagination > li > a,
.pagination > li > span {
margin-right: 12px;
.add-to-cart-mt:hover {
background: #333333;
color: #fff;
}
.add-to-cart-mt span {
margin-left: 10px
}
.pr-button .mt-button {
width: 33.3%;
float: left;
text-align: center;
border-right: 1px solid
}
.product-item .item-inner .item-info {
text-align: center;
padding-top: 12px;
}
.product-item .item-inner .item-info .pro-action {
margin-top: 10px;
}
.product-item .item-inner .item-info .item-title {
font-size: 12px;
margin-bottom: 6px;
font-weight: 400;
}
@media (max-width:479px) {
.product-item .item-inner .item-info .item-title {
font-size: 12px;
padding: 0px 10px
}
}
.pagination > li > a i,
.pagination > li > span i {
line-height: inherit;
.product-item .item-inner .item-info .item-title a {
display: inherit;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
padding: 0 10px;
font-size: 12px;
font-weight: 500;
text-transform: none;
}
.pagination > li > a:hover, .pagination > li > a:focus,
.pagination > li > span:hover,
.pagination > li > span:focus {
color: #dc9831;
background-color: transparent;
border-color: transparent;
.product-item .item-inner {
position: relative;
overflow: hidden; background-color:#fff; padding-bottom:20px;
}
.pagination > li:first-child:not(.active) > a,
.pagination > li:first-child:not(.active) > span {
min-width: 0;
padding-left: 0;
.product-item {
margin: 0 12px
}
.pagination > li.dots > span {
min-width: 0;
padding: 0;
.product-item .item-inner .item-info .item-title a:hover {
color: #ffd401;
}
.pagination > .active > a,
.pagination > .active > span {
color: #262634;
border-color: #dc9831;
@media (max-width:479px) {
.home-tab .product-item {
margin: 0 8px
}
}
.pagination > .active > a, .pagination > .active > a:focus, .pagination > .active > a:hover,
.pagination > .active > span,
.pagination > .active > span:focus,
.pagination > .active > span:hover {
background-color: transparent;
color: #262634;
border-color: #dc9831;
#best-sale-slider.product-flexslider {
margin: 20px -12px
}
/* ----------- 7.Category --------------
--------------------------------------*/
.category-header {
padding: 25px 0 15px;
.best-sale-pro .slider-items-products .owl-buttons .owl-prev {
top: 15%
}
.category-header h1 {
font-size: 18px;
text-transform: uppercase;
margin-bottom: 8px;
.best-sale-pro .slider-items-products .owl-buttons .owl-next {
top: 15%
}
.shop-container {
transition: all 0.45s;
margin-bottom: 10px;
/******************************************
21. Toolbar
******************************************/
.pagination-area {
background: rgba(0,0,0,0) none repeat scroll 0 0;
border-top: 1px solid #eee;
margin: 10px 0 0;
padding-top: 20px;
text-align: center;
display: inline-block;
width: 100%
}
.pagination-area ul {
margin-bottom: 0px
}
.pagination-area ul li {
background: #f5f5f5;
color: #393939;
display: inline-block;
font-weight: 600;
line-height: 30px;
margin: 0 0 0 5px;
border-radius: 4px
}
.pagination-area ul li a {
border: 1px solid #e0e0e0;
color: #363636;
display: block;
font-weight: 600;
text-decoration: none;
border-radius: 4px;
transition: all .4s ease-out .2s
}
@media (min-width: 768px) {
.shop-container {
.pagination-area ul li a:hover {
background: #333333;
border: 1px solid #333333;
color: #fff;
}
.pagination-area ul li a.active {
background: #ffd401;
border: 1px solid #ffd401;
border-radius: 4px;
color: #fff;
transition: all .4s ease-out .2s
}
/******************************************
26. products grid
******************************************/
.shop-inner {
padding: 20px 0;
margin-bottom: 30px;
}
}
.shop-container:after {
content: '';
display: table;
clear: both;
.products-grid {
margin: 0;
list-style: none
}
.shop-container .product-item {
float: left;
ul.products-grid {
padding: 0;
margin: 0
}
.products-grid .item {
margin-top: 30px;
padding: 0px
}
.products-grid .product-item img {
width: 100%;
}
.shop-row {
margin-left: -15px;
margin-right: -15px;
@media (max-width:479px) {
.product-grid-area .products-grid .item {
width: 80%;
float: none;
margin: 15px auto 15px
}
}
.shop-row > .shop-container > .product-item {
padding: 0 15px;
.col-main .product-grid-area .products-grid {
margin-left: -12px;
margin-right: -12px
}
.shop-row:after {
content: '';
display: table;
clear: both;
/******************************************
27. products list
******************************************/
.products-list h2 {
font-size: 16px;
font-weight: bold;
text-align: left;
line-height: normal;
margin-bottom: 8px;
}
@media (min-width: 481px) {
.max-col-3 .product-item {
width: 50%;
}
ul.products-list {
margin: auto;
}
@media (min-width: 992px) {
.max-col-3 .product-item {
width: 33.3%;
}
.products-list button.cart-button {
color: #fff;
}
/* Product */
.product {
margin-bottom: 20px;
.products-list .item {
padding: 18px;
overflow: hidden;
margin: 15px 0 30px !important;
list-style: none; background-color:#fff;
}
.products-list .rating {
display: inline-block;
margin-right: 6px
}
.product-item .rating .fa.fa-star,
.jtv-category-area .jtv-product-content .fa.fa-star,
.products-list .rating .fa.fa-star,
.product-view-area .product-details-area .ratings .fa.fa-star { color:#ffd401;}
.product-item .rating .fa.fa-star-o,
.product-item .rating .fa.fa-star-half,
.jtv-category-area .jtv-product-content .fa.fa-star-o,
.jtv-category-area .jtv-product-content .fa.fa-star-half,
.products-list .rating .fa.fa-star-o,
.product-view-area .product-details-area .ratings .fa.fa-star-o{ color:#ccc;}
.products-list .rating-links {
display: inline-block;
margin-bottom: 4px
}
.products-list .rating-links a {
font-size: 11px;
}
.products-list .item h3 {
font-weight: normal;
color: #353535;
padding-bottom: 2px
}
.products-list .item h3 a {
font-weight: normal;
font-size: 12px;
color: #407CBF;
text-decoration: none
}
.product .product-image-container {
margin-bottom: 23px;
.products-list .item h3 a:hover {
font-weight: normal;
font-size: 12px;
color: #333333;
text-decoration: underline
}
.products-list .product-img {
overflow: hidden;
position: relative;
background-color: #f0f0f0;
padding-left: 0;
width: 30%;
float: left;
}
.product .product-title {
font-weight: 500;
font-size: 14px;
font-family: "Poppins", sans-serif;
line-height: 1.7;
letter-spacing: 0.05em;
color: #717179;
margin-bottom: 1px;
.products-list .product-img img {
width: 100%
}
.product .product-title a {
color: #717179;
.products-list .product-shop {
width: 67%;
float: right;
}
.product .product-title a:hover, .product .product-title a:focus {
color: #262634;
.products-list .product-shop .desc {
font-size: 12px;
margin-bottom: 15px;
margin-top: 5px;
color: #666
}
.product r.poduct-price {
font-weight: 500;
.products-list .product-shop p {
font-size: 12px;
color: #666;
line-height: 1.5em
}
.products-list .product-shop p.old-price {
margin-right: 4px
}
.products-list .product-shop .price-box {
margin: 5px 0 10px;
border-top: 1px solid #eee;
padding-top: 12px;
}
.products-list .desc a.link-learn {
font-size: 12px;
font-weight: bold;
margin-top: 5px;
color: #ffd401
}
.products-list .product-shop button.button span {
padding: 1px 0 0 10px;
text-transform: uppercase
}
.products-list .product-shop .actions ul {
display: inline-block;
float: right;
margin-top: 8px
}
.products-list .product-shop .actions ul li {
margin-right: 20px;
display: inline-block
}
.products-list .product-shop .actions ul li a {
text-transform: uppercase;
font-size: 12px
}
.products-list .product-shop .actions ul li:last-child a {
border-left: 1px solid #e5e5e5;
padding-left: 21px
}
.products-list .product-shop .actions ul li:last-child {
margin-right: 0px
}
.products-list .product-shop .actions ul li span {
margin-left: 5px
}
/******************************************
28. price box
******************************************/
.price {
font-size: 12px;
color: #000;
white-space: nowrap !important;
}
.price-box {
margin: 8px 0 2px
}
.regular-price {
display: inline
}
.regular-price .price {
font-weight: bold;
font-size: 16px;
color: #000
}
.block .regular-price, .block .regular-price .price {
color: #333333
}
.price-box .price-from .price {
font-weight: 600;
font-size: 12px;
color: #333333
}
.price-box .price-to .price {
font-weight: 600;
font-size: 12px;
color: #333333
}
.price-box .minimal-price .price {
font-weight: 600;
font-size: 12px;
color: #333333
}
.old-price .price-label {
white-space: nowrap;
color: #999;
display: none
}
.old-price {
display: inline;
margin-right: 15px
}
.old-price .price-label {
color: #777777;
display: none;
white-space: nowrap
}
.old-price .price {
color: #777777!important;
font-size: 14px;
line-height: 1.7;
color: #262634;
font-weight: normal;
text-decoration: line-through;
margin-left: 6px
}
.product .product-image-container img {
display: block;
width: 100%;
height: auto;
.special-price {
margin: 0;
padding: 3px 0;
display: inline
}
.products-list li.product {
padding: 15px;
.special-price .price-label {
color: #666;
display: none;
font-size: 12px;
font-weight: 400;
white-space: nowrap
}
.products-list li.product:after {
content: '';
display: table;
clear: both;
.special-price .price {
font-size: 16px;
color: #000;
font-weight: bold
}
.products-list li.product .product-image-area {
width: 20%;
float: left;
.special-price .price-label {
font-size: 12px;
font-weight: 600;
white-space: nowrap;
color: #666;
display: none
}
.products-list li.product .product-image-area img {
width: 100%;
.minimal-price {
margin: 0
}
.products-list li.product .product-details-area {
width: 80%;
float: left;
padding: 0 20px;
margin-top: 10px;
.minimal-price .price-label {
white-space: nowrap
}
.products-list li.product .product-title {
margin-bottom: 0;
.minimal-price-link {
display: inline
}
/* ----------- 8.Product --------------
--------------------------------------*/
app/helpers/products_helper.rb
module ProductsHelper
def get_product_thumbnail(product, thumbnail_width, thumbnail_height)
if product.image_url.present?
product.image_url
else
product.image_url ||
"product/placeholder_#{thumbnail_width}x#{thumbnail_height}"
end
end
end
\ No newline at end of file
app/views/kaminari/_first_page.html.erb
<%# Link to the "First" page
- available local variables
url: url to the first page
current_page: a page object for the currently displayed page
total_pages: total number of pages
per_page: number of items to fetch per page
remote: data-remote
-%>
<li class="first">
<%= link_to_unless current_page.first?, t('views.pagination.first').html_safe, url, remote: remote %>
</li>
app/views/kaminari/_gap.html.erb
<%# Non-link tag that stands for skipped pages...
- available local variables
current_page: a page object for the currently displayed page
total_pages: total number of pages
per_page: number of items to fetch per page
remote: data-remote
-%>
<li class="dots">
<a href="#"><%= t('views.pagination.truncate').html_safe %></a>
</li>
app/views/kaminari/_last_page.html.erb
<%# Link to the "Last" page
- available local variables
url: url to the last page
current_page: a page object for the currently displayed page
total_pages: total number of pages
per_page: number of items to fetch per page
remote: data-remote
-%>
<li class="last">
<%= link_to_unless current_page.last?, t('views.pagination.last').html_safe, url, remote: remote %>
</li>
app/views/kaminari/_next_page.html.erb
<%# Link to the "Next" page
- available local variables
url: url to the next page
current_page: a page object for the currently displayed page
total_pages: total number of pages
per_page: number of items to fetch per page
remote: data-remote
-%>
<li class="next">
<%= link_to_unless current_page.last?, t('views.pagination.next').html_safe, url, rel: 'next', remote: remote %>
</li>
app/views/kaminari/_page.html.erb
<%# Link showing page number
- available local variables
page: a page object for "this" page
url: url to this page
current_page: a page object for the currently displayed page
total_pages: total number of pages
per_page: number of items to fetch per page
remote: data-remote
-%>
<li class="page<%= ' active' if page.current? %>">
<%= link_to page, url, opts = {:remote => remote, :class => 'page-link', :rel => page.next? ? 'next' : page.prev? ? 'prev' : nil} %>
<%= link_to page, url, opts = {:remote => remote, :class => page.current? ? 'active' : 'page-link', :rel => page.next? ? 'next' : page.prev? ? 'prev' : nil} %>
</li>
app/views/kaminari/_paginator.html.erb
<%# The container tag
- available local variables
current_page: a page object for the currently displayed page
total_pages: total number of pages
per_page: number of items to fetch per page
remote: data-remote
paginator: the paginator that renders the pagination tags inside
-%>
<%= paginator.render do -%>
<nav aria-label="Page Navigation">
<ul class="pagination">
......
app/views/kaminari/_prev_page.html.erb
<%# Link to the "Previous" page
- available local variables
url: url to the previous page
current_page: a page object for the currently displayed page
total_pages: total number of pages
per_page: number of items to fetch per page
remote: data-remote
-%>
<li class="prev">
<%= link_to_unless current_page.first?, t('views.pagination.previous').html_safe, url, rel: 'prev', remote: remote %>
</li>
app/views/layouts/application.html.erb
......@@ -9,14 +9,12 @@
</head>
<body>
<div id="wrapper">
<div class="main">
<div id="main-container col2-left-layout">
<div class="container">
<%= yield %>
</div>
<!-- End .container -->
</div>
<!-- End .main -->
</div>
<!-- End .main-container -->
</body>
</html>
app/views/products/_product.html.erb
<li class="product product-<%= product.id %>">
<div class="product-image-area">
<a href="#" class="product-image">
<%= image_tag(get_product_thumbnail(product, 170, 204)) %>
<li class="item">
<div class="product-img">
<a href="#">
<figure>
<%= image_tag(get_product_thumbnail(product, 170, 204), class: "small-image") %>
</figure>
</a>
</div>
<div class="product-details-area">
<h2 class="product-title"><%= product.title %></h2>
<div class="product-price-container">
<span class="product-price"><%= product.price %></span>
<div class="product-shop">
<h2 class="product-name"><%= product.title %></h2>
<div class="price-box">
<div class="special-price">
<span class="price"><%= number_to_currency(product.price) %></span>
</div>
</div>
<div class="desc std">
<%= simple_format(product.description) %>
</div>
<!-- End .product-price-container -->
<div class="product-short-desc"><%= product.description %></div>
</div>
</li>
\ No newline at end of file
<!-- End .product -->
\ No newline at end of file
app/views/products/_recommended.html.erb
<ul class="products-grid">
<% @recommended_products.each do |product| %>
<div class="product-item">
<div class="product product-<%= product.id %>">
<div class="product-image-container">
<a href="#" class="product-image">
<li class="item col-lg-4 col-md-4 col-sm-6 col-xs-6 ">
<div class="product-item">
<div class="item-inner">
<div class="product-thumb">
<figure>
<a href="#">
<%= image_tag(get_product_thumbnail(product, 170, 204)) %>
</a>
</figure>
</div>
<div class="product-details-area">
<h2 class="product-title"><%= product.title %></h2>
<div class="product-price-container">
<span class="product-price"><%= product.price %></span>
<div class="item-info">
<div class="info-inner">
<div class="item-title">
<%= link_to product.title, "#" %>
</div>
<!-- End .product-price-container -->
<div class="item-content">
<div class="item-price">
<div class="price-box">
<div class="regular-price">
<span class="price"><%= number_to_currency(product.price) %></span>
</div>
</div>
<!-- End .product -->
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</li>
<% end %>
</ul>
\ No newline at end of file
app/views/static_pages/index.html.erb
<div class="row">
<div class="col-md-9 col-md-push-3">
<div class="category-header">
<h2>Recommended Items</h2>
<div class="col-main col-sm-9 col-xs-12 col-sm-push-3">
<div class="shop-inner">
<div class="page-title">
<h1>Recommended Items</h1>
</div>
<div class="shop-row">
<div class="shop-container max-col-3">
<div class="product-grid-area">
<%= render 'products/recommended' %>
</div>
</div>
<div class="category-header">
<h2>Newest Items</h2>
<div class="page-title">
<h1>Newest Items</h1>
</div>
<div class="shop-row">
<div class="shop-container">
<ul class="products-list">
<div class="product-list-area">
<ul id="products-list" class="products-list">
<%= render @latest_products %>
</ul>
</div>
</div>
<div class="pagination-area">
<%= paginate @latest_products %>
</div>
<!-- End .col-md-9 -->
<div class="col-md-3 col-md-pull-9 sidebar">
<%= render 'shared/sidebar' %>
</div>
</div>
<aside class="sidebar col-sm-3 col-xs-12 col-sm-pull-9">
<%= render 'shared/sidebar' %>
</aside>
</div>
<!-- End .row -->
db/migrate/20170606060101_create_products.rb
......@@ -5,7 +5,7 @@ class CreateProducts < ActiveRecord::Migration[5.1]
t.text :description
t.text :sku
t.decimal :price, precision: 8, scale: 2
t.references :category, foreign_key: true
t.references :category, index: true
t.timestamps
end
end
......
db/seeds.rb
......@@ -6,6 +6,9 @@
# movies = Movie.create([{ name: 'Star Wars' }, { name: 'Lord of the Rings' }])
# Character.create(name: 'Luke', movie: movies.first)
# Delete all categories
Category.destroy_all
# Create Product Categories
4.times do |n|
title = "Category #{n}"
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment