Add alternative image when hovering over product

src/core/models.py

@@ -62,6 +62,15 @@ class Product(models.Model):
     def get_absolute_url(self):
         return reverse('dashboard:product-detail', kwargs={'pk': self.pk})
 
+    def get_first_img(self):
+        return self.productphoto_set.first()
+
+    def get_second_img(self):
+        try:
+            return self.productphoto_set.all()[1]
+        except IndexError:
+            pass
+
     class Meta:
         ordering = ['sorting', 'name']
 

src/dashboard/templates/dashboard/order_detail.html

@@ -28,7 +28,7 @@
             <div class="object__item object__item--col5">
             {% with product=item.product %}
                 <figure class="item__figure">
-                    <img class="product__image product__image--small" src="{{product.productphoto_set.first.image.url}}" alt="{{product.productphoto_set.first.image}}">
+                    <img class="product__image product__image--small" src="{{product.get_first_img.image.url}}" alt="{{product.get_first_img.image}}">
                     <figcaption><strong>{{product.name}}</strong><br>Grind: {{item.customer_note}}</figcaption>
                 </figure>
                 <span>{{product.sku}}</span>

src/dashboard/templates/dashboard/order_fulfill.html

@@ -27,7 +27,7 @@
                 {% with product=form.instance.product %}
                     {{form.id}}
                     <figure class="item__figure">
-                        <img class="product__image product__image--small" src="{{product.productphoto_set.first.image.url}}" alt="{{product.productphoto_set.first.image}}">
+                        <img class="product__image product__image--small" src="{{product.get_first_img.image.url}}" alt="{{product.get_first_img.image}}">
                         <figcaption><strong>{{product.name}}</strong></figcaption>
                     </figure>
                     <span>{{product.sku}}</span>

src/dashboard/templates/dashboard/product_confirm_delete.html

@@ -8,7 +8,7 @@
     </header>
     <section class="product__detail object__panel">
         <figure class="product__figure">
-            <img class="" src="{{product.productphoto_set.first.image.url}}" alt="{{product.productphoto_set.first.image}}">
+            <img class="" src="{{product.get_first_img.image.url}}" alt="{{product.get_first_img.image}}">
         </figure>
         <form method="post">{% csrf_token %}
             <p>Are you sure you want to delete "{{ object }}"?</p>

src/dashboard/templates/dashboard/product_detail.html

@@ -12,7 +12,7 @@
     </header>
     <section class="product__detail object__panel">
         <figure class="product__figure">
-            <img class="" src="{{product.productphoto_set.first.image.url}}" alt="{{product.productphoto_set.first.image}}">
+            <img class="" src="{{product.get_first_img.image.url}}" alt="{{product.get_first_img.image}}">
         </figure>
         <div>
             <h1>{{product.name}}</h1>

src/dashboard/templates/dashboard/product_list.html

@@ -17,7 +17,7 @@
     {% for product in product_list  %}
         <a class="object__item object__item--link object__item--col4"  href="{% url 'dashboard:product-detail' product.pk %}">
             <figure class="product__figure">
-                <img class="product__image" src="{{product.productphoto_set.first.image.url}}" alt="{{product.productphoto_set.first.image}}">
+                <img class="product__image" src="{{product.get_first_img.image.url}}" alt="{{product.get_first_img.image}}">
             </figure>
             <strong>{{product.name}}</strong>
             <span>{{product.visible_in_listings|yesno:"Yes,No"}}</span>

src/static/scripts/index.js

@@ -1,5 +1,9 @@
 import { getCookie, setCookie } from "./cookie.js"
 
+/*
+ * Newsletter modal
+ */
+
 // Get the modal
 const modal = document.querySelector(".modal-menu");
 

src/static/scripts/product_list.js

@@ -0,0 +1,17 @@
+/*
+ * Image hover swap
+ */
+function valueSwap(v1, v2) {
+    return [v2, v1]
+}
+
+const productItemImages = document.querySelectorAll('.product__with-img-swap')
+
+productItemImages.forEach(productItemImage => {
+    productItemImage.addEventListener('mouseover', event => {
+        [event.target.src, event.target.dataset.altimgSrc] = valueSwap(event.target.src, event.target.dataset.altimgSrc)
+    })
+    productItemImage.addEventListener('mouseout', event => {
+        [event.target.src, event.target.dataset.altimgSrc] = valueSwap(event.target.src, event.target.dataset.altimgSrc)
+    })
+})

