48.Django(장고) - ecommerce 프로젝트 - 쇼핑몰 - 장바구니- 상품 검색

1. store\views.py

def search(request):
    #Determin if they filled out the form
    if request.method == 'POST':
        searched = request.POST['searched']
        
        searched = Product.objects.filter(Q(name__icontains=searched) | Q(description__icontains=searched) )
        print("서치=======", searched)

        #Test for null
        if not searched:
            messages.success(request,"해당 상품이 없습니다....")
            return render(request, "store/search.html",{})
        else:
            return render(request, "store/search.html",{'searched':searched})
    else:
        return render(request, "store/search.html",{})

2. store\urls.py (추가)

 path('search/', views.search, name='search'),

3.templates\layout\navbar.html

        </li>
        {% comment %} dev_39 추가 {% endcomment %}
        <li class="nav-item">
          <a class="nav-link active" aria-current="page" href="{% url 'store:search' %}">검색</a>
        </li>

4.templates\store\search.html (새로생성)

{% extends 'layout/base.html' %}
{% load static %}

{% block content %}
{% extends 'layout/base.html' %}
{% load static %}

{% block content %}

  {% include 'store/head.html' %}
  <!-- 네비게이션바 -->
  {% include "layout/navbar.html" %}

  <div class="d-flex flex-column vh-100 justify-content-between">
    <header class="bg-dark py-5">
      <div class="container px-4 px-lg-5 my-5">
        <div class="text-center text-white">
          <h1 class="display-4 fw-bolder">상품검색</h1>
          <p class="lead fw-normal text-white-50 mb-0">ind What You're Looking for</p>
        </div>
      </div>
    </header>

    <br/>

    <div class="container">
      <div class="row">
        <center>
          <div class="col-10">
            <br/>
            <br/>
            <div class="card">
              <div class="card-header">상품검색</div>
              <div class="card-body">
                <form action="{% url 'store:search' %}" method="POST">
                  {% csrf_token %}
                  <div class="mb-3">
                    <input type="text" class="form-control" placeholder="검색어를 넣으세요" name="searched"/>
                  </div>
                  <button type="submit" class="btn btn-secondary">상품검색</button>
                </form>
              </div>
            </div>
            <br/>
            <br/>
            <div class="row gx-4 gx-lg-5 row-cols-2 row-cols-md-3 row-cols-xl-4 justify-content-center">
              {% if searched %}
                <!-- You Searched for...{{searched}} <br /> -->
                {%for product in searched %}
                  <!-- {{product}}<br /> -->
                  <div class="col mb-5">
                    <div class="card h-100">
                      {% if product.is_sale %}
                        <!-- Sale badge-->
                        <div class="badge bg-dark text-white position-absolute" style="top: 0.5rem; right: 0.5rem">Sale</div>
                      {% endif %}
                      <!-- Product image-->
                      <img class="card-img-top" src="{{product.image.url}}" alt="..."/>
                      <!-- Product details-->
                      <div class="card-body p-4">
                        <div class="text-center">
                          <!-- Product name-->
                          <h5 class="fw-bolder">{{ product.name }}</h5>
                          <!-- Product reviews-->
                          <div class="d-flex justify-content-center small text-warning mb-2">
                            <div class="bi-star-fill"></div>
                            <div class="bi-star-fill"></div>
                            <div class="bi-star-fill"></div>
                            <div class="bi-star-fill"></div>
                            <div class="bi-star-fill"></div>
                          </div>
                          <!-- Product price-->
                          {% if product.is_sale %}
                            <span class="text-muted text-decoration-line-through">&nbsp;${{product.sale_price}}</span>
                          {% endif %}
                          ${{ product.price }}
                        </div>
                      </div>
                      <!-- Product actions-->
                      <div class="card-footer p-4 pt-0 border-top-0 bg-transparent">
                        <div class="text-center">
                          <a class="btn btn-outline-dark mt-auto" href="{% url 'store:product' product.id %}">View Product</a>
                        </div>
                      </div>
                    </div>
                  </div>
                  {%endfor%}
                  {%endif%}
                </div>
              </div>
            </center>
          </div>
        </div>
        <!-- Footer-->
        {% include 'store/footer.html' %}
      </div>
    {%endblock content%}

아래와 같이 검색이 잘되는지 확인