october_1x0/themes/30coffe/pages/home.htm

title = "Baş Sahypa"
url = "/"
layout = "master"
is_hidden = 0

[CategoryList]

[CategoryData]

[ProductList]
sorting = "no"

[Cart]
==
{% put styles %}
    <style>
        .qty-button {
            border: 0px;
            font-weight: 900;
            background-color:#af9400 !important;    
        }
    </style>
{% endput %}

<div class="toast" role="alert" aria-live="assertive" aria-atomic="true" id="toast-success">
  <div class="toast-body" style="background: green;color:white;">
    Haryt Sebede Ustunlikli Goshuldy!!!
  </div>
</div>

{% partial 'home/slider' %}
{% partial 'home/categories' %}
{% partial 'home/content' %}


{% set obCategoryList = CategoryList.make().tree() %}
{% set obCartPositionList = Cart.get() %}
<section class="collection-area pb-100" style="padding-top: 75px;">
    <div class="container">
        <div class="section-title">
            <h2>Our Regular Food Collections</h2>
            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore
                et dolore magna aliqua.</p>
        </div>
        <div class="sorting-menu">
            <ul>
                {% if obCategoryList.isNotEmpty() %} 
                     <li class="filter active" data-filter="all">All</li>
                    {% for obCategory in obCategoryList  %}
                        {% if obCategory.featured == 1 %}
                            <li class="filter" data-filter=".q{{obCategory.id}}{{obCategory.slug}}">{{obCategory.name}}</li>
                        {% endif %}
                    {% endfor %}
                {% endif %}
            </ul>
        </div>
    
    

    
        <div id="Container" class="row">
            {% if obCategoryList.isNotEmpty() %}
          
                {% for obCategory in obCategoryList  %}
                
                    {% if obCategory.featured == 1 %}
                        {% set obCategoryq = CategoryData.get(obCategory.id) %}
                        {% set obProductList = ProductList.make().sort(ProductList.getSorting()).active().category(obCategoryq.id) %}
                      
                         {% for obProduct in obProductList %}
                            {% set obOffer = obProduct.offer.first() %}
                            
                            
                                
                                 <div class="col-sm-6 col-lg-3 mix q{{obCategoryq.id}}{{obCategory.slug}}">
                
                                    <div class="collection-item" style="height: 93%;">
                                            <div class="collection-top _shopaholic-product-wrapper">
                                             
                                                {% if obProduct.preview_image is not empty %}
                                                    <img src="{{ obProduct.preview_image.path }}" alt="{{ obProduct.name }}">
                                                {% endif %}
                                                <div class="add-cart">
                                                    <a href="javascript:;" onClick="onMerdan({{obProduct.id}});"> 
                                                        <i class='bx bxs-cart'></i>
                                                        Add to Cart
                                                    </a>
                                                </div>
                                            </div>
                                            <div class="collection-bottom">
                                                <h3>{{ obProduct.name }}</h3>
                                                <ul>
                                                    {% if obOffer.isNotEmpty() %}
                                                    <li>
                                                        <span>{{obOffer.price_value}} {{obOffer.currency}}</span>
                                                        {% if obOffer.old_price != 0 %}
                                                            <span style="color:#656565;text-decoration: line-through;">{{obOffer.old_price}} {{obOffer.currency}}</span>
                                                        {% endif %}
                                                    </li>
                                                    {% endif %} 
                                                    <li>
                                                         {% if obCartPositionList.isNotEmpty() %}
                                                                {% for cart in obCartPositionList %}
                                                                       {% if obProduct.id == cart.item_id %}
                                                                         <div class="number" {{obProduct.id == cart.item_id ? 'style="display: block;"' : 'style="display: none;'}}>
                                                                            <span class="minus">-</span>
                                                                            <input type="text" name="quantity" class="form-control" value="{{cart.quantity}}" />
                                                                            <span class="plus" onClick="onQuantity();">+</span>
                                                                        </div>
                                                                       {% else %}
                                                                           <div class="number"  {{loop.index0 ? 'style="display: none;"' : ''}}>
                                                                                <button class="minus qty-button" id="qty-btn" disabled>-</button>
                                                                                <input type="text" name="quantity" class="form-control" id="qty-input" value="1" readonly style="background: white;"/>
                                                                                <button class="plus qty-button" id="qty-btn" disabled>+</button>
                                                                            </div>
                                                                       {% endif %}
                                                                 {% endfor %}
                                                            {% else %}
                                                                <div class="number">
                                                                    <button class="minus qty-button" id="qty-btn" disabled>-</button>
                                                                    <input type="text" name="quantity" class="form-control" id="qty-input" value="1" readonly style="background: white;"/>
                                                                    <button class="plus qty-button" id="qty-btn" disabled>+</button>
                                                                </div>
                                                           {% endif %}
                                                        
                                                        
                                                       
                                                        
                                                    </li>
                                                </ul>
                                            </div>
                                        </div>

                                    </div>
                             
                                
                                
                                
                               
                                
                                
                        {% endfor %}
                    {% endif %}
                {% endfor %}
            {% endif %}
            
        </div>
        <div class="more-collection">
            <a href="/">Doly Gor</a>
        </div>
    </div>
</section>

<script>

function onMerdan(data) {

    $.request('onAdd', {
    data: {'cart': [{'offer_id': data, 'quantity': 1}]},
    success: function() {
          console.log('Added product!');
        
          // Get the snackbar DIV
          var x = document.getElementById("toast-success");
          var qty = document.getElementById("qty");
          var qtyInt = document.getElementById("qty").innerHTML;
          var qtyBtn = document.getElementById("qty-btn");
          var qtyInput = document.getElementById("qty-input");
        
          qtyBtn.removeAttribute('disabled');
          var qq = qtyInput.removeAttribute('readonly');
          console.log(qq);
          // Add the "show" class to DIV
          x.className = "show";
        
          // After 3 seconds, remove the show class from DIV
          setTimeout(function(){ x.className = x.className.replace("show", ""); }, 3000);
          
         // qty.innerHTML = parseInt(qty) + 1;
          qty.innerHTML = parseInt(qtyInt) + 1
          //console.log(qty.innerHTML = parseInt(qtyInt) + 1);
          //console.log(qtyInt);
        }
    });   
}
</script>


{% partial 'home/posts' %}