Kai Diefenbach avatar Kai Diefenbach committed 8674d9d

Modifications for configurable products

Comments (0)

Files changed (4)

lfstheme/static/css/main.css

 }
 
 .padding-top-large {
-    margin-top: 20px;    
+    margin-top: 20px;
 }
 
 .checkbox-left {
     color: #9f8d83;
 }
 
+table.cp-properties {
+    margin: 20px 0;
+    float: right;
+}
+
+table.cp-properties td {
+    vertical-align: middle;
+}
+
+table.cp-properties select {
+    width: 200px;
+}
+
+table.cp-properties td {
+    padding-right: 10px;
+}
+
 .product-properties {
     padding-bottom:  10px;
 }
     font-family: Arial;
 }
 
-/* --------------------------------------------------------------
-   Based on buttons by Kevin Hale [particletree.com]
-   * particletree.com/features/rediscovering-the-button-element
--------------------------------------------------------------- */
-
-a.button, 
+a.button,
 button {
   display:block;
+  margin: 0.7em 8px 0.7em 0.5em;
   float: right;
-  margin: 0.7em 8px 0.7em 0.5em;
   padding:5px 10px 5px 10px;   /* Links */
-  font-size:100%;
-  line-height:130%;
+  font-size: 100%;
+  line-height: 130%;
   text-decoration:none;
   font-weight:bold;
   cursor:pointer;
   color: #fff !important;
 }
 
-a.button.left, 
+a.button.left,
 button.left {
   margin: 0.7em 0.5em 0.7em 0em;
   float:left;
   padding:4px 10px 3px 7px;   /* IE7 */
 }
 
-button img, 
+button img,
 a.button img {
   margin:0 3px -3px 0 !important;
   padding:0;
   float:none;
 }
 
-
-/* Button colors */
-
 /* Standard */
