Enhance out of stock message

composer.json

@@ -19,7 +19,7 @@
     "require": {
         "php": "^8.0|^8.1|^8.2",
         "blade-ui-kit/blade-heroicons": "^2.0",
-        "rapidez/core": "^2.16"
+        "rapidez/core": "^2.17"
     },
     "autoload": {
         "psr-4": {

lang/nl.json

@@ -71,6 +71,7 @@
     "Select an address": "Selecteer een adres",
     "Select as billing": "Selecteer als factuuradres",
     "Select as shipping": "Selecteer als verzendadres",
+    "This product is out of stock": "Dit product is op dit moment niet op voorraad",
     "Send": "Versturen",
     "Step 1 of 4": "Stap 1 van 4",
     "Step :step out of :total": "Stap :step van :total",

resources/views/cart/partials/product/description.blade.php

@@ -1,20 +1,23 @@
 <td class="flex max-md:w-1/2 md:table-cell">
     @include('rapidez-ct::cart.partials.product.alert')
     <div class="flex flex-col items-start">
-        <a :href="item.product.url_key + item.product.url_suffix | url">
-            <div dusk="cart-item-name">@{{ item.product.name }}</div>
+        <div>
+            <a :href="item.product.url_key + item.product.url_suffix | url" dusk="cart-item-name">@{{ item.product.name }}</a>
             <div v-for="option in item.configurable_options">
                 @{{ option.option_label }}: @{{ option.value_label }}
             </div>
             <div v-for="option in item.customizable_options">
                 @{{ option.label }}: @{{ option.values[0].label || option.values[0].value }}
             </div>
+            <div v-if="!item.is_available" class="text-ct-error text-balance bg-ct-error/5 my-2 max-w-sm p-2">
+                @lang('This product is out of stock, remove it to continue your order.')
+            </div>
             <div v-for="option in config.cart_attributes">
                 <template v-if="item.product.attribute_values?.[option] && typeof item.product.attribute_values[option] === 'object'">
                     @{{ option }}: <span v-html="item.product.attribute_values[option]?.join(', ')"></span>
                 </template>
             </div>
-        </a>
+        </div>
         @include('rapidez-ct::cart.partials.product.remove-button')
     </div>
 </td>

resources/views/cart/partials/product/image.blade.php

@@ -1,10 +1,10 @@
 <td class="h-24 w-32 !pl-0 max-md:flex max-md:w-1/2">
     <img
         v-if="item.product.image"
+        v-bind:class="{'opacity-20' : !item.is_available}"
         class="object-contain"
         :alt="item.product.name"
         :src="resizedPath(item.product.image.url + '.webp', '200')"
     />
     <x-rapidez::no-image v-else />
 </td>
-

resources/views/cart/partials/product/price.blade.php

@@ -7,7 +7,9 @@
     </div>
 </td>
 <td class="flex items-center font-medium max-md:w-1/3 md:table-cell *:mx-auto">
-    <x-rapidez-ct::input.quantity/>
+    <template v-if="!item.is_available">
+        <x-rapidez-ct::input.quantity/>
+    </template>
 </td>
 <td class="flex items-center justify-end text-right font-medium max-md:w-1/3 md:table-cell">
     @{{ item.prices.row_total_including_tax.value | price }}