[5.3] Products & Variants card view designer

CHANGELOG-WIP.md

@@ -1,6 +1,7 @@
 # Release Notes for Craft Commerce (WIP)
 
 ### Store Management
+- It is now possible to design card views for Products and Variants. ([#3809](https://github.com/craftcms/commerce/pull/3809))
 - Order conditions can now have a “Coupon Code” rule. ([#3776](https://github.com/craftcms/commerce/discussions/3776))
 - Order conditions can now have a “Payment Gateway” rule. ([#3722](https://github.com/craftcms/commerce/discussions/3722))
 - Variant conditions can now have a “Product” rule.
@@ -21,3 +22,6 @@
 - Added `craft\commerce\elements\db\OrderQuery::couponCode()`.
 - Added `craft\commerce\services\Inventory::updateInventoryLevel()`.
 - Added `craft\commerce\services\Inventory::updatePurchasableInventoryLevel()`.
+
+### System
+- Craft Commerce now requires Craft CMS 5.5 or later.

composer.json

@@ -22,7 +22,7 @@
   "prefer-stable": true,
   "require": {
     "php": "^8.2",
-    "craftcms/cms": "^5.2.0",
+    "craftcms/cms": "^5.5.0",
     "dompdf/dompdf": "^2.0.2",
     "ibericode/vat": "^1.2.2",
     "iio/libmergepdf": "^4.0",

src/base/Purchasable.php

@@ -1289,6 +1289,24 @@ protected function attributeHtml(string $attribute): string
             }
         }
 
+        $dimensions = [];
+        if ($attribute === 'dimensions') {
+            $dimensions = array_filter([
+                $this->length,
+                $this->width,
+                $this->height,
+            ]);
+        }
+
+        if ($attribute === 'priceView') {
+            $price = $this->basePriceAsCurrency;
+            if ($this->getBasePromotionalPrice() && $this->getBasePromotionalPrice() < $this->getBasePrice()) {
+                $price = Html::tag('del', $price, ['style' => 'opacity: .5']) . ' ' . $this->basePromotionalPriceAsCurrency;
+            }
+
+            return $price;
+        }
+
         return match ($attribute) {
             'sku' => (string)Html::encode($this->getSkuAsText()),
             'price' => $this->basePriceAsCurrency,
@@ -1300,6 +1318,7 @@ protected function attributeHtml(string $attribute): string
             'minQty' => (string)$this->minQty,
             'maxQty' => (string)$this->maxQty,
             'stock' => $stock,
+            'dimensions' => !empty($dimensions) ? implode(' x ', $dimensions) . ' ' . Plugin::getInstance()->getSettings()->dimensionUnits : '',
             default => parent::attributeHtml($attribute),
         };
     }
@@ -1337,6 +1356,82 @@ protected static function defineDefaultTableAttributes(string $source): array
         ];
     }
 
+    /**
+     * @inheritdoc
+     */
+    public static function attributePreviewHtml(array $attribute): mixed
+    {
+        return match ($attribute['value']) {
+            'sku', 'priceView', 'dimensions', 'weight' => $attribute['placeholder'],
+            'availableForPurchase', 'promotable' => Html::tag('span', '', [
+                    'class' => 'checkbox-icon',
+                    'role' => 'img',
+                    'title' => $attribute['label'],
+                    'aria' => [
+                        'label' => $attribute['label'],
+                    ],
+                ]) .
+                Html::tag('span', $attribute['label'], [
+                    'class' => 'checkbox-preview-label',
+                ]),
+            default => parent::attributePreviewHtml($attribute)
+        };
+    }
+
+    /**
+     * @inheritdoc
+     */
+    protected static function defineDefaultCardAttributes(): array
+    {
+        return array_merge(parent::defineDefaultCardAttributes(), [
+            'sku',
+            'priceView',
+        ]);
+    }
+
+    /**
+     * @inheritdoc
+     */
+    protected static function defineCardAttributes(): array
+    {
+        return array_merge(Element::defineCardAttributes(), [
+            'availableForPurchase' => [
+                'label' => Craft::t('commerce', 'Available for purchase'),
+            ],
+            'basePrice' => [
+                'label' => Craft::t('commerce', 'Base Price'),
+                'placeholder' => '¤' . Craft::$app->getFormattingLocale()->getFormatter()->asDecimal(123.99),
+            ],
+            'basePromotionalPrice' => [
+                'label' => Craft::t('commerce', 'Base Promotional Price'),
+                'placeholder' => '¤' . Craft::$app->getFormattingLocale()->getFormatter()->asDecimal(123.99),
+            ],
+            'dimensions' => [
+                'label' => Craft::t('commerce', 'Dimensions'),
+                'placeholder' => '1 x 2 x 3 ' . Plugin::getInstance()->getSettings()->dimensionUnits,
+            ],
+            'priceView' => [
+                'label' => Craft::t('commerce', 'Price'),
+                'placeholder' => Html::tag('del', '¤' . Craft::$app->getFormattingLocale()->getFormatter()->asDecimal(199.99), ['style' => 'opacity: .5']) . ' ¤' . Craft::$app->getFormattingLocale()->getFormatter()->asDecimal(123.99),
+            ],
+            'promotable' => [
+                'label' => Craft::t('commerce', 'Promotable'),
+            ],
+            'sku' => [
+                'label' => Craft::t('commerce', 'SKU'),
+                'placeholder' => Html::tag('code', 'SKU123'),
+            ],
+            'stock' => [
+                'label' => Craft::t('commerce', 'Stock'),
+                'placeholder' => 10,
+            ],
+            'weight' => [
+                'label' => Craft::t('commerce', 'Weight'),
+                'placeholder' => 123 . Plugin::getInstance()->getSettings()->weightUnits,
+            ],
+        ]);
+    }
+
     /**
      * @inheritdoc
      */

src/elements/Product.php

@@ -565,6 +565,45 @@ protected static function defineDefaultTableAttributes(string $source): array
         return $attributes;
     }
 
+    /**
+     * @inheritdoc
+     */
+    public static function attributePreviewHtml(array $attribute): mixed
+    {
+        return match ($attribute['value']) {
+            'defaultSku' => $attribute['placeholder'],
+            default => parent::attributePreviewHtml($attribute)
+        };
+    }
+
+    /**
+     * @inheritdoc
+     */
+    protected static function defineCardAttributes(): array
+    {
+        return array_merge(parent::defineCardAttributes(), [
+            'defaultPrice' => [
+                'label' => Craft::t('commerce', 'Price'),
+                'placeholder' => '¤' . Craft::$app->getFormattingLocale()->getFormatter()->asDecimal(123.99),
+            ],
+            'defaultSku' => [
+                'label' => Craft::t('commerce', 'SKU'),
+                'placeholder' => Html::tag('code', 'SKU123'),
+            ],
+        ]);
+    }
+
+    /**
+     * @inheritdoc
+     */
+    protected static function defineDefaultCardAttributes(): array
+    {
+        return array_merge(parent::defineDefaultCardAttributes(), [
+            'defaultSku',
+            'defaultPrice',
+        ]);
+    }
+
     /**
      * @inheritdoc
      */

src/elements/Variant.php

@@ -1372,6 +1372,18 @@ protected static function defineSearchableAttributes(): array
         return [...parent::defineSearchableAttributes(), ...['productTitle']];
     }
 
+    /**
+     * @inheritdoc
+     */
+    protected static function defineCardAttributes(): array
+    {
+        return array_merge(parent::defineCardAttributes(), [
+            'product' => [
+                'label' => Craft::t('commerce', 'Product'),
+            ],
+        ]);
+    }
+
     /**
      * @inheritdoc
      */

src/services/LineItems.php

@@ -444,6 +444,7 @@ public function create(Order $order, array $params = [], LineItemType $type = Li
         }
 
         $params['class'] = LineItem::class;
+        /** @var LineItem $lineItem */
         $lineItem = Craft::createObject($params);
 
         if ($lineItem->type === LineItemType::Purchasable) {

src/templates/settings/producttypes/_edit.twig

@@ -408,6 +408,7 @@
 
         {{ forms.fieldLayoutDesignerField({
             fieldLayout: productType.getProductFieldLayout(),
+            withCardViewDesigner: true,
         }) }}
 
     </div>
@@ -417,6 +418,7 @@
         {% namespace "variant-layout" %}
             {{ forms.fieldLayoutDesignerField({
                 fieldLayout: productType.getVariantFieldLayout(),
+                withCardViewDesigner: true,
             }) }}
         {% endnamespace %}