├── public
    ├── favicon.ico
    ├── robots.txt
    ├── .htaccess
    └── index.php
├── database
    ├── .gitignore
    ├── seeds
    │   └── DatabaseSeeder.php
    ├── factories
    │   └── UserFactory.php
    └── migrations
    │   ├── 2014_10_12_100000_create_password_resets_table.php
    │   └── 2014_10_12_000000_create_users_table.php
├── bootstrap
    ├── cache
    │   └── .gitignore
    └── app.php
├── resources
    ├── assets
    │   ├── js
    │   │   ├── .gitignore
    │   │   ├── config-example.js
    │   │   ├── components
    │   │   │   ├── ExampleComponent.vue
    │   │   │   ├── VariantSelectors.vue
    │   │   │   ├── LineItem.vue
    │   │   │   ├── Cart.vue
    │   │   │   ├── Product.vue
    │   │   │   ├── CustomerAuthWithMutation.vue
    │   │   │   └── App.vue
    │   │   ├── queries
    │   │   │   ├── auth.js
    │   │   │   └── checkout.js
    │   │   ├── shopify.js
    │   │   ├── app.js
    │   │   └── bootstrap.js
    │   └── sass
    │   │   ├── _variables.scss
    │   │   ├── app.scss
    │   │   └── example.scss
    ├── lang
    │   └── en
    │   │   ├── pagination.php
    │   │   ├── auth.php
    │   │   ├── passwords.php
    │   │   └── validation.php
    └── views
    │   └── welcome.blade.php
├── storage
    ├── logs
    │   └── .gitignore
    ├── app
    │   ├── public
    │   │   └── .gitignore
    │   └── .gitignore
    └── framework
    │   ├── cache
    │       └── .gitignore
    │   ├── testing
    │       └── .gitignore
    │   ├── views
    │       └── .gitignore
    │   ├── sessions
    │       └── .gitignore
    │   └── .gitignore
├── .gitattributes
├── tests
    ├── TestCase.php
    ├── Unit
    │   └── ExampleTest.php
    ├── Feature
    │   └── ExampleTest.php
    └── CreatesApplication.php
├── .gitignore
├── app
    ├── Http
    │   ├── Middleware
    │   │   ├── EncryptCookies.php
    │   │   ├── VerifyCsrfToken.php
    │   │   ├── TrimStrings.php
    │   │   ├── TrustProxies.php
    │   │   └── RedirectIfAuthenticated.php
    │   ├── Controllers
    │   │   ├── Controller.php
    │   │   └── Auth
    │   │   │   ├── ForgotPasswordController.php
    │   │   │   ├── LoginController.php
    │   │   │   ├── ResetPasswordController.php
    │   │   │   └── RegisterController.php
    │   └── Kernel.php
    ├── Providers
    │   ├── BroadcastServiceProvider.php
    │   ├── AppServiceProvider.php
    │   ├── AuthServiceProvider.php
    │   ├── EventServiceProvider.php
    │   └── RouteServiceProvider.php
    ├── User.php
    ├── Console
    │   └── Kernel.php
    └── Exceptions
    │   └── Handler.php
├── routes
    ├── web.php
    ├── channels.php
    ├── api.php
    └── console.php
├── server.php
├── webpack.mix.js
├── .env.example
├── config
    ├── view.php
    ├── services.php
    ├── hashing.php
    ├── broadcasting.php
    ├── filesystems.php
    ├── logging.php
    ├── queue.php
    ├── cache.php
    ├── auth.php
    ├── database.php
    ├── mail.php
    ├── session.php
    └── app.php
├── phpunit.xml
├── package.json
├── README.md
├── composer.json
└── artisan


/public/favicon.ico:
--------------------------------------------------------------------------------
1 | 


--------------------------------------------------------------------------------
/database/.gitignore:
--------------------------------------------------------------------------------
1 | *.sqlite
2 | 


--------------------------------------------------------------------------------
/bootstrap/cache/.gitignore:
--------------------------------------------------------------------------------
1 | *
2 | !.gitignore
3 | 


--------------------------------------------------------------------------------
/resources/assets/js/.gitignore:
--------------------------------------------------------------------------------
1 | /config.js
2 | 


--------------------------------------------------------------------------------
/storage/logs/.gitignore:
--------------------------------------------------------------------------------
1 | *
2 | !.gitignore
3 | 


--------------------------------------------------------------------------------
/public/robots.txt:
--------------------------------------------------------------------------------
1 | User-agent: *
2 | Disallow:
3 | 


--------------------------------------------------------------------------------
/storage/app/public/.gitignore:
--------------------------------------------------------------------------------
1 | *
2 | !.gitignore
3 | 


--------------------------------------------------------------------------------
/storage/app/.gitignore:
--------------------------------------------------------------------------------
1 | *
2 | !public/
3 | !.gitignore
4 | 


--------------------------------------------------------------------------------
/storage/framework/cache/.gitignore:
--------------------------------------------------------------------------------
1 | *
2 | !.gitignore
3 | 


--------------------------------------------------------------------------------
/storage/framework/testing/.gitignore:
--------------------------------------------------------------------------------
1 | *
2 | !.gitignore
3 | 


--------------------------------------------------------------------------------
/storage/framework/views/.gitignore:
--------------------------------------------------------------------------------
1 | *
2 | !.gitignore
3 | 


--------------------------------------------------------------------------------
/storage/framework/sessions/.gitignore:
--------------------------------------------------------------------------------
1 | *
2 | !.gitignore
3 | 


--------------------------------------------------------------------------------
/.gitattributes:
--------------------------------------------------------------------------------
1 | * text=auto
2 | *.css linguist-vendored
3 | *.scss linguist-vendored
4 | *.js linguist-vendored
5 | CHANGELOG.md export-ignore
6 | 


--------------------------------------------------------------------------------
/storage/framework/.gitignore:
--------------------------------------------------------------------------------
1 | config.php
2 | routes.php
3 | schedule-*
4 | compiled.php
5 | services.json
6 | events.scanned.php
7 | routes.scanned.php
8 | down
9 | 


--------------------------------------------------------------------------------
/resources/assets/js/config-example.js:
--------------------------------------------------------------------------------
1 | export const SHOPIFY_STOREFRONT_ACCESS_TOKEN = "ea..your-token..f67";
2 | export const SHOPIFY_STORE_URL = "your-store.myshopify.com";


--------------------------------------------------------------------------------
/resources/assets/sass/_variables.scss:
--------------------------------------------------------------------------------
1 | 
2 | // Body
3 | $body-bg: #f5f8fa;
4 | 
5 | // Typography
6 | $font-family-sans-serif: "Raleway", sans-serif;
7 | $font-size-base: 0.9rem;
8 | $line-height-base: 1.6;
9 | 


--------------------------------------------------------------------------------
/tests/TestCase.php:
--------------------------------------------------------------------------------
 1 | <?php
 2 | 
 3 | namespace Tests;
 4 | 
 5 | use Illuminate\Foundation\Testing\TestCase as BaseTestCase;
 6 | 
 7 | abstract class TestCase extends BaseTestCase
 8 | {
 9 |     use CreatesApplication;
10 | }
11 | 


--------------------------------------------------------------------------------
/.gitignore:
--------------------------------------------------------------------------------
 1 | /node_modules
 2 | /public/hot
 3 | /public/storage
 4 | /public/mix-manifest.json
 5 | /public/css/app.css
 6 | /public/js/app.js
 7 | /ressources/asssets/js/config.js
 8 | /storage/*.key
 9 | /vendor
10 | /.idea
11 | /.vscode
12 | /.vagrant
13 | Homestead.json
14 | Homestead.yaml
15 | npm-debug.log
16 | yarn-error.log
17 | .env
18 | 
19 | 


--------------------------------------------------------------------------------
/database/seeds/DatabaseSeeder.php:
--------------------------------------------------------------------------------
 1 | <?php
 2 | 
 3 | use Illuminate\Database\Seeder;
 4 | 
 5 | class DatabaseSeeder extends Seeder
 6 | {
 7 |     /**
 8 |      * Seed the application's database.
 9 |      *
10 |      * @return void
11 |      */
12 |     public function run()
13 |     {
14 |         // $this->call(UsersTableSeeder::class);
15 |     }
16 | }
17 | 


--------------------------------------------------------------------------------
/resources/assets/sass/app.scss:
--------------------------------------------------------------------------------
 1 | 
 2 | // Fonts
 3 | @import url("https://fonts.googleapis.com/css?family=Raleway:300,400,600");
 4 | 
 5 | // Variables
 6 | @import "variables";
 7 | 
 8 | // Bootstrap
 9 | @import '~bootstrap/scss/bootstrap';
10 | 
11 | .navbar-laravel {
12 |   background-color: #fff;
13 |   box-shadow: 0 2px 4px rgba(0, 0, 0, 0.04);
14 | }
15 | 
16 | @import "example";


--------------------------------------------------------------------------------
/app/Http/Middleware/EncryptCookies.php:
--------------------------------------------------------------------------------
 1 | <?php
 2 | 
 3 | namespace App\Http\Middleware;
 4 | 
 5 | use Illuminate\Cookie\Middleware\EncryptCookies as Middleware;
 6 | 
 7 | class EncryptCookies extends Middleware
 8 | {
 9 |     /**
10 |      * The names of the cookies that should not be encrypted.
11 |      *
12 |      * @var array
13 |      */
14 |     protected $except = [
15 |         //
16 |     ];
17 | }
18 | 


--------------------------------------------------------------------------------
/tests/Unit/ExampleTest.php:
--------------------------------------------------------------------------------
 1 | <?php
 2 | 
 3 | namespace Tests\Unit;
 4 | 
 5 | use Tests\TestCase;
 6 | use Illuminate\Foundation\Testing\RefreshDatabase;
 7 | 
 8 | class ExampleTest extends TestCase
 9 | {
10 |     /**
11 |      * A basic test example.
12 |      *
13 |      * @return void
14 |      */
15 |     public function testBasicTest()
16 |     {
17 |         $this->assertTrue(true);
18 |     }
19 | }
20 | 


--------------------------------------------------------------------------------
/app/Http/Middleware/VerifyCsrfToken.php:
--------------------------------------------------------------------------------
 1 | <?php
 2 | 
 3 | namespace App\Http\Middleware;
 4 | 
 5 | use Illuminate\Foundation\Http\Middleware\VerifyCsrfToken as Middleware;
 6 | 
 7 | class VerifyCsrfToken extends Middleware
 8 | {
 9 |     /**
10 |      * The URIs that should be excluded from CSRF verification.
11 |      *
12 |      * @var array
13 |      */
14 |     protected $except = [
15 |         //
16 |     ];
17 | }
18 | 


--------------------------------------------------------------------------------
/app/Http/Controllers/Controller.php:
--------------------------------------------------------------------------------
 1 | <?php
 2 | 
 3 | namespace App\Http\Controllers;
 4 | 
 5 | use Illuminate\Foundation\Bus\DispatchesJobs;
 6 | use Illuminate\Routing\Controller as BaseController;
 7 | use Illuminate\Foundation\Validation\ValidatesRequests;
 8 | use Illuminate\Foundation\Auth\Access\AuthorizesRequests;
 9 | 
10 | class Controller extends BaseController
11 | {
12 |     use AuthorizesRequests, DispatchesJobs, ValidatesRequests;
13 | }
14 | 


--------------------------------------------------------------------------------
/app/Http/Middleware/TrimStrings.php:
--------------------------------------------------------------------------------
 1 | <?php
 2 | 
 3 | namespace App\Http\Middleware;
 4 | 
 5 | use Illuminate\Foundation\Http\Middleware\TrimStrings as Middleware;
 6 | 
 7 | class TrimStrings extends Middleware
 8 | {
 9 |     /**
10 |      * The names of the attributes that should not be trimmed.
11 |      *
12 |      * @var array
13 |      */
14 |     protected $except = [
15 |         'password',
16 |         'password_confirmation',
17 |     ];
18 | }
19 | 


--------------------------------------------------------------------------------
/tests/Feature/ExampleTest.php:
--------------------------------------------------------------------------------
 1 | <?php
 2 | 
 3 | namespace Tests\Feature;
 4 | 
 5 | use Tests\TestCase;
 6 | use Illuminate\Foundation\Testing\RefreshDatabase;
 7 | 
 8 | class ExampleTest extends TestCase
 9 | {
10 |     /**
11 |      * A basic test example.
12 |      *
13 |      * @return void
14 |      */
15 |     public function testBasicTest()
16 |     {
17 |         $response = $this->get('/');
18 | 
19 |         $response->assertStatus(200);
20 |     }
21 | }
22 | 


--------------------------------------------------------------------------------
/app/Providers/BroadcastServiceProvider.php:
--------------------------------------------------------------------------------
 1 | <?php
 2 | 
 3 | namespace App\Providers;
 4 | 
 5 | use Illuminate\Support\ServiceProvider;
 6 | use Illuminate\Support\Facades\Broadcast;
 7 | 
 8 | class BroadcastServiceProvider extends ServiceProvider
 9 | {
10 |     /**
11 |      * Bootstrap any application services.
12 |      *
13 |      * @return void
14 |      */
15 |     public function boot()
16 |     {
17 |         Broadcast::routes();
18 | 
19 |         require base_path('routes/channels.php');
20 |     }
21 | }
22 | 


--------------------------------------------------------------------------------
/routes/web.php:
--------------------------------------------------------------------------------
 1 | <?php
 2 | 
 3 | /*
 4 | |--------------------------------------------------------------------------
 5 | | Web Routes
 6 | |--------------------------------------------------------------------------
 7 | |
 8 | | Here is where you can register web routes for your application. These
 9 | | routes are loaded by the RouteServiceProvider within a group which
10 | | contains the "web" middleware group. Now create something great!
11 | |
12 | */
13 | 
14 | Route::get('/', function () {
15 |     return view('welcome');
16 | });
17 | 


--------------------------------------------------------------------------------
/app/Providers/AppServiceProvider.php:
--------------------------------------------------------------------------------
 1 | <?php
 2 | 
 3 | namespace App\Providers;
 4 | 
 5 | use Illuminate\Support\ServiceProvider;
 6 | 
 7 | class AppServiceProvider extends ServiceProvider
 8 | {
 9 |     /**
10 |      * Bootstrap any application services.
11 |      *
12 |      * @return void
13 |      */
14 |     public function boot()
15 |     {
16 |         //
17 |     }
18 | 
19 |     /**
20 |      * Register any application services.
21 |      *
22 |      * @return void
23 |      */
24 |     public function register()
25 |     {
26 |         //
27 |     }
28 | }
29 | 


--------------------------------------------------------------------------------
/app/Http/Middleware/TrustProxies.php:
--------------------------------------------------------------------------------
 1 | <?php
 2 | 
 3 | namespace App\Http\Middleware;
 4 | 
 5 | use Illuminate\Http\Request;
 6 | use Fideloper\Proxy\TrustProxies as Middleware;
 7 | 
 8 | class TrustProxies extends Middleware
 9 | {
10 |     /**
11 |      * The trusted proxies for this application.
12 |      *
13 |      * @var array
14 |      */
15 |     protected $proxies;
16 | 
17 |     /**
18 |      * The headers that should be used to detect proxies.
19 |      *
20 |      * @var string
21 |      */
22 |     protected $headers = Request::HEADER_X_FORWARDED_ALL;
23 | }
24 | 


--------------------------------------------------------------------------------
/routes/channels.php:
--------------------------------------------------------------------------------
 1 | <?php
 2 | 
 3 | /*
 4 | |--------------------------------------------------------------------------
 5 | | Broadcast Channels
 6 | |--------------------------------------------------------------------------
 7 | |
 8 | | Here you may register all of the event broadcasting channels that your
 9 | | application supports. The given channel authorization callbacks are
10 | | used to check if an authenticated user can listen to the channel.
11 | |
12 | */
13 | 
14 | Broadcast::channel('App.User.{id}', function ($user, $id) {
15 |     return (int) $user->id === (int) $id;
16 | });
17 | 


--------------------------------------------------------------------------------
/tests/CreatesApplication.php:
--------------------------------------------------------------------------------
 1 | <?php
 2 | 
 3 | namespace Tests;
 4 | 
 5 | use Illuminate\Support\Facades\Hash;
 6 | use Illuminate\Contracts\Console\Kernel;
 7 | 
 8 | trait CreatesApplication
 9 | {
10 |     /**
11 |      * Creates the application.
12 |      *
13 |      * @return \Illuminate\Foundation\Application
14 |      */
15 |     public function createApplication()
16 |     {
17 |         $app = require __DIR__.'/../bootstrap/app.php';
18 | 
19 |         $app->make(Kernel::class)->bootstrap();
20 | 
21 |         Hash::driver('bcrypt')->setRounds(4);
22 | 
23 |         return $app;
24 |     }
25 | }
26 | 


--------------------------------------------------------------------------------
/routes/api.php:
--------------------------------------------------------------------------------
 1 | <?php
 2 | 
 3 | use Illuminate\Http\Request;
 4 | 
 5 | /*
 6 | |--------------------------------------------------------------------------
 7 | | API Routes
 8 | |--------------------------------------------------------------------------
 9 | |
10 | | Here is where you can register API routes for your application. These
11 | | routes are loaded by the RouteServiceProvider within a group which
12 | | is assigned the "api" middleware group. Enjoy building your API!
13 | |
14 | */
15 | 
16 | Route::middleware('auth:api')->get('/user', function (Request $request) {
17 |     return $request->user();
18 | });
19 | 


--------------------------------------------------------------------------------
/resources/lang/en/pagination.php:
--------------------------------------------------------------------------------
 1 | <?php
 2 | 
 3 | return [
 4 | 
 5 |     /*
 6 |     |--------------------------------------------------------------------------
 7 |     | Pagination Language Lines
 8 |     |--------------------------------------------------------------------------
 9 |     |
10 |     | The following language lines are used by the paginator library to build
11 |     | the simple pagination links. You are free to change them to anything
12 |     | you want to customize your views to better match your application.
13 |     |
14 |     */
15 | 
16 |     'previous' => '&laquo; Previous',
17 |     'next' => 'Next &raquo;',
18 | 
19 | ];
20 | 


--------------------------------------------------------------------------------
/routes/console.php:
--------------------------------------------------------------------------------
 1 | <?php
 2 | 
 3 | use Illuminate\Foundation\Inspiring;
 4 | 
 5 | /*
 6 | |--------------------------------------------------------------------------
 7 | | Console Routes
 8 | |--------------------------------------------------------------------------
 9 | |
10 | | This file is where you may define all of your Closure based console
11 | | commands. Each Closure is bound to a command instance allowing a
12 | | simple approach to interacting with each command's IO methods.
13 | |
14 | */
15 | 
16 | Artisan::command('inspire', function () {
17 |     $this->comment(Inspiring::quote());
18 | })->describe('Display an inspiring quote');
19 | 


--------------------------------------------------------------------------------
/app/User.php:
--------------------------------------------------------------------------------
 1 | <?php
 2 | 
 3 | namespace App;
 4 | 
 5 | use Illuminate\Notifications\Notifiable;
 6 | use Illuminate\Foundation\Auth\User as Authenticatable;
 7 | 
 8 | class User extends Authenticatable
 9 | {
10 |     use Notifiable;
11 | 
12 |     /**
13 |      * The attributes that are mass assignable.
14 |      *
15 |      * @var array
16 |      */
17 |     protected $fillable = [
18 |         'name', 'email', 'password',
19 |     ];
20 | 
21 |     /**
22 |      * The attributes that should be hidden for arrays.
23 |      *
24 |      * @var array
25 |      */
26 |     protected $hidden = [
27 |         'password', 'remember_token',
28 |     ];
29 | }
30 | 


--------------------------------------------------------------------------------
/server.php:
--------------------------------------------------------------------------------
 1 | <?php
 2 | 
 3 | /**
 4 |  * Laravel - A PHP Framework For Web Artisans
 5 |  *
 6 |  * @package  Laravel
 7 |  * @author   Taylor Otwell <taylor@laravel.com>
 8 |  */
 9 | 
