Django+Bootstrip Card Template Design Classic Boutique

Below is a complete card template code with all elements and using Django's template language to handle conditional rendering of status fields. Sample views and URL configurations are also included.

Complete card templates

<div class="card">
    <!-- Card Pictures-->
    <img src="{{ product_package.image_url }}" class="card-img-top" alt= "Product Images">

    <div class="card-body">
        <!-- Card Title-->
        <h5 class="card-title"><strong>offerings：</strong> {{ product_package.item_no }}</h5>

        <!-- Card Text Content-->
        <p class="card-text"><strong>cardboard box:</strong> {{ product_package.box_code }}</p>
        <p class="card-text"><strong>pallet:</strong> {{ product_package.pallet_code }}</p>
        <p class="card-text"><strong>Product unit weight：</strong> {{ product_package.product_weight }}</p>
        <p class="card-text"><strong>Number of products per case：</strong> {{ product_package.box_product_qty }}</p>
        <p class="card-text"><strong>Number of boxes per layer：</strong> {{ product_package.pallet_boxes_layer }}</p>
        <p class="card-text"><strong>Maximum number of floors：</strong> {{ product_package.pallet_max_layers }}</p>
        <p class="card-text"><strong>Other package weights(outside the stack box (computing))：</strong> {{ product_package.pallet_other_weight }}</p>

        <!-- Conditional Display Status-->
        <p class="card-text">
            <strong>state of affairs：</strong>
            {% if product_package.state %}
                (computing) enable (a feature)
            {% else %}
                未(computing) enable (a feature)
            {% endif %}
        </p>
    </div>

    <!-- Operation buttons at the bottom of the card-->
    <div class="card-footer text-muted">
        <a href="{% url 'edit_product' product_package.id %}" class="btn btn-primary">compiler</a>
        <a href="{% url 'delete_product' product_package.id %}" class="btn btn-danger">removing</a>
    </div>
</div>

Explanation:

Card Pictures：
- <img src="{{ product_package.image_url }}" class="card-img-top" alt="Product Pictures">: Display the product image at the top of the card. Make sureimage_urlis the URL of the image provided in your model or context.
Card Title：
- <h5 class="card-title"><strong>offerings：</strong> {{ product_package.item_no }}</h5>: Displays the product number as the card title.
Card Text Content：
- <p class="card-text"><strong>cardboard box:</strong> {{ product_package.box_code }}</p>: Displays the carton code.
- Other fields such aspallet_code、product_weight、box_product_qtyetc., are shown in a similar manner.
Conditional Display Status：
- {% if product_package.state %}: InspectionstateWhether or not it's true.
- in the event thatstateIf true, "Enabled" is displayed; otherwise, "Not Enabled" is displayed.
Operation buttons at the bottom of the card：
- <div class="card-footer text-muted">: Contains action buttons for editing and deleting products.
- <a href="{% url 'edit_product' product_package.id %}" class="btn btn-primary">compiler</a>: Link to the edit page.
- <a href="{% url 'delete_product' product_package.id %}" class="btn btn-danger">removing</a>: Link to the delete operation.

Django View Examples

from  import render, get_object_or_404

def product_detail_view(request, product_id):
    product_package = get_object_or_404(ProductPackage, id=product_id)
    return render(request, 'product_detail.html', {'product_package': product_package})

URL Configuration Example

from  import path
from .views import product_detail_view

urlpatterns = [
    path('product/<int:product_id>/', product_detail_view, name='product_detail'),
    path('product/<int:product_id>/edit/', edit_product_view, name='edit_product'),
    path('product/<int:product_id>/delete/', delete_product_view, name='delete_product'),
]

Make sure to pass theproduct_packageobject to the template and define theedit_product_viewcap (a poem)delete_product_viewView. Replace as appropriateProductPackagefor your actual model name.