One Hat Cyber Team

Edit File: modern-store-dark-blue.blade.php

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

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, shrink-to-fit=no">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>{{ $card_details->title }}</title>

{{-- CSRF Token --}}
    <meta name="csrf-token" content="{{ csrf_token() }}">

{{-- Store icon and color --}}
    <link rel="icon" href="{{ url($business_card_details->profile) }}" sizes="96x96" type="image/png" />
    <link rel="apple-touch-icon" href="{{ url($business_card_details->profile) }}">

<meta name="application-name" content="{{ $card_details->title }}">

<meta name="apple-mobile-web-app-title" content="{{ $card_details->title }}">

<meta name="msapplication-TileColor" content="blue">
    <meta name="msapplication-TileImage" content="{{ url($business_card_details->profile) }}">

{{-- Fonts --}}
    <link rel="stylesheet"
        href="https://fonts.googleapis.com/css2?family=DM+Sans:ital,wght@0,400;0,500;0,700;1,400&display=swap">

{{-- CSS --}}
    <link href="{{ url('backend/css/tabler.min.css') }}" rel="stylesheet" />
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@tabler/icons-webfont@latest/tabler-icons.min.css">
    <link href="{{ url('backend/css/slick.css') }}" rel="stylesheet" />
    <link href="{{ url('frontend/css/store.css') }}" rel="stylesheet">

{{-- Check business details --}}
    @if ($business_card_details != null)
    <style>
    {!! $business_card_details->custom_css !!}
    </style>
    @endif

{{-- JS --}}
    <script src="{{ url('js/jquery.min.js') }}"></script>
    <script src="{{ url('frontend/whatsapp-store/js/main.js') }}"></script>
    <script src="{{ url('vendor/sweetalert/sweetalert.all.js') }}"></script>

{{-- SEO Tags --}}
    {!! SEOMeta::generate() !!}
    {!! OpenGraph::generate() !!}
    {!! Twitter::generate() !!}
    {!! JsonLd::generate() !!}

{{-- Check PWA --}}
    @if ($plan_details != null)
    @if ($plan_details['pwa'] == 1)

@laravelPWA

<link rel="manifest" href="{{ $manifest }}">

@endif
    @endif

.regular_price {
    font-size: 13px;
}
.form-title {
    font-size: 15px;
}
.radius-img{
    border-radius: 18px;
}
.gobiz-wa-store-cat-text{
        text-overflow: ellipsis;
        white-space: nowrap;
        overflow: hidden;
    }
</style>

{{-- Limited Text Function --}}
    @php
    function limit_text($text) {
    $limit = 4;
    if (str_word_count($text, 0) > $limit) {
    $words = str_word_count($text, 2);
    $pos = array_keys($words);
    $text = substr($text, 0, $pos[$limit]) . '...';
    }
    return $text;
    }
    @endphp
</head>

<body data-bs-theme="dark"
    dir="{{(App::isLocale('ar') || App::isLocale('ur') || App::isLocale('he') ? 'rtl' : 'ltr')}}">
    
    <div class="page page-center preloader-wrapper bg-dark">
        <div class="container container-slim py-4">
            <div class="text-center">
                <div class="mb-3">
                    <img src="{{ url($business_card_details->profile) }}" height="36"
                        alt="{{ $business_card_details->title }}">
                </div>
                <div class="mb-3 h3">{{ __('Loading') }}</div>
                <div class="progress progress-sm">
                    <div class="progress-bar progress-bar-indeterminate"></div>
                </div>
            </div>
        </div>
    </div>

