merdan
/
sarga
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Slider now working now make it responsive

This commit is contained in:
prashant-webkul 2018-08-10 14:58:35 +05:30
parent 08b49ae2b2
commit 282d8695bc
11 changed files with 281 additions and 141 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

26
packages/Webkul/Shop/src/Http/Controllers/CategoryController.php Normal file
View File

@ -0,0 +1,26 @@
<?php
namespace Webkul\Shop\Http\Controllers;
use Illuminate\Http\Request;
use Illuminate\Http\Response;
use Illuminate\Routing\Controller;
/**
* Admin user session controller
*
* @author Prashant Singh <prashant.singh852@webkul.com>
* @copyright 2018 Webkul Software Pvt Ltd (http://www.webkul.com)
*/
class CategoryController extends controller
{
public function __construct()
{
$this->_config = request('_config');
}
public function index()
{
return view($this->_config['view']);
}
}

8
packages/Webkul/Shop/src/Http/Controllers/HomeController.php
View File

@ -7,13 +7,15 @@ use Illuminate\Http\Response;
use Illuminate\Routing\Controller;
use Webkul\Core\Repositories\SliderRepository as Sliders;
use Webkul\Channel\Channel as Channel;
/**
* Admin user session controller
* Home page controller
*
* @author Jitendra Singh <jitendra@webkul.com>
* @author Prashant Singh <prashant.singh852@webkul.com>
* @copyright 2018 Webkul Software Pvt Ltd (http://www.webkul.com)
*/
class HomeController extends controller
class HomeController extends controller
{
protected $_config;
protected $sliders;

2
packages/Webkul/Shop/src/Http/Controllers/SliderController.php
View File

@ -9,7 +9,7 @@ use Webkul\Channel\Channel;
use Webkul\Core\Repositories\SliderRepository as Slider;
/**
* Slider controller
* Slider controller for managing the slider controls.
*
* @author Prashant Singh <prashant.singh852@webkul.com>
* @copyright 2018 Webkul Software Pvt Ltd (http://www.webkul.com)

8
packages/Webkul/Shop/src/Http/ViewComposers/Categories/CategoryComposer.php
View File

@ -7,6 +7,14 @@ use Illuminate\Support\Collection;
use Webkul\Category\Repositories\CategoryRepository as Category;
/**
* Category List Composer on Navigation Menu
*
* @author Prashant Singh <prashant.singh852@webkul.com>
* @copyright 2018 Webkul Software Pvt Ltd (http://www.webkul.com)
*/
class CategoryComposer
{
/**

11
packages/Webkul/Shop/src/Http/routes.php
View File

@ -1,11 +1,18 @@
<?php
Route::group(['middleware' => ['web']], function () {
Route::get('/', 'Webkul\Shop\Http\Controllers\HomeController@index')->defaults('_config', [
'view' => 'shop::store.home.index'
]);
'view' => 'shop::store.home.index'
])->name('store.home');
Route::get('/category', 'Webkul\Shop\Http\Controllers\CategoryController@index')->defaults('_config', [
'view' => 'shop::store.category.index'
]);
});
Route::group(['middleware' => ['web']], function () {
Route::get('/foo', 'Webkul\Shop\Http\Controllers\HomeController@index1');
});

2
packages/Webkul/Shop/src/Resources/assets/js/app.js vendored
View File

@ -8,7 +8,7 @@ Vue.use(VeeValidate);
Vue.component("category-nav", require("./components/category-nav.vue"));
Vue.component("category-item", require("./components/category-item.vue"));
Vue.component("image-slider", require("./components/imageSlider.vue"));
Vue.component("image-slider", require("./components/image-slider.vue"));
$(document).ready(function () {

124
packages/Webkul/Shop/src/Resources/assets/js/components/image-slider.vue Normal file
View File

@ -0,0 +1,124 @@
<template>
<transition name="slide">
<div class="slider-content" v-if="images.length>0">
<ul class="slider-images">
<li v-for="(image,index) in images" :key="index" v-bind:class="{'show': index==currentIndex}">
<img class="slider-item" :src="image" />
<!-- <div class="show-content"></div> -->
</li>
</ul>
<div class="slider-control" v-if="images_loaded">
<span class="icon dark-left-icon slider-left" @click="changeIndexLeft"></span>
<span class="icon light-right-icon slider-right" @click="changeIndexRight"></span>
</div>
</div>
</transition>
</template>
<script>
export default {
props:{
slides: {
type: Array,
required: true,
default: () => [],
}
},
data: function() {
return {
images: [],
currentIndex: -1,
content: [],
current: false,
images_loaded: false,
};
},
mounted(){
this.getProps();
},
methods: {
getProps() {
this.setProps();
},
setProps() {
var this_this = this;
this.slides.forEach(function(slider) {
this_this.images.push(slider.path);
});
this.currentIndex = 0;
if(this.images.length == 0) {
this.images.push = "vendor/webkul/shop/assets/images/banner.png";
} else {
this.images_loaded = true;
}
},
changeIndexLeft: function() {
if (this.currentIndex > 0) {
this.currentIndex--;
}
else if(this.currentIndex == 0) {
this.currentIndex = this.images.length-1;
}
},
changeIndexRight: function() {
if(this.currentIndex < this.images.length-1) {
this.currentIndex++;
}
else if(this.currentIndex == this.images.length-1) {
this.currentIndex = 0;
}
}
}
};
</script>
<style>
.slide-enter-active {
transition: all 0.2s cubic-bezier(0.55, 0.085, 0.68, 0.53);
}
.slide-leave-active {
transition: all 0.25s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}
.slide-enter, .slide-leave-to {
-webkit-transform: scaleY(0) translateZ(0);
transform: scaleY(0) translateZ(0);
opacity: 0;
}
</style>

97
packages/Webkul/Shop/src/Resources/assets/js/components/imageSlider.vue
View File

@ -1,97 +0,0 @@
<template>
<div class="slider-content">
<ul class="slider-images">
<li>
<img class="slider-item" :src="images[currentIndex]" />
<div class="show-content"></div>
</li>
<div class="slider-control">
<span class="icon dark-left-icon slider-left" @click="changeIndexLeft"></span>
<span class="icon light-right-icon slider-right" @click="changeIndexRight"></span>
</div>
</ul>
</div>
</template>
<script>
export default {
props:{
slides: {
type: Array,
required: true,
default: () => [],
}
},
data: function() {
return {
images: [
// "vendor/webkul/shop/assets/images/banner.png"
],
currentIndex: 0,
content: [],
};
},
mounted(){
this.getProps();
},
methods: {
getProps() {
this.setProps();
},
setProps() {
for(var i=0;i<this.slides.length;i++) {
this.images.push(this.slides[i].path);
this.content.push(this.slides[i].content);
}
if($('.show-content').html(this.content[0]))
console.log('content pushed');
else
console.log('cannot push');
},
changeIndexLeft: function() {
if (this.currentIndex > 0) {
this.currentIndex--;
if($('.show-content').html(this.content[this.currentIndex]))
console.log('content pushed');
else
console.log('cannot push');
}
else if(this.currentIndex == 0) {
this.currentIndex = this.images.length-1;
if($('.show-content').html(this.content[this.currentIndex]))
console.log('content pushed');
else
console.log('cannot push');
}
},
changeIndexRight: function() {
if(this.currentIndex < this.images.length-1) {
this.currentIndex++;
if($('.show-content').html(this.content[this.currentIndex]))
console.log('content pushed');
else
console.log('cannot push');
}
else if(this.currentIndex == this.images.length-1) {
this.currentIndex = 0;
if($('.show-content').html(this.content[this.currentIndex]))
console.log('content pushed');
else
console.log('cannot push');
}
}
}
};
</script>

92
packages/Webkul/Shop/src/Resources/assets/sass/app.scss vendored
View File

@ -58,7 +58,7 @@ body {
font-size: 14px;
}
.q-c {
.search-icon-wrapper {
box-sizing: border-box;
height: 38px;
width: 38px;
@ -111,10 +111,10 @@ body {
}
}
ul.product-dropdown-container {
ul.cart-dropdown {
float: right;
li.product-dropdown {
li.cart-summary {
display: flex;
flex-direction: row;
margin-left: 14px;
@ -307,40 +307,72 @@ body {
.slider-block {
display: block;
width: 80%;
height: 500px;
margin-left: auto;
margin-right: auto;
margin-bottom: 5%;
.slider-content {
ul.slider-images {
li{
position: absolute;
display: none;
width: 80%;
object-fit: fill;
}
li.show {
display:block;
height: 500px;
}
li img {
width: 100%;
height: 500px;
object-fit: fill;
}
.slider-control {
display: inline-block;
vertical-align: middle;
position: absolute;
right: 10%;
margin-top: -60px;
margin-right: 10px;
.dark-left-icon {
background-color: white;
height: 48px;
width: 48px;
max-height: 100%;
max-width: 100%;
}
.light-right-icon {
background-color: black;
height: 48px;
width: 48px;
max-height: 100%;
max-width: 100%;
}
// li img {
// position: absolute;
// display: none;
// width: 80%;
// height: 500px;
// object-fit: fill;
// }
// li img.show {
// display:block;
// height: 500px;
// }
}
.slider-control {
display: inline-block;
vertical-align: middle;
position: absolute;
right: 10%;
margin-right: 10px;
margin-bottom: 1.8%;
user-select: none;
.dark-left-icon {
background-color: white;
height: 48px;
width: 48px;
max-height: 100%;
max-width: 100%;
}
.light-right-icon {
background-color: black;
height: 48px;
width: 48px;
max-height: 100%;
max-width: 100%;
}
}
}
@ -796,7 +828,7 @@ body {
padding-left: 10px;
}
.q-c {
.search-icon-wrapper {
box-sizing: border-box;
height: 38px;
width: 38px;
@ -840,10 +872,10 @@ body {
}
}
ul.product-dropdown-container {
ul.cart-dropdown {
float: right;
li.product-dropdown {
li.cart-summary {
display: flex;
flex-direction: row;
@ -1178,7 +1210,7 @@ body {
padding-left: 10px;
}
.q-c {
.search-icon-wrapper {
box-sizing: border-box;
height: 38px;
width: 38px;
@ -1222,10 +1254,10 @@ body {
}
}
ul.product-dropdown-container {
ul.cart-dropdown {
float: right;
li.product-dropdown {
li.cart-summary {
display: flex;
flex-direction: row;

3
packages/Webkul/Shop/src/Resources/views/store/category/index.blade.php Normal file
View File

@ -0,0 +1,3 @@
@extends('shop::store.layouts.master')
@section('content-wrapper')
@endsection

49
packages/Webkul/Shop/src/Resources/views/store/header/index.blade.php
View File

@ -1,26 +1,31 @@
<div class="header">
<div class="header-top">
<div class="left-content">
<ul class="logo-container">
<li>
<a href="">
<a href="{{ route('store.home') }}">
<img class="logo" src="vendor/webkul/shop/assets/images/logo.svg" />
</a>
</li>
</ul>
<ul class="search-container">
<ul class="search-container">
<li class="search-group">
<input type="search" class="search-field" placeholder="Search for products">
<div class="q-c">
<div class="search-icon-wrapper">
<span class="icon search-icon"></span>
</div>
</li>
</ul>
</div>
<div class="right-content">
{{-- Triggered on responsive mode only --}}
<ul class="search-dropdown-container">
<li class="search-dropdown">
@ -28,40 +33,68 @@
</ul>
<ul class="account-dropdown-container">
<li class="account-dropdown">
<span class="icon account-icon"></span>
<div class="dropdown-toggle">
<div style="display: inline-block; cursor: pointer;">
<span class="name">Account</span>
</div>
<i class="icon arrow-down-icon active"></i>
</div>
<div class="dropdown-list bottom-right" style="display: none;">
<div class="dropdown-container">
<label>Account</label>
<ul>
<li><a href="{{ route('customer.session.index') }}">Sign In</a></li>
<li><a href="{{ route('customer.register.index') }}">Sign Up</a></li>
</ul>
</div>
</div>
</li>
</ul>
<ul class="product-dropdown-container">
<li class="product-dropdown">
<ul class="cart-dropdown">
<li class="cart-summary">
<span class="icon cart-icon"></span>
<span class="cart"><span class="cart-count">5</span>Products</span>
<span class="icon arrow-down-icon"></span>
</li>
</ul>
{{-- Meant for responsive views only --}}
<ul class="ham-dropdown-container">
<li class="ham-dropdown">
{{-- use this section for the dropdown of the hamburger menu --}}
</li>
</ul>
</div>
<div class="right-responsive">
<ul class="right-wrapper">
<li class="search-box"><span class="icon search-icon"></span></li>
<li class="account-box"><span class="icon account-icon"></span></li>
@ -71,9 +104,11 @@
</div>
</div>
<div class="header-bottom">
@include('shop::store.header.nav-menu.navmenu')
@include('shop::store.header.nav-menu.navmenu')
</div>
</div>
@section('javascript')
<script>