diff --git a/cookbook/templates/recipe_view.html b/cookbook/templates/recipe_view.html
index d20d0c69b..58304e170 100644
--- a/cookbook/templates/recipe_view.html
+++ b/cookbook/templates/recipe_view.html
@@ -36,10 +36,10 @@
                                 class="fas fa-pencil-alt fa-fw"></i> {% trans 'Edit' %}</a>
                         <button class="dropdown-item" onclick="$('#bookmarkModal').modal({'show':true})">
                             <i class="fas fa-bookmark fa-fw"></i> {% trans 'Add to Book' %}</button>
-                        {% if ingredients %}
-                            <a class="dropdown-item" href="{% url 'view_shopping' %}?r={{ recipe.pk }}">
-                                <i class="fas fa-shopping-cart fa-fw"></i> {% trans 'Add to Shopping' %}</a>
-                        {% endif %}
+
+                        <a class="dropdown-item" v-bind:href="getShoppingUrl()" v-if="has_ingredients">
+                            <i class="fas fa-shopping-cart fa-fw"></i> {% trans 'Add to Shopping' %}</a>
+
                         <a class="dropdown-item" href="{% url 'new_meal_plan' %}?recipe={{ recipe.pk }}"><i
                                 class="fas fa-calendar fa-fw"></i> {% trans 'Add to Plan' %}</a>
                         <button class="dropdown-item" onclick="openCookLogModal({{ recipe.pk }})"><i
@@ -96,7 +96,8 @@
     {% endif %}
 
     <div class="row">
-        <div class="col-md-6 order-md-1 col-sm-12 order-sm-2 col-12 order-2"  v-if="recipe && has_ingredients">  <!-- TODO duplicate code remove -->
+        <div class="col-md-6 order-md-1 col-sm-12 order-sm-2 col-12 order-2" v-if="recipe && has_ingredients">
+            <!-- TODO duplicate code remove -->
             <div class="card border-primary">
                 <div class="card-body">
                     <div class="row">
@@ -171,7 +172,9 @@
                                                 </td>
                                                 <td style="vertical-align: middle!important;">
                                                     <template v-if="i.note">
-                                                         <b-button v-b-popover.hover="i.note" class="btn btn-sm d-print-none"><i class="fas fa-info"></i></b-button>
+                                                        <b-button v-b-popover.hover="i.note"
+                                                                  class="btn btn-sm d-print-none"><i
+                                                                class="fas fa-info"></i></b-button>
 
                                                         <div class="d-none d-print-block">
                                                             <i class="far fa-comment-alt"></i> [[i.note]]
@@ -243,7 +246,8 @@
                              style="margin-top: 1vh">
                             <div class="col-md-6">
                                 <table class="table table-sm">
-                                    <template v-for="i in recipe.steps[{{ forloop.counter0 }}].ingredients"> <!-- TODO duplicate code remove -->
+                                    <template v-for="i in recipe.steps[{{ forloop.counter0 }}].ingredients">
+                                        <!-- TODO duplicate code remove -->
 
                                         <template v-if="i.is_header">
                                             <tr>
@@ -289,7 +293,9 @@
                                                 </td>
                                                 <td style="vertical-align: middle!important;">
                                                     <template v-if="i.note">
-                                                        <b-button v-b-popover.hover="i.note" class="btn btn-sm d-print-none"><i class="fas fa-info"></i></b-button>
+                                                        <b-button v-b-popover.hover="i.note"
+                                                                  class="btn btn-sm d-print-none"><i
+                                                                class="fas fa-info"></i></b-button>
                                                         <div class="d-none d-print-block">
                                                             <i class="far fa-comment-alt"></i> [[i.note]]
                                                         </div>
@@ -514,6 +520,9 @@
                         time_diff += s.time
                     }
 
+                },
+                getShoppingUrl: function () {
+                    return `{% url 'view_shopping' %}?r=[${this.recipe.id},${this.ingredient_factor}]`
                 }
             }
         });