{{-- Page --}}
    <div id="wrapper" class="page">
        
        <header class="navbar navbar-expand-md d-print-none p-2 pb-2" data-bs-theme="dark">
            <div class="container-xl">
               <div class="navbar-brand navbar-brand-autodark d-none-navbar-horizontal pe-0 pe-md-3">
                    <a href="{{ url($business_card_details->card_url) }}">
                        <img src="{{ url($business_card_details->profile) }}"
                            alt="{{ $business_card_details->title }}" class="logo-height" />
                    </a>
                </div>
                <div class="navbar-nav flex-row order-md-last">
                    <div class="nav-item dropdown">
                        <div class="nav-item">
                            <a class="position-relative cursor-pointer text-white" data-bs-toggle="modal" data-bs-target="#cartItems">
                                <i class="ti ti-shopping-bag"></i>
                                <span class="badge bg-blue text-blue-fg badge-notification badge-pill"
                                    id="badge">0</span></a>
                        </div>
                    </div>
                </div>
            </div>
        </header>

<div class="page-wrapper mt-5">
            <div class="page-body">
                <div class="container-xl">
                    
                    <div class="row">
                        {{-- Greeting message --}}
                        <div class="col-md-12 pt-6 px-1">
                            <h3 class="alert alert-important alert-blue text-white">{{ $business_card_details->sub_title }}</h3>
                        </div>

<div class="col-md-12">
                            <div id="carousel-captions" class="carousel slide" data-bs-ride="carousel">
                                <div class="carousel-inner">
                                    {{-- Cover --}}
                                    @if (is_array(json_decode($business_card_details->cover)) == true)
                                        @foreach (json_decode($business_card_details->cover) as $cover)
                                        <div class="carousel-item {{ $loop->first ? 'active' : '' }}">
                                            <img class="d-block w-100 radius-img" alt="{{ $business_card_details->title }}" src="{{ url($cover) }}" />
                                            <div class="d-none d-md-block"></div>
                                        </div>
                                        @endforeach
                                    @else
                                        <div class="carousel-item active">
                                            <img class="d-block w-100 radius-img" alt="{{ $business_card_details->title }}" src="{{ url($business_card_details->cover) }}" />
                                            <div class="d-none d-md-block"></div>
                                        </div>
                                    @endif
                                </div>
                                <a class="carousel-control-prev" href="#carousel-captions" role="button"
                                    data-bs-slide="prev">
                                    <span class="carousel-control-prev-icon" aria-hidden="true"></span>
                                    <span class="visually-hidden">{{ __('Previous') }}</span>
                                </a>
                                <a class="carousel-control-next" href="#carousel-captions" role="button"
                                    data-bs-slide="next">
                                    <span class="carousel-control-next-icon" aria-hidden="true"></span>
                                    <span class="visually-hidden">{{ __('Next') }}</span>
                                </a>
                            </div>
                        </div>

<div class="col-md-12 my-3">
                            <h2>{{ __('Categories') }}</h2>
                            <div class="row categories">
                                <div class="col-md-3 col-lg-3 px-1 cursor-pointer">
                                    <a href="{{ url()->current() }}">
                                        <div class="card card-sm custom-card-style">
                                            <div class="card-body">
                                                <div class="ratio ratio-1x1">
                                                     <svg fill="#0154A5" width="800px" height="800px" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path d="M10 3H4a1 1 0 0 0-1 1v6a1 1 0 0 0 1 1h6a1 1 0 0 0 1-1V4a1 1 0 0 0-1-1zM9 9H5V5h4v4zm11 4h-6a1 1 0 0 0-1 1v6a1 1 0 0 0 1 1h6a1 1 0 0 0 1-1v-6a1 1 0 0 0-1-1zm-1 6h-4v-4h4v4zM17 3c-2.206 0-4 1.794-4 4s1.794 4 4 4 4-1.794 4-4-1.794-4-4-4zm0 6c-1.103 0-2-.897-2-2s.897-2 2-2 2 .897 2 2-.897 2-2 2zM7 13c-2.206 0-4 1.794-4 4s1.794 4 4 4 4-1.794 4-4-1.794-4-4-4zm0 6c-1.103 0-2-.897-2-2s.897-2 2-2 2 .897 2 2-.897 2-2 2z"/></svg>
                                                </div>
                                                <div class="mt-2">
                                                    <div class="row">
                                                        <div class="col-lg-12">
                                                            <h3 class="card-title text-center mb-1">
                                                                {{ __('All') }}
                                                            </h3>
                                                        </div>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                    </a>
                                </div>
                                
                                @foreach ($categories as $category)
                                <div class="col-md-3 col-lg-3 px-1 cursor-pointer">
                                    <a href="{{ route('profile', $business_card_details->card_url).'?category='.strtolower($category->category_name) }}">
                                        <div class="card card-sm custom-card-style">
                                            <div class="card-body">
                                                <div class="ratio ratio-1x1">
                                                    <img src="{{ url($category->thumbnail) }}" class="rounded object-cover" alt="{{ $category->category_name }}" />
                                                </div>
                                                <div class="mt-2">
                                                    <div class="row">
                                                        <div class="col-lg-12">
                                                            <h3 class="card-title text-center mb-1 gobiz-wa-store-cat-text">
                                                                {{ $category->category_name }}
                                                            </h3>
                                                        </div>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                    </a>
                                </div>
                                @endforeach
                            </div>
                        </div>