10 | $uri = urldecode(
11 |     parse_url($_SERVER['REQUEST_URI'], PHP_URL_PATH)
12 | );
13 | 
14 | // This file allows us to emulate Apache's "mod_rewrite" functionality from the
15 | // built-in PHP web server. This provides a convenient way to test a Laravel
16 | // application without having installed a "real" web server software here.
17 | if ($uri !== '/' && file_exists(__DIR__.'/public'.$uri)) {
18 |     return false;
19 | }
20 | 
21 | require_once __DIR__.'/public/index.php';
22 | 


--------------------------------------------------------------------------------
/app/Http/Middleware/RedirectIfAuthenticated.php:
--------------------------------------------------------------------------------
 1 | <?php
 2 | 
 3 | namespace App\Http\Middleware;
 4 | 
 5 | use Closure;
 6 | use Illuminate\Support\Facades\Auth;
 7 | 
 8 | class RedirectIfAuthenticated
 9 | {
10 |     /**
11 |      * Handle an incoming request.
12 |      *
13 |      * @param  \Illuminate\Http\Request  $request
14 |      * @param  \Closure  $next
15 |      * @param  string|null  $guard
16 |      * @return mixed
17 |      */
18 |     public function handle($request, Closure $next, $guard = null)
19 |     {
20 |         if (Auth::guard($guard)->check()) {
21 |             return redirect('/home');
22 |         }
23 | 
24 |         return $next($request);
25 |     }
26 | }
27 | 


--------------------------------------------------------------------------------
/public/.htaccess:
--------------------------------------------------------------------------------
 1 | <IfModule mod_rewrite.c>
 2 |     <IfModule mod_negotiation.c>
 3 |         Options -MultiViews -Indexes
 4 |     </IfModule>
 5 | 
 6 |     RewriteEngine On
 7 | 
 8 |     # Handle Authorization Header
 9 |     RewriteCond %{HTTP:Authorization} .
10 |     RewriteRule .* - [E=HTTP_AUTHORIZATION:%{HTTP:Authorization}]
11 | 
12 |     # Redirect Trailing Slashes If Not A Folder...
13 |     RewriteCond %{REQUEST_FILENAME} !-d
14 |     RewriteCond %{REQUEST_URI} (.+)/$
15 |     RewriteRule ^ %1 [L,R=301]
16 | 
17 |     # Handle Front Controller...
18 |     RewriteCond %{REQUEST_FILENAME} !-d
19 |     RewriteCond %{REQUEST_FILENAME} !-f
20 |     RewriteRule ^ index.php [L]
21 | </IfModule>
22 | 


--------------------------------------------------------------------------------
/resources/views/welcome.blade.php:
--------------------------------------------------------------------------------
 1 | <!doctype html>
 2 | <html lang="{{ app()->getLocale() }}">
 3 | <head>
 4 |     <meta charset="utf-8">
 5 |     <meta http-equiv="X-UA-Compatible" content="IE=edge">
 6 |     <meta name="viewport" content="width=device-width, initial-scale=1">
 7 |     <meta name="csrf-token" content="{{ csrf_token() }}">
 8 |     <title>Laravel</title>
 9 |     <link rel="stylesheet" href="{{ mix('/css/app.css') }}">
10 |     <!-- Fonts -->
11 |     <link href="https://fonts.googleapis.com/css?family=Raleway:100,600" rel="stylesheet" type="text/css">
12 | </head>
13 | <body>
14 |     <div id="app"></div>
15 |     <script src="{{ mix('/js/app.js')}}"></script>
16 | </body>
17 | </html>
18 | 


--------------------------------------------------------------------------------
/webpack.mix.js:
--------------------------------------------------------------------------------
 1 | let mix = require('laravel-mix');
 2 | 
 3 | /*
 4 |  |--------------------------------------------------------------------------
 5 |  | Mix Asset Management
 6 |  |--------------------------------------------------------------------------
 7 |  |
 8 |  | Mix provides a clean, fluent API for defining some Webpack build steps
 9 |  | for your Laravel application. By default, we are compiling the Sass
10 |  | file for the application as well as bundling up all the JS files.
11 |  |
12 |  */
13 | 
14 | mix.js('resources/assets/js/app.js', 'public/js')
15 |    .sass('resources/assets/sass/app.scss', 'public/css');
16 | 
17 | mix.browserSync({
18 |     proxy: 'shopify-storefront-vue-apollo.bbe'
19 | });


--------------------------------------------------------------------------------
/resources/assets/js/components/ExampleComponent.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |     <div class="container">
 3 |         <div class="row justify-content-center">
 4 |             <div class="col-md-8">
 5 |                 <div class="card card-default">
 6 |                     <div class="card-header">Example Component</div>
 7 | 
 8 |                     <div class="card-body">
 9 |                         I'm an example component.
10 |                     </div>
11 |                 </div>
12 |             </div>
13 |         </div>
14 |     </div>
15 | </template>
16 | 
17 | <script>
18 |     export default {
19 |         mounted() {
20 |             console.log('Component mounted.')
21 |         }
22 |     }
23 | </script>
24 | 


--------------------------------------------------------------------------------
/resources/lang/en/auth.php:
--------------------------------------------------------------------------------
 1 | <?php
 2 | 
 3 | return [
 4 | 
 5 |     /*
 6 |     |--------------------------------------------------------------------------
 7 |     | Authentication Language Lines
 8 |     |--------------------------------------------------------------------------
 9 |     |
10 |     | The following language lines are used during authentication for various
11 |     | messages that we need to display to the user. You are free to modify
12 |     | these language lines according to your application's requirements.
13 |     |
14 |     */
15 | 
16 |     'failed' => 'These credentials do not match our records.',
17 |     'throttle' => 'Too many login attempts. Please try again in :seconds seconds.',
18 | 
19 | ];
20 | 


--------------------------------------------------------------------------------
/app/Providers/AuthServiceProvider.php:
--------------------------------------------------------------------------------
 1 | <?php
 2 | 
 3 | namespace App\Providers;
 4 | 
 5 | use Illuminate\Support\Facades\Gate;
 6 | use Illuminate\Foundation\Support\Providers\AuthServiceProvider as ServiceProvider;
 7 | 
 8 | class AuthServiceProvider extends ServiceProvider
 9 | {
10 |     /**
11 |      * The policy mappings for the application.
12 |      *
13 |      * @var array
14 |      */
15 |     protected $policies = [
16 |         'App\Model' => 'App\Policies\ModelPolicy',
17 |     ];
18 | 
19 |     /**
20 |      * Register any authentication / authorization services.
21 |      *
22 |      * @return void
23 |      */
24 |     public function boot()
25 |     {
26 |         $this->registerPolicies();
27 | 
28 |         //
29 |     }
30 | }
31 | 


--------------------------------------------------------------------------------
/resources/assets/js/queries/auth.js:
--------------------------------------------------------------------------------
 1 | import gql from 'graphql-tag';
 2 | 
 3 | export const customerCreate = gql`
 4 |   mutation customerCreate($input: CustomerCreateInput!) {
 5 |     customerCreate(input: $input) {
 6 |       userErrors {
 7 |         field
 8 |         message
 9 |       }
10 |       customer {
11 |         id
12 |       }
13 |     }
14 |   }
15 | `;
16 | 
17 | export const customerAccessTokenCreate = gql`
18 |   mutation customerAccessTokenCreate($input: CustomerAccessTokenCreateInput!) {
19 |     customerAccessTokenCreate(input: $input) {
20 |       userErrors {
21 |         field
22 |         message
23 |       }
24 |       customerAccessToken {
25 |         accessToken
26 |         expiresAt
27 |       }
28 |     }
29 |   }
30 | `;


--------------------------------------------------------------------------------
/app/Providers/EventServiceProvider.php:
--------------------------------------------------------------------------------
 1 | <?php
 2 | 
 3 | namespace App\Providers;
 4 | 
 5 | use Illuminate\Support\Facades\Event;
 6 | use Illuminate\Foundation\Support\Providers\EventServiceProvider as ServiceProvider;
 7 | 
 8 | class EventServiceProvider extends ServiceProvider
 9 | {
10 |     /**
11 |      * The event listener mappings for the application.
12 |      *
13 |      * @var array
14 |      */
15 |     protected $listen = [
16 |         'App\Events\Event' => [
17 |             'App\Listeners\EventListener',
18 |         ],
19 |     ];
20 | 
21 |     /**
22 |      * Register any events for your application.
23 |      *
24 |      * @return void
25 |      */
26 |     public function boot()
27 |     {
28 |         parent::boot();
29 | 
30 |         //
31 |     }
32 | }
33 | 


--------------------------------------------------------------------------------
/resources/assets/js/shopify.js:
--------------------------------------------------------------------------------
 1 | import {
 2 |     SHOPIFY_STOREFRONT_ACCESS_TOKEN,
 3 |     SHOPIFY_STORE_URL
 4 | } from "./config";
 5 | 
 6 | import Vue from "vue"
 7 | import { ApolloClient } from 'apollo-client'
 8 | import { HttpLink } from 'apollo-link-http'
 9 | import { InMemoryCache } from 'apollo-cache-inmemory'
10 | import VueApollo from 'vue-apollo'
11 | 
12 | Vue.use(VueApollo);
13 | 
14 | const httpLink = new HttpLink({
15 |     // You should use an absolute URL here
16 |     uri: 'https://' + SHOPIFY_STORE_URL + '/api/graphql',
17 |     headers: {
18 |         'X-Shopify-Storefront-Access-Token' : SHOPIFY_STOREFRONT_ACCESS_TOKEN
19 |     }
20 | });
21 | 
22 | // Create the apollo client
23 | export default  new ApolloClient({
24 |     link: httpLink,
25 |     cache: new InMemoryCache(),
26 |     connectToDevTools: true,
27 | });


--------------------------------------------------------------------------------
/.env.example:
--------------------------------------------------------------------------------
 1 | APP_NAME=Laravel
 2 | APP_ENV=local
 3 | APP_KEY=
 4 | APP_DEBUG=true
 5 | APP_URL=http://localhost
 6 | 
 7 | LOG_CHANNEL=stack
 8 | 
 9 | DB_CONNECTION=mysql
10 | DB_HOST=127.0.0.1
11 | DB_PORT=3306
12 | DB_DATABASE=homestead
13 | DB_USERNAME=homestead
14 | DB_PASSWORD=secret
15 | 
16 | BROADCAST_DRIVER=log
17 | CACHE_DRIVER=file
18 | SESSION_DRIVER=file
19 | SESSION_LIFETIME=120
20 | QUEUE_DRIVER=sync
21 | 
22 | REDIS_HOST=127.0.0.1
23 | REDIS_PASSWORD=null
24 | REDIS_PORT=6379
25 | 
26 | MAIL_DRIVER=smtp
27 | MAIL_HOST=smtp.mailtrap.io
28 | MAIL_PORT=2525
29 | MAIL_USERNAME=null
30 | MAIL_PASSWORD=null
31 | MAIL_ENCRYPTION=null
32 | 
33 | PUSHER_APP_ID=
34 | PUSHER_APP_KEY=
35 | PUSHER_APP_SECRET=
36 | PUSHER_APP_CLUSTER=mt1
37 | 
38 | MIX_PUSHER_APP_KEY="${PUSHER_APP_KEY}"
39 | MIX_PUSHER_APP_CLUSTER="${PUSHER_APP_CLUSTER}"
40 | 


--------------------------------------------------------------------------------
/resources/assets/js/components/VariantSelectors.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |     <select
 3 |             class="Product__option"
 4 |             :name="option.name"
 5 |             :key="option.name"
 6 |             @change="handleOptionChange"
 7 |     >
 8 |         <option
 9 |                 v-for="value in option.values"
10 |                 :value="value" :key="`${option.name}-${value}`"
11 |         >
12 |             {{value}}
13 |         </option>
14 |     </select>
15 | </template>
16 | 
17 | <script>
18 |     export default {
19 |         props: {
20 |             handleOptionChange: {
21 |                 type: Function
22 |             },
23 |             option: {
24 |                 type: Object
25 |             }
26 |         },
27 |         mounted() {
28 |             console.log('Component mounted.')
29 |         }
30 |     }
31 | </script>
32 | 


--------------------------------------------------------------------------------
/database/factories/UserFactory.php:
--------------------------------------------------------------------------------
 1 | <?php
 2 | 
 3 | use Faker\Generator as Faker;
 4 | 
 5 | /*
 6 | |--------------------------------------------------------------------------
 7 | | Model Factories
 8 | |--------------------------------------------------------------------------
 9 | |
10 | | This directory should contain each of the model factory definitions for
11 | | your application. Factories provide a convenient way to generate new
12 | | model instances for testing / seeding your application's database.
13 | |
14 | */
15 | 
16 | $factory->define(App\User::class, function (Faker $faker) {
17 |     return [
18 |         'name' => $faker->name,
19 |         'email' => $faker->unique()->safeEmail,
20 |         'password' => '$2y$10$TKh8H1.PfQx37YgCzwiKb.KjNyWgaHb9cbcoQgdIVFlYg7B77UdFm', // secret
21 |         'remember_token' => str_random(10),
22 |     ];
23 | });
24 | 


--------------------------------------------------------------------------------
/database/migrations/2014_10_12_100000_create_password_resets_table.php:
--------------------------------------------------------------------------------
 1 | <?php
 2 | 
 3 | use Illuminate\Support\Facades\Schema;
 4 | use Illuminate\Database\Schema\Blueprint;
 5 | use Illuminate\Database\Migrations\Migration;
 6 | 
 7 | class CreatePasswordResetsTable extends Migration
 8 | {
 9 |     /**
10 |      * Run the migrations.
11 |      *
12 |      * @return void
13 |      */
14 |     public function up()
15 |     {
16 |         Schema::create('password_resets', function (Blueprint $table) {
17 |             $table->string('email')->index();
18 |             $table->string('token');
19 |             $table->timestamp('created_at')->nullable();
20 |         });
21 |     }
22 | 
23 |     /**
24 |      * Reverse the migrations.
25 |      *
26 |      * @return void
27 |      */
28 |     public function down()
29 |     {
30 |         Schema::dropIfExists('password_resets');
31 |     }
32 | }
33 | 


--------------------------------------------------------------------------------
/resources/lang/en/passwords.php:
--------------------------------------------------------------------------------
 1 | <?php
 2 | 
 3 | return [
 4 | 
 5 |     /*
 6 |     |--------------------------------------------------------------------------
 7 |     | Password Reset Language Lines
 8 |     |--------------------------------------------------------------------------
 9 |     |
10 |     | The following language lines are the default lines which match reasons
11 |     | that are given by the password broker for a password update attempt
12 |     | has failed, such as for an invalid token or invalid new password.
13 |     |
14 |     */
15 | 
16 |     'password' => 'Passwords must be at least six characters and match the confirmation.',
17 |     'reset' => 'Your password has been reset!',
18 |     'sent' => 'We have e-mailed your password reset link!',
19 |     'token' => 'This password reset token is invalid.',
20 |     'user' => "We can't find a user with that e-mail address.",
21 | 
22 | ];
23 | 


--------------------------------------------------------------------------------
/database/migrations/2014_10_12_000000_create_users_table.php:
--------------------------------------------------------------------------------
 1 | <?php
 2 | 
 3 | use Illuminate\Support\Facades\Schema;
 4 | use Illuminate\Database\Schema\Blueprint;
 5 | use Illuminate\Database\Migrations\Migration;
 6 | 
 7 | class CreateUsersTable extends Migration
 8 | {
 9 |     /**
10 |      * Run the migrations.
11 |      *
12 |      * @return void
13 |      */
14 |     public function up()
15 |     {
16 |         Schema::create('users', function (Blueprint $table) {
17 |             $table->increments('id');
18 |             $table->string('name');
19 |             $table->string('email')->unique();
20 |             $table->string('password');
21 |             $table->rememberToken();
22 |             $table->timestamps();
23 |         });
24 |     }
25 | 
26 |     /**
27 |      * Reverse the migrations.
28 |      *
29 |      * @return void
30 |      */
31 |     public function down()
32 |     {
33 |         Schema::dropIfExists('users');
34 |     }
35 | }
36 | 


--------------------------------------------------------------------------------
/app/Http/Controllers/Auth/ForgotPasswordController.php:
--------------------------------------------------------------------------------
 1 | <?php
 2 | 
 3 | namespace App\Http\Controllers\Auth;
 4 | 
 5 | use App\Http\Controllers\Controller;
 6 | use Illuminate\Foundation\Auth\SendsPasswordResetEmails;
 7 | 
 8 | class ForgotPasswordController extends Controller
 9 | {
10 |     /*
11 |     |--------------------------------------------------------------------------
12 |     | Password Reset Controller
13 |     |--------------------------------------------------------------------------
14 |     |
15 |     | This controller is responsible for handling password reset emails and
16 |     | includes a trait which assists in sending these notifications from
17 |     | your application to your users. Feel free to explore this trait.
18 |     |
19 |     */
20 | 
21 |     use SendsPasswordResetEmails;
22 | 
23 |     /**
24 |      * Create a new controller instance.
25 |      *
26 |      * @return void
27 |      */
28 |     public function __construct()
29 |     {
30 |         $this->middleware('guest');
31 |     }
32 | }
33 | 


--------------------------------------------------------------------------------
/app/Console/Kernel.php:
--------------------------------------------------------------------------------
 1 | <?php
 2 | 
 3 | namespace App\Console;
 4 | 
 5 | use Illuminate\Console\Scheduling\Schedule;
 6 | use Illuminate\Foundation\Console\Kernel as ConsoleKernel;
 7 | 
 8 | class Kernel extends ConsoleKernel
 9 | {
10 |     /**
11 |      * The Artisan commands provided by your application.
12 |      *
13 |      * @var array
14 |      */
15 |     protected $commands = [
16 |         //
17 |     ];
18 | 
19 |     /**
20 |      * Define the application's command schedule.
21 |      *
22 |      * @param  \Illuminate\Console\Scheduling\Schedule  $schedule
23 |      * @return void
24 |      */
25 |     protected function schedule(Schedule $schedule)
26 |     {
27 |         // $schedule->command('inspire')
28 |         //          ->hourly();
29 |     }
30 | 
31 |     /**
32 |      * Register the commands for the application.
33 |      *
34 |      * @return void
35 |      */
36 |     protected function commands()
37 |     {
38 |         $this->load(__DIR__.'/Commands');
39 | 
40 |         require base_path('routes/console.php');
41 |     }
42 | }
43 | 


--------------------------------------------------------------------------------
/resources/assets/js/app.js:
--------------------------------------------------------------------------------
 1 | import VueApollo from 'vue-apollo';
 2 | import apolloClient from "./shopify";
 3 | import App from "./components/App";
 4 | /**
 5 |  * First we will load all of this project's JavaScript dependencies which
 6 |  * includes Vue and other libraries. It is a great starting point when
 7 |  * building robust, powerful web applications using Vue and Laravel.
 8 |  */
 9 | 
10 | require('./bootstrap');
11 | 
12 | window.Vue = require('vue');
13 | 
14 | /**
15 |  * Next, we will create a fresh Vue application instance and attach it to
16 |  * the page. Then, you may begin adding components to this application
17 |  * or customize the JavaScript scaffolding to fit your unique needs.
18 |  */
19 | 
20 | Vue.component('example-component', require('./components/ExampleComponent.vue'));
21 | 
22 | const apolloProvider = new VueApollo({
23 |     defaultClient: apolloClient
24 | });
25 | 
26 | const app = new Vue({
27 |     el: '#app',
28 |     provide: apolloProvider.provide(),
29 |     components: {
30 |         'App' : App
31 |     },
32 |     template: "<App></App>"
33 | });


