Django Template Not Displaying Vendor Contact and Description Fields

Question

I'm working on a Django project where I have a Vendor model. The goal is to display the vendor's profile, including their contact information and description, on a profile page. However, the contact and description fields are not displaying in the template. Here is my Vendor model definition:

class Vendor(models.Model):
    vid=ShortUUIDField(length=10,max_length=100,prefix="ven",alphabet="abcdef")


    title=models.CharField(max_length=100,default="Nest")
    image=models.ImageField(upload_to=user_directory_path,default="vendor.jpg")
    cover_image=models.ImageField(upload_to=user_directory_path,default="vendor.jpg")
    description=RichTextUploadingField(null=True, blank=True,default="Normal Vendorco")


    address=models.CharField(max_length=100, default="6,Dum Dum Road")
    contact=models.CharField(max_length=100, default="+91")
    chat_resp_time=models.CharField(max_length=100,default="100")
    shipping_on_time=models.CharField(max_length=100,default="100")
    authenticate_rating=models.CharField(max_length=100,default="100")
    days_return=models.CharField(max_length=100,default="100")
    warranty_period=models.CharField(max_length=100,default="100")


    user=models.ForeignKey(CustomUser, on_delete=models.SET_NULL ,null=True)


    class Meta:
        verbose_name_plural="Vendors"

    def Vendor_image(self):
        return mark_safe('<img src="%s" width="50" height="50"/>'%(self.image.url))

    def __str__(self):
        return self.title

Here is the view function that retrieves the vendor profile:

def shop_page(request):
    products = Vendor.objects.all()
    revenue = CartOrder.objects.aggregate(price=Sum("price"))["price"]
    total_sales = CartOrderItems.objects.filter(order__paid_status=True).aggregate(qty=Sum("qty"))["qty"]

    context = {
        "products": products,
        "revenue": revenue,
        "total_sales": total_sales,
    }
    return render(request, "useradmin/shop_page.html", context)

Here is the template shop_page.html:

{% load static %}

{% block content %}
<style>
    body, html {
        height: 100%;
        margin: 0;
    }

    .container-fluid {
        height: 100vh;
        display: flex;
        justify-content: center;
        align-items: center;
    }

    .profile-card {
        border-radius: 12px;
        box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
        background: #ffffff;
        overflow: hidden;
    }

    .card-header {
        background-color: #007bff;
        color: #fff;
        padding: 20px;
        border-bottom: none;
    }

    .card-title {
        font-size: 2rem;
        font-weight: 700;
        margin: 0;
    }

    .card-body {
        padding: 30px;
    }

    .profile-image {
        max-width: 200px;
        height: auto;
        border-radius: 50%;
        border: 2px solid #dee2e6;
        margin-bottom: 20px;
    }

    .card-footer {
        background-color: #f8f9fa;
        padding: 15px;
    }

    .btn-primary {
        background-color: #007bff;
        border-color: #007bff;
        font-size: 1rem;
        padding: 10px 20px;
        border-radius: 50px;
        transition: background-color 0.3s, border-color 0.3s;
    }

    .btn-primary:hover {
        background-color: #0056b3;
        border-color: #0056b3;
    }

    @media (max-width: 768px) {
        .profile-card {
            text-align: center;
        }

        .profile-image {
            margin: 0 auto 20px;
        }

        .card-body .row {
            display: flex;
            flex-direction: column;
            align-items: center;
        }

        .card-body .col-md-8 {
            margin-top: 20px;
        }
    }
</style>

<div class="container-fluid d-flex justify-content-center align-items-center vh-100">
    <div class="card profile-card w-75">
        <div class="card-header">
            <h2 class="card-title">Vendor Profile</h2>
        </div>
        <div class="card-body">
            <div class="row">
                <div class="col-md-4 text-center">
                    <img src="{{ request.user.profile.image.url }}" alt="{{ vendor.name }}" class="profile-image img-thumbnail">
                </div>
                <div class="col-md-8">
                    <h3>{{ Vendor.title }}</h3>
                    <p><strong>Email:</strong> {{ request.user.email }}</p>
                    <p><strong>Phone:</strong> {{ vendor.contact }}</p>
                    <p><strong>Address:</strong> {{ request.user.address }}</p>
                    <p><strong>Description:</strong> {{ request.user.description }}</p>
                    <p><strong>Total Sales:</strong> Hi</p>
                </div>
            </div>
        </div>
        <div class="card-footer text-right">
            <a href="#" class="btn btn-primary">Edit Profile</a>
        </div>
    </div>
</div>
{% endblock content %}

Please help me out with this problem...

Answer 1

As you are rendering products queryset, so use for loop to access contact, description and other required fields.Update your code as below :

{% load static %}

{% block content %}
<style>
    /* Styles omitted for brevity */
</style>

<div class="container-fluid d-flex justify-content-center align-items-center vh-100">

    {% for vendor in products %}

    <div class="card profile-card w-75 mb-4">
        <div class="card-header">
            <h2 class="card-title">Vendor Profile</h2>
        </div>
        <div class="card-body">
            <div class="row">
                <div class="col-md-4 text-center">
                    <img src="{{ vendor.image.url }}" alt="{{ vendor.title }}" class="profile-image img-thumbnail">
                </div>
                <div class="col-md-8">
                    <h3>{{ vendor.title }}</h3>
                    <p><strong>Email:</strong> {{ request.user.email }}</p>
                    <p><strong>Phone:</strong> {{ vendor.contact }}</p>
                    <p><strong>Address:</strong> {{ vendor.address }}</p>
                    <p><strong>Description:</strong> {{ vendor.description }}</p>
                </div>
            </div>
        </div>
        <div class="card-footer text-right">
            <a href="#" class="btn btn-primary">Edit Profile</a>
        </div>
    </div>

    {% endfor %}



</div>
{% endblock content %}

Hope it helps. Let me know.