{% extends 'base.html.twig' %}{% block body %} <div class="container-fluid main-holder px-5 bg-light"> <div class="row"> <div class="col-lg-3"> <select class="form-select rounded-pill py-3 px-3 shadow-none border-0 fs-5 bg-transparent fw-bold mb-3" id=""> <option selected>Select a City</option> {% for c in ecomvariables.cities() %} <option value="{{ c.id }}">{{ c.name }}</option> {% endfor %} </select> </div> </div> </div> <div class="container-fluid px-5 mt-5"> <div class="row"> <div class="col-lg-12"> <h1 class="fw-bolder">{{ style_city }} <span class="small">/ {{ style.name }}</span></h1> <h6>{{ brand.title }}</h6> </div> </div> <div class="row mt-4 "> <div class="col-lg-7"> <div class="product-slider"> <div class="slider-wrapper"> <div class="slides"> {% for k, pim in productimages %} <img src="{{ asset(pim.image) }}" alt="Product Image 1"> {% endfor %} </div> </div> <div class="controls"> <button class="prev ms-3"><i data-feather="chevron-left" class="iconsize"></i></button> <button class="next me-3"><i data-feather="chevron-right" class="iconsize"></i></button> </div> <div class="thumbnails"> {% for k, pim in productimages %} <img src="{{ asset(pim.image) }}" alt="Thumbnail 1"> {% endfor %} </div> </div> </div> <div class="col-lg-5 pdt-detail"> <form class="" action="{{ path('sajong_ecom_add_cart') }}" method="post" id="sajong_ecom_add_cart_form" accept-charset="UTF-8"> <h2 class="fw-bolder mb-3">{{ product.title }}</h2> <h4 class="fw-semibold border-bottom pb-5 mb-5" id="product_variation_price">${{ (variations[0].price/100)|number_format(2) }}</h4> <h6>Select Size:</h6> <select class="form-select rounded-pill py-3 px-4 shadow-none border mb-3" id="" onchange="getprice(this, '{{ path('sajong_ecom_prodcut_price') }}' )"> <option selected>Choose a size</option> {% for key, psz in prod_sizes %} <option value="{{ psz.id }}-{{ psz.vid }}" {% if psz.id == variations[0].size %}selected{% endif %}>{{ psz.name }}</option> {% endfor %} </select> <div class="auto2" style="position:relative; "><div id="ecom-addtocart-overlay" class="btn bg-secondary text-white px-4 py-3 w-100 rounded-pill mb-4" style="position: absolute; display:none;">Adding to Cart....Please wait...</div> <span style="color:red;font-size:10px;display:none" id="carterror">Please select a size</span></div> <button type="button" class="btn bg-secondary text-white px-4 py-3 w-100 rounded-pill mb-4" {% if app.user %}onclick="return validateCart();"{% else %}data-bs-toggle="offcanvas" href="#login" role="button" aria-controls="login"{% endif %}>Add to bag</button> <h6 class="mt-3">Product Information:</h6> {{ product.styledescription|raw }} <p class="mt-4">{{ product.description|raw }}</p> <input type="hidden" id="productid" name="productid" value="{{ product.id }}" /> <input type="hidden" id="product_id" name="product_id" value="{{ variations[0].id }}" /> <input type="hidden" id="product_color" name="field_color" value="{{ variations[0].color }}" /> <input type="hidden" id="product_size" name="field_size" value="{{ variations[0].size }}" /> <input type="hidden" id="quantity" name="quantity" value="1" /> <input type="hidden" name="form_token" value="{{ csrf_token('sajong_ecom_cart_form') }}" /> </form> </div> </div> <div class="row mt-5"> <div class="modal fade" id="allcomments" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true"> <div class="modal-dialog"> <div class="modal-content p-3"> <div class="modal-header border-bottom-0"> <h5 class="modal-title fs-5" id="exampleModalLabel">Comments</h5> <button type="button" class="btn-close shadow-none" data-bs-dismiss="modal" aria-label="Close"></button> </div> {% for ck, cmt in comments %} <div class="modal-body"> <div class="mb-3 border-bottom"> <p class="mb-0 fw-bold">{{ cmt.name }}</p> <small>{{ cmt.updated|date("d M Y") }}</small> <p class="mt-2">{{ cmt.subject }}</p> </div> </div> {% endfor %} </div> </div> </div> <div class="col-lg-6"> <form class="comment-form" action="" method="POST" id="ecom-comment-form" accept-charset="UTF-8" onsubmit="return ecom_post_comment('{{ path('sajong_ecom_save_prodcut_comment') }}');"> <h4 class="fw-semibold mb-3">Comments</h4> <textarea class="form-control shadow-none rounded-pill mb-3" id="comment_body" name="comment_body" rows="4"></textarea> <button type="button" class="btn bg-secondary text-white px-4 py-3 w-100 rounded-pill mb-4">Comment</button> <input type="hidden" name="pid" value="{{ product.id }}"> <input type="hidden" name="form_token" value="{{ csrf_token('comment_form') }}"> </form> {% if comments is not empty%} <div class="text-end"><a href="#0" class="border-bottom border-secondary" data-bs-toggle="modal" data-bs-target="#allcomments">View All Comments</a></div> {% endif %} </div> </div> <div class="row mt-5 mb-5"> <div class="col-lg-12"><h4 class="fw-bold">Others you might like in your city</h4></div> {% for key, rprd in related_products %} <div class="col-lg-3 mt-4"> <a href="{{ path('sajong_ecom_product_details', {path: rprd.path}) }}"> <div class="card border-0 rounded-5 p-0 overflow-hidden shadow-sm"> <img src="{{ asset( rprd.image ) }}" alt="" class="img-fluid"> </div> <h6 class="fw-bold mb-3 mt-3">{{ rprd.title }}</h6> <h6 class="fw-bold mb-4">{{ (rprd.price/100)|number_format(2) }}</h6> </a> </div> {% endfor %} </div> </div>{% endblock %}