--------------------------------------------------------------------------------
/app/Http/Controllers/Auth/LoginController.php:
--------------------------------------------------------------------------------
 1 | <?php
 2 | 
 3 | namespace App\Http\Controllers\Auth;
 4 | 
 5 | use App\Http\Controllers\Controller;
 6 | use Illuminate\Foundation\Auth\AuthenticatesUsers;
 7 | 
 8 | class LoginController extends Controller
 9 | {
10 |     /*
11 |     |--------------------------------------------------------------------------
12 |     | Login Controller
13 |     |--------------------------------------------------------------------------
14 |     |
15 |     | This controller handles authenticating users for the application and
16 |     | redirecting them to your home screen. The controller uses a trait
17 |     | to conveniently provide its functionality to your applications.
18 |     |
19 |     */
20 | 
21 |     use AuthenticatesUsers;
22 | 
23 |     /**
24 |      * Where to redirect users after login.
25 |      *
26 |      * @var string
27 |      */
28 |     protected $redirectTo = '/home';
29 | 
30 |     /**
31 |      * Create a new controller instance.
32 |      *
33 |      * @return void
34 |      */
35 |     public function __construct()
36 |     {
37 |         $this->middleware('guest')->except('logout');
38 |     }
39 | }
40 | 


--------------------------------------------------------------------------------
/config/view.php:
--------------------------------------------------------------------------------
 1 | <?php
 2 | 
 3 | return [
 4 | 
 5 |     /*
 6 |     |--------------------------------------------------------------------------
 7 |     | View Storage Paths
 8 |     |--------------------------------------------------------------------------
 9 |     |
10 |     | Most templating systems load templates from disk. Here you may specify
11 |     | an array of paths that should be checked for your views. Of course
12 |     | the usual Laravel view path has already been registered for you.
13 |     |
14 |     */
15 | 
16 |     'paths' => [
17 |         resource_path('views'),
18 |     ],
19 | 
20 |     /*
21 |     |--------------------------------------------------------------------------
22 |     | Compiled View Path
23 |     |--------------------------------------------------------------------------
24 |     |
25 |     | This option determines where all the compiled Blade templates will be
26 |     | stored for your application. Typically, this is within the storage
27 |     | directory. However, as usual, you are free to change this value.
28 |     |
29 |     */
30 | 
31 |     'compiled' => realpath(storage_path('framework/views')),
32 | 
33 | ];
34 | 


--------------------------------------------------------------------------------
/config/services.php:
--------------------------------------------------------------------------------
 1 | <?php
 2 | 
 3 | return [
 4 | 
 5 |     /*
 6 |     |--------------------------------------------------------------------------
 7 |     | Third Party Services
 8 |     |--------------------------------------------------------------------------
 9 |     |
10 |     | This file is for storing the credentials for third party services such
11 |     | as Stripe, Mailgun, SparkPost and others. This file provides a sane
12 |     | default location for this type of information, allowing packages
13 |     | to have a conventional place to find your various credentials.
14 |     |
15 |     */
16 | 
17 |     'mailgun' => [
18 |         'domain' => env('MAILGUN_DOMAIN'),
19 |         'secret' => env('MAILGUN_SECRET'),
20 |     ],
21 | 
22 |     'ses' => [
23 |         'key' => env('SES_KEY'),
24 |         'secret' => env('SES_SECRET'),
25 |         'region' => 'us-east-1',
26 |     ],
27 | 
28 |     'sparkpost' => [
29 |         'secret' => env('SPARKPOST_SECRET'),
30 |     ],
31 | 
32 |     'stripe' => [
33 |         'model' => App\User::class,
34 |         'key' => env('STRIPE_KEY'),
35 |         'secret' => env('STRIPE_SECRET'),
36 |     ],
37 | 
38 | ];
39 | 


--------------------------------------------------------------------------------
/app/Http/Controllers/Auth/ResetPasswordController.php:
--------------------------------------------------------------------------------
 1 | <?php
 2 | 
 3 | namespace App\Http\Controllers\Auth;
 4 | 
 5 | use App\Http\Controllers\Controller;
 6 | use Illuminate\Foundation\Auth\ResetsPasswords;
 7 | 
 8 | class ResetPasswordController extends Controller
 9 | {
10 |     /*
11 |     |--------------------------------------------------------------------------
12 |     | Password Reset Controller
13 |     |--------------------------------------------------------------------------
14 |     |
15 |     | This controller is responsible for handling password reset requests
16 |     | and uses a simple trait to include this behavior. You're free to
17 |     | explore this trait and override any methods you wish to tweak.
18 |     |
19 |     */
20 | 
21 |     use ResetsPasswords;
22 | 
23 |     /**
24 |      * Where to redirect users after resetting their password.
25 |      *
26 |      * @var string
27 |      */
28 |     protected $redirectTo = '/home';
29 | 
30 |     /**
31 |      * Create a new controller instance.
32 |      *
33 |      * @return void
34 |      */
35 |     public function __construct()
36 |     {
37 |         $this->middleware('guest');
38 |     }
39 | }
40 | 


--------------------------------------------------------------------------------
/phpunit.xml:
--------------------------------------------------------------------------------
 1 | <?xml version="1.0" encoding="UTF-8"?>
 2 | <phpunit backupGlobals="false"
 3 |          backupStaticAttributes="false"
 4 |          bootstrap="vendor/autoload.php"
 5 |          colors="true"
 6 |          convertErrorsToExceptions="true"
 7 |          convertNoticesToExceptions="true"
 8 |          convertWarningsToExceptions="true"
 9 |          processIsolation="false"
10 |          stopOnFailure="false">
11 |     <testsuites>
12 |         <testsuite name="Feature">
13 |             <directory suffix="Test.php">./tests/Feature</directory>
14 |         </testsuite>
15 | 
16 |         <testsuite name="Unit">
17 |             <directory suffix="Test.php">./tests/Unit</directory>
18 |         </testsuite>
19 |     </testsuites>
20 |     <filter>
21 |         <whitelist processUncoveredFilesFromWhitelist="true">
22 |             <directory suffix=".php">./app</directory>
23 |         </whitelist>
24 |     </filter>
25 |     <php>
26 |         <env name="APP_ENV" value="testing"/>
27 |         <env name="CACHE_DRIVER" value="array"/>
28 |         <env name="SESSION_DRIVER" value="array"/>
29 |         <env name="QUEUE_DRIVER" value="sync"/>
30 |         <env name="MAIL_DRIVER" value="array"/>
31 |     </php>
32 | </phpunit>
33 | 


--------------------------------------------------------------------------------
/app/Exceptions/Handler.php:
--------------------------------------------------------------------------------
 1 | <?php
 2 | 
 3 | namespace App\Exceptions;
 4 | 
 5 | use Exception;
 6 | use Illuminate\Foundation\Exceptions\Handler as ExceptionHandler;
 7 | 
 8 | class Handler extends ExceptionHandler
 9 | {
10 |     /**
11 |      * A list of the exception types that are not reported.
12 |      *
13 |      * @var array
14 |      */
15 |     protected $dontReport = [
16 |         //
17 |     ];
18 | 
19 |     /**
20 |      * A list of the inputs that are never flashed for validation exceptions.
21 |      *
22 |      * @var array
23 |      */
24 |     protected $dontFlash = [
25 |         'password',
26 |         'password_confirmation',
27 |     ];
28 | 
29 |     /**
30 |      * Report or log an exception.
31 |      *
32 |      * @param  \Exception  $exception
33 |      * @return void
34 |      */
35 |     public function report(Exception $exception)
36 |     {
37 |         parent::report($exception);
38 |     }
39 | 
40 |     /**
41 |      * Render an exception into an HTTP response.
42 |      *
43 |      * @param  \Illuminate\Http\Request  $request
44 |      * @param  \Exception  $exception
45 |      * @return \Illuminate\Http\Response
46 |      */
47 |     public function render($request, Exception $exception)
48 |     {
49 |         return parent::render($request, $exception);
50 |     }
51 | }
52 | 


--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
 1 | {
 2 |     "private": true,
 3 |     "scripts": {
 4 |         "dev": "npm run development",
 5 |         "development": "cross-env NODE_ENV=development node_modules/webpack/bin/webpack.js --progress --hide-modules --config=node_modules/laravel-mix/setup/webpack.config.js",
 6 |         "watch": "npm run development -- --watch",
 7 |         "watch-poll": "npm run watch -- --watch-poll",
 8 |         "hot": "cross-env NODE_ENV=development node_modules/webpack-dev-server/bin/webpack-dev-server.js --inline --hot --config=node_modules/laravel-mix/setup/webpack.config.js",
 9 |         "prod": "npm run production",
10 |         "production": "cross-env NODE_ENV=production node_modules/webpack/bin/webpack.js --no-progress --hide-modules --config=node_modules/laravel-mix/setup/webpack.config.js"
11 |     },
12 |     "devDependencies": {
13 |         "axios": "^0.18",
14 |         "bootstrap": "^4.0.0",
15 |         "browser-sync": "^2.23.6",
16 |         "browser-sync-webpack-plugin": "2.0.1",
17 |         "cross-env": "^5.1",
18 |         "jquery": "^3.2",
19 |         "laravel-mix": "^2.0",
20 |         "lodash": "^4.17.4",
21 |         "popper.js": "^1.12",
22 |         "vue": "^2.5.7"
23 |     },
24 |     "dependencies": {
25 |         "apollo-cache-inmemory": "^1.1.12",
26 |         "apollo-client": "^2.2.8",
27 |         "apollo-link-http": "^1.5.3",
28 |         "graphql": "^0.13.2",
29 |         "graphql-tag": "^2.8.0",
30 |         "vue-apollo": "^3.0.0-beta.5"
31 |     }
32 | }
33 | 