@if (count($products) > 0)
                        <div class="col-md-12 my-3">
                            <h2>{{ __('Products') }}</h2>
                            <div class="row">
                                
                                @foreach ($products as $product)
                                <div class="col-sm-6 col-lg-3 col-6 py-2">
                                    <div class="card custom-card-style">
                                        @php
                                        $productImages = explode(',', $product->product_image);
                                        @endphp
                                        <div id="carousel-controls" class="carousel slide mb-3" data-bs-ride="carousel">
                                            <div class="carousel-inner">
                                                @foreach ($productImages as $productImage)
                                                <div class="carousel-item {{ $loop->index == 0 ? 'active' : '' }}">
                                                    <img class="d-block w-100 rounded" id="{{ $product->product_id }}_product_image" alt="{{ $product->product_name }}" src="{{ url($productImage) }}">
                                                </div>
                                                @endforeach
                                            </div>
                                        </div>
                                        <div class="card-body">
                                            <span class="badge bg-blue text-white" id="{{ $product->product_id }}_subtitle">{{ $product->category_name }}</span>
                                            <span class="badge bg-blue text-white">{{ $product->badge }}</span>
                                            <h3 id="{{ $product->product_id }}_product_name" class="card-title mb-1" data-bs-toggle="tooltip" data-bs-placement="top" title="{{ $product->product_name }}">
                                                {{ limit_text($product->product_name) }}
                                            </h3>
                                            <p class="text-white mb-3">{{ $product->product_subtitle }}</p>
                                            <p class="pricing my-2 p-0"><strong><span id="{{ $product->product_id }}_currency">{{ $currency }} <span id="{{ $product->product_id }}_price">{{ $product->sales_price }}</span></span></strong></p>
                                            @if ($product->sales_price != $product->regular_price)
                                            <p class="regular_price"><del class="text-blue">{{ $currency }} {{ $product->regular_price }}</del></strong></p>
                                            @endif
                                        </div>
                                        @if ($product->product_status == "instock")
                                        <div class="card-footer">
                                            <a onclick="addToCart('{{ $product->product_id }}')" class="btn btn-blue"><i class="ti ti-shopping-bag-plus"></i> {{ __('Add') }}</a>
                                        </div>
                                        @endif
                                    </div>
                                </div>
                                @endforeach

{{-- Paginate --}}
                                <div class="col-md-12 my-3">
                                    @if(request()->has('category'))
                                    {{ $products->appends(['category' => strtolower($category->category_name)])->links() }}
                                    @else
                                    {{ $products->links() }}
                                    @endif
                                </div>
                            </div>
                        </div>
                        @else
                        <div class="col-md-12 my-3">
                            <h2>{{ __('Products') }}</h2>
                            <div class="row">
                                <h3>{{ __('No Products Founds!') }}</h3>
                            </div>
                        </div>
                        @endif
                    </div>
                </div>
            </div>

