diff --git a/composer.json b/composer.json index c3504fdef..34a5cc7e8 100644 --- a/composer.json +++ b/composer.json @@ -12,6 +12,7 @@ "dimsav/laravel-translatable": "^9.0", "fideloper/proxy": "^4.0", "intervention/image": "^2.4", + "intervention/imagecache": "^2.3", "kalnoy/nestedset": "^4.3", "laravel/framework": "5.6.*", "laravel/tinker": "^1.0", diff --git a/composer.lock b/composer.lock index cb287d95e..ec992ced6 100644 --- a/composer.lock +++ b/composer.lock @@ -4,7 +4,7 @@ "Read more about it at https://getcomposer.org/doc/01-basic-usage.md#installing-dependencies", "This file is @generated automatically" ], - "content-hash": "ee788a0a8a86526cd58b0b4853a45c06", + "content-hash": "c0c2a23aa2502c590b2ccf7975329ce1", "packages": [ { "name": "commerceguys/intl", @@ -600,6 +600,59 @@ ], "time": "2018-05-29T14:19:03+00:00" }, + { + "name": "intervention/imagecache", + "version": "2.3.3", + "source": { + "type": "git", + "url": "https://github.com/Intervention/imagecache.git", + "reference": "7936b90e695daee1aafbd25221815352ef97bcbc" + }, + "dist": { + "type": "zip", + "url": "https://api.github.com/repos/Intervention/imagecache/zipball/7936b90e695daee1aafbd25221815352ef97bcbc", + "reference": "7936b90e695daee1aafbd25221815352ef97bcbc", + "shasum": "" + }, + "require": { + "illuminate/cache": "~4|~5", + "illuminate/filesystem": "~4|~5", + "intervention/image": "dev-master|~2,>=2.2.0", + "jeremeamia/superclosure": "~1|~2", + "php": ">=5.3.0" + }, + "require-dev": { + "mockery/mockery": "~0.9.2", + "phpunit/phpunit": "3.*" + }, + "type": "library", + "autoload": { + "psr-4": { + "Intervention\\Image\\": "src/Intervention/Image" + } + }, + "notification-url": "https://packagist.org/downloads/", + "license": [ + "MIT" + ], + "authors": [ + { + "name": "Oliver Vogel", + "email": "oliver@olivervogel.net", + "homepage": "http://olivervogel.net/" + } + ], + "description": "Caching extension for the Intervention Image Class", + "homepage": "http://image.intervention.io", + "keywords": [ + "cache", + "gd", + "image", + "imagick", + "laravel" + ], + "time": "2015-09-22T15:22:47+00:00" + }, { "name": "jakub-onderka/php-console-color", "version": "0.1", @@ -752,6 +805,64 @@ ], "time": "2018-05-16T11:53:55+00:00" }, + { + "name": "jeremeamia/SuperClosure", + "version": "2.4.0", + "source": { + "type": "git", + "url": "https://github.com/jeremeamia/super_closure.git", + "reference": "5707d5821b30b9a07acfb4d76949784aaa0e9ce9" + }, + "dist": { + "type": "zip", + "url": "https://api.github.com/repos/jeremeamia/super_closure/zipball/5707d5821b30b9a07acfb4d76949784aaa0e9ce9", + "reference": "5707d5821b30b9a07acfb4d76949784aaa0e9ce9", + "shasum": "" + }, + "require": { + "nikic/php-parser": "^1.2|^2.0|^3.0|^4.0", + "php": ">=5.4", + "symfony/polyfill-php56": "^1.0" + }, + "require-dev": { + "phpunit/phpunit": "^4.0|^5.0" + }, + "type": "library", + "extra": { + "branch-alias": { + "dev-master": "2.4-dev" + } + }, + "autoload": { + "psr-4": { + "SuperClosure\\": "src/" + } + }, + "notification-url": "https://packagist.org/downloads/", + "license": [ + "MIT" + ], + "authors": [ + { + "name": "Jeremy Lindblom", + "email": "jeremeamia@gmail.com", + "homepage": "https://github.com/jeremeamia", + "role": "Developer" + } + ], + "description": "Serialize Closure objects, including their context and binding", + "homepage": "https://github.com/jeremeamia/super_closure", + "keywords": [ + "closure", + "function", + "lambda", + "parser", + "serializable", + "serialize", + "tokenizer" + ], + "time": "2018-03-21T22:21:57+00:00" + }, { "name": "kalnoy/nestedset", "version": "v4.3.2", @@ -2580,6 +2691,62 @@ ], "time": "2018-04-26T10:06:28+00:00" }, + { + "name": "symfony/polyfill-php56", + "version": "v1.9.0", + "source": { + "type": "git", + "url": "https://github.com/symfony/polyfill-php56.git", + "reference": "7b4fc009172cc0196535b0328bd1226284a28000" + }, + "dist": { + "type": "zip", + "url": "https://api.github.com/repos/symfony/polyfill-php56/zipball/7b4fc009172cc0196535b0328bd1226284a28000", + "reference": "7b4fc009172cc0196535b0328bd1226284a28000", + "shasum": "" + }, + "require": { + "php": ">=5.3.3", + "symfony/polyfill-util": "~1.0" + }, + "type": "library", + "extra": { + "branch-alias": { + "dev-master": "1.9-dev" + } + }, + "autoload": { + "psr-4": { + "Symfony\\Polyfill\\Php56\\": "" + }, + "files": [ + "bootstrap.php" + ] + }, + "notification-url": "https://packagist.org/downloads/", + "license": [ + "MIT" + ], + "authors": [ + { + "name": "Nicolas Grekas", + "email": "p@tchwork.com" + }, + { + "name": "Symfony Community", + "homepage": "https://symfony.com/contributors" + } + ], + "description": "Symfony polyfill backporting some PHP 5.6+ features to lower PHP versions", + "homepage": "https://symfony.com", + "keywords": [ + "compatibility", + "polyfill", + "portable", + "shim" + ], + "time": "2018-08-06T14:22:27+00:00" + }, { "name": "symfony/polyfill-php72", "version": "v1.8.0", @@ -2635,6 +2802,58 @@ ], "time": "2018-04-26T10:06:28+00:00" }, + { + "name": "symfony/polyfill-util", + "version": "v1.9.0", + "source": { + "type": "git", + "url": "https://github.com/symfony/polyfill-util.git", + "reference": "8e15d04ba3440984d23e7964b2ee1d25c8de1581" + }, + "dist": { + "type": "zip", + "url": "https://api.github.com/repos/symfony/polyfill-util/zipball/8e15d04ba3440984d23e7964b2ee1d25c8de1581", + "reference": "8e15d04ba3440984d23e7964b2ee1d25c8de1581", + "shasum": "" + }, + "require": { + "php": ">=5.3.3" + }, + "type": "library", + "extra": { + "branch-alias": { + "dev-master": "1.9-dev" + } + }, + "autoload": { + "psr-4": { + "Symfony\\Polyfill\\Util\\": "" + } + }, + "notification-url": "https://packagist.org/downloads/", + "license": [ + "MIT" + ], + "authors": [ + { + "name": "Nicolas Grekas", + "email": "p@tchwork.com" + }, + { + "name": "Symfony Community", + "homepage": "https://symfony.com/contributors" + } + ], + "description": "Symfony utilities for portability of PHP codes", + "homepage": "https://symfony.com", + "keywords": [ + "compat", + "compatibility", + "polyfill", + "shim" + ], + "time": "2018-08-06T14:22:27+00:00" + }, { "name": "symfony/process", "version": "v4.1.2", diff --git a/config/app.php b/config/app.php index e4ce4cc51..2c7cfea9c 100644 --- a/config/app.php +++ b/config/app.php @@ -243,6 +243,7 @@ return [ 'ProductGrid' => Webkul\Ui\DataGrid\Facades\ProductGrid::class, 'Image' => Intervention\Image\Facades\Image::class, 'Cart' => Webkul\Cart\Facades\Cart::class, + 'Core' => Webkul\Core\Facades\Core::class ], ]; diff --git a/config/filesystems.php b/config/filesystems.php index 25a84a4bd..b36f4c121 100644 --- a/config/filesystems.php +++ b/config/filesystems.php @@ -51,7 +51,7 @@ return [ 'public' => [ 'driver' => 'local', 'root' => storage_path('app/public'), - 'url' => env('APP_URL').'/public/storage', + 'url' => env('APP_URL') . '/public/storage', 'visibility' => 'public', ], diff --git a/config/imagecache.php b/config/imagecache.php new file mode 100644 index 000000000..83dae729f --- /dev/null +++ b/config/imagecache.php @@ -0,0 +1,72 @@ + 'cache', + + /* + |-------------------------------------------------------------------------- + | Storage paths + |-------------------------------------------------------------------------- + | + | The following paths will be searched for the image filename, submited + | by URI. + | + | Define as many directories as you like. + | + */ + + 'paths' => array( + storage_path('app/public'), + public_path('storage') + ), + + /* + |-------------------------------------------------------------------------- + | Manipulation templates + |-------------------------------------------------------------------------- + | + | Here you may specify your own manipulation filter templates. + | The keys of this array will define which templates + | are available in the URI: + | + | {route}/{template}/{filename} + | + | The values of this array will define which filter class + | will be applied, by its fully qualified name. + | + */ + + 'templates' => array( + 'small' => 'Webkul\Product\CacheFilters\Small', + 'medium' => 'Webkul\Product\CacheFilters\Medium', + 'large' => 'Webkul\Product\CacheFilters\Large', + ), + + /* + |-------------------------------------------------------------------------- + | Image Cache Lifetime + |-------------------------------------------------------------------------- + | + | Lifetime in minutes of the images handled by the imagecache route. + | + */ + + 'lifetime' => 1, + // 'lifetime' => 43200, + +); diff --git a/config/repository.php b/config/repository.php new file mode 100644 index 000000000..a251120c6 --- /dev/null +++ b/config/repository.php @@ -0,0 +1,244 @@ + [ + 'limit' => 15 + ], + + /* + |-------------------------------------------------------------------------- + | Fractal Presenter Config + |-------------------------------------------------------------------------- + | + + Available serializers: + ArraySerializer + DataArraySerializer + JsonApiSerializer + + */ + 'fractal' => [ + 'params' => [ + 'include' => 'include' + ], + 'serializer' => League\Fractal\Serializer\DataArraySerializer::class + ], + + /* + |-------------------------------------------------------------------------- + | Cache Config + |-------------------------------------------------------------------------- + | + */ + 'cache' => [ + /* + |-------------------------------------------------------------------------- + | Cache Status + |-------------------------------------------------------------------------- + | + | Enable or disable cache + | + */ + 'enabled' => false, + + /* + |-------------------------------------------------------------------------- + | Cache Minutes + |-------------------------------------------------------------------------- + | + | Time of expiration cache + | + */ + 'minutes' => 30, + + /* + |-------------------------------------------------------------------------- + | Cache Repository + |-------------------------------------------------------------------------- + | + | Instance of Illuminate\Contracts\Cache\Repository + | + */ + 'repository' => 'cache', + + /* + |-------------------------------------------------------------------------- + | Cache Clean Listener + |-------------------------------------------------------------------------- + | + | + | + */ + 'clean' => [ + + /* + |-------------------------------------------------------------------------- + | Enable clear cache on repository changes + |-------------------------------------------------------------------------- + | + */ + 'enabled' => true, + + /* + |-------------------------------------------------------------------------- + | Actions in Repository + |-------------------------------------------------------------------------- + | + | create : Clear Cache on create Entry in repository + | update : Clear Cache on update Entry in repository + | delete : Clear Cache on delete Entry in repository + | + */ + 'on' => [ + 'create' => true, + 'update' => true, + 'delete' => true, + ] + ], + + 'params' => [ + /* + |-------------------------------------------------------------------------- + | Skip Cache Params + |-------------------------------------------------------------------------- + | + | + | Ex: http://prettus.local/?search=lorem&skipCache=true + | + */ + 'skipCache' => 'skipCache' + ], + + /* + |-------------------------------------------------------------------------- + | Methods Allowed + |-------------------------------------------------------------------------- + | + | methods cacheable : all, paginate, find, findByField, findWhere, getByCriteria + | + | Ex: + | + | 'only' =>['all','paginate'], + | + | or + | + | 'except' =>['find'], + */ + 'allowed' => [ + 'only' => null, + 'except' => null + ] + ], + + /* + |-------------------------------------------------------------------------- + | Criteria Config + |-------------------------------------------------------------------------- + | + | Settings of request parameters names that will be used by Criteria + | + */ + 'criteria' => [ + /* + |-------------------------------------------------------------------------- + | Accepted Conditions + |-------------------------------------------------------------------------- + | + | Conditions accepted in consultations where the Criteria + | + | Ex: + | + | 'acceptedConditions'=>['=','like'] + | + | $query->where('foo','=','bar') + | $query->where('foo','like','bar') + | + */ + 'acceptedConditions' => [ + '=', + 'like' + ], + /* + |-------------------------------------------------------------------------- + | Request Params + |-------------------------------------------------------------------------- + | + | Request parameters that will be used to filter the query in the repository + | + | Params : + | + | - search : Searched value + | Ex: http://prettus.local/?search=lorem + | + | - searchFields : Fields in which research should be carried out + | Ex: + | http://prettus.local/?search=lorem&searchFields=name;email + | http://prettus.local/?search=lorem&searchFields=name:like;email + | http://prettus.local/?search=lorem&searchFields=name:like + | + | - filter : Fields that must be returned to the response object + | Ex: + | http://prettus.local/?search=lorem&filter=id,name + | + | - orderBy : Order By + | Ex: + | http://prettus.local/?search=lorem&orderBy=id + | + | - sortedBy : Sort + | Ex: + | http://prettus.local/?search=lorem&orderBy=id&sortedBy=asc + | http://prettus.local/?search=lorem&orderBy=id&sortedBy=desc + | + | - searchJoin: Specifies the search method (AND / OR), by default the + | application searches each parameter with OR + | EX: + | http://prettus.local/?search=lorem&searchJoin=and + | http://prettus.local/?search=lorem&searchJoin=or + | + */ + 'params' => [ + 'search' => 'search', + 'searchFields' => 'searchFields', + 'filter' => 'filter', + 'orderBy' => 'orderBy', + 'sortedBy' => 'sortedBy', + 'with' => 'with', + 'searchJoin' => 'searchJoin' + ] + ], + /* + |-------------------------------------------------------------------------- + | Generator Config + |-------------------------------------------------------------------------- + | + */ + 'generator' => [ + 'basePath' => app()->path(), + 'rootNamespace' => 'App\\', + 'stubsOverridePath' => app()->path(), + 'paths' => [ + 'models' => 'Entities', + 'repositories' => 'Repositories', + 'interfaces' => 'Repositories', + 'transformers' => 'Transformers', + 'presenters' => 'Presenters', + 'validators' => 'Validators', + 'controllers' => 'Http/Controllers', + 'provider' => 'RepositoryServiceProvider', + 'criteria' => 'Criteria' + ] + ] +]; diff --git a/packages/Webkul/Core/src/Providers/CoreServiceProvider.php b/packages/Webkul/Core/src/Providers/CoreServiceProvider.php index c1b7ad57a..23515b1c4 100644 --- a/packages/Webkul/Core/src/Providers/CoreServiceProvider.php +++ b/packages/Webkul/Core/src/Providers/CoreServiceProvider.php @@ -33,9 +33,9 @@ class CoreServiceProvider extends ServiceProvider $router->aliasMiddleware('customer', RedirectIfNotCustomer::class); - $this->publishes([ - __DIR__ . '/../../publishable/lang' => public_path('vendor/webkul/core/lang'), - ], 'public'); + // $this->publishes([ + // __DIR__ . '/../../publishable/lang' => public_path('vendor/webkul/core/lang'), + // ], 'public'); Validator::extend('slug', 'Webkul\Core\Contracts\Validations\Slug@passes'); diff --git a/packages/Webkul/Customer/src/Providers/CustomerServiceProvider.php b/packages/Webkul/Customer/src/Providers/CustomerServiceProvider.php index f5cc64d94..fedbe7294 100644 --- a/packages/Webkul/Customer/src/Providers/CustomerServiceProvider.php +++ b/packages/Webkul/Customer/src/Providers/CustomerServiceProvider.php @@ -13,10 +13,6 @@ class CustomerServiceProvider extends ServiceProvider { public function boot(Router $router) { - $this->publishes([ - __DIR__ . '/../../publishable/assets' => public_path('vendor/webkul/customer/assets'), - ], 'public'); - $router->aliasMiddleware('customer', RedirectIfNotCustomer::class); $this->loadMigrationsFrom(__DIR__ . '/../Database/migrations'); diff --git a/packages/Webkul/Product/src/CacheFilters/Large.php b/packages/Webkul/Product/src/CacheFilters/Large.php new file mode 100644 index 000000000..bb71ee7f9 --- /dev/null +++ b/packages/Webkul/Product/src/CacheFilters/Large.php @@ -0,0 +1,14 @@ +resize(480, 480); + } +} \ No newline at end of file diff --git a/packages/Webkul/Product/src/CacheFilters/Medium.php b/packages/Webkul/Product/src/CacheFilters/Medium.php new file mode 100644 index 000000000..39ec33170 --- /dev/null +++ b/packages/Webkul/Product/src/CacheFilters/Medium.php @@ -0,0 +1,14 @@ +resize(280, 350); + } +} \ No newline at end of file diff --git a/packages/Webkul/Product/src/CacheFilters/Small.php b/packages/Webkul/Product/src/CacheFilters/Small.php new file mode 100644 index 000000000..a3698696c --- /dev/null +++ b/packages/Webkul/Product/src/CacheFilters/Small.php @@ -0,0 +1,14 @@ +resize(120, 120); + } +} \ No newline at end of file diff --git a/packages/Webkul/Product/src/Product/ConfigurableOption.php b/packages/Webkul/Product/src/Product/ConfigurableOption.php index b078576ba..216fd5408 100644 --- a/packages/Webkul/Product/src/Product/ConfigurableOption.php +++ b/packages/Webkul/Product/src/Product/ConfigurableOption.php @@ -3,7 +3,7 @@ namespace Webkul\Product\Product; use Webkul\Attribute\Repositories\AttributeOptionRepository as AttributeOption; -use Webkul\Product\Product\Gallery; +use Webkul\Product\Product\ProductImage; use Webkul\Product\Product\Price; class ConfigurableOption extends AbstractProduct @@ -16,11 +16,11 @@ class ConfigurableOption extends AbstractProduct protected $attributeOption; /** - * Gallery object + * ProductImage object * * @var array */ - protected $gallery; + protected $productImage; /** * Price object @@ -33,19 +33,19 @@ class ConfigurableOption extends AbstractProduct * Create a new controller instance. * * @param Webkul\Attribute\Repositories\AttributeOptionRepository $attributeOption - * @param Webkul\Product\Product\Gallery $gallery + * @param Webkul\Product\Product\ProductImage $productImage * @param Webkul\Product\Product\Price $price * @return void */ public function __construct( AttributeOption $attributeOption, - Gallery $gallery, + ProductImage $productImage, Price $price ) { $this->attributeOption = $attributeOption; - $this->gallery = $gallery; + $this->productImage = $productImage; $this->price = $price; } @@ -230,7 +230,7 @@ class ConfigurableOption extends AbstractProduct $images = []; foreach ($this->getAllowProducts($product) as $variant) { - $images[$variant->id] = $this->gallery->getImages($variant); + $images[$variant->id] = $this->productImage->getGalleryImages($variant); } return $images; diff --git a/packages/Webkul/Product/src/Product/Gallery.php b/packages/Webkul/Product/src/Product/Gallery.php deleted file mode 100644 index 7e47592c1..000000000 --- a/packages/Webkul/Product/src/Product/Gallery.php +++ /dev/null @@ -1,25 +0,0 @@ - '', - 'medium_image_url' => '', - 'large_image_url' => '', - ]; - - return $images; - } -} \ No newline at end of file diff --git a/packages/Webkul/Product/src/Product/ProductImage.php b/packages/Webkul/Product/src/Product/ProductImage.php new file mode 100644 index 000000000..1477144e9 --- /dev/null +++ b/packages/Webkul/Product/src/Product/ProductImage.php @@ -0,0 +1,72 @@ +images as $image) { + if(!Storage::has($image->path)) + continue; + + $images[] = [ + 'small_image_url' => url('cache/small/' . $image->path), + 'medium_image_url' => url('cache/medium/' . $image->path), + 'large_image_url' => url('cache/large/' . $image->path), + 'original_image_url' => url('cache/original/' . $image->path), + ]; + } + + if(!$product->parent_id && !count($images)) { + $images[] = [ + 'small_image_url' => bagisto_asset('images/product/small-product-placeholder.png'), + 'medium_image_url' => bagisto_asset('images/product/meduim-product-placeholder.png'), + 'large_image_url' => bagisto_asset('images/product/large-product-placeholder.png'), + 'original_image_url' => bagisto_asset('images/product/large-product-placeholder.png'), + ]; + } + + return $images; + } + + /** + * Get product's base image + * + * @param Product $product + * @return array + */ + public function getProductBaseImage($product) + { + $images = $product->images; + + if($images->count()) { + $image = [ + 'small_image_url' => url('cache/small/' . $images[0]->path), + 'medium_image_url' => url('cache/medium/' . $images[0]->path), + 'large_image_url' => url('cache/large/' . $images[0]->path), + 'original_image_url' => url('cache/original/' . $images[0]->path), + ]; + } else { + $image = [ + 'small_image_url' => bagisto_asset('images/product/small-product-placeholder.png'), + 'medium_image_url' => bagisto_asset('images/product/meduim-product-placeholder.png'), + 'large_image_url' => bagisto_asset('images/product/large-product-placeholder.png'), + 'original_image_url' => bagisto_asset('images/product/large-product-placeholder.png'), + ]; + } + + return $image; + } +} \ No newline at end of file diff --git a/packages/Webkul/Shop/src/Http/routes.php b/packages/Webkul/Shop/src/Http/routes.php index df232d060..4924d401b 100644 --- a/packages/Webkul/Shop/src/Http/routes.php +++ b/packages/Webkul/Shop/src/Http/routes.php @@ -38,7 +38,7 @@ Route::group(['middleware' => ['web']], function () { 'view' => 'shop::products.reviews.create' ])->name('shop.reviews.create'); - Route::post('/reviews/create/{slug}', 'Webkul\Core\Http\Controllers\ReviewController@store')->defaults('_config', [ + Route::post('/reviews/create/{slug}', 'Webkul\Shop\Http\Controllers\ReviewController@store')->defaults('_config', [ 'redirect' => 'admin.reviews.index' ])->name('admin.reviews.store'); diff --git a/packages/Webkul/Shop/src/Resources/assets/images/product/large-product-placeholder.png b/packages/Webkul/Shop/src/Resources/assets/images/product/large-product-placeholder.png new file mode 100644 index 000000000..e839910cc Binary files /dev/null and b/packages/Webkul/Shop/src/Resources/assets/images/product/large-product-placeholder.png differ diff --git a/packages/Webkul/Shop/src/Resources/assets/images/product/meduim-product-placeholder.png b/packages/Webkul/Shop/src/Resources/assets/images/product/meduim-product-placeholder.png new file mode 100644 index 000000000..0aa66dc52 Binary files /dev/null and b/packages/Webkul/Shop/src/Resources/assets/images/product/meduim-product-placeholder.png differ diff --git a/packages/Webkul/Shop/src/Resources/assets/images/product/small-product-placeholder.png b/packages/Webkul/Shop/src/Resources/assets/images/product/small-product-placeholder.png new file mode 100644 index 000000000..8526a85f5 Binary files /dev/null and b/packages/Webkul/Shop/src/Resources/assets/images/product/small-product-placeholder.png differ diff --git a/packages/Webkul/Shop/src/Resources/assets/sass/app.scss b/packages/Webkul/Shop/src/Resources/assets/sass/app.scss index 81ee07b89..e024117ce 100644 --- a/packages/Webkul/Shop/src/Resources/assets/sass/app.scss +++ b/packages/Webkul/Shop/src/Resources/assets/sass/app.scss @@ -8,9 +8,6 @@ body { margin: 0; padding: 0; font-weight: 500; - position: relative; - min-height: 100%; - top: 0px; color: $font-color; font-size: $font-size-base; } @@ -19,9 +16,343 @@ body { font-family: "Montserrat", sans-serif; } +.header { + margin-top: 16px; + margin-bottom: 21px; + + .header-top { + margin-bottom: 16px; + display: flex; + max-width: 80%; + width: 100%; + margin-left: auto; + margin-right: auto; + align-items: center; + justify-content: space-between; + + div.left-content { + display: flex; + flex-direction: row; + justify-content: flex-start; + align-items: center; + + ul.logo-container { + margin-right: 12px; + + li { + display: flex; + } + } + + ul.search-container { + li.search-group { + display: inline-flex; + justify-content: center; + align-items: center; + + .search-field { + height: 38px; + border: 2px solid $border-color; + border-radius: 3px; + border-right: none; + border-top-right-radius: 0px; + border-bottom-right-radius: 0px; + padding-left: 12px; + font-family: "Montserrat", sans-serif; + font-size: 14px; + } + + .search-icon-wrapper { + box-sizing: border-box; + height: 38px; + width: 38px; + border: 2px solid $border-color; + border-top-right-radius: 3px; + border-bottom-right-radius: 3px; + + .search-icon { + margin-top: 4px; + margin-left: 4px; + height: 24px; + width: 24px; + } + } + } + } + } + + div.right-content { + display: flex; + flex-direction: row; + justify-content: flex-end; + align-items: center; + + ul.account-dropdown-container { + float: right; + border-right: 2px solid $border-color; + + li.account-dropdown { + display: flex; + flex-direction: row; + margin-right: 14px; + + .account-icon { + cursor: pointer; + margin-right: 8px; + height: 24px; + width: 24px; + } + + .account { + cursor: pointer; + padding-top: 3px; + padding-right: 5px; + margin-left: 8px; + } + + .icon.arrow-down-icon { + cursor: pointer; + margin-top: 10px; + } + } + } + + ul.cart-dropdown { + float: right; + + li.cart-summary { + display: flex; + flex-direction: row; + margin-left: 14px; + + .cart-icon { + margin: 0; + height: 24px; + width: 24px; + margin-right: 8px; + } + .cart { + padding-top: 3px; + padding-right: 5px; + + .cart-count { + color: #0031f0; + padding-right: 3px; + } + } + + .icon.arrow-down-icon { + margin-top: 10px; + } + } + } + } + + .right-responsive { + display: none; + + ul.right-wrapper { + display: flex; + flex-direction: row; + justify-content: flex-end; + align-items: center; + + li:not(:last-child) { + margin-right: 7px; + + span.icon { + margin: 0; + height: 24px; + width: 24px; + } + } + } + } + } + + .header-bottom { + height: 48px; + margin-left: auto; + margin-right: auto; + border-top: 1px solid lightgrey; + border-bottom: 1px solid lightgrey; + font-size: 16px; + display: block; + + ul.nav { + display: block; + font-size:16px; + height: 48px; + width: 80%; + margin-left: auto; + margin-right: auto; + } + + .nav ul { + margin: 0; + padding:0; + border: 1px solid #B1B1B1; + box-shadow: 1px 1px 1px 0 rgba(0,0,0,0.40); + } + + .nav a { + display:block; + color: $font-color; + text-decoration: none; + padding: 0.8em 0.3em 0.8em 0.5em; + text-transform: uppercase; + letter-spacing: 2px; + position: relative; + } + + .nav { + vertical-align: top; + display: inline-block; + } + + .nav li { + position: relative; + height:45px; + } + + .nav > li { + float: left; + margin-right: 1px; + + } + + .nav > li > a { + margin-bottom: 1px; + } + + .nav > li:last-child { + display:flex; align-items:center; + border-radius: 0 0 4px 0; + float:right; + + img { + margin-right:6px; + } + } + + .nav > li:last-child > a { + border-radius: 0 4px 0 0; + } + + .nav li li a { + margin-top: 1px; + } + + .nav li a:first-child:nth-last-child(2):before { + content: ""; + position: absolute; + height: 0; + width: 0; + border: 5px solid transparent; + top: 50% ; + right:5px; + } + + /* submenu positioning*/ + + .nav ul { + position: absolute; + white-space: nowrap; + border: 1px solid #B1B1B1; + background-color:white; + z-index: 1; + left: -99999em; + } + + .nav > li:hover > ul { + left: auto; + min-width: 100%; + } + + .nav > li li:hover > ul { + left: 100%; + margin-left: 1px; + top: -2px; + } + + .nav > li:hover > a:first-child:nth-last-child(2):before { + margin-top:-5px + } + + .nav li li > a:first-child:nth-last-child(2):before { + margin-top: -5px + } + + .nav li li:hover > a:first-child:nth-last-child(2):before { + right: 10px; + } + + } +} + +section.slider-block { + display: block; + margin-bottom: 5%; + + div.slider-content { + width: 80%; + height: 500px; + margin-left: auto; + margin-right: auto; + ul.slider-images { + li{ + //both rules are equivalent to display none + position: absolute; + visibility: hidden; + } + + li.show { + display:block; + visibility: visible; + width: 80%; + animation-name: example; + animation-duration: 4s; + } + + @keyframes example { + 0% {opacity: 0.1;} + 100% {opacity: 1;} + } + + li img { + height: 500px; + width:100%; + } + } + div.slider-control { + display: block; + position: absolute; + user-select: none; + bottom: 2%; + right: 11%; + + + .dark-left-icon { + background-color: $background-color; + height: 48px; + width: 48px; + max-height: 100%; + max-width: 100%; + } + + .light-right-icon { + background-color: $color-black; + height: 48px; + width: 48px; + max-height: 100%; + max-width: 100%; + } + } + } +} .layered-filter-wrapper { width: 25%; @@ -114,346 +445,8 @@ body { .main-container-wrapper { - width: 1200px; - margin: auto; - max-width: 100%; - padding: 20px; - padding-top: 0px; - - .header { - margin-bottom: 22px; - margin-top: 15px; - - .header-top { - margin-bottom: 16px; - display: flex; - width: 100%; - margin-left: auto; - margin-right: auto; - align-items: center; - justify-content: space-between; - - div.left-content { - display: flex; - flex-direction: row; - justify-content: flex-start; - align-items: center; - - ul.logo-container { - margin-right: 12px; - - li { - display: flex; - } - } - - ul.search-container { - li.search-group { - display: inline-flex; - justify-content: center; - align-items: center; - - .search-field { - height: 38px; - border: 2px solid $border-color; - border-radius: 3px; - border-right: none; - border-top-right-radius: 0px; - border-bottom-right-radius: 0px; - padding-left: 12px; - font-family: "Montserrat", sans-serif; - font-size: 14px; - } - - .search-icon-wrapper { - box-sizing: border-box; - height: 38px; - width: 38px; - border: 2px solid $border-color; - border-top-right-radius: 3px; - border-bottom-right-radius: 3px; - - .search-icon { - margin-top: 4px; - margin-left: 4px; - height: 24px; - width: 24px; - } - } - } - } - } - - div.right-content { - display: flex; - flex-direction: row; - justify-content: flex-end; - align-items: center; - - ul.account-dropdown-container { - float: right; - border-right: 2px solid $border-color; - - li.account-dropdown { - display: flex; - flex-direction: row; - margin-right: 14px; - - .account-icon { - cursor: pointer; - margin-right: 8px; - height: 24px; - width: 24px; - } - - .account { - cursor: pointer; - padding-top: 3px; - padding-right: 5px; - margin-left: 8px; - } - - .icon.arrow-down-icon { - cursor: pointer; - margin-top: 10px; - } - } - } - - ul.cart-dropdown { - float: right; - - li.cart-summary { - display: flex; - flex-direction: row; - margin-left: 14px; - - .cart-icon { - margin: 0; - height: 24px; - width: 24px; - margin-right: 8px; - } - .cart { - padding-top: 3px; - padding-right: 5px; - - .cart-count { - color: #0031f0; - padding-right: 3px; - } - } - - .icon.arrow-down-icon { - margin-top: 10px; - } - } - } - } - - .right-responsive { - display: none; - - ul.right-wrapper { - display: flex; - flex-direction: row; - justify-content: flex-end; - align-items: center; - - li:not(:last-child) { - margin-right: 7px; - - span.icon { - margin: 0; - height: 24px; - width: 24px; - } - } - } - } - } - - .header-bottom { - height: 48px; - margin-left: auto; - margin-right: auto; - border-top: 1px solid lightgrey; - border-bottom: 1px solid lightgrey; - font-size: 16px; - display: block; - - ul.nav { - display: block; - font-size:16px; - height: 48px; - width: 80%; - margin-left: auto; - margin-right: auto; - } - - .nav ul { - margin: 0; - padding:0; - border: 1px solid #B1B1B1; - box-shadow: 1px 1px 1px 0 rgba(0,0,0,0.40); - } - - .nav a { - display:block; - color: $font-color; - text-decoration: none; - padding: 0.8em 0.3em 0.8em 0.5em; - text-transform: uppercase; - letter-spacing: 2px; - position: relative; - } - - .nav { - vertical-align: top; - display: inline-block; - } - - .nav li { - position: relative; - height:45px; - } - - .nav > li { - float: left; - margin-right: 1px; - - } - - .nav > li > a { - margin-bottom: 1px; - } - - .nav > li:last-child { - display:flex; align-items:center; - border-radius: 0 0 4px 0; - float:right; - - img { - margin-right:6px; - } - } - - .nav > li:last-child > a { - border-radius: 0 4px 0 0; - } - - .nav li li a { - margin-top: 1px; - } - - .nav li a:first-child:nth-last-child(2):before { - content: ""; - position: absolute; - height: 0; - width: 0; - border: 5px solid transparent; - top: 50% ; - right:5px; - } - - /* submenu positioning*/ - - .nav ul { - position: absolute; - white-space: nowrap; - border: 1px solid #B1B1B1; - background-color:white; - z-index: 1; - left: -99999em; - } - - .nav > li:hover > ul { - left: auto; - min-width: 100%; - } - - .nav > li li:hover > ul { - left: 100%; - margin-left: 1px; - top: -2px; - } - - .nav > li:hover > a:first-child:nth-last-child(2):before { - margin-top:-5px - } - - .nav li li > a:first-child:nth-last-child(2):before { - margin-top: -5px - } - - .nav li li:hover > a:first-child:nth-last-child(2):before { - right: 10px; - } - - } - } - - section.slider-block { - display: block; - margin-bottom: 5%; - - div.slider-content { - width: 100%; - height: 500px; - - ul.slider-images { - - li{ - position: absolute; - visibility: hidden; - } - - li.show { - display: block; - width: 89%; - margin: auto; - visibility: visible; - animation-name: example; - animation-duration: 4s; - } - - @keyframes example { - 0% {opacity: 0.1;} - 100% {opacity: 1;} - } - - li img { - width: 100%; - height: 500px; - } - } - div.slider-control { - display: block; - position: absolute; - user-select: none; - right: 8%; - - - .dark-left-icon { - background-color: $background-color; - height: 48px; - width: 48px; - max-height: 100%; - max-width: 100%; - } - - .light-right-icon { - background-color: $color-black; - height: 48px; - width: 48px; - max-height: 100%; - max-width: 100%; - } - } - } - } - // margin-left: 10%; - // margin-right: 10%; + margin-left: 10%; + margin-right: 10%; .content-container { display: inline-block; @@ -490,10 +483,18 @@ body { .product-card { - .product-image img { - align-self: center; - width: 100%; - margin-bottom: 14px; + .product-image { + background: #F2F2F2; + margin-bottom: 10px; + // width: 380px; + // max-width: 100%; + // text-align: center; + + img { + align-self: center; + width: 100%; + margin-bottom: 14px; + } } .product-name { @@ -1003,85 +1004,168 @@ section.product-detail { div.layouter { margin-top: 20px; + margin-bottom: 20px; + display: inline-block; + width: 100%; - form { - display: flex; - flex-flow: row; - justify-content: space-between; - width: 100%; + div.product-image-group { + width: 43%; + float: left; + min-height: 1px; + position: relative; - .product-gallery-group { - margin-right: 2.5%; - width: 50%; - position: inherit; + .thumb-list { + display: flex; + flex-direction: column; + margin-right: 4px; + height: 480px; + overflow: hidden; + position: relative; + float: left; - div.product-image-group { - display:flex; - flex-direction: row; - justify-content: flex-start; + .thumb-frame { + border: 2px solid transparent; + background: #F2F2F2; + width: 120px; + height: 120px; - .side-group { - display: flex; - flex-direction: column; - margin-right: 4px; + &.active { + border-color: #979797; } - .product-hero-image { - display: block; - position: relative; - width: 50%; - - .hero-image { - object-fit: contain; - } - - - .wishlist { - position: absolute; - top: 10px; - right: 12px; - } - - .share { - position: absolute; - top: 10px; - right: 45px; - } + img { + width: 100%; + height: 100%; } } - .product-button-group { - display: inline-flex; - justify-content: space-between; - width: 40%; - // padding: 0.6%; + .gallery-control { width: 100%; - height: 45px; - .add-to-cart { - width: 100%; - border-radius: 0px; - background-color: $color-black; - } - .buy-now { - width: 100%; - border-radius: 0px; + position: absolute; + text-align: center; + cursor: pointer; + z-index: 1; + .overlay { + opacity: 0.3; + background: #000000; + width: 100%; + height: 18px; + position: absolute; + left: 0; + z-index: -1; } + .icon { + z-index: 2; + } + + &.top { + top: 0; + } + + &.bottom { + bottom: 0; + } + } + } + + .product-hero-image { + display: block; + position: relative; + background: #F2F2F2; + width: 480px; + max-height: 480px; + float: left; + + .wishlist { + position: absolute; + top: 10px; + right: 12px; } - } - .details { - width: 45%; - - .product-heading { - font-size: 24px; - color: $product-font-color; + .share { + position: absolute; + top: 10px; + right: 45px; } } } + .details { + width: 57%; + float: left; + .product-price { + margin-bottom: 14px; + } + + .product-ratings { + margin-bottom: 20px; + + .icon { + width: 16px; + height: 16px; + } + + .total-reviews { + display: inline-block; + margin-left: 15px; + } + } + + .product-heading { + font-size: 24px; + color: $product-font-color; + margin-bottom: 15px; + } + + .product-price { + margin-bottom: 15px; + font-size: 24px; + + .special-price { + font-size: 24px; + } + } + + .stock-status { + margin-bottom: 15px; + } + + .description { + margin-bottom: 15px; + padding-bottom: 15px; + border-bottom: solid 1px rgba(162, 162, 162, 0.2) + } + + .full-specifications { + td { + padding: 10px 0; + color: #5E5E5E; + + &:first-child { + padding-right: 40px; + } + } + } + + .accordian .accordian-header { + font-size: 16px; + padding-left: 0; + font-weight: 600; + } + + .attributes { + display: block; + width: 100%; + border-bottom: solid 1px rgba(162, 162, 162, 0.2); + } + + .full-description { + font-size: 16px; + } + } } } diff --git a/packages/Webkul/Shop/src/Resources/views/products/list/card.blade.php b/packages/Webkul/Shop/src/Resources/views/products/list/card.blade.php index 4a8597386..fcf42cf63 100644 --- a/packages/Webkul/Shop/src/Resources/views/products/list/card.blade.php +++ b/packages/Webkul/Shop/src/Resources/views/products/list/card.blade.php @@ -1,7 +1,12 @@
+ + @inject ('productImageHelper', 'Webkul\Product\Product\ProductImage') + + getProductBaseImage($product); ?> +
- +
diff --git a/packages/Webkul/Shop/src/Resources/views/products/view.blade.php b/packages/Webkul/Shop/src/Resources/views/products/view.blade.php index ba51d2941..1f53659fc 100644 --- a/packages/Webkul/Shop/src/Resources/views/products/view.blade.php +++ b/packages/Webkul/Shop/src/Resources/views/products/view.blade.php @@ -8,7 +8,7 @@
- {{ dd(session()->getId()) }} + {{-- {{ dd(session()->getId()) }} --}}
@csrf() diff --git a/packages/Webkul/Shop/src/Resources/views/products/view/configurable-options.blade.php b/packages/Webkul/Shop/src/Resources/views/products/view/configurable-options.blade.php index fceefd15f..1b545815c 100644 --- a/packages/Webkul/Shop/src/Resources/views/products/view/configurable-options.blade.php +++ b/packages/Webkul/Shop/src/Resources/views/products/view/configurable-options.blade.php @@ -16,7 +16,7 @@ @@ -43,10 +43,14 @@ selectedProductId: '', - simpleProduct: null + simpleProduct: null, + + galleryImages: [] }), created () { + this.galleryImages = galleryImages.slice(0) + var config = @json($config); var childAttributes = this.childAttributes, @@ -228,7 +232,17 @@ }, changeProductImages () { - console.log(this.config.variant_images[this.simpleProduct]) + galleryImages.splice(0, galleryImages.length) + + this.galleryImages.forEach(function(image) { + galleryImages.push(image) + }); + + if(this.simpleProduct) { + this.config.variant_images[this.simpleProduct].forEach(function(image) { + galleryImages.unshift(image) + }); + } }, } diff --git a/packages/Webkul/Shop/src/Resources/views/products/view/gallery.blade.php b/packages/Webkul/Shop/src/Resources/views/products/view/gallery.blade.php index 7004fbdaf..acd1e6dbc 100644 --- a/packages/Webkul/Shop/src/Resources/views/products/view/gallery.blade.php +++ b/packages/Webkul/Shop/src/Resources/views/products/view/gallery.blade.php @@ -1,42 +1,103 @@ -
-
+@inject ('productImageHelper', 'Webkul\Product\Product\ProductImage') -
- - - - -
+getGalleryImages($product); ?> -
- - - -
-
-
+
- + - + @include ('shop::products.add-to') - - - {{-- - - - - --}} - - {{-- {{ dd(unserialize(Cookie::get('session_c'))) }} --}} -
@push('scripts') + + diff --git a/packages/Webkul/Ui/src/Resources/assets/images/down-arrow-white.svg b/packages/Webkul/Ui/src/Resources/assets/images/down-arrow-white.svg new file mode 100644 index 000000000..b80e0ae72 --- /dev/null +++ b/packages/Webkul/Ui/src/Resources/assets/images/down-arrow-white.svg @@ -0,0 +1,10 @@ + + + + down-arrow + Created with Sketch. + + + + + \ No newline at end of file diff --git a/packages/Webkul/Ui/src/Resources/assets/images/up-arrow-white.svg b/packages/Webkul/Ui/src/Resources/assets/images/up-arrow-white.svg new file mode 100644 index 000000000..468ad116f --- /dev/null +++ b/packages/Webkul/Ui/src/Resources/assets/images/up-arrow-white.svg @@ -0,0 +1,15 @@ + + + + up-arrow + Created with Sketch. + + + + + + + + + + \ No newline at end of file diff --git a/packages/Webkul/Ui/src/Resources/assets/sass/app.scss b/packages/Webkul/Ui/src/Resources/assets/sass/app.scss index 5b8623280..4eb26ee50 100644 --- a/packages/Webkul/Ui/src/Resources/assets/sass/app.scss +++ b/packages/Webkul/Ui/src/Resources/assets/sass/app.scss @@ -993,6 +993,7 @@ h2 { background-image: url("../images/placeholder-icon.svg"); background-repeat: no-repeat; background-position: center; + margin-bottom: 20px; img.preview { width: 100%; diff --git a/packages/Webkul/Ui/src/Resources/assets/sass/icons.scss b/packages/Webkul/Ui/src/Resources/assets/sass/icons.scss index 75a8828e5..b87fec187 100644 --- a/packages/Webkul/Ui/src/Resources/assets/sass/icons.scss +++ b/packages/Webkul/Ui/src/Resources/assets/sass/icons.scss @@ -164,6 +164,18 @@ height: 24px; } +.arrow-down-white-icon { + background-image: url("../images/down-arrow-white.svg"); + width: 17px; + height: 13px; +} + +.arrow-up-white-icon { + background-image: url("../images/up-arrow-white.svg"); + width: 17px; + height: 13px; +} + .active { .dashboard-icon { background-image: url("../images/Icon-Dashboard-Active.svg"); diff --git a/packages/Webkul/User/src/Bouncer.php b/packages/Webkul/User/src/Bouncer.php index 0a22518d9..4d3196e31 100644 --- a/packages/Webkul/User/src/Bouncer.php +++ b/packages/Webkul/User/src/Bouncer.php @@ -4,6 +4,20 @@ namespace Webkul\User; class Bouncer { + /** + * Checks if user has permission for certain action + * + * @param String $permission + * @return Void + */ + public static function hasPermission($permission) + { + if(!auth()->check() || !auth()->user()->hasPermission($permission)) + return false; + + return true; + } + /** * Checks if user allowed or not for certain action * diff --git a/public/themes/default/assets/css/shop.css b/public/themes/default/assets/css/shop.css index de10e971c..4b648ebe8 100644 --- a/public/themes/default/assets/css/shop.css +++ b/public/themes/default/assets/css/shop.css @@ -27,9 +27,6 @@ body { margin: 0; padding: 0; font-weight: 500; - position: relative; - min-height: 100%; - top: 0px; color: #242424; font-size: 16px; } @@ -38,6 +35,411 @@ body { font-family: "Montserrat", sans-serif; } +.header { + margin-top: 16px; + margin-bottom: 21px; +} + +.header .header-top { + margin-bottom: 16px; + display: -webkit-box; + display: -ms-flexbox; + display: flex; + max-width: 80%; + width: 100%; + margin-left: auto; + margin-right: auto; + -webkit-box-align: center; + -ms-flex-align: center; + align-items: center; + -webkit-box-pack: justify; + -ms-flex-pack: justify; + justify-content: space-between; +} + +.header .header-top div.left-content { + display: -webkit-box; + display: -ms-flexbox; + display: flex; + -webkit-box-orient: horizontal; + -webkit-box-direction: normal; + -ms-flex-direction: row; + flex-direction: row; + -webkit-box-pack: start; + -ms-flex-pack: start; + justify-content: flex-start; + -webkit-box-align: center; + -ms-flex-align: center; + align-items: center; +} + +.header .header-top div.left-content ul.logo-container { + margin-right: 12px; +} + +.header .header-top div.left-content ul.logo-container li { + display: -webkit-box; + display: -ms-flexbox; + display: flex; +} + +.header .header-top div.left-content ul.search-container li.search-group { + display: -webkit-inline-box; + display: -ms-inline-flexbox; + display: inline-flex; + -webkit-box-pack: center; + -ms-flex-pack: center; + justify-content: center; + -webkit-box-align: center; + -ms-flex-align: center; + align-items: center; +} + +.header .header-top div.left-content ul.search-container li.search-group .search-field { + height: 38px; + border: 2px solid #c7c7c7; + border-radius: 3px; + border-right: none; + border-top-right-radius: 0px; + border-bottom-right-radius: 0px; + padding-left: 12px; + font-family: "Montserrat", sans-serif; + font-size: 14px; +} + +.header .header-top div.left-content ul.search-container li.search-group .search-icon-wrapper { + -webkit-box-sizing: border-box; + box-sizing: border-box; + height: 38px; + width: 38px; + border: 2px solid #c7c7c7; + border-top-right-radius: 3px; + border-bottom-right-radius: 3px; +} + +.header .header-top div.left-content ul.search-container li.search-group .search-icon-wrapper .search-icon { + margin-top: 4px; + margin-left: 4px; + height: 24px; + width: 24px; +} + +.header .header-top div.right-content { + display: -webkit-box; + display: -ms-flexbox; + display: flex; + -webkit-box-orient: horizontal; + -webkit-box-direction: normal; + -ms-flex-direction: row; + flex-direction: row; + -webkit-box-pack: end; + -ms-flex-pack: end; + justify-content: flex-end; + -webkit-box-align: center; + -ms-flex-align: center; + align-items: center; +} + +.header .header-top div.right-content ul.account-dropdown-container { + float: right; + border-right: 2px solid #c7c7c7; +} + +.header .header-top div.right-content ul.account-dropdown-container li.account-dropdown { + display: -webkit-box; + display: -ms-flexbox; + display: flex; + -webkit-box-orient: horizontal; + -webkit-box-direction: normal; + -ms-flex-direction: row; + flex-direction: row; + margin-right: 14px; +} + +.header .header-top div.right-content ul.account-dropdown-container li.account-dropdown .account-icon { + cursor: pointer; + margin-right: 8px; + height: 24px; + width: 24px; +} + +.header .header-top div.right-content ul.account-dropdown-container li.account-dropdown .account { + cursor: pointer; + padding-top: 3px; + padding-right: 5px; + margin-left: 8px; +} + +.header .header-top div.right-content ul.account-dropdown-container li.account-dropdown .icon.arrow-down-icon { + cursor: pointer; + margin-top: 10px; +} + +.header .header-top div.right-content ul.cart-dropdown { + float: right; +} + +.header .header-top div.right-content ul.cart-dropdown li.cart-summary { + display: -webkit-box; + display: -ms-flexbox; + display: flex; + -webkit-box-orient: horizontal; + -webkit-box-direction: normal; + -ms-flex-direction: row; + flex-direction: row; + margin-left: 14px; +} + +.header .header-top div.right-content ul.cart-dropdown li.cart-summary .cart-icon { + margin: 0; + height: 24px; + width: 24px; + margin-right: 8px; +} + +.header .header-top div.right-content ul.cart-dropdown li.cart-summary .cart { + padding-top: 3px; + padding-right: 5px; +} + +.header .header-top div.right-content ul.cart-dropdown li.cart-summary .cart .cart-count { + color: #0031f0; + padding-right: 3px; +} + +.header .header-top div.right-content ul.cart-dropdown li.cart-summary .icon.arrow-down-icon { + margin-top: 10px; +} + +.header .header-top .right-responsive { + display: none; +} + +.header .header-top .right-responsive ul.right-wrapper { + display: -webkit-box; + display: -ms-flexbox; + display: flex; + -webkit-box-orient: horizontal; + -webkit-box-direction: normal; + -ms-flex-direction: row; + flex-direction: row; + -webkit-box-pack: end; + -ms-flex-pack: end; + justify-content: flex-end; + -webkit-box-align: center; + -ms-flex-align: center; + align-items: center; +} + +.header .header-top .right-responsive ul.right-wrapper li:not(:last-child) { + margin-right: 7px; +} + +.header .header-top .right-responsive ul.right-wrapper li:not(:last-child) span.icon { + margin: 0; + height: 24px; + width: 24px; +} + +.header .header-bottom { + height: 48px; + margin-left: auto; + margin-right: auto; + border-top: 1px solid lightgrey; + border-bottom: 1px solid lightgrey; + font-size: 16px; + display: block; + /* submenu positioning*/ +} + +.header .header-bottom ul.nav { + display: block; + font-size: 16px; + height: 48px; + width: 80%; + margin-left: auto; + margin-right: auto; +} + +.header .header-bottom .nav ul { + margin: 0; + padding: 0; + border: 1px solid #B1B1B1; + -webkit-box-shadow: 1px 1px 1px 0 rgba(0, 0, 0, 0.4); + box-shadow: 1px 1px 1px 0 rgba(0, 0, 0, 0.4); +} + +.header .header-bottom .nav a { + display: block; + color: #242424; + text-decoration: none; + padding: 0.8em 0.3em 0.8em 0.5em; + text-transform: uppercase; + letter-spacing: 2px; + position: relative; +} + +.header .header-bottom .nav { + vertical-align: top; + display: inline-block; +} + +.header .header-bottom .nav li { + position: relative; + height: 45px; +} + +.header .header-bottom .nav > li { + float: left; + margin-right: 1px; +} + +.header .header-bottom .nav > li > a { + margin-bottom: 1px; +} + +.header .header-bottom .nav > li:last-child { + display: -webkit-box; + display: -ms-flexbox; + display: flex; + -webkit-box-align: center; + -ms-flex-align: center; + align-items: center; + border-radius: 0 0 4px 0; + float: right; +} + +.header .header-bottom .nav > li:last-child img { + margin-right: 6px; +} + +.header .header-bottom .nav > li:last-child > a { + border-radius: 0 4px 0 0; +} + +.header .header-bottom .nav li li a { + margin-top: 1px; +} + +.header .header-bottom .nav li a:first-child:nth-last-child(2):before { + content: ""; + position: absolute; + height: 0; + width: 0; + border: 5px solid transparent; + top: 50%; + right: 5px; +} + +.header .header-bottom .nav ul { + position: absolute; + white-space: nowrap; + border: 1px solid #B1B1B1; + background-color: white; + z-index: 1; + left: -99999em; +} + +.header .header-bottom .nav > li:hover > ul { + left: auto; + min-width: 100%; +} + +.header .header-bottom .nav > li li:hover > ul { + left: 100%; + margin-left: 1px; + top: -2px; +} + +.header .header-bottom .nav > li:hover > a:first-child:nth-last-child(2):before { + margin-top: -5px; +} + +.header .header-bottom .nav li li > a:first-child:nth-last-child(2):before { + margin-top: -5px; +} + +.header .header-bottom .nav li li:hover > a:first-child:nth-last-child(2):before { + right: 10px; +} + +section.slider-block { + display: block; + margin-bottom: 5%; +} + +section.slider-block div.slider-content { + width: 80%; + height: 500px; + margin-left: auto; + margin-right: auto; +} + +section.slider-block div.slider-content ul.slider-images li { + position: absolute; + visibility: hidden; +} + +section.slider-block div.slider-content ul.slider-images li.show { + display: block; + visibility: visible; + width: 80%; + -webkit-animation-name: example; + animation-name: example; + -webkit-animation-duration: 4s; + animation-duration: 4s; +} + +@-webkit-keyframes example { + 0% { + opacity: 0.1; + } + 100% { + opacity: 1; + } +} + +@keyframes example { + 0% { + opacity: 0.1; + } + 100% { + opacity: 1; + } +} + +section.slider-block div.slider-content ul.slider-images li img { + height: 500px; + width: 100%; +} + +section.slider-block div.slider-content div.slider-control { + display: block; + position: absolute; + -webkit-user-select: none; + -moz-user-select: none; + -ms-user-select: none; + user-select: none; + bottom: 2%; + right: 11%; +} + +section.slider-block div.slider-content div.slider-control .dark-left-icon { + background-color: #ffffff; + height: 48px; + width: 48px; + max-height: 100%; + max-width: 100%; +} + +section.slider-block div.slider-content div.slider-control .light-right-icon { + background-color: black; + height: 48px; + width: 48px; + max-height: 100%; + max-width: 100%; +} + .layered-filter-wrapper { width: 25%; float: left; @@ -124,413 +526,8 @@ body { } .main-container-wrapper { - width: 1200px; - margin: auto; - max-width: 100%; - padding: 20px; - padding-top: 0px; -} - -.main-container-wrapper .header { - margin-bottom: 22px; - margin-top: 15px; -} - -.main-container-wrapper .header .header-top { - margin-bottom: 16px; - display: -webkit-box; - display: -ms-flexbox; - display: flex; - width: 100%; - margin-left: auto; - margin-right: auto; - -webkit-box-align: center; - -ms-flex-align: center; - align-items: center; - -webkit-box-pack: justify; - -ms-flex-pack: justify; - justify-content: space-between; -} - -.main-container-wrapper .header .header-top div.left-content { - display: -webkit-box; - display: -ms-flexbox; - display: flex; - -webkit-box-orient: horizontal; - -webkit-box-direction: normal; - -ms-flex-direction: row; - flex-direction: row; - -webkit-box-pack: start; - -ms-flex-pack: start; - justify-content: flex-start; - -webkit-box-align: center; - -ms-flex-align: center; - align-items: center; -} - -.main-container-wrapper .header .header-top div.left-content ul.logo-container { - margin-right: 12px; -} - -.main-container-wrapper .header .header-top div.left-content ul.logo-container li { - display: -webkit-box; - display: -ms-flexbox; - display: flex; -} - -.main-container-wrapper .header .header-top div.left-content ul.search-container li.search-group { - display: -webkit-inline-box; - display: -ms-inline-flexbox; - display: inline-flex; - -webkit-box-pack: center; - -ms-flex-pack: center; - justify-content: center; - -webkit-box-align: center; - -ms-flex-align: center; - align-items: center; -} - -.main-container-wrapper .header .header-top div.left-content ul.search-container li.search-group .search-field { - height: 38px; - border: 2px solid #c7c7c7; - border-radius: 3px; - border-right: none; - border-top-right-radius: 0px; - border-bottom-right-radius: 0px; - padding-left: 12px; - font-family: "Montserrat", sans-serif; - font-size: 14px; -} - -.main-container-wrapper .header .header-top div.left-content ul.search-container li.search-group .search-icon-wrapper { - -webkit-box-sizing: border-box; - box-sizing: border-box; - height: 38px; - width: 38px; - border: 2px solid #c7c7c7; - border-top-right-radius: 3px; - border-bottom-right-radius: 3px; -} - -.main-container-wrapper .header .header-top div.left-content ul.search-container li.search-group .search-icon-wrapper .search-icon { - margin-top: 4px; - margin-left: 4px; - height: 24px; - width: 24px; -} - -.main-container-wrapper .header .header-top div.right-content { - display: -webkit-box; - display: -ms-flexbox; - display: flex; - -webkit-box-orient: horizontal; - -webkit-box-direction: normal; - -ms-flex-direction: row; - flex-direction: row; - -webkit-box-pack: end; - -ms-flex-pack: end; - justify-content: flex-end; - -webkit-box-align: center; - -ms-flex-align: center; - align-items: center; -} - -.main-container-wrapper .header .header-top div.right-content ul.account-dropdown-container { - float: right; - border-right: 2px solid #c7c7c7; -} - -.main-container-wrapper .header .header-top div.right-content ul.account-dropdown-container li.account-dropdown { - display: -webkit-box; - display: -ms-flexbox; - display: flex; - -webkit-box-orient: horizontal; - -webkit-box-direction: normal; - -ms-flex-direction: row; - flex-direction: row; - margin-right: 14px; -} - -.main-container-wrapper .header .header-top div.right-content ul.account-dropdown-container li.account-dropdown .account-icon { - cursor: pointer; - margin-right: 8px; - height: 24px; - width: 24px; -} - -.main-container-wrapper .header .header-top div.right-content ul.account-dropdown-container li.account-dropdown .account { - cursor: pointer; - padding-top: 3px; - padding-right: 5px; - margin-left: 8px; -} - -.main-container-wrapper .header .header-top div.right-content ul.account-dropdown-container li.account-dropdown .icon.arrow-down-icon { - cursor: pointer; - margin-top: 10px; -} - -.main-container-wrapper .header .header-top div.right-content ul.cart-dropdown { - float: right; -} - -.main-container-wrapper .header .header-top div.right-content ul.cart-dropdown li.cart-summary { - display: -webkit-box; - display: -ms-flexbox; - display: flex; - -webkit-box-orient: horizontal; - -webkit-box-direction: normal; - -ms-flex-direction: row; - flex-direction: row; - margin-left: 14px; -} - -.main-container-wrapper .header .header-top div.right-content ul.cart-dropdown li.cart-summary .cart-icon { - margin: 0; - height: 24px; - width: 24px; - margin-right: 8px; -} - -.main-container-wrapper .header .header-top div.right-content ul.cart-dropdown li.cart-summary .cart { - padding-top: 3px; - padding-right: 5px; -} - -.main-container-wrapper .header .header-top div.right-content ul.cart-dropdown li.cart-summary .cart .cart-count { - color: #0031f0; - padding-right: 3px; -} - -.main-container-wrapper .header .header-top div.right-content ul.cart-dropdown li.cart-summary .icon.arrow-down-icon { - margin-top: 10px; -} - -.main-container-wrapper .header .header-top .right-responsive { - display: none; -} - -.main-container-wrapper .header .header-top .right-responsive ul.right-wrapper { - display: -webkit-box; - display: -ms-flexbox; - display: flex; - -webkit-box-orient: horizontal; - -webkit-box-direction: normal; - -ms-flex-direction: row; - flex-direction: row; - -webkit-box-pack: end; - -ms-flex-pack: end; - justify-content: flex-end; - -webkit-box-align: center; - -ms-flex-align: center; - align-items: center; -} - -.main-container-wrapper .header .header-top .right-responsive ul.right-wrapper li:not(:last-child) { - margin-right: 7px; -} - -.main-container-wrapper .header .header-top .right-responsive ul.right-wrapper li:not(:last-child) span.icon { - margin: 0; - height: 24px; - width: 24px; -} - -.main-container-wrapper .header .header-bottom { - height: 48px; - margin-left: auto; - margin-right: auto; - border-top: 1px solid lightgrey; - border-bottom: 1px solid lightgrey; - font-size: 16px; - display: block; - /* submenu positioning*/ -} - -.main-container-wrapper .header .header-bottom ul.nav { - display: block; - font-size: 16px; - height: 48px; - width: 80%; - margin-left: auto; - margin-right: auto; -} - -.main-container-wrapper .header .header-bottom .nav ul { - margin: 0; - padding: 0; - border: 1px solid #B1B1B1; - -webkit-box-shadow: 1px 1px 1px 0 rgba(0, 0, 0, 0.4); - box-shadow: 1px 1px 1px 0 rgba(0, 0, 0, 0.4); -} - -.main-container-wrapper .header .header-bottom .nav a { - display: block; - color: #242424; - text-decoration: none; - padding: 0.8em 0.3em 0.8em 0.5em; - text-transform: uppercase; - letter-spacing: 2px; - position: relative; -} - -.main-container-wrapper .header .header-bottom .nav { - vertical-align: top; - display: inline-block; -} - -.main-container-wrapper .header .header-bottom .nav li { - position: relative; - height: 45px; -} - -.main-container-wrapper .header .header-bottom .nav > li { - float: left; - margin-right: 1px; -} - -.main-container-wrapper .header .header-bottom .nav > li > a { - margin-bottom: 1px; -} - -.main-container-wrapper .header .header-bottom .nav > li:last-child { - display: -webkit-box; - display: -ms-flexbox; - display: flex; - -webkit-box-align: center; - -ms-flex-align: center; - align-items: center; - border-radius: 0 0 4px 0; - float: right; -} - -.main-container-wrapper .header .header-bottom .nav > li:last-child img { - margin-right: 6px; -} - -.main-container-wrapper .header .header-bottom .nav > li:last-child > a { - border-radius: 0 4px 0 0; -} - -.main-container-wrapper .header .header-bottom .nav li li a { - margin-top: 1px; -} - -.main-container-wrapper .header .header-bottom .nav li a:first-child:nth-last-child(2):before { - content: ""; - position: absolute; - height: 0; - width: 0; - border: 5px solid transparent; - top: 50%; - right: 5px; -} - -.main-container-wrapper .header .header-bottom .nav ul { - position: absolute; - white-space: nowrap; - border: 1px solid #B1B1B1; - background-color: white; - z-index: 1; - left: -99999em; -} - -.main-container-wrapper .header .header-bottom .nav > li:hover > ul { - left: auto; - min-width: 100%; -} - -.main-container-wrapper .header .header-bottom .nav > li li:hover > ul { - left: 100%; - margin-left: 1px; - top: -2px; -} - -.main-container-wrapper .header .header-bottom .nav > li:hover > a:first-child:nth-last-child(2):before { - margin-top: -5px; -} - -.main-container-wrapper .header .header-bottom .nav li li > a:first-child:nth-last-child(2):before { - margin-top: -5px; -} - -.main-container-wrapper .header .header-bottom .nav li li:hover > a:first-child:nth-last-child(2):before { - right: 10px; -} - -.main-container-wrapper section.slider-block { - display: block; - margin-bottom: 5%; -} - -.main-container-wrapper section.slider-block div.slider-content { - width: 100%; - height: 500px; -} - -.main-container-wrapper section.slider-block div.slider-content ul.slider-images li { - position: absolute; - visibility: hidden; -} - -.main-container-wrapper section.slider-block div.slider-content ul.slider-images li.show { - display: block; - width: 89%; - margin: auto; - visibility: visible; - -webkit-animation-name: example; - animation-name: example; - -webkit-animation-duration: 4s; - animation-duration: 4s; -} - -@-webkit-keyframes example { - 0% { - opacity: 0.1; - } - 100% { - opacity: 1; - } -} - -@keyframes example { - 0% { - opacity: 0.1; - } - 100% { - opacity: 1; - } -} - -.main-container-wrapper section.slider-block div.slider-content ul.slider-images li img { - width: 100%; - height: 500px; -} - -.main-container-wrapper section.slider-block div.slider-content div.slider-control { - display: block; - position: absolute; - -webkit-user-select: none; - -moz-user-select: none; - -ms-user-select: none; - user-select: none; - right: 8%; -} - -.main-container-wrapper section.slider-block div.slider-content div.slider-control .dark-left-icon { - background-color: #ffffff; - height: 48px; - width: 48px; - max-height: 100%; - max-width: 100%; -} - -.main-container-wrapper section.slider-block div.slider-content div.slider-control .light-right-icon { - background-color: black; - height: 48px; - width: 48px; - max-height: 100%; - max-width: 100%; + margin-left: 10%; + margin-right: 10%; } .main-container-wrapper .content-container { @@ -573,6 +570,11 @@ body { justify-content: center; } +.main-container-wrapper .product-card .product-image { + background: #F2F2F2; + margin-bottom: 10px; +} + .main-container-wrapper .product-card .product-image img { -ms-flex-item-align: center; align-self: center; @@ -1109,42 +1111,19 @@ section.product-detail div.category-breadcrumbs { section.product-detail div.layouter { margin-top: 20px; -} - -section.product-detail div.layouter form { - display: -webkit-box; - display: -ms-flexbox; - display: flex; - -webkit-box-orient: horizontal; - -webkit-box-direction: normal; - -ms-flex-flow: row; - flex-flow: row; - -webkit-box-pack: justify; - -ms-flex-pack: justify; - justify-content: space-between; + margin-bottom: 20px; + display: inline-block; width: 100%; } -section.product-detail div.layouter form .product-gallery-group { - margin-right: 2.5%; - width: 50%; - position: inherit; +section.product-detail div.layouter div.product-image-group { + width: 43%; + float: left; + min-height: 1px; + position: relative; } -section.product-detail div.layouter form .product-gallery-group div.product-image-group { - display: -webkit-box; - display: -ms-flexbox; - display: flex; - -webkit-box-orient: horizontal; - -webkit-box-direction: normal; - -ms-flex-direction: row; - flex-direction: row; - -webkit-box-pack: start; - -ms-flex-pack: start; - justify-content: flex-start; -} - -section.product-detail div.layouter form .product-gallery-group div.product-image-group .side-group { +section.product-detail div.layouter div.product-image-group .thumb-list { display: -webkit-box; display: -ms-flexbox; display: flex; @@ -1153,61 +1132,150 @@ section.product-detail div.layouter form .product-gallery-group div.product-imag -ms-flex-direction: column; flex-direction: column; margin-right: 4px; + height: 480px; + overflow: hidden; + position: relative; + float: left; } -section.product-detail div.layouter form .product-gallery-group div.product-image-group .product-hero-image { +section.product-detail div.layouter div.product-image-group .thumb-list .thumb-frame { + border: 2px solid transparent; + background: #F2F2F2; + width: 120px; + height: 120px; +} + +section.product-detail div.layouter div.product-image-group .thumb-list .thumb-frame.active { + border-color: #979797; +} + +section.product-detail div.layouter div.product-image-group .thumb-list .thumb-frame img { + width: 100%; + height: 100%; +} + +section.product-detail div.layouter div.product-image-group .thumb-list .gallery-control { + width: 100%; + position: absolute; + text-align: center; + cursor: pointer; + z-index: 1; +} + +section.product-detail div.layouter div.product-image-group .thumb-list .gallery-control .overlay { + opacity: 0.3; + background: #000000; + width: 100%; + height: 18px; + position: absolute; + left: 0; + z-index: -1; +} + +section.product-detail div.layouter div.product-image-group .thumb-list .gallery-control .icon { + z-index: 2; +} + +section.product-detail div.layouter div.product-image-group .thumb-list .gallery-control.top { + top: 0; +} + +section.product-detail div.layouter div.product-image-group .thumb-list .gallery-control.bottom { + bottom: 0; +} + +section.product-detail div.layouter div.product-image-group .product-hero-image { display: block; position: relative; - width: 50%; + background: #F2F2F2; + width: 480px; + max-height: 480px; + float: left; } -section.product-detail div.layouter form .product-gallery-group div.product-image-group .product-hero-image .hero-image { - -o-object-fit: contain; - object-fit: contain; -} - -section.product-detail div.layouter form .product-gallery-group div.product-image-group .product-hero-image .wishlist { +section.product-detail div.layouter div.product-image-group .product-hero-image .wishlist { position: absolute; top: 10px; right: 12px; } -section.product-detail div.layouter form .product-gallery-group div.product-image-group .product-hero-image .share { +section.product-detail div.layouter div.product-image-group .product-hero-image .share { position: absolute; top: 10px; right: 45px; } -section.product-detail div.layouter form .product-gallery-group .product-button-group { - display: -webkit-inline-box; - display: -ms-inline-flexbox; - display: inline-flex; - -webkit-box-pack: justify; - -ms-flex-pack: justify; - justify-content: space-between; - width: 40%; - width: 100%; - height: 45px; +section.product-detail div.layouter .details { + width: 57%; + float: left; } -section.product-detail div.layouter form .product-gallery-group .product-button-group .add-to-cart { - width: 100%; - border-radius: 0px; - background-color: black; +section.product-detail div.layouter .details .product-price { + margin-bottom: 14px; } -section.product-detail div.layouter form .product-gallery-group .product-button-group .buy-now { - width: 100%; - border-radius: 0px; +section.product-detail div.layouter .details .product-ratings { + margin-bottom: 20px; } -section.product-detail div.layouter form .details { - width: 45%; +section.product-detail div.layouter .details .product-ratings .icon { + width: 16px; + height: 16px; } -section.product-detail div.layouter form .details .product-heading { +section.product-detail div.layouter .details .product-ratings .total-reviews { + display: inline-block; + margin-left: 15px; +} + +section.product-detail div.layouter .details .product-heading { font-size: 24px; color: #242424; + margin-bottom: 15px; +} + +section.product-detail div.layouter .details .product-price { + margin-bottom: 15px; + font-size: 24px; +} + +section.product-detail div.layouter .details .product-price .special-price { + font-size: 24px; +} + +section.product-detail div.layouter .details .stock-status { + margin-bottom: 15px; +} + +section.product-detail div.layouter .details .description { + margin-bottom: 15px; + padding-bottom: 15px; + border-bottom: solid 1px rgba(162, 162, 162, 0.2); +} + +section.product-detail div.layouter .details .full-specifications td { + padding: 10px 0; + color: #5E5E5E; +} + +section.product-detail div.layouter .details .full-specifications td:first-child { + padding-right: 40px; +} + +section.product-detail div.layouter .details .accordian .accordian-header { + font-size: 16px; + padding-left: 0; + font-weight: 600; +} + +section.product-detail div.layouter .details .attributes { + display: block; + width: 100%; + border-bottom: solid 1px rgba(162, 162, 162, 0.2); +} + +section.product-detail div.layouter .details .full-description { + font-size: 16px; } .rating-reviews .rating-header { diff --git a/public/themes/default/assets/images/product/large-product-placeholder.png b/public/themes/default/assets/images/product/large-product-placeholder.png new file mode 100644 index 000000000..e839910cc Binary files /dev/null and b/public/themes/default/assets/images/product/large-product-placeholder.png differ diff --git a/public/themes/default/assets/images/product/meduim-product-placeholder.png b/public/themes/default/assets/images/product/meduim-product-placeholder.png new file mode 100644 index 000000000..0aa66dc52 Binary files /dev/null and b/public/themes/default/assets/images/product/meduim-product-placeholder.png differ diff --git a/public/themes/default/assets/images/product/small-product-placeholder.png b/public/themes/default/assets/images/product/small-product-placeholder.png new file mode 100644 index 000000000..8526a85f5 Binary files /dev/null and b/public/themes/default/assets/images/product/small-product-placeholder.png differ