Remove sticky button, update order page cards, update title on form

app/assets/stylesheets/components/_card_product.scss

@@ -197,7 +197,7 @@
 
 .card-product {
   overflow: hidden;
-  height: 120px;
+  height: auto;
   background: white;
   box-shadow: 0 0 15px rgba(0,0,0,0.2);
   display: flex;
@@ -210,7 +210,11 @@
 
 @media (max-width: 600px) {
   .card-product {
-    height: 250px;
+    height: auto;
+  }
+
+  #option {
+    display: none;
   }
 }
 
@@ -220,6 +224,13 @@
   color: white;
 }
 
+.card-product.no-hover:hover {
+  background: inherit;
+  color: inherit;
+  text-decoration: inherit;
+}
+
+
 
 .card-product img {
   height: 100%;

app/controllers/application_controller.rb

@@ -86,6 +86,7 @@ def load_cart_prints
         product = @products.find { |product| product['id'] == item["id"] }
         if product
           product.merge("variant_id" => item["variant_id"])
+          product.merge("variant_title" => item["variant_title"])
         else
           nil
         end

app/controllers/custom_devise/sessions_controller.rb

@@ -33,7 +33,7 @@ def load_cart_prints
       shop_id = ENV['PRINTIFY_SHOP_ID']
       url = URI("https://api.printify.com/v1/shops/#{shop_id}/products.json");
       puts "=========================================="
-      puts "FROM APPLICATION CONTROLLER"
+      puts "FROM SESSIONS CONTROLLER"
       puts "=========================================="
       http = Net::HTTP.new(url.host, url.port)
       http.use_ssl = true;
@@ -109,6 +109,7 @@ def load_cart_prints
         product = @products.find { |product| product['id'] == item["id"] }
         if product
           product.merge("variant_id" => item["variant_id"])
+          product.merge("variant_title" => item["variant_title"])
         else
           nil
         end

app/controllers/orders_controller.rb

@@ -28,7 +28,7 @@ def show
   end
 
   def new
-      @order = Order.new
+    @order = Order.new
   end
 
   def create_paypal

app/controllers/prints_controller.rb

@@ -62,7 +62,8 @@ def show
 
     default_variant = print['variants'].find { |variant| variant['is_default'] == true && variant['is_enabled'] == true}
 
-    variants = print['variants']
+    variants = []
+    variants = print['variants'].select { |variant| variant['is_enabled'] == true }
 
     if default_variant
       price = default_variant['price']
@@ -101,14 +102,15 @@ def show
   def add_to_cart_prints
     id = params[:id]
     variant_id = params[:variant_id]
-    session[:prints_cart] << {"id" => id, "variant_id" => variant_id }
+    variant_title = params[:variant_title]
+    session[:prints_cart] << {"id" => id, "variant_id" => variant_id, "variant_title" => variant_title }
     redirect_to new_order_path
   end
 
   def remove_from_cart_prints
     id = params[:id]
     print_cart = session[:prints_cart]
-    index = print_cart.index { |item| item["id"] == id } # && item["variant_id"] == params[:variant_id] TO DO
+    index = print_cart.index { |item| item["id"] == id } # && item["variant_id"] == params[:variant_id] TO DO: Add variant_id to the session cart removal?
     print_cart.delete_at(index) if index
 
     # print_cart.delete_at((print_cart.find { |item| item["id"] == id }) || print_cart.length)

app/javascript/controllers/prints_controller.js

@@ -2,8 +2,27 @@ import { Controller } from "@hotwired/stimulus"
 
 // Connects to data-controller="prints"
 export default class extends Controller {
+
   connect() {
     console.log("Prints controller");
+
+    if (this.hasTitleTarget) {
+      document.addEventListener("DOMContentLoaded", function () {
+        const selects = document.querySelectorAll("select[id^='variant_select_']");
+
+        selects.forEach(select => {
+          select.addEventListener("change", function () {
+            const selectedOption = select.options[select.selectedIndex];
+            const printId = select.id.split("_").pop();
+            const variantTitleField = document.getElementById(`variant_title`);
+
+            if (variantTitleField) {
+              variantTitleField.value = selectedOption.text;
+            }
+          });
+        });
+      });
+    }
   }
 
   openProduct(e) {
@@ -12,6 +31,17 @@ export default class extends Controller {
     const url = painting.getAttribute("data-url");
     window.location.href = url;
   }
+
+  updateVariant(e) {
+    const select = e.currentTarget;
+    const selectedOption = select.options[select.selectedIndex];
+    const variantTitleField = document.getElementById(`variant_title`);
+
+    if (variantTitleField) {
+      variantTitleField.value = selectedOption.text;
+    }
+  }
+
   // // @dev Not needed for now.
   // async publishPrint() {
   //   console.log("Publish print");

app/views/orders/new.html.erb

@@ -17,7 +17,7 @@
 
                     <div class="card-product-infos">
                         <h2><%= item.title %></h2>
-                      <div class="d-flex flex-row">
+                      <div class="d-flex flex-row mb-2">
                           <small>
                             <%= number_to_currency(item["price"] / 100.00, :unit=> '$') %>
                           </small>
@@ -32,15 +32,18 @@
           <% end %>
           <% @flat_cart_arr.uniq.each do |item| %>
               <div class="col-12">
-                <div class="card-product p-3 mt-3">
+                <div class="card-product no-hover p-3 mt-3">
                   <%= image_tag item["image"] %>
 
                   <div class="card-product-infos">
                       <h2><%= item["title"] %></h2>
-                    <div class="d-flex flex-row">
+                    <div class="d-flex flex-column mb-2">
                       <small>
                         <%= number_to_currency(item["price"] / 100.00, :unit=> '$') %>
                       </small>
+                      <small class="d-flex flex-row justify-content-start align-items-center gap-1">
+                        <%= item["variant_title"] %>
+                      </small>
                     </div>
                     <div class="d-flex flex-row justify-content-evenly">
                       <%= button_to add_to_cart_prints_path(item["id"]), method: :post, class: "btn btn-sm btn-outline-dark rounded-pill", data: {"stripe-target" => "add"} do %>

app/views/paintings/_painting.html.erb

@@ -1,6 +1,6 @@
 <div class="container-fluid mt-3 p-5 text-center">
   <div id="<%= dom_id painting %>">
-    <% if painting.status != "sold" && !@cart.include?(painting) %>
+    <% if painting.status != "sold" && !@cart.include?(painting) && false %>
       <div class="sticky">
         <%= button_to add_to_cart_path(painting), method: :post, class: "btn btn-outline-primary tree" do %>
           <i class="fa-solid fa-cart-plus fa-xl"></i>

app/views/prints/show.html.erb

@@ -1,13 +1,15 @@
 
 
-<div class="container-fluid p-5 text-center">
+<div class="container-fluid p-5 text-center" data-controller="prints">
 
+    <% if false %>
       <div class="sticky" style="z-index: 2">
         <%= button_to add_to_cart_prints_path(@print["id"]), method: :post, class: "btn btn-outline-primary tree" do %>
           <i class="fa-solid fa-cart-plus fa-xl"></i>
           Purchase Item
         <% end %>
       </div>
+    <% end %>
 
   <% singular = @print["images"].first %>
   <div id="productCarouselControls" class="carousel slide mt-3" data-bs-ride="carousel">
@@ -47,9 +49,11 @@
 
             <% if !(@print["variants"].count < 2) && !@print['tags'].include?("Canvas" || "Framed") %>
                <p>Available Options:</p>
-              <%= f.select :variant_id, @print['variants'].collect{ |v| [v['title'], v['id'].to_i] }, { selected: @print['variants'].first['id'] }, { class: "form-select border border-2 border-radius-lg" } %>
+              <%= f.select :variant_id, @print['variants'].collect{ |v| [v['title'], v['id'].to_i] }, { selected: @print['variants'].first['id'] }, { class: "form-select border border-2 border-radius-lg", data: { action: "change->prints#updateVariant" }} %>
+              <%= hidden_field_tag :variant_title, @print['variants'].first['title'], id: "variant_title", data: { prints_target: "title" } %>
             <% else %>
               <%= f.hidden_field :variant_id, value: @print['variants'].first['id'] %>
+              <%= f.hidden_field :variant_title, value: @print['variants'].first['title'] %>
             <% end %>