File: D:/HostingSpaces/blijegasten/blijegasten.be/resources/views/site/templates/shoppingCart.blade.php
@extends('site.shifted')
@section('title', __('shop/cart.cart') . ' | ' . config('site.company.name'))
{{--@section('meta_description', $productTranslation->meta_description)--}}
@section('content')
<div class="t-shifted__image">
<img class="t-shifted__bg t-shifted__bg--shopping-cart" src="/img/split-image-1.jpg" alt="">
</div>
<div class="o-cart js-cart">
<form action="{{ localized_route('checkout.show') }}" method="post">
{{ csrf_field() }}
<div class="c-heading t-shifted__content">
@include('site.components.button',[
'buttonType' => 'text',
'icon' => 'arrowhead--left',
'modifiers' => ['icon', 'is-reversed'],
'buttonText' => __('site/checkout.shopping_cart.continue_shopping'),
'buttonLink' => $links->categories->route
])
<h1 class="c-heading__title">@lang('site/checkout.shopping_cart.title')</h1>
</div>
@if($shoppingCart->getItemsCount() != 0 )
<div class="o-cart__segment o-cart__basket t-shifted__content">
@if (session('checkoutFlashMessage'))
<p class="c-notice">
<strong>@lang('shop/checkout.flashMessage.heading')</strong><br/>
{{ session('checkoutFlashMessage') }}
</p>
@endif
<h2 class="o-cart__subtitle">1. @lang('site/checkout.shopping_cart.products')</h2>
<div class="o-cart__products">
<div class="c-basket">
<ul class="c-basket__list" dusk="shoppingCartItemList">
@foreach($shoppingCart->getItems() as $shoppingCartItem)
@php
/** @var \App\Komma\Shop\Cart\ShoppingCartItem $shoppingCartItem */
/** @var \App\Komma\Shop\Products\Product\Product $shoppingCartProduct */
$shoppingCartProduct = $shoppingCartItem->getProductable();
@endphp
<li class="c-basket__item js-shopping-cart-item" data-id="{{$shoppingCartItem->getId()}}">
{{-- {{ $regionInfo->getCurrencySymbol().' '.$regionInfo->getNumberFormat()->centsToCurrency($shoppingCartItem->getProductable()->price) }} --}}
<div class="c-basket__image">
@if(isset($shoppingCartProduct->images) && $shoppingCartProduct->images->count() != 0)
<img src="{{ $shoppingCartProduct->images[0]["small_image_url"] }}"/>
@else
<img src="/img/no-image.svg" alt="">
@endif
</div>
<h3 class="c-basket__title">
{{$shoppingCartProduct->translation->name}}<br/>
<a class="c-basket__read-more" href="{{$links->products->route}}/{{$shoppingCartProduct->translation->slug}}">Lees meer</a>
</h3>
<div class="c-basket__amount">
<input class="c-basket__input js-change-quantity-item"
type="number"
data-id="{{$shoppingCartItem->getId()}}"
data-shoppingcart-item-id="{{ $shoppingCartItem->getId() }}"
{{-- data-product-quantity="{{ $shoppingCartItem->getQuantity() }}"--}}
data-product-step="{{ $shoppingCartItem->getProductable()->quantity_step }}"
{{-- min="{{ $shoppingCartItem->getProductable()->quantity_step}}"--}}
{{-- step="{{ $shoppingCartItem->getProductable()->quantity_step}}"--}}
min="1"
step="1"
max="999"
value="{{ $shoppingCartItem->getQuantity()}}" />
</div>
<div class="c-basket__cost">
<div class="c-price">
<span class="c-price__currency">{{ $regionInfo->getCurrencySymbol()}}</span>
<span class="c-price__amount js-shopping-cart-item-amount">{{$regionInfo->getNumberFormat()->centsToCurrency($shoppingCartItem->getTotal(), true, true) }}</span>
</div>
</div>
<div class="c-basket__remove">
<button type="button" class="c-basket__remove-button js-remove-item-from-shoppingcart"
data-shoppingcart-item-id="{{ $shoppingCartItem->getId() }}">
<span class="c-basket__remove-icon">×</span>
<span class="c-basket__remove-text">verwijder</span>
</button>
</div>
</li>
@endforeach
<li class="c-basket__item">
<div class="c-basket__footer">
<div class="c-basket__sublabel">
@lang('shop/cart.subtotal')
</div>
<div class="c-basket__cost">
<div class="c-price c-price--large">
<span class="c-price__currency">{{ $regionInfo->getCurrencySymbol()}}</span>
<span class="c-price__amount js-cart-product-total">{{ $regionInfo->getNumberFormat()->centsToCurrency($shoppingCart->getProductTotal(), true, true) }}</span>
</div>
</div>
</div>
</li>
</ul>
</div>
</div>
</div>
<div class="o-cart__segment o-cart__delivery t-shifted__content">
<h2 class="o-cart__subtitle">2. @lang('site/checkout.shopping_cart.pickup_deliver')</h2>
<div class="c-delivery">
<div class="c-delivery__row">
<div class="c-delivery__main">
<div class="c-form-element">
<label for="shoppingCart" class="c-form-element__label">Datum</label>
@include('site.components.form.datePicker', ['datePickerId' => 'shoppingCart', 'dateForPicker' => $shoppingCart->getDate() ])
</div>
</div>
<div class="c-delivery__aside c-delivery__aside--align-bottom">
<div class="c-tooltip"
aria-label="@lang('site/checkout.tooltips.multi_day_activity.text')"
tabindex="0">
<span class="c-tooltip__icon">@include('site.components.icons.info')</span>
<span class="c-tooltip__label">@lang('site/checkout.tooltips.multi_day_activity.label')</span>
</div>
</div>
</div>
<div class="c-delivery__row">
<div class="c-delivery__main">
<div class="c-radio">
<input class="c-radio__input js-delivery-location-toggle" type="radio"
name="pickup_or_ship" id="pickup" value="pickup" @if($shoppingCart->getDeliveryLocation() == null) checked @endif/>
<label class="c-radio__label" for="pickup">Ik kom het afhalen <span
class="c-radio__extra">(gratis)</span></label>
</div>
</div>
<div class="c-delivery__aside">
<div class="c-tooltip" aria-label="@lang('site/checkout.tooltips.pickup.text')" tabindex="0">
<span class="c-tooltip__icon">@include('site.components.icons.info')</span>
<span class="c-tooltip__label">@lang('site/checkout.tooltips.pickup.label')</span>
</div>
</div>
</div>
<div class="c-delivery__row">
<div class="c-delivery__main">
<div class="c-radio">
<input class="c-radio__input js-delivery-location-toggle" type="radio"
name="pickup_or_ship" id="ship_to_address" value="ship" @if($shoppingCart->getDeliveryLocation() != null) checked @endif/>
<label class="c-radio__label" for="ship_to_address">Ik wil het laten leveren <span
class="c-radio__extra">(extra leveringskosten)</span></label>
</div>
</div>
@if($shoppingCart->containsBouncyCastle())
<div class="c-delivery__aside">
<div class="c-tooltip" aria-label="@lang('site/checkout.tooltips.bouncy_castle.text')"
tabindex="0">
<span class="c-tooltip__icon">@include('site.components.icons.info')</span>
<span class="c-tooltip__label">@lang('site/checkout.tooltips.bouncy_castle.label')</span>
</div>
</div>
@else
<div class="c-delivery__aside">
<div class="c-tooltip" aria-label="@lang('site/checkout.tooltips.delivery.text')"
tabindex="0">
<span class="c-tooltip__icon">@include('site.components.icons.info')</span>
<span class="c-tooltip__label">@lang('site/checkout.tooltips.delivery.label')</span>
</div>
</div>
@endif
</div>
<div class="c-delivery__location js-delivery-location is-hidden">
<div class="c-delivery__row c-delivery__row--header">
<div class="c-delivery__main">
<h3 class="c-delivery__subtitle">Afleverregio</h3>
<p class="c-delivery__description">Vul je postcode en land in om de leveringskosten te bepalen</p>
</div>
</div>
<div class="c-delivery__row c-delivery__row--location-postal">
<div class="c-delivery__main o-form">
<div class="o-form__row">
@include('site.components.form.select', [
'formElementCodeName' => 'invoice_country',
'formInputElementClasses' => 'js-invoice-city',
'formElementOptions' => $neutralCulturesHotlistByIso3,
'formElementValue' =>( $shoppingCart->getDeliveryLocation() != null ) ? $shoppingCart->getDeliveryLocation()->country : null
])
</div>
<div class="o-form__row">
@include('site.components.form.text', [ 'formElementCodeName' => 'invoice_postal_code', 'formInputElementClasses' => 'js-invoice-postal-code', 'formElementValue' => (($shoppingCart->getDeliveryLocation() != null) ? $shoppingCart->getDeliveryLocation()->postal_code : null ) ])
</div>
@include('site.components.form.hidden', [ 'formElementCodeName' => 'invoice_city'])
</div>
<div class="c-delivery__aside c-delivery__aside--location js-found-location" hidden>
<span class="c-delivery__label">
<span class="c-delivery__label--found js-found-location-success-label">Gevonden locatie:</span>
<span class="c-delivery__label--error js-found-location-error-label"
hidden>Let op:</span>
</span>
<div class="c-delivery__found">
<div class="c-delivery__address js-zipcode-message"></div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="o-cart__segment o-cart__receipt">
<div class="t-shifted__content">
<h2 class="o-cart__subtitle">3. @lang('site/checkout.shopping_cart.summary')</h2>
<div class="c-receipt">
<div class="c-receipt__main">
<ul class="c-receipt__list">
<li class="c-receipt__item">
<div class="c-receipt__label">@lang('shop/cart.subtotal_order'):</div>
<div class="c-receipt__data c-receipt__data--subtotal">
<span>{{$regionInfo->getCurrencySymbol()}}</span> <span class="js-shoppingcart-subtotal">{{ $regionInfo->getNumberFormat()->centsToCurrency($shoppingCart->getProductTotal()) }}</span>
</div>
</li>
<li class="c-receipt__item">
<div class="c-receipt__label">@lang('site/checkout.delivery.costs'):</div>
<div class="c-receipt__data">
@if($shoppingCart->getShippingCost() === 0)
<span class="js-shipping-cost-currency" hidden>{{$regionInfo->getCurrencySymbol()}}</span> <span class="js-shipping-costs">@lang('shop/cart.free')</span>
@elseif($shoppingCart->getShippingCost() === null)
<span class="js-shipping-cost-currency" hidden>{{$regionInfo->getCurrencySymbol()}}</span> <span class="js-shipping-costs">@lang('shop/cart.shipping_undefined')</span>
@else
<span class="js-shipping-cost-currency">{{$regionInfo->getCurrencySymbol()}}</span> <span class="js-shipping-costs">{{ $regionInfo->getNumberFormat()->centsToCurrency($shoppingCart->getShippingCost(), true, true) }}</span>
@endif
</div>
</li>
<li class="c-receipt__item c-receipt__item--sum">
<div class="c-receipt__label c-receipt__label--large">@lang('shop/cart.total'):
</div>
<div class="c-receipt__data">
<div class="c-price c-price--large">
<span class="c-price__currency">{{ $regionInfo->getCurrencySymbol() }}</span>
<span class="c-price__amount js-shoppingcart-total">{{ $regionInfo->getNumberFormat()->centsToCurrency($shoppingCart->getTotal(), true, true) }}</span>
</div>
</div>
</li>
<li class="c-receipt__item c-receipt__item--btw">
<span>Inclusief {{$regionInfo->getCurrencySymbol()}} <span class="js-vat">{{$regionInfo->getNumberFormat()->centsToCurrency($shoppingCart->getVat(), true, true)}}</span> @lang('shop/cart.vat')</span>
</li>
</ul>
<div class="c-receipt__total js-receipt-total">
<div class="c-receipt__item">
<p class="c-receipt__subtitle">{{ config('shop.deposit_rate_percentage') . '%'}} @lang('site/checkout.deposit_over_subtotal')</p>
<div class="c-receipt__data">
<div class="c-price">
<span class="js-deposit-currency">{{$regionInfo->getCurrencySymbol()}}</span> <span class="js-deposit">{{$regionInfo->getNumberFormat()->centsToCurrency($shoppingCart->getDeposit(), true, true)}}</span>
</div>
</div>
</div>
<p class="c-receipt__description">@lang('site/checkout.deposit_refund')</p>
<ul class="c-receipt__list">
<li class="c-receipt__item">
<div class="c-receipt__label c-receipt__label--large">@lang('shop/cart.to_pay')
:
</div>
<div class="c-receipt__data">
<div class="c-price c-price--large">
<span class="c-price__currency">{{ $regionInfo->getCurrencySymbol() }}</span>
<span class="c-price__amount js-shoppingcart-to-pay">{{ $regionInfo->getNumberFormat()->centsToCurrency($shoppingCart->getTotalIncludingDeposit(), true, true) }}</span>
</div>
</div>
</li>
</ul>
</div>
</div>
<div class="c-receipt__sidebar">
@include('site.components.receiptAssist')
</div>
</div>
</div>
<div class="o-cart__submit js-shopping-cart-submit">
@include('site.components.button', [
'isButton' => true,
'properties' => 'dusk=checkout type=submit',
'modifiers' => ['icon', 'positive', 'full-width'],
'icon' => 'arrowhead',
'buttonText' => __('shop/cart.go_to_checkout')
])
</div>
<div class="o-cart__mobile-footer">
<div class="o-cart__mobile-help">
@include('site.components.receiptAssist')
</div>
@foreach(__('site/checkout.tooltips') as $tooltip)
<div class="o-cart__mobile-tooltip">
<div class="c-tooltip c-tooltip--mobile" tabindex="0">
<div class="c-tooltip__heading">
<span class="c-tooltip__icon">@include('site.components.icons.info')</span>
<span class="c-tooltip__label">{{ $tooltip['label'] }}</span>
</div>
<p class="c-tooltip__description">
{{ $tooltip['text'] }}
</p>
</div>
</div>
@endforeach
</div>
</div>
@else
<div class="o-cart__segment o-cart__basket t-shifted__content">
@if (session('checkoutFlashMessage'))
<p class="c-notice">
<strong>@lang('shop/checkout.flashMessage.heading')</strong><br/>
{{ session('checkoutFlashMessage') }}
</p>
@endif
<div class="s-text">
<strong>@lang('shop/cart.no_products')</strong>
</div>
<div class="o-cart__basket-empty">
@include('site.components.button', [
'modifiers' => ['icon'],
'buttonText' => 'Bekijk assortiment ',
'buttonLink' => $links->categories->route
])
</div>
{{-- <span class="o-cart__basket-empty">--}}
{{-- @lang('shop/cart.no_products')--}}
{{-- </span>--}}
{{-- ONLY VISIBLE ON LOCAL --}}
@if(app()->environment('local'))
<div class="devButtons" style="display: block; margin-top: 32px;">
<strong>DEV BUTTONS</strong>
<br/>
<a href="#" class="js-add-product-to-shoppingcart" dusk="addRandomProduct"
data-product-id="{{ rand(1, (\App\Komma\Shop\Products\Product\Product::count() - 1)) }}"
data-product-type="{{ \App\Komma\Shop\Products\Product\Product::class }}"
data-product-quantity="1"
>+ random product</a><br>
<a href="#" class="js-add-product-to-shoppingcart" dusk="addProductWithId1"
data-product-id="1"
data-product-type="{{ \App\Komma\Shop\Products\Product\Product::class }}"
data-product-quantity="1"
>+ product met id 1</a>
</div>
@endif
</div>
@endif
</form>
</div>
@endsection