public/themes/karen/cart.html.twig line 1

Open in your IDE?
  1. {% extends getThemeDir('base.html.twig') %}
  3. {% block body %}
  5.    <div class="container">
  6.        {% if order %}
  7.            <section class="flex flex-col lg:flex-row justify-between items-start gap-4 child:rounded-lg child:bg-white child:dark:bg-gray-800 child:shadow child:p-4 mt-5">
  8.                <div class="w-full lg:w-3/4 flex flex-col gap-y-8 ">
  9.                    <div class="flex items-center justify-between">
  10.                     <span class="flex items-center gap-x-2">
  11.                         <h2 class="font-DanaMedium text-xl">سبد خرید</h2>
  12.                         <p class="text-gray-400">(2 کالا)</p>
  13.                     </span>
  14.                    </div>
  15.                    <div class="w-full flex flex-col gap-y-4 child:p-2 lg:child:p-4 ">
  16.                        {% for item in order.orderItems %}
  17.                        <div class="w-full flex justify-between relative border-b-2 border-gray-200 dark:border-white/20 ">
  18.                            <div class="flex flex-col sm:flex-row items-center gap-6">
  19.                                <div class="flex w-fit flex-col">
  20.                                    {% if item.product.productImages|length > 0 %}
  21.                                        <img src="{{ item.product.productImages[0].imageUrl }}" class="w-36" alt="">
  22.                                    {% else %}
  23.                                        <img src="/default.jpg" alt="">
  24.                                    {% endif %}
  25.                                </div>
  26.                                <div class="flex flex-col gap-y-4">
  27.                                    <h2 class="font-DanaMedium line-clamp-1">
  28.                                        {{ item.product.name }}
  29.                                    </h2>
  30.                                    <ul class="space-y-3 child:text-sm text-gray-400 child:flex child:items-center child:gap-x-1.5">
  31.                                        {% for attr in item.orderItemAttributes %}
  32.                                            <li>
  33.                                                <svg class="w-5 h-5">
  34.                                                    <use href="#shield"></use>
  35.                                                </svg>
  36.                                                <p class="mt-1">
  37.                                                    {{ attr.attributeName }}: {{ attr.attributeValue }}
  38.                                                </p>
  39.                                            </li>
  40.                                        {% endfor %}
  41.                                    </ul>
  42.                                    <span class="flex items-center gap-x-1 text-gray-700 dark:text-gray-300 font-DanaMedium mt-4">
  43.                                     <p class="font-DanaMedium text-xl">{{ (item.calculatePrice() * item.quantity)|number_format }}</p>
  44.                                     <p class="text-lg">تومان</p>
  45.                                 </span>
  46.                                    <span
  47.                                            class="absolute bottom-3 left-0 text-blue-500 flex sm:hidden items-center gap-x-1 text-sm cursor-pointer">
  49.                                     <a href="{{ path('cart_remove_item' , {'id' : item.id}) }}" class="flex sm:hidden">حذف</a>
  50.                                     <svg class="w-4 h-4">
  51.                                         <use href="#chevron-left"></use>
  52.                                     </svg>
  53.                                 </span>
  54.                                    <svg class=" flex sm:hidden absolute top-0 left-0 w-5 h-5">
  55.                                        <use href="#close"></use>
  56.                                    </svg>
  57.                                </div>
  58.                            </div>
  59.                            <a href="{{ path('cart_remove_item' , {'id' : item.id}) }}" class="hidden sm:flex items-end justify-between flex-col">
  60.                                <svg class="w-5 h-5 cursor-pointer">
  61.                                    <use href="#x-mark"></use>
  62.                                </svg>
  63.                            </a>
  64.                        </div>
  65.                         {% endfor %}
  66.                    </div>
  67.                </div>
  69.                <!-- PRICE BOX -->
  70.                <div class="w-full lg:w-1/4 lg:sticky top-5 flex flex-col gap-y-4">
  71.                    <!-- PRICE -->
  72.                    <ul class="child:flex child:items-center child:justify-between space-y-8">
  73.                        <li>
  74.                            <p>قیمت کالاها({{ order.orderItems|length }})</p>
  75.                            <p class="flex gap-x-1 text-gray-600 dark:text-gray-300 ">{{  total|number_format}} <span class="hidden xl:flex">تومان</span></p>
  76.                        </li>
  77.                        {% if getSettings('accounting_tax_enabled') %}
  78.                            <li>
  79.                                <p>مالیات </p>
  80.                                <p class="font-DanaMedium text-gray-700 dark:text-gray-200">   {{ getSettings('accounting_tax_amount') }}
  81.                                    درصد</p>
  82.                            </li>
  83.                        {% endif %}
  84.                        <li class="border-t-2 border-dashed border-gray-400 pt-8">
  85.                            <p> مبلغ نهایی  :</p>
  86.                            <p>{{ total|number_format}} تومان</p>
  87.                        </li>
  88.                    </ul>
  90.                    <a href="{{ path('cart_checkout') }}"
  91.                       class="w-full mt-4 flex items-center gap-x-1 justify-center bg-blue-500 text-white hover:bg-blue-600 transition-all rounded-lg shadow py-2">
  92.                        تایید و تکمیل سفارش
  93.                        <svg class="w-5 h-5">
  94.                            <use href="#shopping-bag"></use>
  95.                        </svg>
  96.                    </a>
  98.                </div>
  99.            </section>
  100.        {% else %}
  101.            <section class="flex flex-col items-center justify-center gap-y-3 mt-5">
  102.                <img class="max-w-60" src="{{  url('app_cdn_path' , {'path' : 'base-assets/themes/karen/images/svg/empty-cart.svg'})|replaceUrl('http://', 'https://') }}" alt="">
  103.                <h1 class="font-DanaDemiBold text-gray-700 dark:text-gray-300 text-2xl mt-2">
  104.                    سبد خرید شما خالی است!
  105.                </h1>
  106.                <a class="flex items-center justify-center w-fit text-sky-500" href="{{ path('app_shop_site_products') }}">
  107.                    مشاهده فروشگاه
  108.                    <svg class="size-4 mb-0.5">
  109.                        <use href="#chevron-left"></use>
  110.                    </svg>
  111.                </a>
  112.            </section>
  113.        {% endif %}
  114.    </div>
  115. {% endblock %}