🥔✨ Marketplace: Show Product::Photo in Cart (#1443)

✨ `Marketplace`: Show `Product::Photo` in `Cart` - #1428 - #1326 A quick insertion of the photos into the cart view. We probably should do a broader redesign pass on the `Cart` UI 🔜 but this seems decent enough?
zinc-collective · May 6, 2023 · 7bed0fb · 7bed0fb
1 parent 4c29127
commit 7bed0fb
Show file tree

Hide file tree

Showing 2 changed files with 27 additions and 11 deletions.
diff --git a/app/controllers/application_controller.rb b/app/controllers/application_controller.rb
@@ -17,6 +17,9 @@ class ApplicationController < ActionController::Base
 
   protect_from_forgery with: :exception, unless: -> { api_request? }
 
+  # @see https://til.hashrocket.com/posts/3exmhtwqy6-setting-the-urloptions-hash-in-the-controller
+  include ActiveStorage::SetCurrent
+
   # Referenced in application layout to display page title
   # Override on a per-controller basis to display different title
   # @return [String]

diff --git a/app/furniture/marketplace/cart_products/_cart_product.html.erb b/app/furniture/marketplace/cart_products/_cart_product.html.erb
@@ -1,8 +1,19 @@
 <%- product = cart_product.product %>
 <%- cart = cart_product.cart %>
-<tr id="cart-product-<%= cart_product.product_id %>">
+<tr id="<%= dom_id(cart_product)%>">
   <td class="w-full max-w-0 py-4 pl-4 pr-3 text-sm font-medium text-gray-900 sm:w-auto sm:max-w-none sm:pl-6">
-    <%= product.name %>
+    <%- if product.photo.present? %>
+      <figure>
+        <%= image_tag product.photo.variant(resize_to_limit: [550, 550]).processed.url, class: "rounded-lg"
+ %>
+        <figcaption class="text-center py-2">
+          <%=product.name%>
+        </figcaption>
+      </figure>
+    <%- else %>
+      <%= product.name %>
+    <%- end %>
+
     <dl class="font-normal lg:hidden">
       <dt class="sr-only"><%= product.class.human_attribute_name(:price) %></dt>
       <dd><%= humanized_money_with_symbol(product.price) %></dd>
@@ -17,17 +28,19 @@
   <td class="hidden px-3 py-4 text-sm text-gray-500 sm:table-cell">
     <%= humanized_money_with_symbol(product.price) %>
   </td>
-  <td class="py-4 pl-3 pr-4 text-right text-sm font-medium sm:pr-6 flex flex-row justify-between items-center">
-    <%# TODO: Extract minus and plus buttons into components %>
-    <%- minus_quantity = [cart_product.quantity - 1, 0].max %>
-    <%- minus_method = minus_quantity.zero? ? :delete : :put %>
-    <%= render "buttons/minus", disabled: cart_product.quantity.zero?, method: minus_method, title: t('.remove'), disabled: cart_product.quantity.zero?, href: [cart.space, cart.room, cart.marketplace, cart, cart_product, { cart_product: { quantity: minus_quantity, product_id: product.id} }] %>
+  <td class="py-4 pl-3 pr-4 text-right text-sm font-medium sm:pr-6">
+    <div class="flex flex-row justify-between items-center">
+      <%# TODO: Extract minus and plus buttons into components %>
+      <%- minus_quantity = [cart_product.quantity - 1, 0].max %>
+      <%- minus_method = minus_quantity.zero? ? :delete : :put %>
+      <%= render "buttons/minus", disabled: cart_product.quantity.zero?, method: minus_method, title: t('.remove'), disabled: cart_product.quantity.zero?, href: [cart.space, cart.room, cart.marketplace, cart, cart_product, { cart_product: { quantity: minus_quantity, product_id: product.id} }] %>
 
 
-    <span class="py-2 px-2 my-1 text-lg"><%= cart_product.quantity %></span>
+      <span class="py-2 px-2 my-1 text-lg"><%= cart_product.quantity %></span>
 
-    <%- add_quantity = cart_product.quantity + 1 %>
-    <%- add_method = add_quantity == 1 ? :post : :put %>
-    <%= render "buttons/plus", method: add_method, title: t('.add'), href: [cart.space, cart.room, cart.marketplace, cart, cart_product, { cart_product: {quantity: add_quantity, product_id: product.id} }] %>
+      <%- add_quantity = cart_product.quantity + 1 %>
+      <%- add_method = add_quantity == 1 ? :post : :put %>
+      <%= render "buttons/plus", method: add_method, title: t('.add'), href: [cart.space, cart.room, cart.marketplace, cart, cart_product, { cart_product: {quantity: add_quantity, product_id: product.id} }] %>
+    </div>
   </td>
 </tr>