{% extends 'base.html.twig' %}
{% trans_default_domain 'store' %}
{% block facebook %}
{{ parent() }}
<META NAME="ROBOTS" CONTENT="NOINDEX, NOFOLLOW">
{% endblock %}
{% block stylesheets %}
{{ parent() }}
<style>
.table td, .table th {
vertical-align: middle!important;
padding-left:5px!important;
}
@media screen and (min-width: 769px) and (max-width:1024px) {
.column.is-9 {
width:70% !important;
}
}
.custom-radio-wrapper{
display:flex;
align-items:flex-start; /* keeps radio button and text aligned */
border-radius:4px;
cursor:pointer;
}
.custom-radio-wrapper .custom-radio-container{
display:flex;
align-items:flex-start;
}
/* title line */
.payment-title{
font-size:1rem; /* ~16 px */
font-weight:500;
line-height:1.3;
display:block;
}
/* extra info line */
.payment-desc{
font-size:.8125rem; /* ~13 px */
color:#666;
line-height:1.25;
display:block; /* forces a new line */
margin-top:.125rem;
}
</style>
{% endblock %}
{% block javascripts %}
{{ parent() }}
<script>
$(document ).ready(function() {
function colorize(element, className) {
console.log('colorize');
$("."+className+" tbody tr").each(function(){
console.log($(this));
$(this).css('border', '1px solid #dbdbdb');
});
$("."+className+" tbody tr").css('border', '1px solid #dbdbdb');
element.closest('tr').css('border', '2px solid #44bc42');
}
/* Change quantity of the ordered product */
$(document).on('input', '.quantity-input', function (e) {
var product = $(this).attr('data-product');
var url = $('#update_quantity_cart').val();
var record = $(this).attr('data-record');
var quantity = $(this).val();
$('#quantity_loader_'+product).show();
$.ajax({
url: url,
type:"POST",
data:{'record_id':record, 'quantity':quantity, 'product_id':product},
success:function (data) {
console.log(data);
if (parseInt(data.error) === 1) {
$('.cart-error-notification').show();
$('.cart-error-notification').html(data.message);
$("html, body").animate({ scrollTop: $('.cart-error-notification').offset().top }, 200);
}
$('.loader_group').hide();
var cartUrl = $('#cart_url').val();
$('#cart-table').load(cartUrl+' #cart-table', {}, function(response) {
calculateSum();
});
}
});
});
/* Trigger click of first element id delivery list */
$("input:radio[name=deliveryMethod]:first").trigger("click");
colorize($("input:radio[name=deliveryMethod]:first"), 'delivery-methods-table');
var $deliveryMethodContent = $('#deliveryMethodsContent');
var $paymentMethodContainer = $('#paymentMethodsContent');
var loadPaymentMethods = function() {
var id = $('.deliveryMethod').val();
$paymentMethodContainer.html(' ');
var url = $('#load_payment_methods').val();
$paymentMethodContainer.load(url, {'id':id}, function() {
calculateSum();
});
}
loadPaymentMethods();
/* Removes element from cart */
$(document).on('click', '.btn-cart-remove', 'click', function (e) {
var url = $('#remove_cart_url').val();
var record = $(this).attr('data-record');
var product = $(this).attr('data-product');
var productId = $(this).attr('data-id');
$('#quantity_loader_'+product).show();
$.ajax({
url: url,
type:"POST",
data:{'record_id':record, 'product_id':product},
success:function (data) {
console.log(data);
$('.loader_group').hide();
var cartUrl = $('#cart_url').val();
$('.cart-products').load(cartUrl+' .cart-products', {}, function(response) {
console.log(response);
});
calculateSum();
}
});
});
/** Change country -> release load form od delviery */
$(document).on('change', '#country', function (e) {
$deliveryMethodContent.html(' ');
$paymentMethodContainer.html(' ');
$('#country_id').val($(this).val());
var url = $('#load_delivery_methods').val();
$deliveryMethodContent.load(url, {'id':$(this).val()}, function() {
$("input:radio[name=deliveryMethod]:first").trigger("click");
});
});
/** Load payment methods */
$(document).on('change', '.deliveryMethod', function (e) {
colorize($(this), 'delivery-methods-table');
loadPaymentMethods();
});
/**
* Dynamically calculate total sum of product and dlivery + payment method
*/
var calculateSum = function () {
var deliveryId = $('input[name=deliveryMethod]:checked').val();
var paymentId = $('input[name=paymentMethod]:checked').val();
var url = $('#ajax_calculate_sum').val();
$.ajax({
url: url,
type:"POST",
data:{'deliveryId':deliveryId, 'paymentId':paymentId},
success:function (data) {
console.log(data);
$('.totalSum').html(data.sum);
if ($('.totalSumWithRebate').length) {
$('.totalSumWithRebate').html(data.sumWithRebate);
}
if ($('.totalSumWithoutRebate').length) {
$('.totalSumWithoutRebate').html(data.sum);
}
if ($('.savingsInfo').length) {
$('.savingsInfo').html(data.savings);
}
}
});
}
/** Handle payment method change */
$(document).on('click', '.paymentMethod', function (e) {
colorize($(this), 'payment-methods-table');
});
$(document).on('click', '.deliveryMethod', function (e) {
colorize($(this), 'delivery-methods-table');
});
$(document).on('change', '.paymentMethod', function (e) {
colorize($(this), 'payment-methods-table');
calculateSum();
});
$(document).on("click", "#go-to-request-form", "click", function() {
var urlRedirect = $('#send_request_url').val();
window.location.href = urlRedirect;
});
$(document).on('click', '.go-to-checkout', 'click', function (e) {
e.preventDefault();
var deliveryId = $('input[name=deliveryMethod]:checked').val();
var paymentId = $('input[name=paymentMethod]:checked').val();
if (deliveryId && paymentId) {
var url = $('#ajax_save_cart').val();
$.ajax({
url: url,
type:"POST",
data:{'deliveryId':deliveryId, 'paymentId':paymentId},
success:function (data) {
window.location.href = $('#checkout_redirect').val();
}
});
} else {
$("#modal-choose-delivery").addClass("is-active");
}
});
});
$('.modal-close').click(function() {
$("#modal-choose-delivery").removeClass("is-active");
});
$('.close-modal-custom').click(function() {
$("#modal-choose-delivery").removeClass("is-active");
});
</script>
{% endblock %}
{% block content %}
{% set countCriteoProducts = 0 %}
{% set criteoIds = [] %}
{% for product in cartProducts %}
{% set criteoIds = criteoIds|merge([product.id]) %}
{% set countCriteoProducts = countCriteoProducts + 1 %}
{% endfor %}
<input type="hidden" id="load_delivery_methods" value="{{ path('load_delivery_methods') }}"/>
<input type="hidden" id="load_payment_methods" value="{{ path('load_payment_methods') }}"/>
<input type="hidden" id="ajax_calculate_sum" value="{{ path('ajax_calculate_sum') }}"/>
<input type="hidden" id="ajax_save_cart" value="{{ path('ajax_save_cart') }}"/>
<input type="hidden" id="send_request_url" value="{{ path('send_request') }}"/>
{% if app.user.id is defined %}
{% if app.user.hasRole('ROLE_CUSTOMER_REGISTERED') %}
<input type="hidden" id="checkout_redirect" value="{{ path('register') }}"/>
{% else %}
<input type="hidden" id="checkout_redirect" value="{{ path('summary') }}"/>
{% endif %}
{% else %}
<input type="hidden" id="checkout_redirect" value="{{ path('register_login') }}"/>
{% endif %}
<input type="hidden" id="cart_url" value="{{ path('cart') }}"/>
<input type="hidden" id="remove_cart_url" value="{{ path('remove_from_cart') }}"/>
<input type="hidden" id="update_quantity_cart" value="{{ path('update_quantity_cart') }}"/>
{% if cartProducts|length > 0 %}
<div class="row" style="margin-top:20px;">
<div class="col-sm-12">
<section id="content" role="main">
<div class="container">
<div class="row">
<div class="">
{% if showNotification %}
<div class="notification is-danger cart-error-notification" style="text-align: center!important; margin:40px; display: block!important;">
{{ 'products_deleted_info'|trans }}
</div>
{% endif %}
<div class="notification is-danger cart-error-notification" style="text-align: center; display: none">
</div>
{{ form_errors(form) }}
{{ form_start(form, {'attr': {'id':'cart-form', 'method':'post', 'role':'form', 'novalidate': 'novalidate'}}) }}
<!-- START OF INFOGRAPHIC SECTION -->
<section class="section is-hidden-touch">
<div class="container">
<div class="columns is-center is-centered">
<div class="column column-cart is-one-third">
<div style="display: inline-block;">
<div class="step_nr_new active">
<i class="fa fa-check"></i>
</div>
</div>
<div class="column is-narrow" style="display: inline-block">
<div class="step_txt active">
{{ 'cart'|trans }}
</div>
<div class="" style="width: 200px;">
<hr class="cart-hr-active">
</div>
</div>
</div>
<div class="column column-cart is-one-third column-back">
<div style="display: inline-block;">
<div class="step_nr_new">
</div>
</div>
<div class="column is-narrow" style="display: inline-block">
<div class="step_txt">
{{ 'shipping_data'|trans }}
</div>
<div class="" style="width: 200px;">
<hr class="cart-hr">
</div>
</div>
</div>
<div class="column column-cart is-one-third column-back">
<div style="display: inline-block;">
<div class="step_nr_new">
</div>
</div>
<div class="column is-narrow" style="display: inline-block">
<div class="step_txt">
{{ 'summary'|trans }}
</div>
<div class="" style="width: 200px;">
<hr class="cart-hr">
</div>
</div>
</div>
</div>
</div>
</section>
{% include 'frontend/components/notification.html.twig' %}
{% set total = 0 %}
{% set quantityTotal = 0 %}
{% set mainCategory = 0 %}
{% for product in form.products %}
{% set productEntity = product.product.vars.data %}
{% set subProduct = product.subProduct.vars.data %}
{% set subId = null %}
{% if subProduct %}
{% set subId = subProduct.id %}
{% endif %}
{% if mainCategory.id is not defined %}
{% set mainCategory = productEntity.mainCategory %}
{% endif %}
{% set subtotal = product.vars.value.getSubtotal %}
{% set total = total + subtotal %}
{% endfor %}
<div class="columns">
<div class="column is-9">
<h1 class="cart-right-side">
{{ 'cart'|trans }}
</h1>
<br/>
<table class="table is-fullwidth cart-products">
<tbody>
{% for product in form.products %}
{% set productEntity = product.product.vars.data %}
{% set subProduct = product.subProduct.vars.data %}
{% set subId = null %}
{% if subProduct %}
{% set subId = subProduct.id %}
{% endif %}
<tr>
<td valign="middle">
<a href="{{ path('product', {'sub':subId, 'id':productEntity.id, 'slug':productEntity.slug}) }}">
{% set mainPhoto = productEntity.getMainPhotoPath(app.request.locale) %}
{% if subProduct and subProduct.imageName %}
{% set mainPhoto = '/images/product/'~subProduct.imageName %}
{% endif %}
<img style="min-width: 50px;!important; margin-top:20px; margin-bottom: 20px;" src="{{ asset(mainPhoto) | imagine_filter('smallCartProductCk2') }}" alt="{{ productEntity.name }}" class="product-image">
</a>
</td>
<td class="product-price-col" valign="middle" style="width: 50%;">
<div style="display: none">
{{ form_row(product.product, {attr: {'class':'form-control', 'label': false}}) }}
{{ form_row(product.subProduct, {attr: {'class':'form-control', 'label': false}}) }}
</div>
<span class="product-price-special">
<a href="{{ path('product', {'sub':subId, 'id':productEntity.id, 'slug':productEntity.slug}) }}" style="font-weight: 600;" class="product-title-cart">
{% if subProduct %}
{{ subProduct.name }}
{% else %}
{{ productEntity.name }}
{% endif %}
</a>
<br/>
{% for cartProductEquipment in product.vars.value.equipments %}
<span style="font-size:12px">
{{ cartProductEquipment.equipment.name }} <strong>+{{ cartProductEquipment.equipment.price|formatPrice(currency) }}</strong><br/>
</span>
{% endfor %}
{% if productEntity.shippingCategory and app.request.locale == 'pl' %}
{% set sc = productEntity.shippingCategory~'_store' %}
<a target="_blank" href="{{ path('single_article', {'id':shoppingArticle.id, 'slug':shoppingArticle.slug}) }}">
<div style="margin-top:10px; font-weight: normal; text-align: left; font-size: 14px;" class="step_txt">
{{ sc|trans }}
</div>
</a>
{% endif %}
</span>
<div style="{% if product.vars.value.parameterValues|length %}margin-top:20px;{% endif %} font-size:13px;">
<div style="display: none">
{% do product.variant.setRendered %}
</div>
<div>
{% for value in product.vars.value.parameterValues %}
<strong>{{ value.parameter.name }}</strong>: {{ value.parameterValue.name }}<br/>
{% endfor %}
</div>
</div>
</td>
<td>
<div class="custom-quantity-input">
{{ form_row(product.quantity, {attr: {'class':'input quantity-input commaReplacer', 'data-record':product.vars.value.id, 'data-product':productEntity.id, 'label': false}}) }}
{% set quantityTotal = quantityTotal + product.quantity.vars.value %}
</div>
<div class="loader_group" style="text-align: center; margin-top:20px; margin-left:-8px; display: none" id="quantity_loader_{{ productEntity.id }}">
<i class="fas fa-spinner fa-spin"></i>
</div>
</td>
<td class="product-price-col" style="min-width: 110px;">
<span class="product-price-special">
{% if mainCategory.id is not defined %}
{% set mainCategory = productEntity.mainCategory %}
{% endif %}
{{ form_row(product.price, {attr: {'class':'form-control', 'label': false}}) }}
<div style="display: none">
{{ form_row(product.currency, {attr: {'class':'form-control', 'label': false}}) }}
</div>
{% set currency = product.currency.vars.data %}
</span>
{% set subtotal = product.vars.value.getSubtotal %}
<span style="font-size:24px; font-weight: bold;">
{{ subtotal|formatPrice(currency) }}
</span>
</td>
<td style="width:60px;">
<a style="cursor: pointer; font-size:24px; font-weight: normal;" class="close-button btn-cart-remove" data-record="{{ product.vars.value.id }}" data-product="{{ productEntity.id }}"><i class="fa fa-times"></i> </a>
</td>
</tr>
{% endfor %}
{% do form.products.setRendered %}
</tbody>
</table>
<div class="columns">
<div class="column is-12">
<h1 class="cart-right-side move-right-desktop">
{{ 'choose_delivery'|trans }}
</h1>
</div>
</div>
<div class="columns">
<div class="column is-12">
<div id="deliveryMethodsContent">
{% include 'frontend/cart/_deliveryMethods.html.twig' %}
</div>
</div>
</div>
<div class="columns">
<div class="column is-12">
<div class="columns">
<div class="column is-9">
<h1 class="cart-right-side move-right-desktop">
{{ 'choose_payment'|trans({}, 'store') }}
</h1>
</div>
</div>
<div id="paymentMethodsContent">
</div>
</div>
</div>
</div>
{% include 'frontend/components/_cartRightSide.twig' with {'disableActions':false} %}
</div>
<div class="columns" style="margin-left:-10px; margin-bottom: 30px;">
<div class="column is-full">
<a href="{{ path('category', {'slug':mainCategory.slug, 'id':mainCategory.id}) }}" style="font-weight: 500;" class="button add-another-product-button button-back is-warning"><i class="fa fa-arrow-left"></i> {{ 'add_another_products'|trans }}</a>
</div>
</div>
{% do form.paymentMethod.setRendered %}
{% do form.deliveryCountry.setRendered %}
{% do form.deliveryMethod.setRendered %}
{{ form_end(form) }}
</div>
</div>
{% if crossSelling|length %}
<h1 class="cart-right-side" style="margin-bottom: 30px;">
{{ 'others_bought_also'|trans }}
</h1>
<div class="columns is-multiline is-mobile lista-produktow" v-match-heights="{ el: [ '.no-description' ] }">
{% if crossSelling == 0 %}
{% else %}
{% for productData in crossSelling|slice(0,4) %}
{% set product = productData[0] %}
{% include 'frontend/components/smallProduct.html.twig' with {'isOneQuarter':1, 'product':product, 'productData':productData} %}
{% endfor %}
{% endif %}
</div>
{% endif %}
</div>
</section>
</div>
</div>
{% else %}
{% include 'frontend/components/notification.html.twig' %}
{% if showNotification %}
<div class="notification is-danger cart-error-notification" style="text-align: center!important; margin:40px; display: block!important;">
{{ 'products_deleted_info'|trans }}
</div>
{% endif %}
<div class="review-comments" style="margin-top:30px; margin-bottom:30px; text-align: center">
<h1>
{{ 'your_cart_is_empty'|trans }}
</h1>
</div>
{% endif %}
<div class="modal" id="modal-choose-delivery">
<div class="modal-background"></div>
<div class="modal-content">
<div class="box" style="padding:20px!important;">
<p style="text-align: center">
{{ 'please_choose_form_delivery_and_payment'|trans }}
<br/>
<button style="margin-top:20px; color: #fff!important; border-color: transparent!important; font-weight: bold; font-size: 17px!important; background: #44bc42;" class="button close-modal-custom is-success">{{ 'ok_got_it'|trans }}</button>
</p>
</div>
</div>
<button class="modal-close is-large" aria-label="close"></button>
</div>
{% set criteoCount = 0 %}
{% if app.request.locale == 'pl' %}
<script type="text/javascript" src="//static.criteo.net/js/ld/ld.js" async="true"></script>
<script type="text/javascript">
window.criteo_q = window.criteo_q || [];
var deviceType = /iPad/.test(navigator.userAgent) ? "t" : /Mobile|iP(hone|od)|Android|BlackBerry|IEMobile|Silk/.test(navigator.userAgent) ? "m" : "d";
window.criteo_q.push(
{ event: "setAccount", account: 36267 },
{ event: "setEmail", email: "{% if app.user.email is defined %} {{ app.user.email }} {% endif %}" },
{ event: "setSiteType", type: deviceType },
{ event: "viewBasket", item: [
{% for item in cartProducts %}{% set criteoCount = criteoCount + 1 %}{% if criteoCount != countCriteoProducts %}{ id: "{{ item.product.id }}", price: {{ item.price }}, quantity: {{ item.quantity}} },{% else %}{ id: "{{ item.product.getId }}", price: {{ item.price }}, quantity: {{ item.quantity }} }{% endif %}{% endfor %}
]}
);
</script>
<script type="text/javascript">
var google_tag_params = {
ecomm_pagetype: 'cart'
};
</script>
{% endif %}
{% endblock %}