{% set print_configuration_footer = {
save_button: {
title: "Uložit konfiguraci do srovnávače",
url: "#",
icon: {
src: "@Images/svg/diskette.svg",
}
},
configurator_button: {
title: "Zobrazit srovnávač konfigurací",
url: "#",
icon: {
src: "@Images/svg/compare.svg",
},
disabled: true
},
add_to_cart_button: {
title: "Přidat poptávku tisku do košíku",
url: "#",
icon: {
src: "@Images/svg/basket.svg",
}
},
alerts: {
continue_alert: "Nyní můžete pokračovat v další konfiguraci, nebo přejít do srovnávače konfigurací, kde bude možné existující konfigurace porovnávat, případně přejmenovat.",
comparator_alert: {
text: " Vaše konfigurace tisku byla uložena do srovnávače",
comparator_name: "Vánoční tašky Petr"
}
},
comparator_select: {
vars: {
full_name: "selected-comparator",
label: "",
options: [
{
label: "PP23-00487",
comparator_name: "Vánoční tašky Petr",
comparator_color: "secondary-400",
value: "PP23-00487",
selected: true,
},
{
label: "PP23-00488",
comparator_name: "Vánoční tašky Jozef",
comparator_color: "support-pink-400",
value: "PP23-00488",
},
{
label: "PP23-00489",
comparator_name: "Vánoční tašky Krištof",
comparator_color: "support-orange-400",
value: "PP23-00489",
},
]
}
},
comaparator_info: 'Výpis vašich konfigurací naleznete v <a href="#" target="_blank" class="u-fw-700 u-color-conversion">Moje konfigurace</a>'
} %}
{% include "@Components/sections/print-configuration-footer-section/print-configuration-footer-section.twig" with {props: print_configuration_footer} %}
<div class="s-print-configuration-footer">
<div class="s-print-configuration-footer__comparator-options">
<div class="row gx-2 gy-2 px-2 mb-2">
<div class="col-lg-12 col-xxl-8">
<div class="i-content-toggle d-flex flex-column gap-3 flex-lg-row justify-content-between">
<div class="d-flex align-items-center gap-1">
<label class="f-switch u-posr d-inline-flex u-cursor-pointer align-items-center gap-1 i-content-toggle__header">
<input class="f-switch__input u-posa" type="checkbox" name=save-into-existing-comparator>
<span class="f-switch__visual d-inline-flex u-posr">
<span class="icon d-flex align-items-center justify-content-center --colored --white --sm f-switch__icon f-switch__checkmark u-posa">
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="none" viewBox="0 0 16 16"><path fill="#fff" d="M12.522 4 14 5.5 7.901 11.51a2.107 2.107 0 0 1-2.972-.005L2 8.664l1.467-1.513 2.94 2.85L12.522 4Z"/></svg> </span>
<span class="icon d-flex align-items-center justify-content-center --colored --white --sm f-switch__icon f-switch__cross u-posa">
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="none" viewBox="0 0 16 16"><path fill="currentColor" fill-rule="evenodd" d="M6.495 8.002 3.203 4.746l1.478-1.5 3.32 3.272 3.317-3.272 1.478 1.5-3.292 3.256 3.292 3.246-1.494 1.507L8 9.489l-3.303 3.266-1.494-1.507 3.292-3.246Z" clip-rule="evenodd"/></svg> </span>
</span>
<span class="f-switch__label d-inline-flex gap-1 u-fw-700 align-items-center">Uložit konfiguraci do existujícího srovnávače</span>
<span class="f-error u-fz-sm gap-1 d-none">
<span class="f-error__icon d-flex align-items-center justify-content-center">
<span class="icon d-flex align-items-center justify-content-center --colored --danger --sm">
<svg xmlns="http://www.w3.org/2000/svg" height="1em" viewBox="0 0 512 512"><path d="M256 512a256 256 0 1 0 0-512 256 256 0 1 0 0 512zm0-384c13.3 0 24 10.7 24 24v112c0 13.3-10.7 24-24 24s-24-10.7-24-24V152c0-13.3 10.7-24 24-24zm-32 224a32 32 0 1 1 64 0 32 32 0 1 1-64 0z"/></svg> </span>
</span>
<span class="f-error__title"></span>
</span>
</label>
</div>
<fieldset class="i-content-toggle__content w-100 w-lg-50 flex-shrink-0" disabled>
<div class="f-single-select d-flex flex-column gap-1 u-posr --native">
<div class="f-single-select__wrap">
<select class="f-single-select__select slim-select" name=selected-comparator>
<option class="" selected value="PP23-00487" data-html=' PP23-00487<div class="u-fw-500 u-fz-sm ms-1 px-1 u-bg-secondary-400">Vánoční tašky Petr</div>
'>PP23-00487</option>
<option class="" value="PP23-00488" data-html=' PP23-00488<div class="u-fw-500 u-fz-sm ms-1 px-1 u-bg-support-pink-400">Vánoční tašky Jozef</div>
'>PP23-00488</option>
<option class="" value="PP23-00489" data-html=' PP23-00489<div class="u-fw-500 u-fz-sm ms-1 px-1 u-bg-support-orange-400">Vánoční tašky Krištof</div>
'>PP23-00489</option>
</select>
</div>
<span class="f-error u-fz-sm gap-1 d-none">
<span class="f-error__icon d-flex align-items-center justify-content-center">
<span class="icon d-flex align-items-center justify-content-center --colored --danger --sm">
<svg xmlns="http://www.w3.org/2000/svg" height="1em" viewBox="0 0 512 512"><path d="M256 512a256 256 0 1 0 0-512 256 256 0 1 0 0 512zm0-384c13.3 0 24 10.7 24 24v112c0 13.3-10.7 24-24 24s-24-10.7-24-24V152c0-13.3 10.7-24 24-24zm-32 224a32 32 0 1 1 64 0 32 32 0 1 1-64 0z"/></svg> </span>
</span>
<span class="f-error__title"></span>
</span>
</div>
</fieldset>
</div>
</div>
<div class="col-12 col-xxl-4">
<div class="d-flex flex-column align-items-xxl-end justify-content-center h-100">
<span>Výpis vašich konfigurací naleznete v <a href="#" target="_blank" class="u-fw-700 u-color-conversion">Moje konfigurace</a></span>
</div>
</div>
</div>
</div>
<div class="row gx-2 gy-2 s-print-configuration-footer__buttons">
<div class="col-lg-4">
<a class="btn u-posr u-cursor-pointer d-inline-flex gap-1 align-items-center justify-content-center flex-nowrap flex-shrink-0 --outline --full-width w-100 h-100 --js-save-print" href='#'>
<span class="btn__title u-z-index-1">
Uložit konfiguraci do srovnávače
</span>
<span class="btn__icon d-flex align-items-center justify-content-center">
<span class="icon d-flex align-items-center justify-content-center">
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="none" viewBox="0 0 16 16"><path fill="currentColor" fill-rule="evenodd" d="M16 2.362v11.614A2.026 2.026 0 0 1 13.976 16H2.024A2.026 2.026 0 0 1 0 13.976V2.024C0 .908.908 0 2.024 0h11.614L16 2.362ZM9.593 4.817H11V1.61H5v3.207h2.984v-2.29h1.609v2.29ZM2.024 14.39h11.952a.415.415 0 0 0 .414-.414V3.029L12.971 1.61h-.362v4.817H3.39V1.61H2.024a.415.415 0 0 0-.414.414v11.952c0 .228.186.414.414.414Zm8.268-1.78H3.44V11h6.852v1.61ZM8.119 10H3.44V8.39h4.679V10Z" clip-rule="evenodd"/></svg> </span>
</span>
</a>
</div>
<div class="col-lg-4">
<a class="btn u-posr u-cursor-pointer d-inline-flex gap-1 align-items-center justify-content-center flex-nowrap flex-shrink-0 --outline --disabled --full-width w-100 h-100" href='#'>
<span class="btn__title u-z-index-1">
Zobrazit srovnávač konfigurací
</span>
<span class="btn__icon d-flex align-items-center justify-content-center">
<span class="icon d-flex align-items-center justify-content-center">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="none" viewBox="0 0 24 24"><path fill="#23846F" d="M18.842 3.667h-6.009V2h-1.666v1.667H5.158L2 12.692v.558A3.755 3.755 0 0 0 5.75 17a3.755 3.755 0 0 0 3.75-3.75v-.558L6.924 5.333h4.243v15H5.333V22h13.334v-1.667h-5.834v-15h4.243L14.5 12.692v.558A3.755 3.755 0 0 0 18.25 17 3.755 3.755 0 0 0 22 13.25v-.558l-3.158-9.025ZM5.75 15.333a2.085 2.085 0 0 1-2.04-1.666h4.08a2.086 2.086 0 0 1-2.04 1.666ZM7.492 12H4.008L5.75 7.022 7.492 12ZM18.25 7.022 19.992 12h-3.484l1.742-4.978Zm0 8.311a2.085 2.085 0 0 1-2.04-1.666h4.082a2.087 2.087 0 0 1-2.042 1.666Z"/></svg> </span>
</span>
</a>
</div>
<div class="col-lg-4">
<a class="btn u-posr u-cursor-pointer d-inline-flex gap-1 align-items-center justify-content-center flex-nowrap flex-shrink-0 --primary --full-width w-100 h-100 --js-add-to-cart" href='#'>
<span class="btn__title u-z-index-1">
Přidat poptávku tisku do košíku
</span>
<span class="btn__icon d-flex align-items-center justify-content-center">
<span class="icon d-flex align-items-center justify-content-center">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="none" viewBox="0 0 24 24"><path fill="#23846F" d="M17.669 6.688C17.27 4.04 14.88 2 12 2 9.12 2 6.73 4.04 6.331 6.688H3v12.968C3 20.95 4.101 22 5.455 22h13.09C19.9 22 21 20.949 21 19.656V6.688h-3.331ZM12 3.563c1.976 0 3.629 1.344 4.009 3.124H7.99c.38-1.78 2.033-3.125 4.009-3.125Zm7.364 16.093c0 .431-.367.782-.819.782H5.456c-.452 0-.819-.351-.819-.782V8.25h14.728v11.406ZM12 17.625c3.09 0 5.727-2.713 5.727-6.25v-.781h-1.636v.781c0 2.585-1.835 4.688-4.091 4.688-2.256 0-4.09-2.103-4.09-4.688v-.781H6.272v.781c0 3.551 2.648 6.25 5.727 6.25Z"/></svg> </span>
</span>
</a>
</div>
</div>
<div class="s-print-configuration-footer__alerts">
<div class="row gy-2 pt-2">
<div class="col-12">
<div class="p-2 u-bg-tertiary-400 d-flex gap-1 justify-content-center align-items-center">
<span class="icon d-flex align-items-center justify-content-center --sm">
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="none" viewBox="0 0 16 16"><path fill="currentColor" d="M8 16a7.995 7.995 0 0 1-7.391-4.94 8.005 8.005 0 0 1 1.734-8.717A8.005 8.005 0 0 1 11.06.609a7.995 7.995 0 0 1 2.593 13.045A8.005 8.005 0 0 1 8 16ZM8 1.824A6.177 6.177 0 1 0 14.176 8 6.183 6.183 0 0 0 8 1.824Z"/><path fill="currentColor" d="M7.732 12.779V8.268H6.444V6.444H8A1.558 1.558 0 0 1 9.556 8v4.779H7.732ZM8 5.69a1.235 1.235 0 1 1 0-2.469 1.235 1.235 0 0 1 0 2.47Z"/></svg> </span>
<span>Nyní můžete pokračovat v další konfiguraci, nebo přejít do srovnávače konfigurací, kde bude možné existující konfigurace porovnávat, případně přejmenovat.</span>
</div>
</div>
<div class="col-12">
<div class="p-2 u-bg-tertiary-300 d-flex gap-1 justify-content-center align-items-center">
<span class="icon d-flex align-items-center justify-content-center --sm">
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="none" viewBox="0 0 16 16"><path fill="currentColor" d="M8 16a7.995 7.995 0 0 1-7.391-4.94 8.005 8.005 0 0 1 1.734-8.717A8.005 8.005 0 0 1 11.06.609a7.995 7.995 0 0 1 2.593 13.045A8.005 8.005 0 0 1 8 16ZM8 1.824A6.177 6.177 0 1 0 14.176 8 6.183 6.183 0 0 0 8 1.824Z"/><path fill="currentColor" d="M7.732 12.779V8.268H6.444V6.444H8A1.558 1.558 0 0 1 9.556 8v4.779H7.732ZM8 5.69a1.235 1.235 0 1 1 0-2.469 1.235 1.235 0 0 1 0 2.47Z"/></svg> </span>
<p>
Vaše konfigurace tisku byla uložena do srovnávače
<strong>Vánoční tašky Petr</strong>
</p>
</div>
</div>
</div>
</div>
</div>