How to combine products?

Question

Django

I am creating an online store.
I created an abstract model that I will inherit and created many products, but later I ran into a problem that in html you need to create a separate block and call each product separately, and then I ran into a similar problem when I got to the basket and realized that this should not be be.

How to combine all products of different classes into one variable or how to work with them?

Just an example of what is at stake.

class Product(models.Model):
    product_name = models.CharField(max_length=50)
    slug = models.SlugField(max_length=50)
    
    class Meta:
    abstract = True
    
class Phone(Product):
    parameters = models.CharField(max_length=200)
    
class Book(Product):
    parameters = models.CharField(max_length=200)  
    
class Scooter(Product):
    parameters = models.CharField(max_length=200)  
    
class BoardGames(Product):
    parameters = models.CharField(max_length=200)

I transfer the product

def home(request):
    phones = Phone.objects.all().filter(is_available=True)
    books = Book.objects.all().filter(is_available=True)
    scooters = Scooter.objects.all().filter(is_available=True)
    board_games = BoardGame.objects.all().filter(is_available=True)

    context = {
        'phones': phones,
        'books': books,
        'scooters': scooters,
        'board_games': board_games,
    }

    return render(request, 'home/home.html', context)

Lots of blocks in html

{% for phone in phones %}
    <div class="col-md-3">
      <div class="card card-product-grid">
        <a href="{% url 'phone_detail' phone.id %}" class="img-wrap"> <img
            src="{{phone.image.url}}">
        </a>
        <figcaption class="info-wrap">
          <a href="#" class="title">{{phone.product_name}}</a>
          <div class="price mt-1">${{phone.price}}</div> <!-- price-wrap.// -->
        </figcaption>
      </div>
    </div> <!-- col.// -->
    {% endfor %}

    {% for book in books %}
    <div class="col-md-3">
      <div class="card card-product-grid">
        <a href="{% url 'book_detail' book.id %}" class="img-wrap"> <img src="{{book.image.url}}">
        </a>
        <figcaption class="info-wrap">
          <a href="" class="title">{{book.product_name}}</a>
          <div class="price mt-1">${{book.price}}</div> <!-- price-wrap.// -->
        </figcaption>
      </div>
    </div> <!-- col.// -->
    {% endfor %}

    {% for scooter in scooters %}
    <div class="col-md-3">
      <div class="card card-product-grid">
        <a href="{% url 'scooter_detail' scooter.id %}" class="img-wrap"> <img
            src="{{scooter.image.url}}">
        </a>
        <figcaption class="info-wrap">
          <a href="" class="title">{{scooter.product_name}}</a>
          <div class="price mt-1">${{scooter.price}}</div> <!-- price-wrap.// -->
        </figcaption>
      </div>
    </div> <!-- col.// -->
    {% endfor %}

    {% for b_g in board_games %}
    <div class="col-md-3">
      <div class="card card-product-grid">
        <a href="{% url 'board_game_detail' b_g.id %}" class="img-wrap"> <img
            src="{{b_g.image.url}}">
        </a>
        <figcaption class="info-wrap">
          <a href="" class="title">{{b_g.product_name}}</a>
          <div class="price mt-1">${{b_g.price}}</div> <!-- price-wrap.// -->
        </figcaption>
      </div>
    </div> <!-- col.// -->
    {% endfor %}

Answer 1

Read the documentation - One-to-Many Relationship , Many-to-Many Relationship , One-to-One Relationship

Answer 2

Inherit the product model takes place if different products differ in the set of fields or behavior. I doubt that the Book and Phone models will be different - it's just a physical product that has a name, article, price, quantity in stock, and so on. In this case, the goods should be divided not into models, but into categories - make the Category model and the product has the field category = ForeignKey(Category)
If you want to put very different goods in the catalog - a physical product, electronic goods with a subscription, gift certificates, etc. then model inheritance can help in this case. But not in the same way as yours. To make everything work as it should, django-polymorphic will help https://django-polymorphic.readthedocs.io/en/stable/It will give you the correct inheritance in the general product catalog