What I basically want is for there only to be the “This product has variations” checkbox, then if the user checks that box, then the Size and Colour checkboxes will show up. If the user clicks size, the size variation value box will show up. Same with colour. Right now although I am trying with my script to achieve this functionality, I can’t.
What am I doing wrong here? Thanks in advance!
My models.py:
class Product(models.Model):
name = models.CharField(max_length=100)
product_slug = models.SlugField(unique=True, blank=True)
description = models.TextField()
price = models.DecimalField(max_digits=10, decimal_places=2)
image = models.ImageField(upload_to='products/')
image2 = models.ImageField(upload_to='products/', null=True, blank=True)
business = models.ForeignKey(Business, on_delete=models.CASCADE, related_name='products')
in_stock = models.BooleanField(default=True)
is_popular = models.BooleanField(default=False)
is_best_seller = models.BooleanField(default=False)
min_delivery_time = models.PositiveIntegerField(null=True, help_text="Minimum estimated delivery time in business days")
max_delivery_time = models.PositiveIntegerField(null=True, help_text="Maximum estimated delivery time in business days")
has_variations = models.BooleanField(default=False)
def __str__(self):
return f'{self.business.business_name}, {self.name}'
def get_json_data(self):
data = {
'id': self.id,
'name': self.name,
'price': float(self.price),
'description': self.description,
'images': [self.image.url, self.image2.url] if self.image and self.image2 else [],
'min_delivery_time': self.min_delivery_time,
'max_delivery_time': self.max_delivery_time,
}
return json.dumps(data)
def save(self, *args, **kwargs):
if not self.product_slug:
self.product_slug = slugify(self.name)
super().save(*args, **kwargs)
@property
def overall_review(self):
avg_rating = self.reviews.aggregate(Avg('rating'))['rating__avg']
return round(avg_rating, 1) if avg_rating else 0
def star_rating_percentage(self, star):
total_reviews = self.reviews.count()
if total_reviews == 0:
return 0
star_count = self.reviews.filter(rating=star).count()
return round((star_count / total_reviews) * 100)
VAR_CATEGORIES = (
('size', 'Size'),
('color', 'Color'),
)
class Variation(models.Model):
product = models.ForeignKey(Product, on_delete=models.CASCADE, related_name='variations')
name = models.CharField(max_length=50, choices=VAR_CATEGORIES, null=True, blank=True)
def __str__(self):
return f"{self.product.name} - {self.get_name_display()}"
class ProductVariation(models.Model):
variation = models.ForeignKey(Variation, on_delete=models.CASCADE, related_name='values', null=True)
value = models.CharField(max_length=50, null=True)
image = models.ImageField(upload_to='product_variations/', null=True, blank=True)
class Meta:
unique_together = (('variation', 'value'),)
def __str__(self):
return f"{self.variation.product.name} - {self.variation.get_name_display()} - {self.value}"
My views.py:
class ProductCreateView(LoginRequiredMixin, View):
def get(self, request, business_slug):
business = get_object_or_404(Business, business_slug=business_slug, seller=request.user)
return render(request, 'business/product_create.html', {'business': business, 'VAR_CATEGORIES': VAR_CATEGORIES})
def post(self, request, business_slug):
business = get_object_or_404(Business, business_slug=business_slug, seller=request.user)
if business.seller == request.user:
name = request.POST.get('name')
description = request.POST.get('description')
price = request.POST.get('price')
min_delivery_time = request.POST.get('min_delivery_time')
max_delivery_time = request.POST.get('max_delivery_time')
image = request.FILES.get('image')
image2 = request.FILES.get('image2')
in_stock = request.POST.get('in_stock') == 'on'
has_variations = request.POST.get('has_variations') == 'on'
product = Product.objects.create(
name=name,
description=description,
price=price,
image=image,
image2=image2,
min_delivery_time=min_delivery_time,
max_delivery_time=max_delivery_time,
business=business,
in_stock=in_stock,
has_variations=has_variations
)
if has_variations:
variation_names = request.POST.getlist('variation_names')
for variation_name in variation_names:
variation = Variation.objects.create(
product=product,
name=variation_name
)
variation_values = request.POST.getlist(f'variation_values_{variation_name}')
variation_images = request.FILES.getlist(f'variation_images_{variation_name}')
for i, value in enumerate(variation_values):
variation_image = variation_images[i] if i < len(variation_images) else None
ProductVariation.objects.create(
variation=variation,
value=value,
image=variation_image
)
return redirect('product_detail', business_slug=business.business_slug, product_slug=product.product_slug)
else:
return render(request, 'business/product_create.html', {'business': business, 'error': 'You are not authorized to add products to this business.', 'VAR_CATEGORIES': VAR_CATEGORIES})
My product_create.html:
<div class='contact-us md:py-20 py-10'>
<div class="container">
<div class="flex justify-between max-lg:flex-col gap-y-10">
<div class="left lg:w-2/3 lg:pr-4">
<div class="heading3">Add your product</div>
<div class="body1 text-secondary2 mt-3">Use the form below to get in touch with the sales team</div>
<form class="md:mt-6 mt-4" method="post" enctype="multipart/form-data">
{% csrf_token %}
<div class='grid sm:grid-cols-2 grid-cols-1 gap-4 gap-y-5'>
<div class="name">
<input class="border-line px-4 py-3 w-full rounded-lg" id="product_name" type="text" name="name" placeholder="Product Name *" required />
</div>
<div class="price">
<input class="border-line px-4 py-3 w-full rounded-lg" id="product_price" type="number" step="0.01" name="price" placeholder="Product Price *" required />
</div>
<div class="image">
<label>Image</label>
<input class="border-line px-4 py-3 w-full rounded-lg" id="product_image" type="file" name="image" accept="image/*" required />
</div>
<div class="image2">
<label>Second Image</label>
<input class="border-line px-4 py-3 w-full rounded-lg" id="product_image2" type="file" name="image2" accept="image/*" />
</div>
<div class="name">
<input class="border-line px-4 py-3 w-full rounded-lg" id="min_delivery_time" type="text" name="min_delivery_time" placeholder="Minimum estimated delivery time in business days *" required />
</div>
<div class="name">
<input class="border-line px-4 py-3 w-full rounded-lg" id="max_delivery_time" type="text" name="max_delivery_time" placeholder="Maximum estimated delivery time in business days *" required />
</div>
<div class="message sm:col-span-2">
<textarea class="border-line px-4 pt-3 pb-3 w-full rounded-lg" id="message" name="description" rows="3" placeholder="Product Description *" required></textarea>
</div>
<div class="in_stock">
<div class="flex items-center">
<input class="border-line px-4 py-3 rounded-lg" id="product_in_stock" type="checkbox" name="in_stock" checked />
<label for="product_in_stock" class="ml-2">In Stock</label>
</div>
</div>
<div class="has_variations sm:col-span-2">
<div class="flex items-center">
<input class="border-line px-4 py-3 rounded-lg" id="has_variations" type="checkbox" name="has_variations" />
<label for="has_variations" class="ml-2">This product has variations (color, size)</label>
</div>
</div>
<div id="variation_section" class="variations sm:col-span-2 hidden">
<div class="grid grid-cols-2 gap-4">
<div class="variation-names">
<label>Variation Names</label>
<div class="flex flex-wrap">
{% for category, display_name in VAR_CATEGORIES %}
<div class="variation-name-item mr-2 mb-2">
<input class="border-line px-4 py-3 rounded-lg ml-2" type="checkbox" name="variation_names" value="{{ category }}" id="variation_name_{{ category }}">
<label for="variation_name_{{ category }}" class="ml-2">{{ display_name }}</label>
</div>
{% endfor %}
</div>
</div>
<div class="variation-values">
<label>Variation Values</label>
<div id="variation_values_container" class="flex flex-wrap">
{% for category, display_name in VAR_CATEGORIES %}
<div class="variation-value-item mr-2 mb-2 hidden" id="variation_value_{{ category }}">
<input class="border-line px-4 py-3 rounded-lg mt-2" type="text" name="variation_values_{{ category }}" placeholder="Enter {{ display_name }} value" />
{% if category == 'color' %}
<input class="border-line px-4 py-3 rounded-lg mt-2" type="file" name="variation_images_{{ category }}" accept="image/*" placeholder="{{ display_name }} Image" />
{% endif %}
<button type="button" class="add-variation-value-btn button-main bg-black hover:bg-green text-white rounded-full whitespace-nowrap py-3 px-4 rounded-lg mt-2" data-category="{{ category }}">Add Another {{ display_name }}</button>
</div>
{% endfor %}
</div>
</div>
</div>
</div>
<script>
document.addEventListener('DOMContentLoaded', function() {
const hasVariationsCheckbox = document.getElementById('has_variations');
const variationSection = document.getElementById('variation_section');
const variationNameCheckboxes = document.querySelectorAll('input[name="variation_names"]');
const variationValuesContainer = document.getElementById('variation_values_container');
hasVariationsCheckbox.addEventListener('change', function() {
if (hasVariationsCheckbox.checked) {
variationSection.classList.remove('hidden');
} else {
variationSection.classList.add('hidden');
variationNameCheckboxes.forEach(checkbox => checkbox.checked = false);
const variationValueItems = document.querySelectorAll('.variation-value-item');
variationValueItems.forEach(item => item.classList.add('hidden'));
}
});
variationNameCheckboxes.forEach(checkbox => {
checkbox.addEventListener('change', function() {
const category = checkbox.value;
const variationValueItem = document.getElementById(`variation_value_${category}`);
if (checkbox.checked) {
variationValueItem.classList.remove('hidden');
} else {
variationValueItem.classList.add('hidden');
const inputs = variationValueItem.querySelectorAll('input');
inputs.forEach(input => input.value = '');
}
});
});
variationValuesContainer.addEventListener('click', function(event) {
if (event.target.classList.contains('add-variation-value-btn')) {
const category = event.target.getAttribute('data-category');
const variationValueItem = document.getElementById(`variation_value_${category}`);
const newInput = document.createElement('div');
newInput.classList.add('variation-value-input', 'mr-2', 'mb-2');
newInput.innerHTML = `
<input class="border-line px-4 py-3 rounded-lg mt-2" type="text" name="variation_values_${category}" placeholder="Enter ${category} value" />
${category === 'color' ? `<input class="border-line px-4 py-3 rounded-lg mt-2" type="file" name="variation_images_${category}" accept="image/*" placeholder="${category} Image" />` : ''}
`;
variationValueItem.appendChild(newInput);
}
});
});
</script>
</div>
<div class="block-button md:mt-6 mt-4">
<button type="submit" class="quick-view-btn button-main sm:py-3 py-2 sm:px-5 px-4 bg-black hover:bg-green text-white rounded-full whitespace-nowrap">Create Product</button>
</div>
</form>
</div>
<div class="right lg:w-1/4 lg:pl-4">
<div class="item">
<div class="heading4">Our Store</div>
<p class="mt-3">2163 Phillips Gap Rd, West Jefferson, North Carolina, United States</p>
<p class="mt-3">Phone: <span class='whitespace-nowrap'>+1 666 8888</span></p>
<p class="mt-1">Email: <span class='whitespace-nowrap'>[email protected]</span></p>
</div>
<div class="item mt-10">
<div class="heading4">Open Hours</div>
<p class="mt-3">Mon - Fri: <span class='whitespace-nowrap'>7:30am - 8:00pm PST</span></p>
<p class="mt-3">Saturday: <span class='whitespace-nowrap'>8:00am - 6:00pm PST</span></p>
<p class="mt-3">Sunday: <span class='whitespace-nowrap'>9:00am - 5:00pm PST</span></p>
</div>
</div>
</div>
</div>
</div>