templates/bundles/BoldrShopBundle/shop.html.twig line 163

Open in your IDE?
  1. {% set assets = assets|default(boldr_cms_get_assets()) %}
  2. {% do assets.addJsFile(asset('assets/js/shop.js')) %}
  3. {% set cart = boldr_shop_get_cart() %}
  4. {% set isShop = true %}
  6. {% extends 'base.html.twig' %}
  8. {% block head %}
  9.     {{ parent() }}
  10.     <script>
  11.         let currentCurrency = {{ boldr_shop_get_currency()|json_encode|raw }};
  12.         const ALLERGEN_IMAGE_URL = '{{ asset('/assets/images/allergens/' ~ app.request.locale ~ '/ALLERGEN.png') }}';
  13.     </script>
  14. {% endblock %}
  16. {% block header_wrapper_content %}
  17.     {{ parent() }}
  18.     <div class="subheader-filter-search">
  19.         <div class="subheader-filter-search-controls">
  20.             <div class="subheader-filter">
  21.                 {# Filter op #}
  22.                 <a href="#" class="subheader-filter-button boldr-button boldr-button-outline-light">
  23.                     <i class="icon-filter"></i>
  24.                     <span class="boldr-button-text">{{ 'filter_by'|trans({}, 'HelensBakery') }}</span>
  25.                     <i class="icon-chevron-down"></i>
  26.                     <span class="subheader-filter-button-count"></span>
  27.                 </a>
  28.                 <div class="subheader-filter-dropdown hide-past-scroll">
  29.                     <div class="form-label-control">
  30.                         <input id="subheader-filter-choice-beef" type="checkbox" data-property="beef" />
  31.                         <label for="subheader-filter-choice-beef"><i class="icon-rundvlees"></i> {{ '100percent_beef'|trans({}, 'HelensBakery') }}</label>
  32.                     </div>
  33.                     <div class="form-label-control">
  34.                         <input id="subheader-filter-choice-vegan" type="checkbox" data-property="vegan" />
  35.                         <label for="subheader-filter-choice-vegan"><i class="icon-vegan"></i> {{ 'vegan'|trans({}, 'HelensBakery') }}</label>
  36.                     </div>
  37.                     <div class="form-label-control">
  38.                         <input id="subheader-filter-choice-vegetarian" type="checkbox" data-property="vegetarian" />
  39.                         <label for="subheader-filter-choice-vegetarian"><i class="icon-vegetarian"></i> {{ 'vegetarian'|trans({}, 'HelensBakery') }}</label>
  40.                     </div>
  41.                     {# <div class="form-label-control">
  42.                         <input id="subheader-filter-choice-fish" type="checkbox" data-property="fish" />
  43.                         <label for="subheader-filter-choice-fish"><i class="icon-vis"></i> Vis</label>
  44.                     </div> #}
  45.                     <div class="form-label-control">
  46.                         <input id="subheader-filter-choice-homemade" type="checkbox" data-property="homemade" />
  47.                         <label for="subheader-filter-choice-homemade"><i class="icon-homemade"></i></label>
  48.                     </div>
  49.                 </div>
  50.             </div>
  51.             {# Zoeken #}
  52.             <input type="search" class="subheader-search-input" placeholder="{{ 'search'|trans({}, 'HelensBakery') }}" />
  53.         </div>
  54.         {#
  55.         <div class="subheader-shop-switcher">
  56.             <a href="#" class="subheader-shop-switcher-button boldr-button boldr-button-outline-light">
  57.                 <span class="boldr-button-text">Locatie: {{ cart.shop.name }}</span>
  58.                 <i class="icon-chevron-down"></i>
  59.             </a>
  60.             <div class="subheader-shop-switcher-dropdown">
  61.                 {% for shop in boldr_multishop_get_shops() %}
  62.                     <a data-id="{{ shop.id }}">{{ shop.name }}</a>
  63.                 {% endfor %}
  64.             </div>
  65.         </div>
  66.         #}
  67.     </div>
  69.     <div class="subheader-categories">
  70.         {# Categories #}
  71.         {% for category in categories %}
  72.             {% set categoryCatalogProducts = catalogProducts|filter(catalogProduct => category in catalogProduct.product.categories) %}
  73.             {% if categoryCatalogProducts|length > 0 %}
  74.                 <a href="#" data-id="{{ category.id }}">
  75.                     {{ category.name }}
  76.                 </a>
  77.             {% endif %}
  78.         {% endfor %}
  79.     </div>
  80. {% endblock %}
  82. {% block overlays %}
  83.     <div class="overlay" id="overlay-add-product">
  84.         <a href="#" class="overlay-close">
  85.             <i class="icon-plus"></i>
  86.         </a>
  87.         <div class="overlay-content overlay-add-product">
  88.             {% if not cart.canItemsBeModified %}
  89.                 <div style="padding: 20px">
  90.                     <p>
  91.                         {{ 'cant_add_while_paying'|trans({}, 'HelensBakery') }}
  92.                     </p>
  93.                     <div class="order-window-cart-next-states">
  94.                         {% for nextState in cart.nextStates %}
  95.                             <a href="{{ nextState.url }}" class="order-window-cart-next-state boldr-button boldr-button-highlight">
  96.                                 {{ nextState.buttonText }}
  97.                             </a>
  98.                         {% endfor %}
  99.                     </div>
  100.                 </div>
  101.             {% endif %}
  102.             <div class="overlay-add-product-content" {{ not cart.canItemsBeModified ? 'style="display: none"' }}>
  103.                 <div class="overlay-add-product-info">
  104.                     <div class="overlay-add-product-info-header">
  105.                         <a class="overlay-add-product-info-header-close-mobile">
  106.                             <i class="icon-arrow-left"></i>
  107.                         </a>
  109.                         {# Heading image #}
  110.                         <img class="overlay-add-product-info-header-image" />
  112.                         <div class="overlay-add-product-info-header-allergens">
  114.                             <div class="overlay-add-product-info-header-allergens-title">{{ 'allergen_information'|trans({}, 'HelensBakery') }}:</div>
  115.                             <div class="overlay-add-product-info-header-allergens-list">
  116.                                 {% for allergen in ['celery', 'egg', 'fish', 'gluten', 'lupine', 'milk', 'mollusks', 'mustard', 'nuts', 'peanut', 'sesame', 'shellfish', 'soy', 'sulfites'] %}
  117.                                 <img src="{{ asset('/assets/images/allergens/' ~ app.request.locale ~ '/' ~ allergen ~ '.png') }}"  class="overlay-add-product-info-header-allergen" data-name="{{ allergen }}">
  118.                             {% endfor %}
  119.                             </div>
  121.                         </div>
  123.                     </div>
  125.                     <div class="overlay-add-product-info-content">
  126.                         {# Product details #}
  127.                         <span class="overlay-add-product-info-name"></span>
  128.                         <span class="overlay-add-product-info-details"></span>
  130.                         {# Options #}
  131.                         <div class="overlay-add-product-info-options"></div>
  132.                     </div>
  133.                 </div>
  134.                 <div class="overlay-add-product-extra">
  135.                     <span class="overlay-add-product-extra-heading">{{ 'shop.add_extras'|trans }}</span>
  136.                     {% for category in categories|filter(category => category.hbVisibleInExtras) %}
  137.                         {% set categoryCatalogProducts = catalogProducts|filter(catalogProduct => category in catalogProduct.product.categories) %}
  138.                         {% if categoryCatalogProducts|length > 0 %}
  139.                             <div class="overlay-add-product-extra-category">
  140.                                 <span class="overlay-add-product-extra-category-selection-count">
  141.                                     0
  142.                                 </span>
  143.                                 <div class="overlay-add-product-extra-category-heading">
  144.                                     <span class="overlay-add-product-extra-category-name">
  145.                                         {{ category.name }}
  146.                                     </span>
  147.                                     <a href="#" class="overlay-add-product-extra-category-toggle">
  148.                                         <i class="icon-plus"></i>
  149.                                         <i class="icon-minus"></i>
  150.                                     </a>
  151.                                 </div>
  152.                                 <div class="overlay-add-product-extra-category-products-wrapper">
  153.                                     <div class="overlay-add-product-extra-category-products">
  154.                                         {% for catalogProduct in categoryCatalogProducts|sort((a, b) => a.product.name <=> b.product.name) %}
  155.                                             <div class="overlay-add-product-extra-product" data-product-variant-id="{{ catalogProduct.variants[0].productVariant.id }}"
  156.                                                 data-product-id="{{ catalogProduct.product.id }}"
  157.                                                 data-price="{{ catalogProduct.variants[0].totalPrice }}">
  158.                                                 <div class="overlay-add-product-extra-product-info">
  159.                                                     <span class="overlay-add-product-extra-product-name">
  160.                                                         {{ catalogProduct.product.name }}
  161.                                                     </span>
  162.                                                     <span class="overlay-add-product-extra-product-price">
  163.                                                         + {{ boldr_shop_format_currency(catalogProduct.variants[0].totalPrice, catalogProduct.variants[0].currency.isoCode) }}
  164.                                                     </span>
  165.                                                 </div>
  166.                                                 <div class="overlay-add-product-extra-product-image-and-controls">
  167.                                                     {% if catalogProduct.product.primaryImage is not null %}
  168.                                                         <img src="{{ catalogProduct.product.primaryImage.attachment.Sizes.small }}" class="overlay-add-product-extra-product-image" />
  169.                                                     {% endif %}
  170.                                                     <div class="overlay-add-product-extra-product-controls">
  171.                                                         <a href="#" class="overlay-add-product-extra-product-minus">
  172.                                                             <i class="icon-minus"></i>
  173.                                                         </a>
  174.                                                         <span class="overlay-add-product-extra-product-quantity">0</span>
  175.                                                         <a href="#" class="overlay-add-product-extra-product-plus">
  176.                                                             <i class="icon-plus"></i>
  177.                                                         </a>
  178.                                                     </div>
  179.                                                 </div>
  180.                                             </div>
  181.                                         {% endfor %}
  182.                                         <div class="overlay-add-product-extra-product-spacer"></div>
  183.                                         <div class="overlay-add-product-extra-product-spacer"></div>
  184.                                         <div class="overlay-add-product-extra-product-spacer"></div>
  185.                                     </div>
  186.                                 </div>
  187.                             </div>
  188.                         {% endif %}
  189.                     {% endfor %}
  190.                 </div>
  191.             </div>
  192.             <div class="overlay-add-product-add" {{ not cart.canItemsBeModified ? 'style="display: none"' }}>
  193.                 <div class="overlay-add-product-add-prices">
  194.                     <span class="overlay-add-product-add-price">
  195.                         &euro;3.20
  196.                     </span>
  197.                     <span class="overlay-add-product-add-additional-price">
  199.                     </span>
  200.                 </div>
  201.                 <a href="#" class="boldr-button boldr-button-medium boldr-button-highlight overlay-add-product-add-button">
  202.                     <span class="text-mobile">{{ 'add'|trans({}, 'HelensBakery') }}</span>
  203.                     <span class="text-desktop">{{ 'add_to_cart'|trans({}, 'HelensBakery') }}</span>
  204.                 </a>
  205.             </div>
  206.         </div>
  207.     </div>
  208. {% endblock %}
  210. {% block body %}
  211.     {# Products #}
  212.     <div class="order-window {{ cart.items|length > 0 ? 'order-window-cart-visible' }}">
  213.         <div class="product-list-wrapper">
  214.             <div class="product-list">
  215.                 {% for category in categories %}
  216.                     {% set categoryCatalogProducts = catalogProducts|filter(catalogProduct => category in catalogProduct.product.categories) %}
  217.                     {% if categoryCatalogProducts|length > 0 %}
  218.                         <div class="product-list-category" data-id="{{ category.id }}" data-show-extras="{{ category.hbShowExtras ? 'true' : 'false' }}">
  219.                             <div class="product-list-category-header">
  220.                                 {{ category.name }}
  221.                             </div>
  222.                             <div class="product-list-category-products">
  223.                                 {% for catalogProduct in categoryCatalogProducts|sort((a, b) => a.product.name|split('.')[0] <=> b.product.name|split('.')[0]) %}
  224.                                     {% set variant = catalogProduct.variants[0] %}
  225.                                     <div class="product-list-product" data-product-variant-id="{{ variant.productVariant.id }}"
  226.                                         data-price="{{ variant.totalPrice }}"
  227.                                         data-new="{{ catalogProduct.product.new ? 'true' : 'false' }}"
  228.                                         data-homemade="{{ catalogProduct.product.homemade ? 'true' : 'false' }}"
  229.                                         data-vegan="{{ catalogProduct.product.vegan ? 'true' : 'false' }}"
  230.                                         data-vegetarian="{{ catalogProduct.product.vegetarian ? 'true' : 'false' }}"
  231.                                         data-fish="{{ catalogProduct.product.fish ? 'true' : 'false' }}"
  232.                                         data-beef="{{ catalogProduct.product.beef ? 'true' : 'false' }}"
  233.                                         data-image-large="{{ catalogProduct.product.primaryImage is not null ? catalogProduct.product.primaryImage.attachment.sizes.large }}"
  234.                                         data-allergen-gluten="{{ variant.productVariant.allergens.gluten ? 'true' : 'false' }}"
  235.                                         data-allergen-egg="{{ variant.productVariant.allergens.egg ? 'true' : 'false' }}"
  236.                                         data-allergen-fish="{{ variant.productVariant.allergens.fish ? 'true' : 'false' }}"
  237.                                         data-allergen-peanut="{{ variant.productVariant.allergens.peanut ? 'true' : 'false' }}"
  238.                                         data-allergen-nuts="{{ variant.productVariant.allergens.nuts ? 'true' : 'false' }}"
  239.                                         data-allergen-soy="{{ variant.productVariant.allergens.soy ? 'true' : 'false' }}"
  240.                                         data-allergen-milk="{{ variant.productVariant.allergens.milk ? 'true' : 'false' }}"
  241.                                         data-allergen-shellfish="{{ variant.productVariant.allergens.shellfish ? 'true' : 'false' }}"
  242.                                         data-allergen-mollusks="{{ variant.productVariant.allergens.mollusks ? 'true' : 'false' }}"
  243.                                         data-allergen-celery="{{ variant.productVariant.allergens.celery ? 'true' : 'false' }}"
  244.                                         data-allergen-mustard="{{ variant.productVariant.allergens.mustard ? 'true' : 'false' }}"
  245.                                         data-allergen-sesame="{{ variant.productVariant.allergens.sesame ? 'true' : 'false' }}"
  246.                                         data-allergen-sulfites="{{ variant.productVariant.allergens.sulfites ? 'true' : 'false' }}"
  247.                                         data-allergen-lupine="{{ variant.productVariant.allergens.lupine ? 'true' : 'false' }}"
  248.                                     >
  249.                                         {% if catalogProduct.product.primaryImage %}
  250.                                             <div class="product-list-product-header">
  251.                                                 <img src="{{ catalogProduct.product.primaryImage.attachment.sizes.medium }}" style="object-fit: {{ catalogProduct.product.primaryImage.cover ? 'cover' : 'contain' }}; object-position: {{ catalogProduct.product.primaryImage.positionX ~ ' ' ~ catalogProduct.product.primaryImage.positionY }}" class="product-list-product-image" />
  253.                                                 {% if catalogProduct.product.new %}
  254.                                                     <span class="badge-new">{{ 'new'|trans({}, 'HelensBakery') }}</span>
  255.                                                 {% endif %}
  257.                                                 <div class="product-list-product-variants">
  258.                                                     {% if catalogProduct.product.homemade %}
  259.                                                         <i class="icon-homemade" title="Homemade"></i>
  260.                                                     {% endif %}
  261.                                                     {% if catalogProduct.product.vegan %}
  262.                                                         <i class="icon-vegan" title="{{ 'vegan'|trans({}, 'HelensBakery') }}"></i>
  263.                                                     {% endif %}
  264.                                                     {% if catalogProduct.product.vegetarian %}
  265.                                                         <i class="icon-vegetarian" title="{{ 'vegetarian'|trans({}, 'HelensBakery') }}"></i>
  266.                                                     {% endif %}
  267.                                                     {% if catalogProduct.product.fish %}
  268.                                                         <i class="icon-vis" title="Vis"></i>
  269.                                                     {% endif %}
  270.                                                     {% if catalogProduct.product.beef %}
  271.                                                         <i class="icon-rundvlees" title="{{ '100percent_beef'|trans({}, 'HelensBakery') }}"></i>
  272.                                                     {% endif %}
  273.                                                 </div>
  275.                                             </div>
  276.                                         {% endif %}
  277.                                         <div class="product-list-product-info">
  278.                                             <span class="product-list-product-name">
  279.                                                 {{ catalogProduct.product.name }}
  280.                                                 {% if not variant.inStock %}
  281.                                                     {{ 'sold_out'|trans({}, 'HelensBakery') }}
  282.                                                 {% endif %}
  283.                                             </span>
  284.                                             <span class="product-list-product-details">
  285.                                                 {{ catalogProduct.product.description|default(catalogProduct.product.ingredients|map(ingredient => ingredient.name)|join(', '))|striptags|raw }}
  286.                                             </span>
  287.                                             <span class="product-list-product-price">
  288.                                                 {{ boldr_shop_format_currency(variant.totalPrice, variant.currency.isoCode) }}
  289.                                             </span>
  290.                                         </div>
  291.                                         <a class="product-list-product-add" href="#">
  292.                                             <i class="icon-plus"></i>
  293.                                         </a>
  294.                                     </div>
  295.                                 {% endfor %}
  296.                                 <div class="product-list-product-spacer"></div>
  297.                                 <div class="product-list-product-spacer"></div>
  298.                                 <div class="product-list-product-spacer"></div>
  299.                             </div>
  300.                         </div>
  301.                     {% endif %}
  302.                 {% endfor %}
  303.                 <div class="product-list-refine-search">
  304.                     <span>{{ 'search_no_products'|trans({}, 'HelensBakery') }}</span>
  305.                     <a href="#" class="product-list-refine-search-clear boldr-button boldr-button-filled">{{ 'show_all_products'|trans({}, 'HelensBakery') }}</a>
  306.                 </div>
  307.             </div>
  308.         </div>
  309.         <div class="order-window-cart-wrapper">
  310.             <div class="order-window-cart">
  311.                 <div class="order-window-cart-body">
  312.                     <div class="order-window-cart-title">
  313.                         <span>{{ 'my_order'|trans({}, 'HelensBakery') }}</span>
  314.                         <i class="order-window-cart-title-close icon-chevron-down"></i>
  315.                     </div>
  316.                     <div class="order-window-cart-products">
  317.                         <div class="order-window-cart-mobile-empty">
  318.                             <span class="order-window-cart-mobile-empty-text">{{ 'no_products_in_cart'|trans({}, 'HelensBakery') }}</span>
  319.                             <a id="order-window-cart-mobile-empty-close" class="boldr-button boldr-button-filled">
  320.                                 {{ 'add_product'|trans({}, 'HelensBakery') }}
  321.                             </a>
  322.                         </div>
  323.                         {% for orderItem in cart.items %}
  324.                             <div class="order-window-cart-product" data-order-item-id="{{ orderItem.id }}" data-quantity="{{ orderItem.quantity }}">
  325.                                 <span class="order-window-cart-product-quantity">{{ orderItem.quantity }}x</span>
  326.                                 <div class="order-window-cart-product-info">
  327.                                     <div class="order-window-cart-product-name-price">
  328.                                         <span class="order-window-cart-product-name">{{ orderItem.productVariant.name }}</span>
  329.                                         <span class="order-window-cart-product-price">
  330.                                             {{ boldr_shop_format_currency(orderItem.price.totalPriceExcludingModifiers, cart.currency.isoCode) }}
  331.                                         </span>
  332.                                     </div>
  333.                                     <div class="order-window-cart-product-modifiers">
  334.                                         {% for modifier in orderItem.price.modifiers %}
  335.                                             <div class="order-window-cart-product-modifier">
  336.                                                 <span class="order-window-cart-product-modifier-name">
  337.                                                     {{ modifier.quantity > 1 ? modifier.quantity ~ 'x' }} {{ modifier.name }}
  338.                                                 </span>
  339.                                                 <span class="order-window-cart-product-modifier-amount">
  340.                                                     {{ modifier.amount < 0 ? '-' : '+' }} {{ boldr_shop_format_currency(modifier.amount|abs, cart.currency.isoCode) }}
  341.                                                 </span>
  342.                                             </div>
  343.                                         {% endfor %}
  344.                                     </div>
  345.                                     <div class="order-window-cart-product-option-values">
  346.                                         {% for optionValue in orderItem.optionValues %}
  347.                                             <div class="order-window-cart-product-option-value">
  348.                                                 {% if optionValue.name %}
  349.                                                     {{ optionValue.name }}:
  350.                                                 {% endif %}
  351.                                                 {{ optionValue.text }}
  352.                                             </div>
  353.                                         {% endfor %}
  354.                                     </div>
  355.                                     {% set allergens = ['celery', 'egg', 'fish', 'gluten', 'lupine', 'milk', 'mollusks', 'mustard', 'nuts', 'peanut', 'sesame', 'shellfish', 'soy', 'sulfites']  %}
  356.                                     {% set hasAllergens = allergens|reduce((c, v) => c or attribute(orderItem.productVariant.allergens, v), false) %}
  357.                                     {% if hasAllergens %}
  358.                                     <div class="order-window-cart-product-allergens">
  359.                                         <span class="order-window-cart-product-allergens-label">{{ 'allergen_information'|trans({}, 'HelensBakery') }}:</span>
  360.                                         {% for allergen in allergens %}
  361.                                             {% if attribute(orderItem.productVariant.allergens, allergen) %}
  362.                                                 <img src="{{ asset('/assets/images/allergens/' ~ app.request.locale ~ '/' ~ allergen ~ '.png') }}"  class="order-window-cart-product-allergen" data-name="{{ allergen }}">
  363.                                             {% endif %}
  364.                                         {% endfor %}
  365.                                     </div>
  366.                                     {% endif %}
  367.                                     {% if cart.canItemsBeModified %}
  368.                                     <div class="order-window-cart-product-quantity-buttons">
  369.                                         <a href="#" class="order-window-cart-product-quantity-remove">
  370.                                             <i class="icon-minus"></i>
  371.                                         </a>
  372.                                         <a href="#" class="order-window-cart-product-quantity-add">
  373.                                             <i class="icon-plus"></i>
  374.                                         </a>
  375.                                     </div>
  376.                                     {% endif %}
  377.                                 </div>
  378.                             </div>
  379.                         {% endfor %}
  380.                     </div>
  382.                     <div class="order-window-cart-subtotal-modifiers" {{ cart.total == cart.subtotal ? 'style="display: none"' }}>
  383.                         <div class="order-window-cart-subtotal">
  384.                             <span class="order-window-cart-subtotal-text">{{ 'sub_total'|trans({}, 'HelensBakery') }}</span>
  385.                             <span id="order-window-cart-subtotal-amount" class="order-window-cart-subtotal-amount">{{ boldr_shop_format_currency(cart.subtotal, cart.currency.isoCode) }}</span>
  386.                         </div>
  387.                         <div class="order-window-cart-modifiers">
  388.                             {% for modifier in cart.price.modifiers %}
  389.                                 <div class="order-window-cart-subtotal">
  390.                                     <span class="order-window-cart-subtotal-text">{{ modifier.name }}</span>
  391.                                     <span class="order-window-cart-subtotal-amount">{{ (modifier.amount < 0 ? '- ' : '') ~ boldr_shop_format_currency(modifier.amount|abs, cart.currency.isoCode) }}</span>
  392.                                 </div>
  393.                             {% endfor %}
  394.                         </div>
  395.                     </div>
  397.                 </div>
  399.                 <div class="order-window-cart-footer">
  401.                     <div class="order-window-cart-subtotal">
  402.                         <span class="order-window-cart-subtotal-text">{{ 'total'|trans({}, 'HelensBakery') }}</span>
  403.                         <span id="order-window-cart-total-amount" class="order-window-cart-subtotal-amount">{{ boldr_shop_format_currency(cart.total, cart.currency.isoCode) }}</span>
  404.                     </div>
  406.                     {% if not cart.canItemsBeModified %}
  407.                         <p>
  408.                             {{ 'cant_add_while_paying'|trans({}, 'HelensBakery') }}
  409.                         </p>
  410.                     {% endif %}
  412.                     <div class="order-window-cart-next-states">
  413.                         {% for nextState in cart.nextStates %}
  414.                             <a href="{{ nextState.url }}" class="order-window-cart-next-state boldr-button boldr-button-highlight">
  415.                                 {{ nextState.buttonText }}
  416.                             </a>
  417.                         {% endfor %}
  418.                     </div>
  420.                 </div>
  421.             </div>
  422.         </div>
  423.     </div>
  424. {% endblock %}