-button:hover, a.button:hover {
+button:hover, 
+a.button:hover {
   background-color: #beb5b0;
   border: 1px solid #dfd7d3;
   color:black !important;
   background-color:#7e6b60;
 }
 
-a.emphasized:hover, button.emphasized:hover {
+a.emphasized:hover, 
+button.emphasized:hover {
   background-color:#7e6b60;
   border:1px solid #dfd7d3;
   color:black !important;

lfstheme/templates/lfs/cart/added_to_cart_items.html

                 {% if cart_item.product.is_configurable_product %}
                     {% for property in cart_item.properties.all %}
                         <div>
-                            {{ property.property.name }} : {{ property.value }} {{ property.property.unit|safe }}
+                            {{ property.property.name }} : {{ property.value|option_name }} {{ property.property.unit|safe }}
                         </div>
                     {% endfor %}
                 {% endif %}

lfstheme/templates/lfs/cart/cart_inline.html

                         {% endfor %}
 
                         {% if cart_item.product.is_configurable_product %}
-                            {% for property in cart_item.properties.all %}
+                            {% for property_value in cart_item.properties.all %}
                                 <div>
-                                    {{ property.property.name }} : {{ property.value|quantity }} {{ property.property.unit|safe }}
+                                    {{ property_value.property.name }} : {{ property_value|option_name_for_property_value }} {{ property_value.property.unit|safe }}
                                 </div>
                             {% endfor %}
                         {% endif %}
                     </td>
                     <td class="number"
                         nowrap="nowrap">
-                        {{ cart_item.product.get_price|currency }}
+                        {{ cart_item.get_price|currency }}
+                        {# {{ cart_item.product.get_price|currency }} #}
                         {% if cart_item.product.price_unit %}
                             / {{ cart_item.product.price_unit }}
                         {% endif %}
                     </td>
                     <td class="number"
                         nowrap="nowrap">
-                        ({{ cart_item.product.get_tax|currency }})
+                        ({{ cart_item.get_tax|currency }})
                     </td>
                     <td class="number"
                         nowrap="nowrap">

lfstheme/templates/lfs/catalog/products/product_inline.html

         {{ variant.get_name }}
     </h1>
 
-    <div class="product-properties">
-        {% for option in variant.get_options %}
-            {% if option.property.display_on_product %}
-                <div>
-                    {{ option.property.name }} : {{ option.value|option_name }} {{ option.property.unit|safe }}
-                </div>
-            {% endif %}
-        {% endfor %}
-    </div>
+    {% if not product.is_configurable_product %}
+        <div class="product-properties">
+            {% for option in variant.get_options %}
+                {% if option.property.display_on_product %}
+                    <div>
+                        {{ option.property.name }} : {{ option.value|option_name }} {{ option.property.unit|safe }}
+                    </div>
+                {% endif %}
+            {% endfor %}
+        </div>
+    {% endif %}
 
     {% shipping variant %}
 
         {% else %}
             <div class="standard-price"
                   nowrap="nowrap">
-                {{ variant.get_price|currency }}* {% if product.price_unit %}/ {{ product.price_unit }}{% endif %}
-
+                  <span class="standard-price-value">{{ variant.get_price|currency }}</span>* {% if product.price_unit %}/ {{ product.price_unit }}{% endif %}
             </div>
             <div class="price-disclaimer">
                 {% trans '*inc. VAT' %}
 
     </div>
 
+    {# Configurable Product  #}
+    {% if product.is_configurable_product %}
+        <table class="cp-properties"
+               id="cp-url"
+               data="{% url lfs_calculate_price product.id %}">
+
+            {% for property in product.get_property_input_fields %}
+                <td class="property-label">
+                    {{ property.name }}:
+                </td>
+                <td>
+                    <input style="margin: 0 6px" type="input" size="6" name="property-{{ property.id }}" />{{ property.unit }}
+                </td>
+            {% endfor %}
+
+            {% for property in product.get_property_select_fields %}
+                <tr>
+                    <td class="property-label">
+                        {{ property.name }}:
+                    </td>
+                    <td>
+                        <select class="cp-property"
+                                name="property-{{ property.id }}">
+                            {% for option in property.options.all %}
+                                <option value="{{ option.id }}"
+                                    {% if option.selected %}selected="selected"{% endif %}>
+                                    {{ option.name }} /
+                                    {{ option.price|currency }}
+                                </option>
+                            {% endfor %}
+                        </select>
+                    </td>
+                </tr>
+            {% endfor %}
+        </table>
+    {% endif %}
+
+    <br clear="both">
     <div class="buttons">
         {% if variant.deliverable %}
-            
-            <div style="text-align:right">
-                {% for property in product.get_property_input_fields %}
-                    <label>{{ property.name }}:</label><input style="margin: 0 6px" type="input" size="6" name="property-{{ property.id }}" />{{ property.unit }}
-                {% endfor %}
-                <input class="number" name="quantity" size="2" type="text" value="1" /> {% trans "piece" %}
+            <div style="float:right; padding-right: 10px">
+                <input class="number" name="quantity" size="2" type="text" value="1" /> {% trans "Piece" %}
             </div>
+            <br clear="both">
 
-            <button class="button emphasized"
+            <button class="emphasized"
                    type="submit"
                    name="add-to-cart">{% trans 'Add to cart' %}</button>
 
     </p>
 
     <div class="variants">
+        {# Product with variants #}
+
         {% ifequal product.sub_type "1" %}
             <h1 class="section">{% trans 'Variants' %}</h1>
 
Tip: Filter by directory path e.g. /media app.js to search for public/media/app.js.
Tip: Use camelCasing e.g. ProjME to search for ProjectModifiedEvent.java.
Tip: Filter by extension type e.g. /repo .js to search for all .js files in the /repo directory.
Tip: Separate your search with spaces e.g. /ssh pom.xml to search for src/ssh/pom.xml.
Tip: Use ↑ and ↓ arrow keys to navigate and return to view the file.
Tip: You can also navigate files with Ctrl+j (next) and Ctrl+k (previous) and view the file with Ctrl+o.
Tip: You can also navigate files with Alt+j (next) and Alt+k (previous) and view the file with Alt+o.