--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
 1 | # Shopify Store-front API with Vue 2 and Apollo
 2 | 
 3 | An example using vue-apollo built with Vue. This project is a Vuejs translation of [storefront-api-examples/react-apollo](https://github.com/Shopify/storefront-api-examples/tree/master/react-apollo). This example uses webpack included in the Laravel instalation. Laravel is not required to run the example.
 4 | 
 5 | ## Prerequisites
 6 | 
 7 | You will need the following things properly installed on your computer.
 8 | 
 9 | * [Git](https://git-scm.com/)
10 | * [Node.js](https://nodejs.org/) (with NPM)
11 | * [Yarn](https://yarnpkg.com/en/)
12 | * [Laravel](https://Laravel.com/) - optional
13 | 
14 | ## Installation
15 | 
16 | * `git clone git@github.com:alexchavet/shopify-storefront-vue-apollo.git` this repository
17 | * `cd shopify-storefront-vue-apollo`
18 | * `yarn`
19 | 
20 | ## Configuring
21 | 
22 | If you would like to connect your store to this example, rename `ressources/assets/js/config-example.js` to `config.js` and update the `domain` and `storefrontAccessToken`:
23 | 
24 | ```js
25 |  export const SHOPIFY_STOREFRONT_ACCESS_TOKEN = "ea..your-token..f67";
26 |  export const SHOPIFY_STORE_URL = "your-store.myshopify.com";
27 | ```
28 | If you would like to run browsersync, please update the proxy to your local environement URL:
29 | ```js
30 | mix.browserSync({
31 |     proxy: 'localhostXXX'
32 | });
33 | ```
34 | 
35 | ## Running
36 | 
37 | Start a local server:
38 | 
39 | ```
40 | yarn watch
41 | ```
42 | 
43 | * Visit your app at [http://localhost:3000](http://localhost:3000).
44 | 
45 | ## License
46 | 
47 | MIT, see [LICENSE](https://github.com/Shopify/storefront-api-examples/blob/master/LICENSE.txt) for details.
48 | 


--------------------------------------------------------------------------------
/composer.json:
--------------------------------------------------------------------------------
 1 | {
 2 |     "name": "laravel/laravel",
 3 |     "description": "The Laravel Framework.",
 4 |     "keywords": ["framework", "laravel"],
 5 |     "license": "MIT",
 6 |     "type": "project",
 7 |     "require": {
 8 |         "php": "^7.1.3",
 9 |         "fideloper/proxy": "^4.0",
10 |         "laravel/framework": "5.6.*",
11 |         "laravel/tinker": "^1.0"
12 |     },
13 |     "require-dev": {
14 |         "filp/whoops": "^2.0",
15 |         "fzaninotto/faker": "^1.4",
16 |         "mockery/mockery": "^1.0",
17 |         "nunomaduro/collision": "^2.0",
18 |         "phpunit/phpunit": "^7.0"
19 |     },
20 |     "autoload": {
21 |         "classmap": [
22 |             "database/seeds",
23 |             "database/factories"
24 |         ],
25 |         "psr-4": {
26 |             "App\\": "app/"
27 |         }
28 |     },
29 |     "autoload-dev": {
30 |         "psr-4": {
31 |             "Tests\\": "tests/"
32 |         }
33 |     },
34 |     "extra": {
35 |         "laravel": {
36 |             "dont-discover": [
37 |             ]
38 |         }
39 |     },
40 |     "scripts": {
41 |         "post-root-package-install": [
42 |             "@php -r \"file_exists('.env') || copy('.env.example', '.env');\""
43 |         ],
44 |         "post-create-project-cmd": [
45 |             "@php artisan key:generate"
46 |         ],
47 |         "post-autoload-dump": [
48 |             "Illuminate\\Foundation\\ComposerScripts::postAutoloadDump",
49 |             "@php artisan package:discover"
50 |         ]
51 |     },
52 |     "config": {
53 |         "preferred-install": "dist",
54 |         "sort-packages": true,
55 |         "optimize-autoloader": true
56 |     },
57 |     "minimum-stability": "dev",
58 |     "prefer-stable": true
59 | }
60 | 


--------------------------------------------------------------------------------
/config/hashing.php:
--------------------------------------------------------------------------------
 1 | <?php
 2 | 
 3 | return [
 4 | 
 5 |     /*
 6 |     |--------------------------------------------------------------------------
 7 |     | Default Hash Driver
 8 |     |--------------------------------------------------------------------------
 9 |     |
10 |     | This option controls the default hash driver that will be used to hash
11 |     | passwords for your application. By default, the bcrypt algorithm is
12 |     | used; however, you remain free to modify this option if you wish.
13 |     |
14 |     | Supported: "bcrypt", "argon"
15 |     |
16 |     */
17 | 
18 |     'driver' => 'bcrypt',
19 | 
20 |     /*
21 |     |--------------------------------------------------------------------------
22 |     | Bcrypt Options
23 |     |--------------------------------------------------------------------------
24 |     |
25 |     | Here you may specify the configuration options that should be used when
26 |     | passwords are hashed using the Bcrypt algorithm. This will allow you
27 |     | to control the amount of time it takes to hash the given password.
28 |     |
29 |     */
30 | 
31 |     'bcrypt' => [
32 |         'rounds' => 10,
33 |     ],
34 | 
35 |     /*
36 |     |--------------------------------------------------------------------------
37 |     | Argon Options
38 |     |--------------------------------------------------------------------------
39 |     |
40 |     | Here you may specify the configuration options that should be used when
41 |     | passwords are hashed using the Argon algorithm. These will allow you
42 |     | to control the amount of time it takes to hash the given password.
43 |     |
44 |     */
45 | 
46 |     'argon' => [
47 |         'memory' => 1024,
48 |         'threads' => 2,
49 |         'time' => 2,
50 |     ],
51 | 
52 | ];
53 | 


--------------------------------------------------------------------------------
/bootstrap/app.php:
--------------------------------------------------------------------------------
 1 | <?php
 2 | 
 3 | /*
 4 | |--------------------------------------------------------------------------
 5 | | Create The Application
 6 | |--------------------------------------------------------------------------
 7 | |
 8 | | The first thing we will do is create a new Laravel application instance
 9 | | which serves as the "glue" for all the components of Laravel, and is
10 | | the IoC container for the system binding all of the various parts.
11 | |
12 | */
13 | 
14 | $app = new Illuminate\Foundation\Application(
15 |     realpath(__DIR__.'/../')
16 | );
17 | 
18 | /*
19 | |--------------------------------------------------------------------------
20 | | Bind Important Interfaces
21 | |--------------------------------------------------------------------------
22 | |
23 | | Next, we need to bind some important interfaces into the container so
24 | | we will be able to resolve them when needed. The kernels serve the
25 | | incoming requests to this application from both the web and CLI.
26 | |
27 | */
28 | 
29 | $app->singleton(
30 |     Illuminate\Contracts\Http\Kernel::class,
31 |     App\Http\Kernel::class
32 | );
33 | 
34 | $app->singleton(
35 |     Illuminate\Contracts\Console\Kernel::class,
36 |     App\Console\Kernel::class
37 | );
38 | 
39 | $app->singleton(
40 |     Illuminate\Contracts\Debug\ExceptionHandler::class,
41 |     App\Exceptions\Handler::class
42 | );
43 | 
44 | /*
45 | |--------------------------------------------------------------------------
46 | | Return The Application
47 | |--------------------------------------------------------------------------
48 | |
49 | | This script returns the application instance. The instance is given to
50 | | the calling script so we can separate the building of the instances
51 | | from the actual running of the application and sending responses.
52 | |
53 | */
54 | 
55 | return $app;
56 | 


--------------------------------------------------------------------------------
/config/broadcasting.php:
--------------------------------------------------------------------------------
 1 | <?php
 2 | 
 3 | return [
 4 | 
 5 |     /*
 6 |     |--------------------------------------------------------------------------
 7 |     | Default Broadcaster
 8 |     |--------------------------------------------------------------------------
 9 |     |
10 |     | This option controls the default broadcaster that will be used by the
11 |     | framework when an event needs to be broadcast. You may set this to
12 |     | any of the connections defined in the "connections" array below.
13 |     |
14 |     | Supported: "pusher", "redis", "log", "null"
15 |     |
16 |     */
17 | 
18 |     'default' => env('BROADCAST_DRIVER', 'null'),
19 | 
20 |     /*
21 |     |--------------------------------------------------------------------------
22 |     | Broadcast Connections
23 |     |--------------------------------------------------------------------------
24 |     |
25 |     | Here you may define all of the broadcast connections that will be used
26 |     | to broadcast events to other systems or over websockets. Samples of
27 |     | each available type of connection are provided inside this array.
28 |     |
29 |     */
30 | 
31 |     'connections' => [
32 | 
33 |         'pusher' => [
34 |             'driver' => 'pusher',
35 |             'key' => env('PUSHER_APP_KEY'),
36 |             'secret' => env('PUSHER_APP_SECRET'),
37 |             'app_id' => env('PUSHER_APP_ID'),
38 |             'options' => [
39 |                 'cluster' => env('PUSHER_APP_CLUSTER'),
40 |                 'encrypted' => true,
41 |             ],
42 |         ],
43 | 
44 |         'redis' => [
45 |             'driver' => 'redis',
46 |             'connection' => 'default',
47 |         ],
48 | 
49 |         'log' => [
50 |             'driver' => 'log',
51 |         ],
52 | 
53 |         'null' => [
54 |             'driver' => 'null',
55 |         ],
56 | 
57 |     ],
58 | 
59 | ];
60 | 


--------------------------------------------------------------------------------
/app/Providers/RouteServiceProvider.php:
--------------------------------------------------------------------------------
 1 | <?php
 2 | 
 3 | namespace App\Providers;
 4 | 
 5 | use Illuminate\Support\Facades\Route;
 6 | use Illuminate\Foundation\Support\Providers\RouteServiceProvider as ServiceProvider;
 7 | 
 8 | class RouteServiceProvider extends ServiceProvider
 9 | {
10 |     /**
11 |      * This namespace is applied to your controller routes.
12 |      *
13 |      * In addition, it is set as the URL generator's root namespace.
14 |      *
15 |      * @var string
16 |      */
17 |     protected $namespace = 'App\Http\Controllers';
18 | 
19 |     /**
20 |      * Define your route model bindings, pattern filters, etc.
21 |      *
22 |      * @return void
23 |      */
24 |     public function boot()
25 |     {
26 |         //
27 | 
28 |         parent::boot();
29 |     }
30 | 
31 |     /**
32 |      * Define the routes for the application.
33 |      *
34 |      * @return void
35 |      */
36 |     public function map()
37 |     {
38 |         $this->mapApiRoutes();
39 | 
40 |         $this->mapWebRoutes();
41 | 
42 |         //
43 |     }
44 | 
45 |     /**
46 |      * Define the "web" routes for the application.
47 |      *
48 |      * These routes all receive session state, CSRF protection, etc.
49 |      *
50 |      * @return void
51 |      */
52 |     protected function mapWebRoutes()
53 |     {
54 |         Route::middleware('web')
55 |              ->namespace($this->namespace)
56 |              ->group(base_path('routes/web.php'));
57 |     }
58 | 
59 |     /**
60 |      * Define the "api" routes for the application.
61 |      *
62 |      * These routes are typically stateless.
63 |      *
64 |      * @return void
65 |      */
66 |     protected function mapApiRoutes()
67 |     {
68 |         Route::prefix('api')
69 |              ->middleware('api')
70 |              ->namespace($this->namespace)
71 |              ->group(base_path('routes/api.php'));
72 |     }
73 | }
74 | 


--------------------------------------------------------------------------------
/artisan:
--------------------------------------------------------------------------------
 1 | #!/usr/bin/env php
 2 | <?php
 3 | 
 4 | define('LARAVEL_START', microtime(true));
 5 | 
 6 | /*
 7 | |--------------------------------------------------------------------------
 8 | | Register The Auto Loader
 9 | |--------------------------------------------------------------------------
10 | |
11 | | Composer provides a convenient, automatically generated class loader
12 | | for our application. We just need to utilize it! We'll require it
13 | | into the script here so that we do not have to worry about the
14 | | loading of any our classes "manually". Feels great to relax.
15 | |
16 | */
17 | 
18 | require __DIR__.'/vendor/autoload.php';
19 | 
20 | $app = require_once __DIR__.'/bootstrap/app.php';
21 | 
22 | /*
23 | |--------------------------------------------------------------------------
24 | | Run The Artisan Application
25 | |--------------------------------------------------------------------------
26 | |
27 | | When we run the console application, the current CLI command will be
28 | | executed in this console and the response sent back to a terminal
29 | | or another output device for the developers. Here goes nothing!
30 | |
31 | */
32 | 
33 | $kernel = $app->make(Illuminate\Contracts\Console\Kernel::class);
34 | 
35 | $status = $kernel->handle(
36 |     $input = new Symfony\Component\Console\Input\ArgvInput,
37 |     new Symfony\Component\Console\Output\ConsoleOutput
38 | );
39 | 
40 | /*
41 | |--------------------------------------------------------------------------
42 | | Shutdown The Application
43 | |--------------------------------------------------------------------------
44 | |
45 | | Once Artisan has finished running, we will fire off the shutdown events
46 | | so that any final work may be done by the application before we shut
47 | | down the process. This is the last thing to happen to the request.
48 | |
49 | */
50 | 
51 | $kernel->terminate($input, $status);
52 | 
53 | exit($status);
54 | 


--------------------------------------------------------------------------------
/resources/assets/js/bootstrap.js:
--------------------------------------------------------------------------------
 1 | 
 2 | window._ = require('lodash');
 3 | window.Popper = require('popper.js').default;
 4 | 
 5 | /**
 6 |  * We'll load jQuery and the Bootstrap jQuery plugin which provides support
 7 |  * for JavaScript based Bootstrap features such as modals and tabs. This
 8 |  * code may be modified to fit the specific needs of your application.
 9 |  */
10 | 
11 | try {
12 |     window.$ = window.jQuery = require('jquery');
13 | 
14 |     require('bootstrap');
15 | } catch (e) {}
16 | 
17 | /**
18 |  * We'll load the axios HTTP library which allows us to easily issue requests
19 |  * to our Laravel back-end. This library automatically handles sending the
20 |  * CSRF token as a header based on the value of the "XSRF" token cookie.
21 |  */
22 | 
23 | window.axios = require('axios');
24 | 
25 | window.axios.defaults.headers.common['X-Requested-With'] = 'XMLHttpRequest';
26 | 
27 | /**
28 |  * Next we will register the CSRF Token as a common header with Axios so that
29 |  * all outgoing HTTP requests automatically have it attached. This is just
30 |  * a simple convenience so we don't have to attach every token manually.
31 |  */
32 | 
33 | let token = document.head.querySelector('meta[name="csrf-token"]');
34 | 
35 | if (token) {
36 |     window.axios.defaults.headers.common['X-CSRF-TOKEN'] = token.content;
37 | } else {
38 |     console.error('CSRF token not found: https://laravel.com/docs/csrf#csrf-x-csrf-token');
39 | }
40 | 
41 | /**
42 |  * Echo exposes an expressive API for subscribing to channels and listening
43 |  * for events that are broadcast by Laravel. Echo and event broadcasting
44 |  * allows your team to easily build robust real-time web applications.
45 |  */
46 | 
47 | // import Echo from 'laravel-echo'
48 | 
49 | // window.Pusher = require('pusher-js');
50 | 
51 | // window.Echo = new Echo({
52 | //     broadcaster: 'pusher',
53 | //     key: process.env.MIX_PUSHER_APP_KEY,
54 | //     cluster: process.env.MIX_PUSHER_APP_CLUSTER,
55 | //     encrypted: true
56 | // });
57 | 


--------------------------------------------------------------------------------
/public/index.php:
--------------------------------------------------------------------------------
 1 | <?php
 2 | 
 3 | /**
 4 |  * Laravel - A PHP Framework For Web Artisans
 5 |  *
 6 |  * @package  Laravel
 7 |  * @author   Taylor Otwell <taylor@laravel.com>
 8 |  */
 9 | 
10 | define('LARAVEL_START', microtime(true));
11 | 
12 | /*
13 | |--------------------------------------------------------------------------
14 | | Register The Auto Loader
15 | |--------------------------------------------------------------------------
16 | |
17 | | Composer provides a convenient, automatically generated class loader for
18 | | our application. We just need to utilize it! We'll simply require it
19 | | into the script here so that we don't have to worry about manual
20 | | loading any of our classes later on. It feels great to relax.
21 | |
22 | */
23 | 
24 | require __DIR__.'/../vendor/autoload.php';
25 | 
26 | /*
27 | |--------------------------------------------------------------------------
28 | | Turn On The Lights
29 | |--------------------------------------------------------------------------
30 | |
31 | | We need to illuminate PHP development, so let us turn on the lights.
32 | | This bootstraps the framework and gets it ready for use, then it
33 | | will load up this application so that we can run it and send
34 | | the responses back to the browser and delight our users.
35 | |
36 | */
37 | 
38 | $app = require_once __DIR__.'/../bootstrap/app.php';
39 | 
40 | /*
41 | |--------------------------------------------------------------------------
42 | | Run The Application
43 | |--------------------------------------------------------------------------
44 | |
45 | | Once we have the application, we can handle the incoming request
46 | | through the kernel, and send the associated response back to
47 | | the client's browser allowing them to enjoy the creative
48 | | and wonderful application we have prepared for them.
49 | |
50 | */
51 | 
52 | $kernel = $app->make(Illuminate\Contracts\Http\Kernel::class);
53 | 
54 | $response = $kernel->handle(
55 |     $request = Illuminate\Http\Request::capture()
56 | );
57 | 
58 | $response->send();
59 | 
60 | $kernel->terminate($request, $response);
61 | 


--------------------------------------------------------------------------------
/app/Http/Controllers/Auth/RegisterController.php:
--------------------------------------------------------------------------------
 1 | <?php
 2 | 
 3 | namespace App\Http\Controllers\Auth;
 4 | 
 5 | use App\User;
 6 | use App\Http\Controllers\Controller;
 7 | use Illuminate\Support\Facades\Hash;
 8 | use Illuminate\Support\Facades\Validator;
 9 | use Illuminate\Foundation\Auth\RegistersUsers;
10 | 
11 | class RegisterController extends Controller
12 | {
13 |     /*
14 |     |--------------------------------------------------------------------------
15 |     | Register Controller
16 |     |--------------------------------------------------------------------------
17 |     |
18 |     | This controller handles the registration of new users as well as their
19 |     | validation and creation. By default this controller uses a trait to
20 |     | provide this functionality without requiring any additional code.
21 |     |
22 |     */
23 | 
24 |     use RegistersUsers;
25 | 
26 |     /**
27 |      * Where to redirect users after registration.
28 |      *
29 |      * @var string
30 |      */
31 |     protected $redirectTo = '/home';
32 | 
33 |     /**
34 |      * Create a new controller instance.
35 |      *
36 |      * @return void
37 |      */
38 |     public function __construct()
39 |     {
40 |         $this->middleware('guest');
41 |     }
42 | 
43 |     /**
44 |      * Get a validator for an incoming registration request.
45 |      *
46 |      * @param  array  $data
47 |      * @return \Illuminate\Contracts\Validation\Validator
48 |      */
49 |     protected function validator(array $data)
50 |     {
51 |         return Validator::make($data, [
52 |             'name' => 'required|string|max:255',
53 |             'email' => 'required|string|email|max:255|unique:users',
54 |             'password' => 'required|string|min:6|confirmed',
55 |         ]);
56 |     }
57 | 
58 |     /**
59 |      * Create a new user instance after a valid registration.
60 |      *
61 |      * @param  array  $data
62 |      * @return \App\User
63 |      */
64 |     protected function create(array $data)
65 |     {
66 |         return User::create([
67 |             'name' => $data['name'],
68 |             'email' => $data['email'],
69 |             'password' => Hash::make($data['password']),
70 |         ]);
71 |     }
72 | }
73 | 


--------------------------------------------------------------------------------
/config/filesystems.php:
--------------------------------------------------------------------------------
 1 | <?php
 2 | 
 3 | return [
 4 | 
 5 |     /*
 6 |     |--------------------------------------------------------------------------
 7 |     | Default Filesystem Disk
 8 |     |--------------------------------------------------------------------------
 9 |     |
10 |     | Here you may specify the default filesystem disk that should be used
11 |     | by the framework. The "local" disk, as well as a variety of cloud
12 |     | based disks are available to your application. Just store away!
13 |     |
14 |     */
15 | 
16 |     'default' => env('FILESYSTEM_DRIVER', 'local'),
17 | 
18 |     /*
19 |     |--------------------------------------------------------------------------
20 |     | Default Cloud Filesystem Disk
21 |     |--------------------------------------------------------------------------
22 |     |
23 |     | Many applications store files both locally and in the cloud. For this
24 |     | reason, you may specify a default "cloud" driver here. This driver
25 |     | will be bound as the Cloud disk implementation in the container.
26 |     |
27 |     */
28 | 
29 |     'cloud' => env('FILESYSTEM_CLOUD', 's3'),
30 | 
31 |     /*
32 |     |--------------------------------------------------------------------------
33 |     | Filesystem Disks
34 |     |--------------------------------------------------------------------------
35 |     |
36 |     | Here you may configure as many filesystem "disks" as you wish, and you
37 |     | may even configure multiple disks of the same driver. Defaults have
38 |     | been setup for each driver as an example of the required options.
39 |     |
40 |     | Supported Drivers: "local", "ftp", "sftp", "s3", "rackspace"
41 |     |
42 |     */
43 | 
44 |     'disks' => [
45 | 
46 |         'local' => [
47 |             'driver' => 'local',
48 |             'root' => storage_path('app'),
49 |         ],
50 | 
51 |         'public' => [
52 |             'driver' => 'local',
53 |             'root' => storage_path('app/public'),
54 |             'url' => env('APP_URL').'/storage',
55 |             'visibility' => 'public',
56 |         ],
57 | 
58 |         's3' => [
59 |             'driver' => 's3',
60 |             'key' => env('AWS_ACCESS_KEY_ID'),
61 |             'secret' => env('AWS_SECRET_ACCESS_KEY'),
62 |             'region' => env('AWS_DEFAULT_REGION'),
63 |             'bucket' => env('AWS_BUCKET'),
64 |             'url' => env('AWS_URL'),
65 |         ],
66 | 
67 |     ],
68 | 
69 | ];
70 | 


--------------------------------------------------------------------------------
/app/Http/Kernel.php:
--------------------------------------------------------------------------------
 1 | <?php
 2 | 
 3 | namespace App\Http;
 4 | 
 5 | use Illuminate\Foundation\Http\Kernel as HttpKernel;
 6 | 
 7 | class Kernel extends HttpKernel
 8 | {
 9 |     /**
10 |      * The application's global HTTP middleware stack.
11 |      *
12 |      * These middleware are run during every request to your application.
13 |      *
14 |      * @var array
15 |      */
16 |     protected $middleware = [
17 |         \Illuminate\Foundation\Http\Middleware\CheckForMaintenanceMode::class,
18 |         \Illuminate\Foundation\Http\Middleware\ValidatePostSize::class,
19 |         \App\Http\Middleware\TrimStrings::class,
20 |         \Illuminate\Foundation\Http\Middleware\ConvertEmptyStringsToNull::class,
21 |         \App\Http\Middleware\TrustProxies::class,
22 |     ];
23 | 
24 |     /**
25 |      * The application's route middleware groups.
26 |      *
27 |      * @var array
28 |      */
29 |     protected $middlewareGroups = [
30 |         'web' => [
31 |             \App\Http\Middleware\EncryptCookies::class,
32 |             \Illuminate\Cookie\Middleware\AddQueuedCookiesToResponse::class,
33 |             \Illuminate\Session\Middleware\StartSession::class,
34 |             // \Illuminate\Session\Middleware\AuthenticateSession::class,
35 |             \Illuminate\View\Middleware\ShareErrorsFromSession::class,
36 |             \App\Http\Middleware\VerifyCsrfToken::class,
37 |             \Illuminate\Routing\Middleware\SubstituteBindings::class,
38 |         ],
39 | 
40 |         'api' => [
41 |             'throttle:60,1',
42 |             'bindings',
43 |         ],
44 |     ];
45 | 
46 |     /**
47 |      * The application's route middleware.
48 |      *
49 |      * These middleware may be assigned to groups or used individually.
50 |      *
51 |      * @var array
52 |      */
53 |     protected $routeMiddleware = [
54 |         'auth' => \Illuminate\Auth\Middleware\Authenticate::class,
55 |         'auth.basic' => \Illuminate\Auth\Middleware\AuthenticateWithBasicAuth::class,
56 |         'bindings' => \Illuminate\Routing\Middleware\SubstituteBindings::class,
57 |         'cache.headers' => \Illuminate\Http\Middleware\SetCacheHeaders::class,
58 |         'can' => \Illuminate\Auth\Middleware\Authorize::class,
59 |         'guest' => \App\Http\Middleware\RedirectIfAuthenticated::class,
60 |         'signed' => \Illuminate\Routing\Middleware\ValidateSignature::class,
61 |         'throttle' => \Illuminate\Routing\Middleware\ThrottleRequests::class,
62 |     ];
63 | }
64 | 


--------------------------------------------------------------------------------
/resources/assets/js/components/LineItem.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |     <li class="Line-item">
 3 |         <div class="Line-item__img">
 4 |             <img v-if="line_item.variant.image"
 5 |                  :src="line_item.variant.image.src"
 6 |                  :alt="`${line_item.title} product shot`"/>
 7 |         </div>
 8 |         <div class="Line-item__content">
 9 |             <div class="Line-item__content-row">
10 |                 <div class="Line-item__variant-title">
11 |                     {{line_item.variant.title}}
12 |                 </div>
13 |                 <span class="Line-item__title">
14 |                 {{line_item.title}}
15 |             </span>
16 |             </div>
17 |             <div class="Line-item__content-row">
18 |                 <div class="Line-item__quantity-container">
19 |                     <button class="Line-item__quantity-update" @click="decrementQuantity(line_item.id)">-</button>
20 |                     <span class="Line-item__quantity">{{line_item.quantity}}</span>
21 |                     <button class="Line-item__quantity-update" @click="incrementQuantity(line_item.id)">+</button>
22 |                 </div>
23 |                 <span class="Line-item__price">
24 |                     $ {{ lineItemPrice }}
25 |                 </span>
26 |                 <button class="Line-item__remove" @click="removeLineItemInCart(line_item.id)">×</button>
27 |             </div>
28 |         </div>
29 |     </li>
30 | </template>
31 | 
32 | <script>
33 |     export default {
34 |         mounted() {
35 |             console.log('Component mounted.')
36 |         },
37 |         props: {
38 |             removeLineItemInCart: {
39 |                 type: Function
40 |             },
41 |             updateLineItemInCart: {
42 |                 type: Function
43 |             },
44 |             line_item: {
45 |                 type: Object
46 |             },
47 |         },
48 |         computed: {
49 |             lineItemPrice() {
50 |                 return (this.line_item.quantity * this.line_item.variant.price).toFixed(2);
51 |             }
52 |         },
53 |         methods: {
54 |             decrementQuantity(lineItemId) {
55 |                 console.log(lineItemId);
56 |                 this.updateLineItemInCart(lineItemId, this.line_item.quantity - 1);
57 |             },
58 |             incrementQuantity(lineItemId) {
59 |                 console.log(lineItemId);
60 |                 this.updateLineItemInCart(lineItemId, this.line_item.quantity + 1)
61 |             }
62 |         }
63 |     }
64 | </script>
65 | 


--------------------------------------------------------------------------------
/config/logging.php:
--------------------------------------------------------------------------------
 1 | <?php
 2 | 
 3 | use Monolog\Handler\StreamHandler;
 4 | 
 5 | return [
 6 | 
 7 |     /*
 8 |     |--------------------------------------------------------------------------
 9 |     | Default Log Channel
10 |     |--------------------------------------------------------------------------
11 |     |
12 |     | This option defines the default log channel that gets used when writing
13 |     | messages to the logs. The name specified in this option should match
14 |     | one of the channels defined in the "channels" configuration array.
15 |     |
16 |     */
17 | 
18 |     'default' => env('LOG_CHANNEL', 'stack'),
19 | 
20 |     /*
21 |     |--------------------------------------------------------------------------
22 |     | Log Channels
23 |     |--------------------------------------------------------------------------
24 |     |
25 |     | Here you may configure the log channels for your application. Out of
26 |     | the box, Laravel uses the Monolog PHP logging library. This gives
27 |     | you a variety of powerful log handlers / formatters to utilize.
28 |     |
29 |     | Available Drivers: "single", "daily", "slack", "syslog",
30 |     |                    "errorlog", "monolog",
31 |     |                    "custom", "stack"
32 |     |
33 |     */
34 | 
35 |     'channels' => [
36 |         'stack' => [
37 |             'driver' => 'stack',
38 |             'channels' => ['single'],
39 |         ],
40 | 
41 |         'single' => [
42 |             'driver' => 'single',
43 |             'path' => storage_path('logs/laravel.log'),
44 |             'level' => 'debug',
45 |         ],
46 | 
47 |         'daily' => [
48 |             'driver' => 'daily',
49 |             'path' => storage_path('logs/laravel.log'),
50 |             'level' => 'debug',
51 |             'days' => 7,
52 |         ],
53 | 
54 |         'slack' => [
55 |             'driver' => 'slack',
56 |             'url' => env('LOG_SLACK_WEBHOOK_URL'),
57 |             'username' => 'Laravel Log',
58 |             'emoji' => ':boom:',
59 |             'level' => 'critical',
60 |         ],
61 | 
62 |         'stderr' => [
63 |             'driver' => 'monolog',
64 |             'handler' => StreamHandler::class,
65 |             'with' => [
66 |                 'stream' => 'php://stderr',
67 |             ],
68 |         ],
69 | 
70 |         'syslog' => [
71 |             'driver' => 'syslog',
72 |             'level' => 'debug',
73 |         ],
74 | 
75 |         'errorlog' => [
76 |             'driver' => 'errorlog',
77 |             'level' => 'debug',
78 |         ],
79 |     ],
80 | 
81 | ];
82 | 


--------------------------------------------------------------------------------
/resources/assets/js/components/Cart.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |     <div class="Cart" :class="{ 'Cart--open' : isCartOpen }">
 3 |     <header class="Cart__header">
 4 |         <h2>Cart</h2>
 5 |         <button
 6 |                 @click="handleCartClose"
 7 |                 class="Cart__close">
 8 |             ×
 9 |         </button>
10 |     </header>
11 |     <ul class="Cart__line-items" v-if="checkout">
12 |         <Line-Item
13 |                 v-for="line_item in checkout.lineItems.edges"
14 |                 :removeLineItemInCart="removeLineItemInCart"
15 |                 :updateLineItemInCart="updateLineItemInCart"
16 |                 :key="line_item.node.id.toString()"
17 |                 :line_item="line_item.node"
18 |         >
19 |         </Line-Item>
20 |     </ul>
21 |     <footer class="Cart__footer">
22 |         <div class="Cart-info clearfix">
23 |             <div class="Cart-info__total Cart-info__small">Subtotal</div>
24 |             <div class="Cart-info__pricing">
25 |                 <span class="pricing">$ {{checkout.subtotalPrice}}</span>
26 |             </div>
27 |         </div>
28 |         <div class="Cart-info clearfix">
29 |             <div class="Cart-info__total Cart-info__small">Taxes</div>
30 |             <div class="Cart-info__pricing">
31 |                 <span class="pricing">$ {{checkout.totalTax}}</span>
32 |             </div>
33 |         </div>
34 |         <div class="Cart-info clearfix">
35 |             <div class="Cart-info__total Cart-info__small">Total</div>
36 |             <div class="Cart-info__pricing">
37 |                 <span class="pricing">$ {{checkout.totalPrice}}</span>
38 |             </div>
39 |         </div>
40 |         <button class="Cart__checkout button" @click="openCheckout">Checkout</button>
41 |     </footer>
42 |     </div>
43 | </template>
44 | <script>
45 | import LineItem from './LineItem';
46 | export default {
47 |     mounted() {
48 |         console.log('Component mounted.')
49 |     },
50 |     components: {
51 |         'Line-Item' : LineItem
52 |     },
53 |     props: {
54 |         checkout : {
55 |             type : Object
56 |         },
57 |         isCartOpen : {
58 |             type: Boolean
59 |         },
60 |         handleCartClose : {
61 |             type: Function
62 |         },
63 |         removeLineItemInCart : {
64 |             type : Function
65 |         },
66 |         updateLineItemInCart : {
67 |             type : Function
68 |         },
69 |         customerAccessToken : {
70 |             type : String
71 |         },
72 |     },
73 |     methods: {
74 |         openCheckout() {
75 |             window.open(this.checkout.webUrl);
76 |         }
77 |     }
78 | }
79 | </script>


--------------------------------------------------------------------------------
/config/queue.php:
--------------------------------------------------------------------------------
 1 | <?php
 2 | 
 3 | return [
 4 | 
 5 |     /*
 6 |     |--------------------------------------------------------------------------
 7 |     | Default Queue Connection Name
 8 |     |--------------------------------------------------------------------------
 9 |     |
10 |     | Laravel's queue API supports an assortment of back-ends via a single
11 |     | API, giving you convenient access to each back-end using the same
12 |     | syntax for every one. Here you may define a default connection.
13 |     |
14 |     */
15 | 
16 |     'default' => env('QUEUE_DRIVER', 'sync'),
17 | 
18 |     /*
19 |     |--------------------------------------------------------------------------
20 |     | Queue Connections
21 |     |--------------------------------------------------------------------------
22 |     |
23 |     | Here you may configure the connection information for each server that
24 |     | is used by your application. A default configuration has been added
25 |     | for each back-end shipped with Laravel. You are free to add more.
26 |     |
27 |     | Drivers: "sync", "database", "beanstalkd", "sqs", "redis", "null"
28 |     |
29 |     */
30 | 
31 |     'connections' => [
32 | 
33 |         'sync' => [
34 |             'driver' => 'sync',
35 |         ],
36 | 
37 |         'database' => [
38 |             'driver' => 'database',
39 |             'table' => 'jobs',
40 |             'queue' => 'default',
41 |             'retry_after' => 90,
42 |         ],
43 | 
44 |         'beanstalkd' => [
45 |             'driver' => 'beanstalkd',
46 |             'host' => 'localhost',
47 |             'queue' => 'default',
48 |             'retry_after' => 90,
49 |         ],
50 | 
51 |         'sqs' => [
52 |             'driver' => 'sqs',
53 |             'key' => env('SQS_KEY', 'your-public-key'),
54 |             'secret' => env('SQS_SECRET', 'your-secret-key'),
55 |             'prefix' => env('SQS_PREFIX', 'https://sqs.us-east-1.amazonaws.com/your-account-id'),
56 |             'queue' => env('SQS_QUEUE', 'your-queue-name'),
57 |             'region' => env('SQS_REGION', 'us-east-1'),
58 |         ],
59 | 
60 |         'redis' => [
61 |             'driver' => 'redis',
62 |             'connection' => 'default',
63 |             'queue' => 'default',
64 |             'retry_after' => 90,
65 |             'block_for' => null,
66 |         ],
67 | 
68 |     ],
69 | 
70 |     /*
71 |     |--------------------------------------------------------------------------
72 |     | Failed Queue Jobs
73 |     |--------------------------------------------------------------------------
74 |     |
75 |     | These options configure the behavior of failed queue job logging so you
76 |     | can control which database and table are used to store the jobs that
77 |     | have failed. You may change them to any database / table you wish.
78 |     |
79 |     */
80 | 
81 |     'failed' => [
82 |         'database' => env('DB_CONNECTION', 'mysql'),
83 |         'table' => 'failed_jobs',
84 |     ],
85 | 
86 | ];
87 | 


--------------------------------------------------------------------------------
/config/cache.php:
--------------------------------------------------------------------------------
 1 | <?php
 2 | 
 3 | return [
 4 | 
 5 |     /*
 6 |     |--------------------------------------------------------------------------
 7 |     | Default Cache Store
 8 |     |--------------------------------------------------------------------------
 9 |     |
10 |     | This option controls the default cache connection that gets used while
11 |     | using this caching library. This connection is used when another is
12 |     | not explicitly specified when executing a given caching function.
13 |     |
14 |     | Supported: "apc", "array", "database", "file", "memcached", "redis"
15 |     |
16 |     */
17 | 
18 |     'default' => env('CACHE_DRIVER', 'file'),
19 | 
20 |     /*
21 |     |--------------------------------------------------------------------------
22 |     | Cache Stores
23 |     |--------------------------------------------------------------------------
24 |     |
25 |     | Here you may define all of the cache "stores" for your application as
26 |     | well as their drivers. You may even define multiple stores for the
27 |     | same cache driver to group types of items stored in your caches.
28 |     |
29 |     */
30 | 
31 |     'stores' => [
32 | 
33 |         'apc' => [
34 |             'driver' => 'apc',
35 |         ],
36 | 
37 |         'array' => [
38 |             'driver' => 'array',
39 |         ],
40 | 
41 |         'database' => [
42 |             'driver' => 'database',
43 |             'table' => 'cache',
44 |             'connection' => null,
45 |         ],
46 | 
47 |         'file' => [
48 |             'driver' => 'file',
49 |             'path' => storage_path('framework/cache/data'),
50 |         ],
51 | 
52 |         'memcached' => [
53 |             'driver' => 'memcached',
54 |             'persistent_id' => env('MEMCACHED_PERSISTENT_ID'),
55 |             'sasl' => [
56 |                 env('MEMCACHED_USERNAME'),
57 |                 env('MEMCACHED_PASSWORD'),
58 |             ],
59 |             'options' => [
60 |                 // Memcached::OPT_CONNECT_TIMEOUT  => 2000,
61 |             ],
62 |             'servers' => [
63 |                 [
64 |                     'host' => env('MEMCACHED_HOST', '127.0.0.1'),
65 |                     'port' => env('MEMCACHED_PORT', 11211),
66 |                     'weight' => 100,
67 |                 ],
68 |             ],
69 |         ],
70 | 
71 |         'redis' => [
72 |             'driver' => 'redis',
73 |             'connection' => 'default',
74 |         ],
75 | 
76 |     ],
77 | 
78 |     /*
79 |     |--------------------------------------------------------------------------
80 |     | Cache Key Prefix
81 |     |--------------------------------------------------------------------------
82 |     |
83 |     | When utilizing a RAM based store such as APC or Memcached, there might
84 |     | be other applications utilizing the same cache. So, we'll specify a
85 |     | value to get prefixed to all our keys so we can avoid collisions.
86 |     |
87 |     */
88 | 
89 |     'prefix' => env(
90 |         'CACHE_PREFIX',
91 |         str_slug(env('APP_NAME', 'laravel'), '_').'_cache'
92 |     ),
93 | 
94 | ];
95 | 


--------------------------------------------------------------------------------
/resources/assets/js/components/Product.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |     <div class="Product">
 3 |         <img v-if="hasImage"
 4 |              :src="variantImage" alt="`${product.title} product shot`"/>
 5 |         <h5 class="Product__title">{{product.title}}</h5>
 6 |         <span class="Product__price">${{variant.price}}</span>
 7 |         <Variant-Selectors
 8 |                 v-for="option in product.options"
 9 |                 :handleOptionChange="handleOptionChange"
10 |                 :key="option.id.toString()"
11 |                 :option="option"
12 |         />
13 |         <label class="Product__option">
14 |             Quantity
15 |             <input min="1" type="number" v-model="selectedVariantQuantity">
16 |         </label>
17 |         <button class="Product__buy button" @click="addVariantToCart(variant.id, selectedVariantQuantity)">Add to Cart
18 |         </button>
19 |     </div>
20 | </template>
21 | 
22 | <script>
23 |     import VariantSelectors from './VariantSelectors';
24 | 
25 |     export default {
26 |         data() {
27 |             return {
28 |                 selectedVariantImage: '',
29 |                 selectedVariantQuantity: 1,
30 |                 selectedOptions: {}
31 |             }
32 |         },
33 |         props: {
34 |             product: {
35 |                 type: Object
36 |             },
37 |             addVariantToCart: {
38 |                 type: Function
39 |             }
40 |         },
41 |         components: {
42 |             'Variant-Selectors': VariantSelectors
43 |         },
44 |         computed: {
45 |             hasImage() {
46 |                 return this.product.images.edges.length;
47 |             },
48 |             variant() {
49 |                 return this.selectedVariant || this.product.variants.edges[0].node;
50 |             },
51 |             variantImage() {
52 |                 if (!this.hasImage) {
53 |                     return '';
54 |                 }
55 |                 return this.selectedVariantImage || this.product.images.edges[0].node.src;
56 | 
57 |             }
58 |         },
59 |         methods: {
60 |             findImage(images, variantId) {
61 |                 const primary = images[0];
62 | 
63 |                 const image = images.filter(function (image) {
64 |                     return image.variant_ids.includes(variantId);
65 |                 })[0];
66 | 
67 |                 return (image || primary).src;
68 |             },
69 |             handleOptionChange(event) {
70 |                 const target = event.target
71 |                 let selectedOptions = this.state.selectedOptions;
72 |                 selectedOptions[target.name] = target.value;
73 | 
74 |                 const selectedVariant = this.props.product.variants.edges.find((variant) => {
75 |                     return variant.node.selectedOptions.every((selectedOption) => {
76 |                         return selectedOptions[selectedOption.name] === selectedOption.value;
77 |                     });
78 |                 }).node;
79 | 
80 |                 this.setState({
81 |                     selectedVariant: selectedVariant,
82 |                     selectedVariantImage: selectedVariant.image.src
83 |                 });
84 |             }
85 |         },
86 |         mounted() {
87 |             this.product.options.forEach((selector) => {
88 |                 this.selectedOptions = {[selector.name]: selector.values[0]}
89 |             });
90 |         },
91 |     }
92 | </script>
93 | 


--------------------------------------------------------------------------------
/config/auth.php:
--------------------------------------------------------------------------------
  1 | <?php
  2 | 
  3 | return [
  4 | 
  5 |     /*
  6 |     |--------------------------------------------------------------------------
  7 |     | Authentication Defaults
  8 |     |--------------------------------------------------------------------------
  9 |     |
 10 |     | This option controls the default authentication "guard" and password
 11 |     | reset options for your application. You may change these defaults
 12 |     | as required, but they're a perfect start for most applications.
 13 |     |
 14 |     */
 15 | 
 16 |     'defaults' => [
 17 |         'guard' => 'web',
 18 |         'passwords' => 'users',
 19 |     ],
 20 | 
 21 |     /*
 22 |     |--------------------------------------------------------------------------
 23 |     | Authentication Guards
 24 |     |--------------------------------------------------------------------------
 25 |     |
 26 |     | Next, you may define every authentication guard for your application.
 27 |     | Of course, a great default configuration has been defined for you
 28 |     | here which uses session storage and the Eloquent user provider.
 29 |     |
 30 |     | All authentication drivers have a user provider. This defines how the
 31 |     | users are actually retrieved out of your database or other storage
 32 |     | mechanisms used by this application to persist your user's data.
 33 |     |
 34 |     | Supported: "session", "token"
 35 |     |
 36 |     */
 37 | 
 38 |     'guards' => [
 39 |         'web' => [
 40 |             'driver' => 'session',
 41 |             'provider' => 'users',
 42 |         ],
 43 | 
 44 |         'api' => [
 45 |             'driver' => 'token',
 46 |             'provider' => 'users',
 47 |         ],
 48 |     ],
 49 | 
 50 |     /*
 51 |     |--------------------------------------------------------------------------
 52 |     | User Providers
 53 |     |--------------------------------------------------------------------------
 54 |     |
 55 |     | All authentication drivers have a user provider. This defines how the
 56 |     | users are actually retrieved out of your database or other storage
 57 |     | mechanisms used by this application to persist your user's data.
 58 |     |
 59 |     | If you have multiple user tables or models you may configure multiple
 60 |     | sources which represent each model / table. These sources may then
 61 |     | be assigned to any extra authentication guards you have defined.
 62 |     |
 63 |     | Supported: "database", "eloquent"
 64 |     |
 65 |     */
 66 | 
 67 |     'providers' => [
 68 |         'users' => [
 69 |             'driver' => 'eloquent',
 70 |             'model' => App\User::class,
 71 |         ],
 72 | 
 73 |         // 'users' => [
 74 |         //     'driver' => 'database',
 75 |         //     'table' => 'users',
 76 |         // ],
 77 |     ],
 78 | 
 79 |     /*
 80 |     |--------------------------------------------------------------------------
 81 |     | Resetting Passwords
 82 |     |--------------------------------------------------------------------------
 83 |     |
 84 |     | You may specify multiple password reset configurations if you have more
 85 |     | than one user table or model in the application and you want to have
 86 |     | separate password reset settings based on the specific user types.
 87 |     |
 88 |     | The expire time is the number of minutes that the reset token should be
 89 |     | considered valid. This security feature keeps tokens short-lived so
 90 |     | they have less time to be guessed. You may change this as needed.
 91 |     |
 92 |     */
 93 | 
 94 |     'passwords' => [
 95 |         'users' => [
 96 |             'provider' => 'users',
 97 |             'table' => 'password_resets',
 98 |             'expire' => 60,
 99 |         ],
100 |     ],
101 | 
102 | ];
103 | 


--------------------------------------------------------------------------------
/config/database.php:
--------------------------------------------------------------------------------
  1 | <?php
  2 | 
  3 | return [
  4 | 
  5 |     /*
  6 |     |--------------------------------------------------------------------------
  7 |     | Default Database Connection Name
  8 |     |--------------------------------------------------------------------------
  9 |     |
 10 |     | Here you may specify which of the database connections below you wish
 11 |     | to use as your default connection for all database work. Of course
 12 |     | you may use many connections at once using the Database library.
 13 |     |
 14 |     */
 15 | 
 16 |     'default' => env('DB_CONNECTION', 'mysql'),
 17 | 
 18 |     /*
 19 |     |--------------------------------------------------------------------------
 20 |     | Database Connections
 21 |     |--------------------------------------------------------------------------
 22 |     |
 23 |     | Here are each of the database connections setup for your application.
 24 |     | Of course, examples of configuring each database platform that is
 25 |     | supported by Laravel is shown below to make development simple.
 26 |     |
 27 |     |
 28 |     | All database work in Laravel is done through the PHP PDO facilities
 29 |     | so make sure you have the driver for your particular database of
 30 |     | choice installed on your machine before you begin development.
 31 |     |
 32 |     */
 33 | 
 34 |     'connections' => [
 35 | 
 36 |         'sqlite' => [
 37 |             'driver' => 'sqlite',
 38 |             'database' => env('DB_DATABASE', database_path('database.sqlite')),
 39 |             'prefix' => '',
 40 |         ],
 41 | 
 42 |         'mysql' => [
 43 |             'driver' => 'mysql',
 44 |             'host' => env('DB_HOST', '127.0.0.1'),
 45 |             'port' => env('DB_PORT', '3306'),
 46 |             'database' => env('DB_DATABASE', 'forge'),
 47 |             'username' => env('DB_USERNAME', 'forge'),
 48 |             'password' => env('DB_PASSWORD', ''),
 49 |             'unix_socket' => env('DB_SOCKET', ''),
 50 |             'charset' => 'utf8mb4',
 51 |             'collation' => 'utf8mb4_unicode_ci',
 52 |             'prefix' => '',
 53 |             'strict' => true,
 54 |             'engine' => null,
 55 |         ],
 56 | 
 57 |         'pgsql' => [
 58 |             'driver' => 'pgsql',
 59 |             'host' => env('DB_HOST', '127.0.0.1'),
 60 |             'port' => env('DB_PORT', '5432'),
 61 |             'database' => env('DB_DATABASE', 'forge'),
 62 |             'username' => env('DB_USERNAME', 'forge'),
 63 |             'password' => env('DB_PASSWORD', ''),
 64 |             'charset' => 'utf8',
 65 |             'prefix' => '',
 66 |             'schema' => 'public',
 67 |             'sslmode' => 'prefer',
 68 |         ],
 69 | 
 70 |         'sqlsrv' => [
 71 |             'driver' => 'sqlsrv',
 72 |             'host' => env('DB_HOST', 'localhost'),
 73 |             'port' => env('DB_PORT', '1433'),
 74 |             'database' => env('DB_DATABASE', 'forge'),
 75 |             'username' => env('DB_USERNAME', 'forge'),
 76 |             'password' => env('DB_PASSWORD', ''),
 77 |             'charset' => 'utf8',
 78 |             'prefix' => '',
 79 |         ],
 80 | 
 81 |     ],
 82 | 
 83 |     /*
 84 |     |--------------------------------------------------------------------------
 85 |     | Migration Repository Table
 86 |     |--------------------------------------------------------------------------
 87 |     |
 88 |     | This table keeps track of all the migrations that have already run for
 89 |     | your application. Using this information, we can determine which of
 90 |     | the migrations on disk haven't actually been run in the database.
 91 |     |
 92 |     */
 93 | 
 94 |     'migrations' => 'migrations',
 95 | 
 96 |     /*
 97 |     |--------------------------------------------------------------------------
 98 |     | Redis Databases
 99 |     |--------------------------------------------------------------------------
100 |     |
101 |     | Redis is an open source, fast, and advanced key-value store that also
102 |     | provides a richer set of commands than a typical key-value systems
103 |     | such as APC or Memcached. Laravel makes it easy to dig right in.
104 |     |
105 |     */
106 | 
107 |     'redis' => [
108 | 
109 |         'client' => 'predis',
110 | 
111 |         'default' => [
112 |             'host' => env('REDIS_HOST', '127.0.0.1'),
113 |             'password' => env('REDIS_PASSWORD', null),
114 |             'port' => env('REDIS_PORT', 6379),
115 |             'database' => 0,
116 |         ],
117 | 
118 |     ],
119 | 
120 | ];
121 | 


--------------------------------------------------------------------------------
/config/mail.php:
--------------------------------------------------------------------------------
  1 | <?php
  2 | 
  3 | return [
  4 | 
  5 |     /*
  6 |     |--------------------------------------------------------------------------
  7 |     | Mail Driver
  8 |     |--------------------------------------------------------------------------
  9 |     |
 10 |     | Laravel supports both SMTP and PHP's "mail" function as drivers for the
 11 |     | sending of e-mail. You may specify which one you're using throughout
 12 |     | your application here. By default, Laravel is setup for SMTP mail.
 13 |     |
 14 |     | Supported: "smtp", "sendmail", "mailgun", "mandrill", "ses",
 15 |     |            "sparkpost", "log", "array"
 16 |     |
 17 |     */
 18 | 
 19 |     'driver' => env('MAIL_DRIVER', 'smtp'),
 20 | 
 21 |     /*
 22 |     |--------------------------------------------------------------------------
 23 |     | SMTP Host Address
 24 |     |--------------------------------------------------------------------------
 25 |     |
 26 |     | Here you may provide the host address of the SMTP server used by your
 27 |     | applications. A default option is provided that is compatible with
 28 |     | the Mailgun mail service which will provide reliable deliveries.
 29 |     |
 30 |     */
 31 | 
 32 |     'host' => env('MAIL_HOST', 'smtp.mailgun.org'),
 33 | 
 34 |     /*
 35 |     |--------------------------------------------------------------------------
 36 |     | SMTP Host Port
 37 |     |--------------------------------------------------------------------------
 38 |     |
 39 |     | This is the SMTP port used by your application to deliver e-mails to
 40 |     | users of the application. Like the host we have set this value to
 41 |     | stay compatible with the Mailgun e-mail application by default.
 42 |     |
 43 |     */
 44 | 
 45 |     'port' => env('MAIL_PORT', 587),
 46 | 
 47 |     /*
 48 |     |--------------------------------------------------------------------------
 49 |     | Global "From" Address
 50 |     |--------------------------------------------------------------------------
 51 |     |
 52 |     | You may wish for all e-mails sent by your application to be sent from
 53 |     | the same address. Here, you may specify a name and address that is
 54 |     | used globally for all e-mails that are sent by your application.
 55 |     |
 56 |     */
 57 | 
 58 |     'from' => [
 59 |         'address' => env('MAIL_FROM_ADDRESS', 'hello@example.com'),
 60 |         'name' => env('MAIL_FROM_NAME', 'Example'),
 61 |     ],
 62 | 
 63 |     /*
 64 |     |--------------------------------------------------------------------------
 65 |     | E-Mail Encryption Protocol
 66 |     |--------------------------------------------------------------------------
 67 |     |
 68 |     | Here you may specify the encryption protocol that should be used when
 69 |     | the application send e-mail messages. A sensible default using the
 70 |     | transport layer security protocol should provide great security.
 71 |     |
 72 |     */
 73 | 
 74 |     'encryption' => env('MAIL_ENCRYPTION', 'tls'),
 75 | 
 76 |     /*
 77 |     |--------------------------------------------------------------------------
 78 |     | SMTP Server Username
 79 |     |--------------------------------------------------------------------------
 80 |     |
 81 |     | If your SMTP server requires a username for authentication, you should
 82 |     | set it here. This will get used to authenticate with your server on
 83 |     | connection. You may also set the "password" value below this one.
 84 |     |
 85 |     */
 86 | 
 87 |     'username' => env('MAIL_USERNAME'),
 88 | 
 89 |     'password' => env('MAIL_PASSWORD'),
 90 | 
 91 |     /*
 92 |     |--------------------------------------------------------------------------
 93 |     | Sendmail System Path
 94 |     |--------------------------------------------------------------------------
 95 |     |
 96 |     | When using the "sendmail" driver to send e-mails, we will need to know
 97 |     | the path to where Sendmail lives on this server. A default path has
 98 |     | been provided here, which will work well on most of your systems.
 99 |     |
100 |     */
101 | 
102 |     'sendmail' => '/usr/sbin/sendmail -bs',
103 | 
104 |     /*
105 |     |--------------------------------------------------------------------------
106 |     | Markdown Mail Settings
107 |     |--------------------------------------------------------------------------
108 |     |
109 |     | If you are using Markdown based email rendering, you may configure your
110 |     | theme and component paths here, allowing you to customize the design
111 |     | of the emails. Or, you may simply stick with the Laravel defaults!
112 |     |
113 |     */
114 | 
115 |     'markdown' => [
116 |         'theme' => 'default',
117 | 
118 |         'paths' => [
119 |             resource_path('views/vendor/mail'),
120 |         ],
121 |     ],
122 | 
123 | ];
124 | 


--------------------------------------------------------------------------------
/resources/assets/js/queries/checkout.js:
--------------------------------------------------------------------------------
  1 | import gql from 'graphql-tag';
  2 | 
  3 | 
  4 | export const getShopData = gql`
  5 |   query {
  6 |     shop {
  7 |          name
  8 |     description
  9 |     products(first: 20) {
 10 |       pageInfo {
 11 |         hasNextPage
 12 |         hasPreviousPage
 13 |       }
 14 |       edges {
 15 |         node {
 16 |           id
 17 |           title
 18 |           options {
 19 |             id
 20 |             name
 21 |             values
 22 |           }
 23 |           variants(first: 250) {
 24 |             pageInfo {
 25 |               hasNextPage
 26 |               hasPreviousPage
 27 |             }
 28 |             edges {
 29 |               node {
 30 |                 id
 31 |                 title
 32 |                 selectedOptions {
 33 |                   name
 34 |                   value
 35 |                 }
 36 |                 image {
 37 |                   src
 38 |                 }
 39 |                 price
 40 |               }
 41 |             }
 42 |           }
 43 |           images(first: 250) {
 44 |             pageInfo {
 45 |               hasNextPage
 46 |               hasPreviousPage
 47 |             }
 48 |             edges {
 49 |               node {
 50 |                 src
 51 |               }
 52 |             }
 53 |           }
 54 |         }
 55 |       }
 56 |     }
 57 |     }  
 58 |   }
 59 | `;
 60 | 
 61 | const CheckoutFragment = gql`
 62 |   fragment CheckoutFragment on Checkout {
 63 |     id
 64 |     webUrl
 65 |     totalTax
 66 |     subtotalPrice
 67 |     totalPrice
 68 |     lineItems (first: 250) {
 69 |       edges {
 70 |         node {
 71 |           id
 72 |           title
 73 |           variant {
 74 |             id
 75 |             title
 76 |             image {
 77 |               src
 78 |             }
 79 |             price
 80 |           }
 81 |           quantity
 82 |         }
 83 |       }
 84 |     }
 85 |   }
 86 | `;
 87 | 
 88 | export const createCheckout = gql`
 89 |   mutation checkoutCreate ($input: CheckoutCreateInput!){
 90 |     checkoutCreate(input: $input) {
 91 |       userErrors {
 92 |         message
 93 |         field
 94 |       }
 95 |       checkout {
 96 |         ...CheckoutFragment
 97 |       }
 98 |     }
 99 |   }
100 |   ${CheckoutFragment}
101 | `;
102 | 
103 | export const checkoutLineItemsAdd = gql`
104 |   mutation checkoutLineItemsAdd ($checkoutId: ID!, $lineItems: [CheckoutLineItemInput!]!) {
105 |     checkoutLineItemsAdd(checkoutId: $checkoutId, lineItems: $lineItems) {
106 |       userErrors {
107 |         message
108 |         field
109 |       }
110 |       checkout {
111 |         ...CheckoutFragment
112 |       }
113 |     }
114 |   }
115 |   ${CheckoutFragment}
116 | `;
117 | 
118 | export const checkoutLineItemsUpdate = gql`
119 |   mutation checkoutLineItemsUpdate ($checkoutId: ID!, $lineItems: [CheckoutLineItemUpdateInput!]!) {
120 |     checkoutLineItemsUpdate(checkoutId: $checkoutId, lineItems: $lineItems) {
121 |       userErrors {
122 |         message
123 |         field
124 |       }
125 |       checkout {
126 |         ...CheckoutFragment
127 |       }
128 |     }
129 |   }
130 |   ${CheckoutFragment}
131 | `;
132 | 
133 | export const checkoutLineItemsRemove = gql`
134 |   mutation checkoutLineItemsRemove ($checkoutId: ID!, $lineItemIds: [ID!]!) {
135 |     checkoutLineItemsRemove(checkoutId: $checkoutId, lineItemIds: $lineItemIds) {
136 |       userErrors {
137 |         message
138 |         field
139 |       }
140 |       checkout {
141 |         ...CheckoutFragment
142 |       }
143 |     }
144 |   }
145 |   ${CheckoutFragment}
146 | `;
147 | 
148 | export const checkoutCustomerAssociate = gql`
149 |   mutation checkoutCustomerAssociate($checkoutId: ID!, $customerAccessToken: String!) {
150 |     checkoutCustomerAssociate(checkoutId: $checkoutId, customerAccessToken: $customerAccessToken) {
151 |       userErrors {
152 |         field
153 |         message
154 |       }
155 |       checkout {
156 |         ...CheckoutFragment
157 |       }
158 |     }
159 |   }
160 |   ${CheckoutFragment}
161 | `;
162 | 
163 | export function addVariantToCart(variantId, quantity) {
164 |     this.checkoutLineItemsAdd(
165 |         {
166 |             variables: {checkoutId: this.state.checkout.id, lineItems: [{variantId, quantity: parseInt(quantity, 10)}]}
167 |         }).then((res) => {
168 |         this.setState({
169 |             checkout: res.data.checkoutLineItemsAdd.checkout
170 |         });
171 |     });
172 | 
173 |     this.handleCartOpen();
174 | }
175 | 
176 | export function updateLineItemInCart(lineItemId, quantity) {
177 |     this.checkoutLineItemsUpdate(
178 |         {
179 |             variables: {
180 |                 checkoutId: this.state.checkout.id,
181 |                 lineItems: [{id: lineItemId, quantity: parseInt(quantity, 10)}]
182 |             }
183 |         }).then((res) => {
184 |         this.setState({
185 |             checkout: res.data.checkoutLineItemsUpdate.checkout
186 |         });
187 |     });
188 | }
189 | 
190 | export function removeLineItemInCart(lineItemId) {
191 |     this.checkoutLineItemsRemove(
192 |         {
193 |             variables: {checkoutId: this.state.checkout.id, lineItemIds: [lineItemId]}
194 |         }).then((res) => {
195 |         this.setState({
196 |             checkout: res.data.checkoutLineItemsRemove.checkout
197 |         });
198 |     });
199 | }
200 | 
201 | export function associateCustomerCheckout(customerAccessToken) {
202 |     this.checkoutCustomerAssociate(
203 |         {
204 |             variables: {checkoutId: this.state.checkout.id, customerAccessToken: customerAccessToken}
205 |         }).then((res) => {
206 |         this.setState({
207 |             checkout: res.data.checkoutCustomerAssociate.checkout,
208 |             isCustomerAuthOpen: false
209 |         });
210 |     });
211 | }
212 | 


--------------------------------------------------------------------------------
/resources/assets/js/components/CustomerAuthWithMutation.vue:
--------------------------------------------------------------------------------
  1 | <template>
  2 |     <div class="CustomerAuth" :class="{'CustomerAuth--open' : isCustomerAuthOpen}">
  3 |         <button
  4 |                 @click="closeCustomerAuth(); resetErrorMessages(); resetInputFields();"
  5 |                 class="CustomerAuth__close">
  6 |             ×
  7 |         </button>
  8 |         <div class="CustomerAuth__body">
  9 |             <h2 class="CustomerAuth__heading">{{newCustomer ? 'Create your Account' : 'Log in to your account'}}</h2>
 10 |             <div v-if="nonFieldErrorMessage" class="error">{{nonFieldErrorMessage}}</div>
 11 |             <label class="CustomerAuth__credential">
 12 |                 <input class="CustomerAuth__input" type="email"
 13 |                        placeholder="Email" name="email"
 14 |                        v-model="model.email"
 15 |                 >
 16 | 
 17 |                 <div class="error" v-if="emailErrorMessage" v-bind="emailErrorMessage"></div>
 18 | 
 19 |             </label>
 20 |             <label class="CustomerAuth__credential">
 21 |                 <input class="CustomerAuth__input" type="password"
 22 |                        placeholder="Password" name="password"
 23 |                        v-model="model.password"
 24 |                 >
 25 |                 <div class="error" v-if="passwordErrorMessage" v-bind="passwordErrorMessage"></div>
 26 |             </label>
 27 |             <button class="CustomerAuth__submit button"
 28 |                     type="submit" @click="handleSubmit">
 29 |                 {{newCustomer ? 'Create Account' : 'Log in'}}
 30 |             </button>
 31 |         </div>
 32 |     </div>
 33 | </template>
 34 | 
 35 | <script>
 36 |     import {
 37 |         customerCreate,
 38 |         customerAccessTokenCreate
 39 |     } from './../queries/auth';
 40 | 
 41 |     export default {
 42 |         data() {
 43 |             return {
 44 |                 model: {
 45 |                     email: '',
 46 |                     password: ''
 47 |                 },
 48 |                 nonFieldErrorMessage: null,
 49 |                 emailErrorMessage: null,
 50 |                 passwordErrorMessage: null
 51 |             }
 52 |         },
 53 | 
 54 |         props: {
 55 |             closeCustomerAuth: {
 56 |                 type : Function
 57 |             },
 58 |             associateCustomerCheckout: {
 59 |                 type : Function
 60 |             },
 61 |             showAccountVerificationMessage: {
 62 |                 type : Function
 63 |             },
 64 |             newCustomer: {
 65 |                 type : Boolean
 66 |             },
 67 |             isCustomerAuthOpen: {
 68 |                 type : Boolean
 69 |             },
 70 | 
 71 |         },
 72 |         methods: {
 73 |             resetErrorMessages() {
 74 |                 this.nonFieldErrorMessage = null;
 75 |                 this.emailErrorMessage = null;
 76 |                 this.passwordErrorMessage = null;
 77 |             },
 78 |             resetInputFields() {
 79 |                 this.email = '';
 80 |                 this.password = '';
 81 |             },
 82 |             handleSubmit() {
 83 |                 this.resetErrorMessages();
 84 |                 const email = this.model.email;
 85 |                 const password = this.model.password;
 86 | 
 87 |                 if (this.newCustomer) {
 88 |                     this.createCustomerAccount(email, password)
 89 |                 } else {
 90 |                     this.loginCustomerAccount(email, password)
 91 |                 }
 92 |             },
 93 |             createCustomerAccount(email, password) {
 94 |                 const input = {
 95 |                     email: email,
 96 |                     password: password
 97 |                 };
 98 |                 this.$apollo.mutate({
 99 |                     // Query
100 |                     mutation: customerCreate,
101 |                     // Parameters
102 |                     variables: {input}
103 |                 }).then((res) => {
104 |                     if (res.data.customerCreate.customer) {
105 |                         this.closeCustomerAuth();
106 |                         this.showAccountVerificationMessage();
107 |                     }
108 |                     else {
109 |                         res.data.customerCreate.userErrors.forEach(function (error) {
110 |                             if (error.field) {
111 |                                 this[error.field + "ErrorMessage"] = error.message;
112 |                             } else {
113 |                                 this.nonFieldErrorMessage = error.message;
114 |                             }
115 |                         }.bind(this));
116 |                     }
117 |                 }).catch((error) => {
118 |                     console.error(error)
119 |                 });
120 |             },
121 |             loginCustomerAccount(email, password) {
122 |                 const input = {
123 |                     email: email,
124 |                     password: password
125 |                 };
126 |                 this.$apollo.mutate({
127 |                     // Query
128 |                     mutation: customerAccessTokenCreate,
129 |                     // Parameters
130 |                     variables: {input}
131 |                 }).then((res) => {
132 |                     if (res.data.customerAccessTokenCreate.customerAccessToken) {
133 |                         this.associateCustomerCheckout(res.data.customerAccessTokenCreate.customerAccessToken.accessToken);
134 |                     } else {
135 |                         res.data.customerAccessTokenCreate.userErrors.forEach(function (error) {
136 |                             if (error.field != null) {
137 |                                 this[error.field + "ErrorMessage"] = error.message
138 |                             } else {
139 |                                 this.nonFieldErrorMessage = error.message;
140 |                             }
141 |                         }.bind(this));
142 |                     }
143 |                 }).catch((error) => {
144 |                     console.error(error)
145 |                 });
146 |             }
147 |         },
148 |         mounted() {
149 |             console.log('Component mounted.')
150 |         }
151 |     }
152 | </script>
153 | 


--------------------------------------------------------------------------------
/resources/lang/en/validation.php:
--------------------------------------------------------------------------------
  1 | <?php
  2 | 
  3 | return [
  4 | 
  5 |     /*
  6 |     |--------------------------------------------------------------------------
  7 |     | Validation Language Lines
  8 |     |--------------------------------------------------------------------------
  9 |     |
 10 |     | The following language lines contain the default error messages used by
 11 |     | the validator class. Some of these rules have multiple versions such
 12 |     | as the size rules. Feel free to tweak each of these messages here.
 13 |     |
 14 |     */
 15 | 
 16 |     'accepted'             => 'The :attribute must be accepted.',
 17 |     'active_url'           => 'The :attribute is not a valid URL.',
 18 |     'after'                => 'The :attribute must be a date after :date.',
 19 |     'after_or_equal'       => 'The :attribute must be a date after or equal to :date.',
 20 |     'alpha'                => 'The :attribute may only contain letters.',
 21 |     'alpha_dash'           => 'The :attribute may only contain letters, numbers, and dashes.',
 22 |     'alpha_num'            => 'The :attribute may only contain letters and numbers.',
 23 |     'array'                => 'The :attribute must be an array.',
 24 |     'before'               => 'The :attribute must be a date before :date.',
 25 |     'before_or_equal'      => 'The :attribute must be a date before or equal to :date.',
 26 |     'between'              => [
 27 |         'numeric' => 'The :attribute must be between :min and :max.',
 28 |         'file'    => 'The :attribute must be between :min and :max kilobytes.',
 29 |         'string'  => 'The :attribute must be between :min and :max characters.',
 30 |         'array'   => 'The :attribute must have between :min and :max items.',
 31 |     ],
 32 |     'boolean'              => 'The :attribute field must be true or false.',
 33 |     'confirmed'            => 'The :attribute confirmation does not match.',
 34 |     'date'                 => 'The :attribute is not a valid date.',
 35 |     'date_format'          => 'The :attribute does not match the format :format.',
 36 |     'different'            => 'The :attribute and :other must be different.',
 37 |     'digits'               => 'The :attribute must be :digits digits.',
 38 |     'digits_between'       => 'The :attribute must be between :min and :max digits.',
 39 |     'dimensions'           => 'The :attribute has invalid image dimensions.',
 40 |     'distinct'             => 'The :attribute field has a duplicate value.',
 41 |     'email'                => 'The :attribute must be a valid email address.',
 42 |     'exists'               => 'The selected :attribute is invalid.',
 43 |     'file'                 => 'The :attribute must be a file.',
 44 |     'filled'               => 'The :attribute field must have a value.',
 45 |     'image'                => 'The :attribute must be an image.',
 46 |     'in'                   => 'The selected :attribute is invalid.',
 47 |     'in_array'             => 'The :attribute field does not exist in :other.',
 48 |     'integer'              => 'The :attribute must be an integer.',
 49 |     'ip'                   => 'The :attribute must be a valid IP address.',
 50 |     'ipv4'                 => 'The :attribute must be a valid IPv4 address.',
 51 |     'ipv6'                 => 'The :attribute must be a valid IPv6 address.',
 52 |     'json'                 => 'The :attribute must be a valid JSON string.',
 53 |     'max'                  => [
 54 |         'numeric' => 'The :attribute may not be greater than :max.',
 55 |         'file'    => 'The :attribute may not be greater than :max kilobytes.',
 56 |         'string'  => 'The :attribute may not be greater than :max characters.',
 57 |         'array'   => 'The :attribute may not have more than :max items.',
 58 |     ],
 59 |     'mimes'                => 'The :attribute must be a file of type: :values.',
 60 |     'mimetypes'            => 'The :attribute must be a file of type: :values.',
 61 |     'min'                  => [
 62 |         'numeric' => 'The :attribute must be at least :min.',
 63 |         'file'    => 'The :attribute must be at least :min kilobytes.',
 64 |         'string'  => 'The :attribute must be at least :min characters.',
 65 |         'array'   => 'The :attribute must have at least :min items.',
 66 |     ],
 67 |     'not_in'               => 'The selected :attribute is invalid.',
 68 |     'not_regex'            => 'The :attribute format is invalid.',
 69 |     'numeric'              => 'The :attribute must be a number.',
 70 |     'present'              => 'The :attribute field must be present.',
 71 |     'regex'                => 'The :attribute format is invalid.',
 72 |     'required'             => 'The :attribute field is required.',
 73 |     'required_if'          => 'The :attribute field is required when :other is :value.',
 74 |     'required_unless'      => 'The :attribute field is required unless :other is in :values.',
 75 |     'required_with'        => 'The :attribute field is required when :values is present.',
 76 |     'required_with_all'    => 'The :attribute field is required when :values is present.',
 77 |     'required_without'     => 'The :attribute field is required when :values is not present.',
 78 |     'required_without_all' => 'The :attribute field is required when none of :values are present.',
 79 |     'same'                 => 'The :attribute and :other must match.',
 80 |     'size'                 => [
 81 |         'numeric' => 'The :attribute must be :size.',
 82 |         'file'    => 'The :attribute must be :size kilobytes.',
 83 |         'string'  => 'The :attribute must be :size characters.',
 84 |         'array'   => 'The :attribute must contain :size items.',
 85 |     ],
 86 |     'string'               => 'The :attribute must be a string.',
 87 |     'timezone'             => 'The :attribute must be a valid zone.',
 88 |     'unique'               => 'The :attribute has already been taken.',
 89 |     'uploaded'             => 'The :attribute failed to upload.',
 90 |     'url'                  => 'The :attribute format is invalid.',
 91 | 
 92 |     /*
 93 |     |--------------------------------------------------------------------------
 94 |     | Custom Validation Language Lines
 95 |     |--------------------------------------------------------------------------
 96 |     |
 97 |     | Here you may specify custom validation messages for attributes using the
 98 |     | convention "attribute.rule" to name the lines. This makes it quick to
 99 |     | specify a specific custom language line for a given attribute rule.
100 |     |
101 |     */
102 | 
103 |     'custom' => [
104 |         'attribute-name' => [
105 |             'rule-name' => 'custom-message',
106 |         ],
107 |     ],
108 | 
109 |     /*
110 |     |--------------------------------------------------------------------------
111 |     | Custom Validation Attributes
112 |     |--------------------------------------------------------------------------
113 |     |
114 |     | The following language lines are used to swap attribute place-holders
115 |     | with something more reader friendly such as E-Mail Address instead
116 |     | of "email". This simply helps us make messages a little cleaner.
117 |     |
118 |     */
119 | 
120 |     'attributes' => [],
121 | 
122 | ];
123 | 


--------------------------------------------------------------------------------
/config/session.php:
--------------------------------------------------------------------------------
  1 | <?php
  2 | 
  3 | return [
  4 | 
  5 |     /*
  6 |     |--------------------------------------------------------------------------
  7 |     | Default Session Driver
  8 |     |--------------------------------------------------------------------------
  9 |     |
 10 |     | This option controls the default session "driver" that will be used on
 11 |     | requests. By default, we will use the lightweight native driver but
 12 |     | you may specify any of the other wonderful drivers provided here.
 13 |     |
 14 |     | Supported: "file", "cookie", "database", "apc",
 15 |     |            "memcached", "redis", "array"
 16 |     |
 17 |     */
 18 | 
 19 |     'driver' => env('SESSION_DRIVER', 'file'),
 20 | 
 21 |     /*
 22 |     |--------------------------------------------------------------------------
 23 |     | Session Lifetime
 24 |     |--------------------------------------------------------------------------
 25 |     |
 26 |     | Here you may specify the number of minutes that you wish the session
 27 |     | to be allowed to remain idle before it expires. If you want them
 28 |     | to immediately expire on the browser closing, set that option.
 29 |     |
 30 |     */
 31 | 
 32 |     'lifetime' => env('SESSION_LIFETIME', 120),
 33 | 
 34 |     'expire_on_close' => false,
 35 | 
 36 |     /*
 37 |     |--------------------------------------------------------------------------
 38 |     | Session Encryption
 39 |     |--------------------------------------------------------------------------
 40 |     |
 41 |     | This option allows you to easily specify that all of your session data
 42 |     | should be encrypted before it is stored. All encryption will be run
 43 |     | automatically by Laravel and you can use the Session like normal.
 44 |     |
 45 |     */
 46 | 
 47 |     'encrypt' => false,
 48 | 
 49 |     /*
 50 |     |--------------------------------------------------------------------------
 51 |     | Session File Location
 52 |     |--------------------------------------------------------------------------
 53 |     |
 54 |     | When using the native session driver, we need a location where session
 55 |     | files may be stored. A default has been set for you but a different
 56 |     | location may be specified. This is only needed for file sessions.
 57 |     |
 58 |     */
 59 | 
 60 |     'files' => storage_path('framework/sessions'),
 61 | 
 62 |     /*
 63 |     |--------------------------------------------------------------------------
 64 |     | Session Database Connection
 65 |     |--------------------------------------------------------------------------
 66 |     |
 67 |     | When using the "database" or "redis" session drivers, you may specify a
 68 |     | connection that should be used to manage these sessions. This should
 69 |     | correspond to a connection in your database configuration options.
 70 |     |
 71 |     */
 72 | 
 73 |     'connection' => null,
 74 | 
 75 |     /*
 76 |     |--------------------------------------------------------------------------
 77 |     | Session Database Table
 78 |     |--------------------------------------------------------------------------
 79 |     |
 80 |     | When using the "database" session driver, you may specify the table we
 81 |     | should use to manage the sessions. Of course, a sensible default is
 82 |     | provided for you; however, you are free to change this as needed.
 83 |     |
 84 |     */
 85 | 
 86 |     'table' => 'sessions',
 87 | 
 88 |     /*
 89 |     |--------------------------------------------------------------------------
 90 |     | Session Cache Store
 91 |     |--------------------------------------------------------------------------
 92 |     |
 93 |     | When using the "apc" or "memcached" session drivers, you may specify a
 94 |     | cache store that should be used for these sessions. This value must
 95 |     | correspond with one of the application's configured cache stores.
 96 |     |
 97 |     */
 98 | 
 99 |     'store' => null,
100 | 
101 |     /*
102 |     |--------------------------------------------------------------------------
103 |     | Session Sweeping Lottery
104 |     |--------------------------------------------------------------------------
105 |     |
106 |     | Some session drivers must manually sweep their storage location to get
107 |     | rid of old sessions from storage. Here are the chances that it will
108 |     | happen on a given request. By default, the odds are 2 out of 100.
109 |     |
110 |     */
111 | 
112 |     'lottery' => [2, 100],
113 | 
114 |     /*
115 |     |--------------------------------------------------------------------------
116 |     | Session Cookie Name
117 |     |--------------------------------------------------------------------------
118 |     |
119 |     | Here you may change the name of the cookie used to identify a session
120 |     | instance by ID. The name specified here will get used every time a
121 |     | new session cookie is created by the framework for every driver.
122 |     |
123 |     */
124 | 
125 |     'cookie' => env(
126 |         'SESSION_COOKIE',
127 |         str_slug(env('APP_NAME', 'laravel'), '_').'_session'
128 |     ),
129 | 
130 |     /*
131 |     |--------------------------------------------------------------------------
132 |     | Session Cookie Path
133 |     |--------------------------------------------------------------------------
134 |     |
135 |     | The session cookie path determines the path for which the cookie will
136 |     | be regarded as available. Typically, this will be the root path of
137 |     | your application but you are free to change this when necessary.
138 |     |
139 |     */
140 | 
141 |     'path' => '/',
142 | 
143 |     /*
144 |     |--------------------------------------------------------------------------
145 |     | Session Cookie Domain
146 |     |--------------------------------------------------------------------------
147 |     |
148 |     | Here you may change the domain of the cookie used to identify a session
149 |     | in your application. This will determine which domains the cookie is
150 |     | available to in your application. A sensible default has been set.
151 |     |
152 |     */
153 | 
154 |     'domain' => env('SESSION_DOMAIN', null),
155 | 
156 |     /*
157 |     |--------------------------------------------------------------------------
158 |     | HTTPS Only Cookies
159 |     |--------------------------------------------------------------------------
160 |     |
161 |     | By setting this option to true, session cookies will only be sent back
162 |     | to the server if the browser has a HTTPS connection. This will keep
163 |     | the cookie from being sent to you if it can not be done securely.
164 |     |
165 |     */
166 | 
167 |     'secure' => env('SESSION_SECURE_COOKIE', false),
168 | 
169 |     /*
170 |     |--------------------------------------------------------------------------
171 |     | HTTP Access Only
172 |     |--------------------------------------------------------------------------
173 |     |
174 |     | Setting this value to true will prevent JavaScript from accessing the
175 |     | value of the cookie and the cookie will only be accessible through
176 |     | the HTTP protocol. You are free to modify this option if needed.
177 |     |
178 |     */
179 | 
180 |     'http_only' => true,
181 | 
182 |     /*
183 |     |--------------------------------------------------------------------------
184 |     | Same-Site Cookies
185 |     |--------------------------------------------------------------------------
186 |     |
187 |     | This option determines how your cookies behave when cross-site requests
188 |     | take place, and can be used to mitigate CSRF attacks. By default, we
189 |     | do not enable this as other CSRF protection services are in place.
190 |     |
191 |     | Supported: "lax", "strict"
192 |     |
193 |     */
194 | 
195 |     'same_site' => null,
196 | 
197 | ];
198 | 


--------------------------------------------------------------------------------
/resources/assets/js/components/App.vue:
--------------------------------------------------------------------------------
  1 | <template>
  2 |     <div class="container" v-if="$apollo.loading">
  3 |         <h1 class="display-3">Loading...</h1>
  4 |     </div>
  5 |     <div class="container" v-else>
  6 |         <div class="Flash__message-wrapper">
  7 |             <p :class="{'Flash__message--open' : accountVerificationMessage}" class="Flash__message">
  8 |                 We have sent you an email, please click the link included to verify your email address
  9 |             </p>
 10 |         </div>
 11 |         <Customer-Auth-With-Mutation
 12 |                 :closeCustomerAuth="closeCustomerAuth"
 13 |                 :isCustomerAuthOpen="isCustomerAuthOpen"
 14 |                 :newCustomer="isNewCustomer"
 15 |                 :associateCustomerCheckout="associateCustomerCheckout"
 16 |                 :showAccountVerificationMessage="showAccountVerificationMessage"
 17 |         />
 18 |         <header class="App__header">
 19 |             <ul class="App__nav">
 20 |                 <li class="btn btn-primary App__customer-actions" @click="openCustomerAuth" data-customer-type="new-customer">Create an Account</li>
 21 |                 <li class="btn btn-link App__customer-actions" @click="openCustomerAuth" >Log in</li>
 22 |             </ul>
 23 | 
 24 |             <div class="App__view-cart-wrapper" >
 25 |                 <button class="btn btn-secondary" v-show="!isCartOpen" @click="isCartOpen = true" >
 26 |                     Cart <span class="badge badge-light ml-1">{{itemsInCart}}</span>
 27 |                 </button>
 28 |             </div>
 29 | 
 30 |             <div class="App__title">
 31 |                 <h1>{{shop.name}}: Vue Example</h1>
 32 |                 <h2>{{shop.description}}</h2>
 33 |             </div>
 34 |         </header>
 35 |         <div class="Product-wrapper">
 36 |             <Product v-for="product in shop.products.edges"
 37 |                      :addVariantToCart="addVariantToCart"
 38 |                      :checkout="checkout"
 39 |                      :key="product.node.id.toString()"
 40 |                      :product="product.node"
 41 |             ></Product>
 42 |         </div>
 43 |         <div class="cart-wrapper">
 44 |             <Cart
 45 |                     :removeLineItemInCart="removeLineItemInCart"
 46 |                     :updateLineItemInCart="updateLineItemInCart"
 47 |                     :checkout="checkout"
 48 |                     :isCartOpen="isCartOpen"
 49 |                     :handleCartClose="handleCartClose"
 50 |                     :customerAccessToken="customerAccessToken"
 51 |             />
 52 |         </div>
 53 |     </div>
 54 | </template>
 55 | 
 56 | <script>
 57 |     import {
 58 |         getShopData,
 59 |         createCheckout,
 60 |         checkoutLineItemsAdd,
 61 |         checkoutLineItemsUpdate,
 62 |         checkoutLineItemsRemove,
 63 |         checkoutCustomerAssociate,
 64 |         addVariantToCart,
 65 |         updateLineItemInCart,
 66 |         removeLineItemInCart,
 67 |         associateCustomerCheckout
 68 |     } from './../queries/checkout';
 69 | 
 70 |     import get from 'lodash';
 71 | 
 72 |     import Cart from "./Cart";
 73 |     import Product from "./Product";
 74 |     import CustomerAuthWithMutation from "./CustomerAuthWithMutation";
 75 | 
 76 |     export default {
 77 |         data() {
 78 |             return {
 79 |                 isCartOpen: false,
 80 |                 isCustomerAuthOpen: false,
 81 |                 isNewCustomer: false,
 82 |                 customerAccessToken: '',
 83 |                 accountVerificationMessage: '',
 84 |                 products: [],
 85 |                 checkout: { lineItems: { edges: [] } },
 86 |                 shop: {}
 87 |             }
 88 |         },
 89 |         apollo :{
 90 |             shop() {
 91 |                 return {
 92 |                     query : getShopData,
 93 |                     update(res) {
 94 |                         return res.shop
 95 |                     }
 96 |                 }
 97 |             }
 98 |         },
 99 |         components: {
100 |             'Cart' : Cart,
101 |             'Product' : Product,
102 |             'Customer-Auth-With-Mutation' : CustomerAuthWithMutation
103 |         },
104 |         computed: {
105 |             itemsInCart() {
106 |                 if(this.checkout) {
107 |                     return 0;
108 |                 }
109 |                 return this.checkout.lineItems.edges.length;
110 |             }
111 |         },
112 |         methods: {
113 |             checkoutLineItemsAdd(){},
114 |             checkoutLineItemsUpdate(){},
115 |             checkoutLineItemsRemove(){},
116 |             checkoutCustomerAssociate(){},
117 |             addVariantToCart(variantId, quantity){
118 | 
119 |                 this.$apollo.mutate({
120 |                     // Query
121 |                     mutation: checkoutLineItemsAdd,
122 |                     // Parameters
123 |                     variables: {
124 |                         checkoutId: this.checkout.id,
125 |                         lineItems:  [
126 |                             {variantId, quantity: parseInt(quantity, 10)}
127 |                         ]
128 |                     }
129 |                 }).then((res) => {
130 |                     this.checkout = res.data.checkoutLineItemsAdd.checkout;
131 |                 }).catch((error) => {
132 |                     console.error(error)
133 |                 });
134 |                 this.handleCartOpen();
135 |             },
136 |             updateLineItemInCart(lineItemId, quantity){
137 |                 this.$apollo.mutate({
138 |                     // Query
139 |                     mutation: checkoutLineItemsUpdate,
140 |                     // Parameters
141 |                     variables: {
142 |                         checkoutId: this.checkout.id,
143 |                         lineItems:  [
144 |                             {id: lineItemId, quantity: parseInt(quantity, 10)}
145 |                         ]
146 |                     }
147 |                 }).then((res) => {
148 |                     console.log(res)
149 |                     this.checkout = res.data.checkoutLineItemsUpdate.checkout;
150 |                 }).catch((error) => {
151 |                     console.error(error)
152 |                 });
153 |             },
154 |             removeLineItemInCart(lineItemId){
155 |                 this.$apollo.mutate({
156 |                     // Query
157 |                     mutation: checkoutLineItemsRemove,
158 |                     // Parameters
159 |                     variables: {
160 |                         checkoutId: this.checkout.id,
161 |                         lineItemIds:  [
162 |                             lineItemId
163 |                         ]
164 |                     }
165 |                 }).then((res) => {
166 |                     this.checkout = res.data.checkoutLineItemsRemove.checkout;
167 |                     if(!this.itemsInCart) {
168 |                         this.handleCartClose();
169 |                     }
170 |                 }).catch((error) => {
171 |                     console.error(error)
172 |                 });
173 |             },
174 |             associateCustomerCheckout(customerAccessToken){
175 |                 this.$apollo.mutate({
176 |                     // Query
177 |                     mutation: checkoutCustomerAssociate,
178 |                     // Parameters
179 |                     variables: {
180 |                         checkoutId: this.checkout.id, customerAccessToken: customerAccessToken
181 |                     }
182 |                 }).then((res) => {
183 |                     this.checkout = res.data.checkoutCustomerAssociate.checkout;
184 |                         this.isCustomerAuthOpen = false;
185 |                 }).catch((error) => {
186 |                     console.error(error)
187 |                 })
188 |             },
189 |             createCheckout() {
190 |                 this.$apollo.mutate({
191 |                     // Query
192 |                     mutation: createCheckout,
193 |                     // Parameters
194 |                     variables: {
195 |                         input: {}
196 |                     }
197 |                 }).then((res) => {
198 |                     this.checkout = res.data.checkoutCreate.checkout;
199 |                 }).catch((error) => {
200 |                     console.error(error)
201 |                 })
202 |             },
203 |             handleCartClose(){
204 |                 this.isCartOpen = false
205 |             },
206 |             handleCartOpen(){
207 |                 this.isCartOpen = true
208 |             },
209 |             openCustomerAuth(event) {
210 |                 if (event.target.getAttribute('data-customer-type') === "new-customer") {
211 |                         this.isNewCustomer = true;
212 |                         this.isCustomerAuthOpen = true
213 |                 } else {
214 |                         this.isNewCustomer = false;
215 |                         this.isCustomerAuthOpen = true
216 |                 }
217 |             },
218 |             showAccountVerificationMessage(){
219 |                 this.accountVerificationMessage = true;
220 |                 setTimeout(() => {
221 |                     this.accountVerificationMessage = false;
222 |                 }, 5000);
223 |             },
224 |             closeCustomerAuth() {
225 |                 this.isCustomerAuthOpen = false;
226 |             }
227 |         },
228 |         mounted() {
229 |             this.createCheckout();
230 |         }
231 |     }
232 | </script>
233 | 


--------------------------------------------------------------------------------
/config/app.php:
--------------------------------------------------------------------------------
  1 | <?php
  2 | 
  3 | return [
  4 | 
  5 |     /*
  6 |     |--------------------------------------------------------------------------
  7 |     | Application Name
  8 |     |--------------------------------------------------------------------------
  9 |     |
 10 |     | This value is the name of your application. This value is used when the
 11 |     | framework needs to place the application's name in a notification or
 12 |     | any other location as required by the application or its packages.
 13 |     |
 14 |     */
 15 | 
 16 |     'name' => env('APP_NAME', 'Laravel'),
 17 | 
 18 |     /*
 19 |     |--------------------------------------------------------------------------
 20 |     | Application Environment
 21 |     |--------------------------------------------------------------------------
 22 |     |
 23 |     | This value determines the "environment" your application is currently
 24 |     | running in. This may determine how you prefer to configure various
 25 |     | services your application utilizes. Set this in your ".env" file.
 26 |     |
 27 |     */
 28 | 
 29 |     'env' => env('APP_ENV', 'production'),
 30 | 
 31 |     /*
 32 |     |--------------------------------------------------------------------------
 33 |     | Application Debug Mode
 34 |     |--------------------------------------------------------------------------
 35 |     |
 36 |     | When your application is in debug mode, detailed error messages with
 37 |     | stack traces will be shown on every error that occurs within your
 38 |     | application. If disabled, a simple generic error page is shown.
 39 |     |
 40 |     */
 41 | 
 42 |     'debug' => env('APP_DEBUG', false),
 43 | 
 44 |     /*
 45 |     |--------------------------------------------------------------------------
 46 |     | Application URL
 47 |     |--------------------------------------------------------------------------
 48 |     |
 49 |     | This URL is used by the console to properly generate URLs when using
 50 |     | the Artisan command line tool. You should set this to the root of
 51 |     | your application so that it is used when running Artisan tasks.
 52 |     |
 53 |     */
 54 | 
 55 |     'url' => env('APP_URL', 'http://localhost'),
 56 | 
 57 |     /*
 58 |     |--------------------------------------------------------------------------
 59 |     | Application Timezone
 60 |     |--------------------------------------------------------------------------
 61 |     |
 62 |     | Here you may specify the default timezone for your application, which
 63 |     | will be used by the PHP date and date-time functions. We have gone
 64 |     | ahead and set this to a sensible default for you out of the box.
 65 |     |
 66 |     */
 67 | 
 68 |     'timezone' => 'UTC',
 69 | 
 70 |     /*
 71 |     |--------------------------------------------------------------------------
 72 |     | Application Locale Configuration
 73 |     |--------------------------------------------------------------------------
 74 |     |
 75 |     | The application locale determines the default locale that will be used
 76 |     | by the translation service provider. You are free to set this value
 77 |     | to any of the locales which will be supported by the application.
 78 |     |
 79 |     */
 80 | 
 81 |     'locale' => 'en',
 82 | 
 83 |     /*
 84 |     |--------------------------------------------------------------------------
 85 |     | Application Fallback Locale
 86 |     |--------------------------------------------------------------------------
 87 |     |
 88 |     | The fallback locale determines the locale to use when the current one
 89 |     | is not available. You may change the value to correspond to any of
 90 |     | the language folders that are provided through your application.
 91 |     |
 92 |     */
 93 | 
 94 |     'fallback_locale' => 'en',
 95 | 
 96 |     /*
 97 |     |--------------------------------------------------------------------------
 98 |     | Encryption Key
 99 |     |--------------------------------------------------------------------------
100 |     |
101 |     | This key is used by the Illuminate encrypter service and should be set
102 |     | to a random, 32 character string, otherwise these encrypted strings
103 |     | will not be safe. Please do this before deploying an application!
104 |     |
105 |     */
106 | 
107 |     'key' => env('APP_KEY'),
108 | 
109 |     'cipher' => 'AES-256-CBC',
110 | 
111 |     /*
112 |     |--------------------------------------------------------------------------
113 |     | Autoloaded Service Providers
114 |     |--------------------------------------------------------------------------
115 |     |
116 |     | The service providers listed here will be automatically loaded on the
117 |     | request to your application. Feel free to add your own services to
118 |     | this array to grant expanded functionality to your applications.
119 |     |
120 |     */
121 | 
122 |     'providers' => [
123 | 
124 |         /*
125 |          * Laravel Framework Service Providers...
126 |          */
127 |         Illuminate\Auth\AuthServiceProvider::class,
128 |         Illuminate\Broadcasting\BroadcastServiceProvider::class,
129 |         Illuminate\Bus\BusServiceProvider::class,
130 |         Illuminate\Cache\CacheServiceProvider::class,
131 |         Illuminate\Foundation\Providers\ConsoleSupportServiceProvider::class,
132 |         Illuminate\Cookie\CookieServiceProvider::class,
133 |         Illuminate\Database\DatabaseServiceProvider::class,
134 |         Illuminate\Encryption\EncryptionServiceProvider::class,
135 |         Illuminate\Filesystem\FilesystemServiceProvider::class,
136 |         Illuminate\Foundation\Providers\FoundationServiceProvider::class,
137 |         Illuminate\Hashing\HashServiceProvider::class,
138 |         Illuminate\Mail\MailServiceProvider::class,
139 |         Illuminate\Notifications\NotificationServiceProvider::class,
140 |         Illuminate\Pagination\PaginationServiceProvider::class,
141 |         Illuminate\Pipeline\PipelineServiceProvider::class,
142 |         Illuminate\Queue\QueueServiceProvider::class,
143 |         Illuminate\Redis\RedisServiceProvider::class,
144 |         Illuminate\Auth\Passwords\PasswordResetServiceProvider::class,
145 |         Illuminate\Session\SessionServiceProvider::class,
146 |         Illuminate\Translation\TranslationServiceProvider::class,
147 |         Illuminate\Validation\ValidationServiceProvider::class,
148 |         Illuminate\View\ViewServiceProvider::class,
149 | 
150 |         /*
151 |          * Package Service Providers...
152 |          */
153 | 
154 |         /*
155 |          * Application Service Providers...
156 |          */
157 |         App\Providers\AppServiceProvider::class,
158 |         App\Providers\AuthServiceProvider::class,
159 |         // App\Providers\BroadcastServiceProvider::class,
160 |         App\Providers\EventServiceProvider::class,
161 |         App\Providers\RouteServiceProvider::class,
162 | 
163 |     ],
164 | 
165 |     /*
166 |     |--------------------------------------------------------------------------
167 |     | Class Aliases
168 |     |--------------------------------------------------------------------------
169 |     |
170 |     | This array of class aliases will be registered when this application
171 |     | is started. However, feel free to register as many as you wish as
172 |     | the aliases are "lazy" loaded so they don't hinder performance.
173 |     |
174 |     */
175 | 
176 |     'aliases' => [
177 | 
178 |         'App' => Illuminate\Support\Facades\App::class,
179 |         'Artisan' => Illuminate\Support\Facades\Artisan::class,
180 |         'Auth' => Illuminate\Support\Facades\Auth::class,
181 |         'Blade' => Illuminate\Support\Facades\Blade::class,
182 |         'Broadcast' => Illuminate\Support\Facades\Broadcast::class,
183 |         'Bus' => Illuminate\Support\Facades\Bus::class,
184 |         'Cache' => Illuminate\Support\Facades\Cache::class,
185 |         'Config' => Illuminate\Support\Facades\Config::class,
186 |         'Cookie' => Illuminate\Support\Facades\Cookie::class,
187 |         'Crypt' => Illuminate\Support\Facades\Crypt::class,
188 |         'DB' => Illuminate\Support\Facades\DB::class,
189 |         'Eloquent' => Illuminate\Database\Eloquent\Model::class,
190 |         'Event' => Illuminate\Support\Facades\Event::class,
191 |         'File' => Illuminate\Support\Facades\File::class,
192 |         'Gate' => Illuminate\Support\Facades\Gate::class,
193 |         'Hash' => Illuminate\Support\Facades\Hash::class,
194 |         'Lang' => Illuminate\Support\Facades\Lang::class,
195 |         'Log' => Illuminate\Support\Facades\Log::class,
196 |         'Mail' => Illuminate\Support\Facades\Mail::class,
197 |         'Notification' => Illuminate\Support\Facades\Notification::class,
198 |         'Password' => Illuminate\Support\Facades\Password::class,
199 |         'Queue' => Illuminate\Support\Facades\Queue::class,
200 |         'Redirect' => Illuminate\Support\Facades\Redirect::class,
201 |         'Redis' => Illuminate\Support\Facades\Redis::class,
202 |         'Request' => Illuminate\Support\Facades\Request::class,
203 |         'Response' => Illuminate\Support\Facades\Response::class,
204 |         'Route' => Illuminate\Support\Facades\Route::class,
205 |         'Schema' => Illuminate\Support\Facades\Schema::class,
206 |         'Session' => Illuminate\Support\Facades\Session::class,
207 |         'Storage' => Illuminate\Support\Facades\Storage::class,
208 |         'URL' => Illuminate\Support\Facades\URL::class,
209 |         'Validator' => Illuminate\Support\Facades\Validator::class,
210 |         'View' => Illuminate\Support\Facades\View::class,
211 | 
212 |     ],
213 | 
214 | ];
215 | 


--------------------------------------------------------------------------------
/resources/assets/sass/example.scss:
--------------------------------------------------------------------------------
  1 | /* INITIALIZERS + DEFAULTS
  2 |  * ============================== */
  3 | @import url('https://fonts.googleapis.com/css?family=Roboto:300,400,700');
  4 | 
  5 | *, *:before, *:after {
  6 |   box-sizing: border-box;
  7 | }
  8 | 
  9 | html {
 10 |   font-size: 65%;
 11 | }
 12 | 
 13 | body {
 14 |   margin: 0;
 15 |   padding: 0;
 16 |   font-family: 'Roboto', sans-serif;
 17 |   font-weight: 400;
 18 | }
 19 | 
 20 | img {
 21 |   display: block;
 22 |   max-width: 100%;
 23 |   max-height: 100%;
 24 | }
 25 | 
 26 | h1 {
 27 |   font-weight: 300;
 28 |   margin: 0 0 15px;
 29 |   font-size: 3rem;
 30 | }
 31 | 
 32 | h2 {
 33 |   font-weight: 300;
 34 |   margin: 0;
 35 |   font-size: 2rem;
 36 | }
 37 | 
 38 | /* BASE APP
 39 |  * ============================== */
 40 | .App__header {
 41 |   background-color: #222;
 42 |   background-image: url('https://unsplash.it/1000/300?image=823');
 43 |   background-size: cover;
 44 |   color: white;
 45 |   padding: 10px 10px;
 46 | }
 47 | 
 48 | .App__nav{
 49 |   width: 100%;
 50 |   list-style: none;
 51 | }
 52 | 
 53 | .App__customer-actions {
 54 |   float: left;
 55 |   padding: 10px;
 56 | }
 57 | 
 58 | .App__title {
 59 |   padding: 80px 20px;
 60 |   text-align: center;
 61 | }
 62 | 
 63 | .Product-wrapper {
 64 |   max-width: 900px;
 65 |   margin: 40px auto 0;
 66 |   display: flex;
 67 |   flex-wrap: wrap;
 68 |   justify-content: center;
 69 | }
 70 | 
 71 | .App__view-cart-wrapper {
 72 |   float: right;
 73 | }
 74 | 
 75 | .App__view-cart {
 76 |   font-size: 15px;
 77 |   border: none;
 78 |   background: none;
 79 |   cursor: pointer;
 80 |   color: white;
 81 | }
 82 | 
 83 | .button {
 84 |   background-color: $primary;
 85 |   color: white;
 86 |   border: none;
 87 |   font-size: 1.2rem;
 88 |   padding: 10px 17px;
 89 |   cursor: pointer;
 90 | }
 91 | 
 92 | .button:hover,
 93 | .button:focus {
 94 |   background-color: #222222;
 95 | }
 96 | 
 97 | .button:disabled {
 98 |   background: #bfbfbf;
 99 |   cursor: not-allowed;
100 | }
101 | 
102 | .login {
103 |   font-size: 1.2rem;
104 |   color: #b8b8b8;
105 |   cursor: pointer;
106 | }
107 | 
108 | .login:hover {
109 |   color: white;
110 | }
111 | 
112 | .Flash__message-wrapper {
113 |   -webkit-justify-content: center;
114 |   -ms-flex-pack: center;
115 |   align-items: flex-end;
116 |   justify-content: center;
117 |   position: fixed;
118 |   bottom: 0;
119 |   pointer-events: none;
120 |   z-index: 227;
121 |   left: 50%;
122 |   transform: translateX(-50%);
123 | }
124 | 
125 | .Flash__message {
126 |   background: rgba(0,0,0,0.88);
127 |   border-radius: 3px;
128 |   box-shadow: 0 2px 4px rgba(0,0,0,0.1);
129 |   color: #ffffff;
130 |   cursor: default;
131 |   display: -webkit-flex;
132 |   display: -ms-flexbox;
133 |   display: none;
134 |   pointer-events: auto;
135 |   position: relative;
136 |   font-size: 20px;
137 |   line-height: 28px;
138 |   font-weight: 400;
139 |   padding: 10px 20px;
140 |   margin: 0;
141 | }
142 | 
143 | .Flash__message--open {
144 |   display: flex;
145 | }
146 | 
147 | /* CART
148 |  * ============================== */
149 | .Cart {
150 |   position: fixed;
151 |   top: 0;
152 |   right: 0;
153 |   height: 100%;
154 |   width: 350px;
155 |   background-color: white;
156 |   display: flex;
157 |   flex-direction: column;
158 |   border-left: 1px solid #e5e5e5;
159 |   transform: translateX(100%);
160 |   transition: transform 0.15s ease-in-out;
161 | }
162 | 
163 | .Cart--open {
164 |   transform: translateX(0);
165 | }
166 | 
167 | .Cart__close {
168 |   position: absolute;
169 |   right: 9px;
170 |   top: 8px;
171 |   font-size: 35px;
172 |   color: #999;
173 |   border: none;
174 |   background: transparent;
175 |   transition: transform 100ms ease;
176 |   cursor: pointer;
177 | }
178 | 
179 | .Cart__header {
180 |   padding: 20px;
181 |   border-bottom: 1px solid #e5e5e5;
182 |   flex: 0 0 auto;
183 |   display: inline-block;
184 | }
185 | 
186 | .Cart__line-items {
187 |   flex: 1 0 auto;
188 |   margin: 0;
189 |   padding: 20px;
190 | }
191 | 
192 | .Cart__footer {
193 |   padding: 20px;
194 |   border-top: 1px solid #e5e5e5;
195 |   flex: 0 0 auto;
196 | }
197 | 
198 | .Cart__checkout {
199 |   margin-top: 20px;
200 |   display: block;
201 |   width: 100%;
202 | }
203 | 
204 | .Cart-info {
205 |   padding: 15px 20px 10px;
206 | }
207 | 
208 | .Cart-info__total {
209 |   float: left;
210 |   text-transform: uppercase;
211 | }
212 | 
213 | .Cart-info__small {
214 |   font-size: 11px;
215 | }
216 | 
217 | .Cart-info__pricing {
218 |   float: right;
219 | }
220 | 
221 | .pricing {
222 |   margin-left: 5px;
223 |   font-size: 16px;
224 |   color: black;
225 | }
226 | 
227 | /* LINE ITEMS
228 |  * ============================== */
229 | .Line-item {
230 |   margin-bottom: 20px;
231 |   overflow: hidden;
232 |   backface-visibility: visible;
233 |   min-height: 65px;
234 |   position: relative;
235 |   opacity: 1;
236 |   transition: opacity 0.2s ease-in-out;
237 | }
238 | 
239 | .Line-item__img {
240 |   width: 65px;
241 |   height: 65px;
242 |   border-radius: 3px;
243 |   background-size: contain;
244 |   background-repeat: no-repeat;
245 |   background-position: center center;
246 |   background-color: #e5e5e5;
247 |   position: absolute;
248 | }
249 | 
250 | .Line-item__content {
251 |   width: 100%;
252 |   padding-left: 75px;
253 | }
254 | 
255 | .Line-item__content-row {
256 |   display: inline-block;
257 |   width: 100%;
258 |   margin-bottom: 5px;
259 |   position: relative;
260 | }
261 | 
262 | .Line-item__variant-title {
263 |   float: right;
264 |   font-weight: bold;
265 |   font-size: 11px;
266 |   line-height: 17px;
267 |   color: #767676;
268 | }
269 | 
270 | .Line-item__title {
271 |   color: #4E5665;
272 |   font-size: 15px;
273 |   font-weight: 400;
274 | }
275 | 
276 | .Line-item__price {
277 |   line-height: 23px;
278 |   float: right;
279 |   font-weight: bold;
280 |   font-size: 15px;
281 |   margin-right: 40px;
282 | }
283 | 
284 | .Line-item__quantity-container {
285 |   border: 1px solid #767676;
286 |   float: left;
287 |   border-radius: 3px;
288 | }
289 | 
290 | .Line-item__quantity-update {
291 |   color: #767676;
292 |   display: block;
293 |   float: left;
294 |   height: 21px;
295 |   line-height: 16px;
296 |   font-family: monospace;
297 |   width: 25px;
298 |   padding: 0;
299 |   border: none;
300 |   background: transparent;
301 |   box-shadow: none;
302 |   cursor: pointer;
303 |   font-size: 18px;
304 |   text-align: center;
305 | }
306 | 
307 | .Line-item__quantity-update-form {
308 |   display: inline;
309 | }
310 | 
311 | .Line-item__quantity {
312 |   color: black;
313 |   width: 38px;
314 |   height: 21px;
315 |   line-height: 23px;
316 |   font-size: 15px;
317 |   border: none;
318 |   text-align: center;
319 |   -moz-appearance: textfield;
320 |   background: transparent;
321 |   border-left: 1px solid #767676;
322 |   border-right: 1px solid #767676;
323 |   display: block;
324 |   float: left;
325 |   padding: 0;
326 |   border-radius: 0;
327 | }
328 | 
329 | .Line-item__remove {
330 |   position: absolute;
331 |   right: 0;
332 |   top: 0;
333 |   border: 0;
334 |   background: 0;
335 |   font-size: 20px;
336 |   top: -4px;
337 |   opacity: 0.5;
338 | }
339 | 
340 | .Line-item__remove:hover {
341 |   opacity: 1;
342 |   cursor: pointer;
343 | }
344 | 
345 | /* PRODUCTS
346 |  * ============================== */
347 | .Product {
348 |   flex: 0 1 31%;
349 |   margin-left: 1%;
350 |   margin-right: 1%;
351 |   margin-bottom: 3%;
352 | }
353 | 
354 | .Product__title {
355 |   font-size: 1.3rem;
356 |   margin-top: 1rem;
357 |   margin-bottom: 0.4rem;
358 |   opacity: 0.7;
359 | }
360 | 
361 | .Product__price {
362 |   display: block;
363 |   font-size: 1.1rem;
364 |   opacity: 0.5;
365 |   margin-bottom: 0.4rem;
366 | }
367 | 
368 | .Product__option {
369 |   display: block;
370 |   width: 100%;
371 |   margin-bottom: 10px;
372 | }
373 | 
374 | .Product__quantity {
375 |   display: block;
376 |   width: 15%;
377 |   margin-bottom: 10px;
378 | }
379 | 
380 | /* CUSTOMER AUTH
381 |  * ============================== */
382 | .CustomerAuth {
383 |   background: #2a2c2e;
384 |   display: none;
385 |   height: 100%;
386 |   left: 0;
387 |   opacity: 0;
388 |   padding: 0 0 65px;
389 |   top: 0;
390 |   width: 100%;
391 |   text-align: center;
392 |   color: #fff;
393 |   transition: opacity 150ms;
394 |   opacity: 1;
395 |   visibility: visible;
396 |   z-index: 1000;
397 |   position: fixed;
398 | }
399 | 
400 | .CustomerAuth--open {
401 |   display: block;
402 | }
403 | 
404 | .CustomerAuth__close {
405 |   position: absolute;
406 |   right: 9px;
407 |   top: 8px;
408 |   font-size: 35px;
409 |   color: #999;
410 |   border: none;
411 |   background: transparent;
412 |   transition: transform 100ms ease;
413 |   cursor: pointer;
414 | }
415 | 
416 | .CustomerAuth__body {
417 |   padding: 130px 30px;
418 |   width: 700px;
419 |   margin-left: auto;
420 |   margin-right: auto;
421 |   text-align: left;
422 |   position: relative;
423 | }
424 | 
425 | .CustomerAuth__heading {
426 |   font-size: 24px;
427 |   font-weight: 500;
428 |   padding-bottom: 15px;
429 | }
430 | 
431 | .CustomerAuth__credential {
432 |   display: block;
433 |   position: relative;
434 |   margin-bottom: 15px;
435 |   border-radius: 3px;
436 | }
437 | 
438 | .CustomerAuth__input {
439 |   height: 60px;
440 |   padding: 24px 10px 20px;
441 |   border: 0px;
442 |   font-size: 18px;
443 |   background: #fff;
444 |   width: 100%;
445 | }
446 | 
447 | .CustomerAuth__submit {
448 |   float: right;
449 | }
450 | 
451 | .error {
452 |   display: block;
453 |   font-size: 15px;
454 |   padding: 10px;
455 |   position: relative;
456 |   min-height: 2.64286em;
457 |   background: #fbefee;
458 |   color: #c23628;
459 | }


--------------------------------------------------------------------------------