Different prices per option/attribute

[Julien Phalip]

Hi,

I'd like to have different prices for a product based on the selected product attribute/option. For example, a t-shirt would cost $20 in "Large" size and $10 in "Small" size.

Is that possible, and if so, how?

Thanks a lot,

Julien

[Andrew Edwards]

I believe you can achieve this if you use the variants option in the edit product menu of the dashboard, each variant you can give a name for 'Large' and 'Small', and a separate price for each. If you are not allowed to create variants, you may have to delete your current stock records from the edit product menu of the dashboard > 'stock and pricing' submenu.

[Julien Phalip]

Thanks a lot, Andrew. I was able to work it out as you suggested.

[Andrew Edwards]

Glad I could help!

I've been building my own store over the past couple of days and had it fresh in my mind. I've also got some code that will dynamically display the correct variant price currently selected in the dropdown menu and correct price info (price incl tax and price excl tax and the tax for each variant) in the product info table for the corresponding variant. Let me know if you would be interested in it and I'll whack it up.

[Julien Phalip]

Hi Andrew,

I've been wondering about exactly that. If you had some code to share, that would be incredibly useful!

Julien

On Wed, Jan 4, 2017 at 1:48 AM Andrew Edwards <andrewed...@gmail.com> wrote:

Glad I could help!

I've been building my own store over the past couple of days and had it fresh in my mind. I've also got some code that will dynamically display the correct variant price currently selected in the dropdown menu and correct price info (price incl tax and price excl tax and the tax for each variant) in the product info table for the corresponding variant. Let me know if you would be interested in it and I'll whack it up.

--


https://github.com/tangentlabs/django-oscar


http://django-oscar.readthedocs.org/en/latest/


https://twitter.com/django_oscar


---


You received this message because you are subscribed to a topic in the Google Groups "django-oscar" group.


To unsubscribe from this topic, visit https://groups.google.com/d/topic/django-oscar/IT_vdtQMLFk/unsubscribe.


To unsubscribe from this group and all its topics, send an email to django-oscar...@googlegroups.com.


Visit this group at https://groups.google.com/group/django-oscar.


To view this discussion on the web, visit https://groups.google.com/d/msgid/django-oscar/8f21cbfd-e3d8-436c-a2c2-4c0f25a3ddca%40googlegroups.com.


For more options, visit https://groups.google.com/d/optout.

[Andrew Edwards]

Sure thing, I'll have to assume you want to use tax as that's how I've set mine up. 

In the templates>partials>stock_record.html template, replace the line:

<p class="price_color">{{ session.price.incl_tax|currency:session.price.currency }}</p>

with: 

{% if product.is_parent %}
    <ul class="price-variants" id="prices-display">
        {% for child in product.children.all %}
            {% purchase_info_for_product request child as thekid %}
            <li><strong>{{ child.get_title|title }}  <p class="price_color">{{ thekid.price.incl_tax|currency:session.price.currency }}</p></strong></li>
        {% endfor %}
    </ul>
{% endif %}

 This will give you the prices and variants displayed simultaneously.

Now to display only the correct price for the selected variant we add a displayVariantPrice(); call to the click event handler for each option field in the select element, go to templates>partials>form_field.html and replace the line on line 33 (may not be exactly line 33 as my files have been edited):

{% render_field field class+="form-control" %}

with:

{% render_field field class+="form-control text-capitalize" onclick="displayVariantPrice();" %}

Now to display the correct price info in the product info table, go to catalogue>detail.html.

above the line:

{% if session.price.exists %}

add the following:

{% if product.is_parent %}
    {% for child in product.children.all %}
        {% purchase_info_for_product request child as thekid %}
        <tr class="variant-{{ child.title|slice:":5" }} product-info-pricing">
            <th>{% trans "Price (excl. tax)" %}</th><td>{{ thekid.price.excl_tax|currency:session.price.currency }}</td>
        </tr>
        {% if thekid.price.is_tax_known %}
            <tr class="variant-{{ child.title|slice:":5" }} product-info-pricing">
                <th>{% trans "Price (incl. tax)" %}</th><td>{{ thekid.price.incl_tax|currency:session.price.currency }}</td>
            </tr>
            <tr class="variant-{{ child.title|slice:":5" }} product-info-pricing">
                <th>{% trans "Tax" %}</th><td>{{ thekid.price.tax|currency:session.price.currency }}</td>
            </tr>
        {% endif %}
    {% endfor %}
 {% elif session.price.exists %}

Note the last line of the snippet. We add an 'elif' instead of just an 'if' to the line I asked you to paste in the snippet above of.

Then add the displayVariantPricing script to the templates>catalogue>detail.html in a {{ block extrascripts }} at the bottom of the template:

{% block extrascripts %}
    {{ block.super }}
    <script>
        $(document).ready(function() {
            displayVariantPrice();
        });

        function displayVariantPrice() {
            $('#prices-display li').each(function(){
                $(this).hide();
                if ($(this).text().toLowerCase().indexOf($('#id_child_id').find(":selected").text()) >= 0){
                    var variant = $('#id_child_id').find(":selected").text().substring(0,5);
                    $('.product-info-pricing').hide();
                    $('.variant-'+variant).show();
                    $(this).show();
                }
            });
        }
    </script>
{% endblock %}

That code hides the unselected variant prices and only makes visible the selected variant price.

All that is left is one style to add:

.price-variants {
    padding-left: 0px;
}

Which brings the variant price being displayed back in line with where the price originally appears.


I think that is everything, hope it helps!
Andrew

[Andrew Edwards]

I've since revised a bit of this code, and when you add the onclick event handler to the templates>partials>form_field.html render_field field, it is actually more appropriate to use the onchange event handler instead, so the line should now be:

{% render_field field class+="form-control text-capitalize" onchange="displayVariantPrice();" %}

Only reason for this revision is that I noticed on my Nexus 4 it actually required two clicks of the variant select menu before the displayVariantPrice method was called! Now it functions as intended.

[Julien Phalip]

That’s awesome. Thanks, Andrew!

--

https://github.com/tangentlabs/django-oscar
http://django-oscar.readthedocs.org/en/latest/
https://twitter.com/django_oscar
---
You received this message because you are subscribed to a topic in the Google Groups "django-oscar" group.
To unsubscribe from this topic, visit https://groups.google.com/d/topic/django-oscar/IT_vdtQMLFk/unsubscribe.

To unsubscribe from this group and all its topics, send an email to django-oscar+unsubscribe@googlegroups.com.

Visit this group at https://groups.google.com/group/django-oscar.

To view this discussion on the web, visit https://groups.google.com/d/msgid/django-oscar/31d828f5-c8a1-4386-bb75-937908f5fac8%40googlegroups.com.