CORE_V5 // products

PATH: home / rwabteecom / public_html / resources / views / vcardTemplates / products /

Editing: vcard28.blade.php

<!DOCTYPE html>
<html lang="{{ str_replace('_', '-', app()->getLocale()) }}">

<head>
    
    <meta charset="utf-8">
    @if (checkFeature('seo'))
        @if ($vcard->meta_description)
            <meta name="description" content="{{ $vcard->meta_description }}">
        @endif
        @if ($vcard->meta_keyword)
            <meta name="keywords" content="{{ $vcard->meta_keyword }}">
        @endif
    @else
        <meta name="description" content="{{ strip_tags($vcard->description) }}">
        <meta name="keywords" content="">
    @endif
    <meta property="og:image" content="{{ $vcard->cover_url }}" />
    <meta name="viewport" content="width=device-width, initial-scale=1">
    @if (checkFeature('seo') && $vcard->site_title && $vcard->home_title)
        <title>{{ $vcard->home_title }} | {{ $vcard->site_title }}</title>
    @else
        <title>{{ getAppName() }}</title>
    @endif

<link rel="icon" href="{{ getFaviconUrl() }}" type="image/png">

@endif
                @if ($vcard->font_size)
                    div>h4 {
                        font-size: {{ $vcard->font_size }}px !important;
                    }
                @endif
            @endif

@if (isset(checkFeature('advanced')->custom_css))
                {!! $vcard->custom_css !!}
            @endif
        </style>
     @endif --}}
</head>

<body>

<div class="vcard-twentyeight bg-white main-content  w-100 mx-auto content-blur allSection collapse show">
            <div class="vcard-one__product py-3 mt-0">
                <div class="d-flex justify-content-between gap-2 align-items-center px-30 mb-3" @if (getLanguage($vcard->default_language) == 'Arabic') dir="rtl" @endif>
                    <div>
                        <h4 class="product-heading mb-0">{{ __('messages.vcard.products') }}</h4>
                    </div>
                    <div>
                        <a class="back-btn text-decoration-none d-block text-white"
                            href="{{ $vcardUrl }}"
                            role="button">{{ __('messages.common.back') }}</a>
                    </div>
                </div>
                <div class="product-slider">
                    @foreach ($vcard->products as $product)
                        <div class="px-30">
                            <div class="product-card card mb-10">
                                <div class="product-img card-img">
                                    <a @if ($product->product_url) href="{{ $product->product_url }}" @endif
                                        target="_blank" class="text-decoration-none fs-6 d-block w-100 h-100">
                                        <div
                                            class=" {{ $product->media->count() < 2 ? 'd-block' : '' }} product-img-slider-28 overflow-hidden">
                                            @foreach ($product->media as $media)
                                                <div>
                                                    <div
                                                        class="product-img-height h-100 text-center w-100 mx-auto">
                                                        <img src="{{ $media->getUrl() }}" alt="{{ $product->name }}"
                                                            class=" object-fit-contain h-100 w-100" loading="lazy">
                                                    </div>
                                                </div>
                                            @endforeach
                                        </div>
                                    </a>
                                </div>
                                <div class=" card-body p-0">
                                    <div class="product-desc d-flex justify-content-between align-items-center mb-3"
                                        @if (getLanguage($vcard->default_language) == 'Arabic') dir="rtl" @endif>
                                        <h3 class="text-black fs-18 fw-5 mb-0 me-2">{{ $product->name }}</h3>
                                        <div class="product-amount text-primary fw-bold fs-18">
                                            @if ($product->currency_id && $product->price)
                                                <span
                                                    class="fs-18 fw-6 text-primary  product-price-{{ $product->id }}">{{ $product->currency->currency_icon }}{{ getSuperAdminSettingValue('hide_decimal_values') == 1 ? number_format($product->price, 0) : number_format($product->price, 2) }}</span>
                                            @elseif($product->price)
                                                <span
                                                    class="fs-18 fw-6 text-purple  product-price-{{ $product->id }}">{{ getUserCurrencyIcon($vcard->user->id) }}{{ $product->price }}</span>
                                            @endif
                                        </div>
                                    </div>
                                    <p class="fs-14 text-dark mb-0">{{ $product->description }}</p>
                                    @if (!empty($product->price))
                                        <div class="mt-3 text-center">
                                            <button class="buy-product"
                                                data-id="{{ $product->id }}">{{ __('messages.subscription.buy_now') }}</button>
                                        </div>
                                    @endif
                                </div>
                            </div>
                        </div>
                    @endforeach
                </div>
            </div>
        </div>
    </div>
    <div class="vcard-twentyeight-effect position-fixed w-100 h-100 top-0 start-0">
    </div>
    @include('vcardTemplates.product-buy')
    <script src="https://js.stripe.com/v3/"></script>
    <script type="text/javascript" src="{{ asset('assets/js/front-third-party.js') }}"></script>
    <script type="text/javascript" src="{{ asset('front/js/bootstrap.bundle.min.js') }}"></script>
    <script src="{{ asset('assets/js/slider/js/slick.min.js') }}" type="text/javascript"></script>
    <script>
        @if (checkFeature('seo') && $vcard->google_analytics)
            {!! $vcard->google_analytics !!}
        @endif

@if (isset(checkFeature('advanced')->custom_js) && $vcard->custom_js)
            {!! $vcard->custom_js !!}
        @endif
    </script>
    @php
        $setting = \App\Models\UserSetting::where('user_id', $vcard->tenant->user->id)
            ->where('key', 'stripe_key')
            ->first();
    @endphp

const container = document.querySelector('.vcard-twentyeight-effect');
            const particles = [];
            const size = 110; // in px
            const count = 60;

function isOverlapping(x, y, others) {
              return others.some(p => {
                return Math.abs(p.x - x) < size && Math.abs(p.y - y) < size;
              });
            }

for (let i = 0; i < count; i++) {
              const particle = document.createElement('div');
              particle.className = 'particle-vcard28';
              particle.innerHTML = svgShapes[i % svgShapes.length];
              container.appendChild(particle);

let x, y, tries = 0;
              do {
                x = Math.random() * (container.clientWidth - size);
                y = Math.random() * (container.clientHeight - size);
                tries++;
                if (tries > 1000) break;
              } while (isOverlapping(x, y, particles));

const speedX = (Math.random() - 0.5) * 1.2;
              const speedY = (Math.random() - 0.5) * 1.2;

particles.push({ el: particle, x, y, speedX, speedY });
            }

function animate() {
              for (let i = 0; i < particles.length; i++) {
                const p = particles[i];

p.x += p.speedX;
                p.y += p.speedY;

if (p.x < 0 || p.x > container.clientWidth - size) p.speedX *= -1;
                if (p.y < 0 || p.y > container.clientHeight - size) p.speedY *= -1;

for (let j = 0; j < particles.length; j++) {
                  if (i === j) continue;
                  const other = particles[j];
                  if (Math.abs(p.x - other.x) < size && Math.abs(p.y - other.y) < size) {
                    p.speedX *= -1;
                    p.speedY *= -1;
                    break;
                  }
                }

p.el.style.transform = `translate(${p.x}px, ${p.y}px)`;
              }

requestAnimationFrame(animate);
            }

animate();
        </script>
</body>

</html>

CANCEL