<footer class="footer footer-transparent d-print-none">
                <div class="container-xl">
                    <div class="row text-center align-items-center flex-row-reverse">
                        <div class="col-lg-auto ms-lg-auto">
                            <ul class="list-inline list-inline-dots mb-0">
                                <li class="list-inline-item"><a href="{{ $shareComponent['facebook'] }}" target="_blank" class="link-light"><i
                                            class="ti ti-brand-facebook-filled text-blue"></i></a></li>
                                <li class="list-inline-item"><a href="{{ $shareComponent['twitter'] }}" class="link-light"><i
                                            class="ti ti-brand-twitter-filled text-blue"></i></a></li>
                                <li class="list-inline-item"><a href="{{ $shareComponent['linkedin'] }}" target="_blank" class="link-light"><i
                                            class="ti ti-brand-linkedin text-blue"></i></a></li>
                                <li class="list-inline-item"><a href="{{ $shareComponent['telegram'] }}" target="_blank" class="link-light"><i
                                            class="ti ti-brand-telegram text-blue"></i></a></li>
                                <li class="list-inline-item"><a href="{{ $shareComponent['whatsapp'] }}" target="_blank" class="link-light"><i
                                            class="ti ti-brand-whatsapp text-blue"></i></a></li>
                            </ul>
                        </div>
                        <div class="col-12 col-lg-auto mt-3 mt-lg-0">
                            <ul class="list-inline list-inline-dots mb-0">
                                @if ($plan_details['hide_branding'] == 1)
                                <li class="list-inline-item">
                                    {{ __('Copyright') }} © <span id="year"></span> <a href="{{ url($business_card_details->card_url) }}" class="link-light text-blue"><strong>{{ $card_details->title }}</strong></a>. {{ __('All rights reserved.') }}
                                </li>
                                @else
                                <li class="list-inline-item">
                                    {{ __('Copyright') }} © <span id="year"></span> <a href="{{ url($business_card_details->card_url) }}" class="link-light text-blue"><strong>{{ config('app.name') }}</strong></a>. {{ __('All rights reserved.') }}
                                </li>
                                @endif
                            </ul>
                        </div>
                    </div>
                </div>
            </footer>
        </div>
    </div>

@if ($plan_details != null)
        {{-- Check PWA --}}
        @if ($plan_details['pwa'] == 1)
        @include('vendor.laravelpwa.bs_pwa_modal')
        @endif
    @endif

{{-- Cart Items --}}
    <div class="modal modal-blur fade" id="cartItems" role="dialog" aria-hidden="true">
        <div class="modal-dialog modal-lg modal-dialog-centered" role="document">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title">{{ __('Cart Items') }}</h5>
                    <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                </div>
                <div class="modal-body">

<div class="row">
                        <div class="row" id="cart_items"></div>
                        <a class="btn btn-blue" id="place-order" onclick="placeOrder()">{{ __('Place WhatsApp Order') }}</a>
                    </div>

<div id="empty-cart" class="pt-6 p-3">
                        <p class="px-4 py-4 mb-4 text-center text-white">{{ __('Your cart is empty.') }}</p>

<a class="btn btn-blue d-flex" data-bs-dismiss="modal" aria-label="Close">{{ __('Start Shopping') }}</a>
                    </div>
                </div>
            </div>
        </div>
    </div>

<script type="text/javascript" src="{{ url('backend/js/tabler.min.js') }}"></script>
    <script type="text/javascript" src="{{ url('backend/js/slick.min.js') }}"></script>
    <script src="{{ url('frontend/whatsapp-store/js/script.js') }}"></script>
    <script src="{{ url('backend/js/data-filter.js') }}"></script>