src/static/styles/main.css

@@ -246,6 +246,10 @@ footer > section {
     margin: 0 auto;
 }
 
+section:not(:last-child) {
+    margin-bottom: 1rem;
+}
+
 
 /* ==========================================================================
    Modal
@@ -390,6 +394,7 @@ footer > section {
     margin: 0;
     padding: 0;
     display: flex;
+    flex-wrap: wrap;
 }
 
 .nav__menu {
@@ -538,6 +543,11 @@ article + article {
     color: var(--fg-alt-color);
 }
 
+.product__first-img--hidden,
+.product__second-img--hidden {
+    display: none;
+}
+
 @media screen and (max-width: 900px) {
     .product__list {
         grid-template-columns: 1fr;

src/storefront/tasks.py

@@ -14,7 +14,7 @@ COTACT_FORM_TEMPLATE = 'storefront/contact_form'
 def contact_form_email(formdata):
     send_templated_mail(
         template_name=COTACT_FORM_TEMPLATE,
-        from_email=formdata['email_address'],
+        from_email=settings.DEFAULT_FROM_EMAIL,
         recipient_list=[settings.DEFAULT_CONTACT_EMAIL],
         context=formdata
     )

src/storefront/templates/storefront/cart_detail.html

@@ -10,7 +10,7 @@
             <div class="cart__item">
             {% with product=item.product %}
                 <figure class="item__figure">
-                    <img class="item__image" src="{{product.productphoto_set.first.image.url}}" alt="{{product.productphoto_set.first.image}}">
+                    <img class="item__image" src="{{product.get_first_img.image.url}}" alt="{{product.get_first_img.image}}">
                 </figure>
                 <div class="item__info">
                     <h4>{{product.name}}</h4>

src/storefront/templates/storefront/fairtrade.html

@@ -12,7 +12,7 @@
         </figure>
     </section>
     <section>
-        <p>We pay a steep premium for these beans, which are typically from smaller farms that are organized into co-ops. These farms take pride in their coffees, as the farmers make a living wage and their families are able to live in a healthier, more secure environment than farmers who grow a conventional coffee crop. The quality of our coffee is consistent, in part due to the quality of organic and fair trade beans.</p>
+        <p>We value fair, guaranteed wages for growers and sustainable stewardship of the land where it’s grown. We pay a steep premium for these beans, which are typically from smaller farms that are organized into co-ops. These farms take pride in their coffees, as the farmers make a living wage and their families are able to live in a healthier, more secure environment than farmers who grow a conventional coffee crop. The quality of our coffee is consistent, in part due to the quality of organic and fair trade beans.</p>
         <figure style="text-align: center;">
             <img class="site__ft-stamp" src="{% static 'images/fair_trade_stamp.png' %}" alt="Fair trade">
         </figure>

src/storefront/templates/storefront/order_detail.html

@@ -23,7 +23,7 @@
                 <tr>
                 {% with product=item.product %}
                     <td>
-                        <img src="{{product.productphoto_set.first.image.url}}" alt="{{product.productphoto_set.first.image}}">
+                        <img src="{{product.get_first_img.image.url}}" alt="{{product.get_first_img.image}}">
                     </td>
                     <td><strong>{{product.name}}</strong></td>
                     <td>{{item.quantity}}</td>

src/storefront/templates/storefront/order_form.html

@@ -30,7 +30,7 @@
         <div class="cart__item">
         {% with product=item.product %}
             <figure>
-                <img src="{{product.productphoto_set.first.image.url}}" alt="{{product.productphoto_set.first.image}}">
+                <img src="{{product.get_first_img.image.url}}" alt="{{product.get_first_img.image}}">
             </figure>
             <div>
                 <h4>{{product.name}}</h4>

src/storefront/templates/storefront/partials/_newsletter.html

@@ -15,9 +15,7 @@
         </div>
         <div class="_form_element _x92496915 _full_width _clear" >
             <div class="_html-code">
-                <p>
-                    Subscribe to get 10% off your first order!
-                </p>
+                <p>Subscribe to get 10% off your first order!</p>
             </div>
         </div>
         <div class="_form_element _x55366865 _full_width " >
@@ -30,9 +28,7 @@
             <!--  This STARTS the Custom Objects section  -->
         </div><br>
         <div class="_form_element _x53687886 _full_width " >
-            <label for="email" class="_form-label">
-                Email*
-            </label>
+            <label for="email" class="_form-label">Email*</label>
             <div class="_field-wrapper">
                 <input type="text" id="email" name="email" placeholder="Type your email" required/>
             </div>

src/storefront/templates/storefront/product_detail.html

@@ -13,7 +13,7 @@
         {% endfor %}
     </section>
     <figure class="gallery__image-wrapper">
-        <img class="gallery__image" src="{{ product.productphoto_set.first.image.url }}" alt="{{ product.name }}">
+        <img class="gallery__image" src="{{ product.get_first_img.image.url }}" alt="{{ product.name }}">
     </figure>
     <section class="product__info">
     	<h1>{{product.name}}</h1>

src/storefront/templates/storefront/product_list.html

@@ -1,4 +1,9 @@
 {% extends 'base.html' %}
+{% load static %}
+
+{% block head %}
+    <script defer src="{% static 'scripts/product_list.js' %}"></script>
+{% endblock %}
 
 {% block content %}
 <article>
@@ -6,7 +11,7 @@
         {% for product in product_list %}
             <a class="product__item" href="{% url 'storefront:product-detail' product.pk %}">
                 <figure class="product__figure">
-                    <img class="product__image" src="{{product.productphoto_set.first.image.url}}" alt="{{product.productphoto_set.first.image}}">
+                    <img class="product__image product__with-img-swap" data-altimg-src="{{product.get_second_img.image.url}}" src="{{product.get_first_img.image.url}}" alt="{{product.get_first_img.image}}">
                 </figure>
                 <div>
                     <h3>{{ product.name }}</h3>

src/templates/base.html

@@ -28,7 +28,7 @@
 <div class="modal-menu">
     <div class="modal-menu__content">
         <div class="modal-menu__header">
-            <h4>Sign up for our newsletter</h4>
+            <h4>Newsletter</h4>
             <span class="close-modal">&times;</span>
         </div>
         <div class="modal-menu__form">
@@ -44,6 +44,7 @@
             <li><a class="nav__link" href="{% url 'storefront:product-list' %}">Shop</a></li>
             <li><a class="nav__link" href="https://bltcoffee.com/">Cafe</a></li>
             <li><a class="nav__link" href="{% url 'storefront:fair-trade' %}">Fair trade</a></li>
+            <li><a class="nav__link" href="{% url 'storefront:reviews' %}">Reviews</a></li>
             <li><a class="nav__link" href="{% url 'storefront:about' %}">About</a></li>
             <li><a class="nav__link" href="{% url 'storefront:contact' %}">Contact</a></li>
         </ul>
@@ -80,12 +81,12 @@
         <p><button class="show-modal">Subscribe to our newsletter</button></p>
         <p>
             <strong>Problem with your online order or have a question?</strong><br>
-            Please contact us, we’re happy to help you over the phone<br>
+            Please <a href="{% url 'storefront:contact' %}">contact us</a>, we’re happy to help you over the phone<br>
             <a href="tel:+13603855856">(360) 385-5856</a> between 8:00 am and 10:00 pm Pacific Time.<br>
-            <address>100 Tyler St, Port Townsend, WA 98368</address>
+            <address>854 East Park Ave. Suite 1, Port Townsend, WA 98368</address>
         </p>
         <p>
-            <small>Copyright © 2016-{% now "Y" %} Better Living Food Company Inc.<br>
+            <small>Copyright &copy; 2016-{% now "Y" %} Better Living Food Company Inc.<br>
                 <a href="{% url 'storefront:contact' %}">Contact</a>&nbsp;|&nbsp;Fair Trade&nbsp;|&nbsp;Organic
             </small>
             <br><br>