Skip to content

Commit

Permalink
Merge pull request #19 from mayukoala/Lists-showing-selling-products-…
Browse files Browse the repository at this point in the history 
…on-top-page

Lists showing selling products on top page & category page
  • Loading branch information
@yumiki06
yumiki06 authored Sep 19, 2020
2 parents f694472 + 898d227 commit e880586
Show file tree
Hide file tree
Showing 36 changed files with 770 additions and 564 deletions.
1 change: 1 addition & 0 deletions Gemfile
View file
Original file line number Diff line number Diff line change
Expand Up @@ -87,6 +87,7 @@ gem 'jquery-rails'
gem 'rspec-rails'
gem 'factory_bot_rails'
gem 'payjp'
gem 'kaminari'
gem 'rails-controller-testing'
gem 'faker'
gem 'gimei'
13 changes: 13 additions & 0 deletions Gemfile.lock
View file
Original file line number Diff line number Diff line change
Expand Up @@ -159,6 +159,18 @@ GEM
rails-dom-testing (>= 1, < 3)
railties (>= 4.2.0)
thor (>= 0.14, < 2.0)
kaminari (1.2.0)
activesupport (>= 4.1.0)
kaminari-actionview (= 1.2.0)
kaminari-activerecord (= 1.2.0)
kaminari-core (= 1.2.0)
kaminari-actionview (1.2.0)
actionview
kaminari-core (= 1.2.0)
kaminari-activerecord (1.2.0)
activerecord
kaminari-core (= 1.2.0)
kaminari-core (1.2.0)
kgio (2.11.3)
listen (3.1.5)
rb-fsevent (~> 0.9, >= 0.9.4)
Expand Down Expand Up @@ -360,6 +372,7 @@ DEPENDENCIES
haml-rails
jbuilder (~> 2.5)
jquery-rails
kaminari
listen (>= 3.0.5, < 3.2)
mini_magick
mysql2 (>= 0.4.4, < 0.6.0)
Expand Down
163 changes: 83 additions & 80 deletions app/assets/javascripts/category.js
View file
Original file line number Diff line number Diff line change
@@ -1,87 +1,90 @@
$(function(){
// カテゴリーボックスのオプションを作成
function appendOption(category){
var html = `<option value="${category.id}">${category.name}</option>`;
return html;
}
// 子カテゴリーの表示作成
function appendChidrenBox(insertHTML){
var childHtml = '';
childHtml = `<div class="category__child" id="children_wrapper">
<select id="child__category" name="product[category_id]">
<option value="">---</option>
${insertHTML}
</select>
</div>`;
$('.append__category').append(childHtml);
}
document.addEventListener("turbolinks:load"
, function () {
$(function(){
// カテゴリーボックスのオプションを作成
function appendOption(category){
var html = `<option value="${category.id}">${category.name}</option>`;
return html;
}
// 子カテゴリーの表示作成
function appendChidrenBox(insertHTML){
var childHtml = '';
childHtml = `<div class="category__child" id="children_wrapper">
<select id="child__category" name="product[category_id]">
<option value="">---</option>
${insertHTML}
</select>
</div>`;
$('.append__category').append(childHtml);
}

// 孫カテゴリーの表示作成
function appendGrandchidrenBox(insertHTML){
var grandchildHtml = '';
grandchildHtml = `<div class="category__child" id="grandchildren_wrapper">
<select id="grandchild__category" name="product[category_id]">
<option value="">---</option>
${insertHTML}
</select>
</div>`;
$('.append__category').append(grandchildHtml);
}
// 孫カテゴリーの表示作成
function appendGrandchidrenBox(insertHTML){
var grandchildHtml = '';
grandchildHtml = `<div class="category__child" id="grandchildren_wrapper">
<select id="grandchild__category" name="product[category_id]">
<option value="">---</option>
${insertHTML}
</select>
</div>`;
$('.append__category').append(grandchildHtml);
}

// 親カテゴリー選択後のイベント
$('#parent__category').on('change', function(){
// 親ボックスのidを取得してAjax通信でコントローラーへ送る
var parent__category_id = document.getElementById('parent__category').value;
if (parent__category_id != ""){
$.ajax({
url: '/products/get_category_children',
type: 'GET',
data: { parent_id: parent__category_id },
dataType: 'json'
})
// 親が変更された時、子以下を削除する
.done(function(children){
// 親カテゴリー選択後のイベント
$('#parent__category').on('change', function(){
// 親ボックスのidを取得してAjax通信でコントローラーへ送る
var parent__category_id = document.getElementById('parent__category').value;
if (parent__category_id != ""){
$.ajax({
url: '/products/get_category_children',
type: 'GET',
data: { parent_id: parent__category_id },
dataType: 'json'
})
// 親が変更された時、子以下を削除する
.done(function(children){
$('#children_wrapper').remove();
$('#grandchildren_wrapper').remove();
var insertHTML = '';
children.forEach(function(child){
insertHTML += appendOption(child);
});
appendChidrenBox(insertHTML);
})
.fail(function(){
alert('カテゴリー取得に失敗しました');
})
}else{
// 親カテゴリーが初期値になった時、子以下を削除する
$('#children_wrapper').remove();
$('#grandchildren_wrapper').remove();
var insertHTML = '';
children.forEach(function(child){
insertHTML += appendOption(child);
});
appendChidrenBox(insertHTML);
})
.fail(function(){
alert('カテゴリー取得に失敗しました');
})
}else{
// 親カテゴリーが初期値になった時、子以下を削除する
$('#children_wrapper').remove();
$('#grandchildren_wrapper').remove();
}
});
}
});

// 子カテゴリー選択後のイベント
$('.append__category').on('change', '#child__category', function(){
var child__category_id = document.getElementById('child__category').value;
if (child__category_id != ""){
$.ajax({
url: '/products/get_category_grandchildren',
type: 'GET',
data: { child_id: child__category_id },
dataType: 'json'
})
.done(function(grandchildren){
// 子カテゴリー選択後のイベント
$('.append__category').on('change', '#child__category', function(){
var child__category_id = document.getElementById('child__category').value;
if (child__category_id != ""){
$.ajax({
url: '/products/get_category_grandchildren',
type: 'GET',
data: { child_id: child__category_id },
dataType: 'json'
})
.done(function(grandchildren){
$('#grandchildren_wrapper').remove();
var insertHTML = '';
grandchildren.forEach(function(grandchild){
insertHTML += appendOption(grandchild);
});
appendGrandchidrenBox(insertHTML);
})
.fail(function(){
alert('カテゴリー取得に失敗しました');
})
}else{
$('#grandchildren_wrapper').remove();
var insertHTML = '';
grandchildren.forEach(function(grandchild){
insertHTML += appendOption(grandchild);
});
appendGrandchidrenBox(insertHTML);
})
.fail(function(){
alert('カテゴリー取得に失敗しました');
})
}else{
$('#grandchildren_wrapper').remove();
}
}
});
});
});
})
3 changes: 0 additions & 3 deletions app/assets/javascripts/products.coffee
View file

This file was deleted.

24 changes: 14 additions & 10 deletions app/assets/stylesheets/application.scss
View file
Original file line number Diff line number Diff line change
@@ -1,20 +1,24 @@

@import "module/new_user";
@import "reset";
@import "products";
@import "module/login";
@import "items";
@import "orders";
@import "font-awesome-sprockets";
@import "font-awesome";

@import "products/index";
@import "products/new";
@import "products/show";
@import "products_header";
@import "products_footer";

@import "orders/show";
@import "categories/index";
@import "categories/show";

@import "module/new_user";
@import "module/login";
@import "module/flash";
@import "module/mypage";
@import "module/main";
@import "module/logout";
@import "module/new";
@import "module/create";
@import "module/destroy";
@import "module/show";
@import "modules/products-show";
@import "products_header";
@import "products_footer";
@import "module/show";
69 changes: 69 additions & 0 deletions app/assets/stylesheets/categories/_index.scss
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,69 @@
* {
box-sizing: border-box;
}

.wrapper{
.main__frame{
width: 800px;
background-color: white;
margin: 30px auto;
.main__categorybox{
width: 500px;
margin: 0 auto;
padding: 30px 0;
hr {
width: 400px;
height: 2px;
background-color: #f8f8f8;
border: 0;
}
h1{
font-size: 24px;
font-weight: 600;
}
&--title{
text-align: center;
margin-bottom: 30px;
}
ul.categories{
li.parents{
margin: 30px 0 0;
font-size: 20px;
font-weight: 600;
a:link{color: #3CCACE;}
a:visited{color: #3CCACE;}
a:hover{
text-decoration: underline;
}
a:active{color: #3CCACE;}
}
li.children{
margin: 10px 10px;
font-weight: 600;
font-size: 16px;
a:link{color: black;}
a:visited{color: black;}
a:hover{
text-decoration: underline;
color: #3CCACE;
}
a:active{color: black;}
}

ul.categories__grandchildren{
margin-bottom: 20px;
li.grandchildren{
margin: 5px 20px;
a:link{color: black;}
a:visited{color: black;}
a:hover{
text-decoration: underline;
color: #3CCACE;
}
a:active{color: black;}
}
}
}
}
}
}
Loading

0 comments on commit e880586

Please sign in to comment.