{{-- Check business details --}}
    @if ($business_card_details != null)
    <script>
    {!! $business_card_details->custom_js !!}
    </script>
    @endif

});
    </script>
    <script type="text/javascript">
        $(document).ready(function () {
        "use strict";
        $(".categories").slick({
          rtl: false,
          dots: false,
          infinite: true,
          arrows: false,
          autoplay: true,
          autoplaySpeed: 2000,
          speed: 700,
          centerMode: false,
          slidesToShow: 5,
          slidesToScroll: 1,
          responsive: [
            {
              breakpoint: 1024,
              settings: {
                infinite: true,
                slidesToShow: 4,
                slidesToScroll: 1,
              },
            },
            {
              breakpoint: 600,
              settings: {
                infinite: true,
                slidesToShow: 4,
                slidesToScroll: 1,
              },
            },
            {
              breakpoint: 480,
              settings: {
                infinite: true,
                slidesToShow: 4,
                slidesToScroll: 1,
              },
            },
          ],
        });
    });
    </script>
     <script>

var cart = [];

var whatsAppNumber = "{{ $enquiry_button }}";
        var whatsAppMessage = "{{ $whatsapp_msg }}";
        var currency = "{{ $currency }}";

$("#badge").hide();
        $("#place-order").hide();
        $("#empty-cart").show();

function addToCart(pid) {
            "use strict";
            var productName = $("#" + pid + "_product_name").text();
            var price = $("#" + pid + "_price").text();
            var product_image = $("#" + pid + "_product_image").attr("src");
            var subtitle = $("#" + pid + "_subtitle").text();

}

updateStorage();

}

function reduceQty(i) {
            "use strict";
            if (cart[i].qty == 1) {
                removeFromCart(i);
            } else {
                cart[i].qty = cart[i].qty - 1;
                updateBadge();
                updateList();
            }

updateStorage();

}

function addQty(i) {
            "use strict";
            cart[i].qty = cart[i].qty + 1;
            updateBadge();
            updateList();
            updateStorage();

}

successAlert(`{{ __('Item Removed') }}`);

updateStorage();
            updateBadge();
            updateList();
        }

}

function createWhatsAppLink(cusDetails) {
            "use strict";
            if (cusDetails[0].length >= 3 && cusDetails[0].length >= 4) {

var productsList = "\n- - - - - - - - - - - - - - - - - - - -\n";
                productsList += "📦 *{{ __('Order Details:') }}* \n\n";

var grandTotal = 0;
                for (let x = 0; x < cart.length; x++) {
                    var item_cost = Number(cart[x].qty) * Number(cart[x].price);
                    var cart_price = Number(cart[x].price);
                    productsList += $.trim(cart[x].product_name + " - " + cart[x].qty + " X " + currency + " " + cart_price.toFixed(2) + "  =  *" + currency + " " + item_cost.toFixed(2)) + "* \n";
                    grandTotal += Number(cart[x].price) * cart[x].qty;
                }

productsList += "\n- - - - - - - - - - - - - - - - - - - -\n";
                productsList += `*{{ __('Total') }}*` + " :" + "*" + currency + " " + grandTotal.toFixed(2) + "*";
                productsList += "\n- - - - - - - - - - - - - - - - - - - -\n\n";

var waShareContent = "🎉 *{{ __('New Order') }}* \n";
                waShareContent = waShareContent + productsList + customerDetails + "*" + whatsAppMessage + "*";

var link = "https://api.whatsapp.com/send/?phone=" + whatsAppNumber + "&text=" + encodeURI(waShareContent);
                window.open(link, '_blank');

successAlert('{{ __("Order Placed!") }}');
                cart = [];

updateStorage();
            } else {
                placeOrder();
            }

}

function updateStorage(){
            localStorage.setItem("cart_" + "{{ $business_card_details->card_id }}", JSON.stringify(cart))
        }
    </script>
</body>

</html>