Files
cannaiq/wordpress-plugin/widgets/product-grid.php
Kelly c33ed1cae9
All checks were successful
ci/woodpecker/push/woodpecker Pipeline was successful
feat: CannaiQ Menus WordPress Plugin v2.0.0 - Modular Component Library
New modular component widgets:
- Discount Ribbon (ribbon/pill/text styles)
- Strain Badge (Sativa/Indica/Hybrid colored pills)
- THC/CBD Meter (progress bars or badges)
- Effects Display (styled chips with icons)
- Price Block (original + sale price)
- Cart Button (styled CTA linking to menu)
- Stock Indicator (in/out of stock badges)
- Product Image + Badges (image with overlays)

New card template:
- Premium Product Card (ready-to-use template)

Extended dynamic tags (30+ total):
- Discount %, Strain Badge, THC/CBD Badge
- Effects Chips, Terpenes, Price Display
- Menu URL, Stock Status, and more

New files:
- assets/css/components.css
- includes/effects-icons.php (SVG icons)
- 10 new widget files
- dynamic-tags-extended.php

Branding updated to "CannaiQ" throughout.

🤖 Generated with [Claude Code](https://claude.com/claude-code)

Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
2025-12-17 00:21:40 -07:00

361 lines
13 KiB
PHP

<?php
/**
* Elementor Product Grid Widget
*/
if (!defined('ABSPATH')) {
exit;
}
class CannaIQ_Menus_Product_Grid_Widget extends \Elementor\Widget_Base {
public function get_name() {
return 'cannaiq_product_grid';
}
public function get_title() {
return __('CannaiQ Product Grid', 'cannaiq-menus');
}
public function get_icon() {
return 'eicon-products';
}
public function get_categories() {
return ['general'];
}
protected function register_controls() {
// Content Section
$this->start_controls_section(
'content_section',
[
'label' => __('Content', 'cannaiq-menus'),
'tab' => \Elementor\Controls_Manager::TAB_CONTENT,
]
);
$this->add_control(
'store_id',
[
'label' => __('Store ID', 'cannaiq-menus'),
'type' => \Elementor\Controls_Manager::NUMBER,
'default' => get_option('cannaiq_default_store_id', 1),
'min' => 1,
]
);
$this->add_control(
'category',
[
'label' => __('Category', 'cannaiq-menus'),
'type' => \Elementor\Controls_Manager::SELECT,
'default' => '',
'options' => CannaIQ_Menus_Plugin::instance()->get_category_options(),
'description' => __('Filter by product category', 'cannaiq-menus'),
]
);
$this->add_control(
'brand',
[
'label' => __('Brand', 'cannaiq-menus'),
'type' => \Elementor\Controls_Manager::SELECT,
'default' => '',
'options' => CannaIQ_Menus_Plugin::instance()->get_brand_options(),
'description' => __('Filter by brand', 'cannaiq-menus'),
]
);
$this->add_control(
'on_special',
[
'label' => __('On Special Only', 'cannaiq-menus'),
'type' => \Elementor\Controls_Manager::SWITCHER,
'label_on' => __('Yes', 'cannaiq-menus'),
'label_off' => __('No', 'cannaiq-menus'),
'return_value' => 'yes',
'default' => 'no',
'description' => __('Show only products on sale', 'cannaiq-menus'),
]
);
$this->add_control(
'limit',
[
'label' => __('Number of Products', 'cannaiq-menus'),
'type' => \Elementor\Controls_Manager::NUMBER,
'default' => 12,
'min' => 1,
'max' => 100,
]
);
$this->add_control(
'columns',
[
'label' => __('Columns', 'cannaiq-menus'),
'type' => \Elementor\Controls_Manager::SELECT,
'default' => '3',
'options' => [
'2' => __('2 Columns', 'cannaiq-menus'),
'3' => __('3 Columns', 'cannaiq-menus'),
'4' => __('4 Columns', 'cannaiq-menus'),
'6' => __('6 Columns', 'cannaiq-menus'),
],
]
);
$this->add_control(
'in_stock_only',
[
'label' => __('In Stock Only', 'cannaiq-menus'),
'type' => \Elementor\Controls_Manager::SWITCHER,
'label_on' => __('Yes', 'cannaiq-menus'),
'label_off' => __('No', 'cannaiq-menus'),
'return_value' => 'yes',
'default' => 'yes',
]
);
$this->add_control(
'search',
[
'label' => __('Search Filter', 'cannaiq-menus'),
'type' => \Elementor\Controls_Manager::TEXT,
'default' => '',
'description' => __('Filter products by name', 'cannaiq-menus'),
]
);
$this->end_controls_section();
// Display Options Section
$this->start_controls_section(
'display_section',
[
'label' => __('Display Options', 'cannaiq-menus'),
'tab' => \Elementor\Controls_Manager::TAB_CONTENT,
]
);
$this->add_control(
'show_image',
[
'label' => __('Show Image', 'cannaiq-menus'),
'type' => \Elementor\Controls_Manager::SWITCHER,
'label_on' => __('Yes', 'cannaiq-menus'),
'label_off' => __('No', 'cannaiq-menus'),
'return_value' => 'yes',
'default' => 'yes',
]
);
$this->add_control(
'show_price',
[
'label' => __('Show Price', 'cannaiq-menus'),
'type' => \Elementor\Controls_Manager::SWITCHER,
'label_on' => __('Yes', 'cannaiq-menus'),
'label_off' => __('No', 'cannaiq-menus'),
'return_value' => 'yes',
'default' => 'yes',
]
);
$this->add_control(
'show_thc',
[
'label' => __('Show THC', 'cannaiq-menus'),
'type' => \Elementor\Controls_Manager::SWITCHER,
'label_on' => __('Yes', 'cannaiq-menus'),
'label_off' => __('No', 'cannaiq-menus'),
'return_value' => 'yes',
'default' => 'yes',
]
);
$this->add_control(
'show_cbd',
[
'label' => __('Show CBD', 'cannaiq-menus'),
'type' => \Elementor\Controls_Manager::SWITCHER,
'label_on' => __('Yes', 'cannaiq-menus'),
'label_off' => __('No', 'cannaiq-menus'),
'return_value' => 'yes',
'default' => 'yes',
]
);
$this->add_control(
'show_description',
[
'label' => __('Show Description', 'cannaiq-menus'),
'type' => \Elementor\Controls_Manager::SWITCHER,
'label_on' => __('Yes', 'cannaiq-menus'),
'label_off' => __('No', 'cannaiq-menus'),
'return_value' => 'yes',
'default' => 'no',
]
);
$this->end_controls_section();
// Style Section
$this->start_controls_section(
'style_section',
[
'label' => __('Style', 'cannaiq-menus'),
'tab' => \Elementor\Controls_Manager::TAB_STYLE,
]
);
$this->add_control(
'card_background',
[
'label' => __('Card Background', 'cannaiq-menus'),
'type' => \Elementor\Controls_Manager::COLOR,
'default' => '#ffffff',
'selectors' => [
'{{WRAPPER}} .cannaiq-product-card' => 'background-color: {{VALUE}};',
],
]
);
$this->add_control(
'card_border_radius',
[
'label' => __('Border Radius', 'cannaiq-menus'),
'type' => \Elementor\Controls_Manager::SLIDER,
'size_units' => ['px'],
'range' => [
'px' => [
'min' => 0,
'max' => 50,
],
],
'default' => [
'size' => 8,
],
'selectors' => [
'{{WRAPPER}} .cannaiq-product-card' => 'border-radius: {{SIZE}}{{UNIT}};',
],
]
);
$this->add_control(
'text_color',
[
'label' => __('Text Color', 'cannaiq-menus'),
'type' => \Elementor\Controls_Manager::COLOR,
'default' => '#333333',
'selectors' => [
'{{WRAPPER}} .cannaiq-product-card' => 'color: {{VALUE}};',
],
]
);
$this->end_controls_section();
}
protected function render() {
$settings = $this->get_settings_for_display();
$args = [
'store_id' => $settings['store_id'],
'limit' => $settings['limit'],
'in_stock' => $settings['in_stock_only'] === 'yes' ? 'true' : 'false',
];
if (!empty($settings['category'])) {
$args['type'] = $settings['category'];
}
if (!empty($settings['brand'])) {
$args['brandName'] = $settings['brand'];
}
if ($settings['on_special'] === 'yes') {
$args['on_special'] = 'true';
}
if (!empty($settings['search'])) {
$args['search'] = $settings['search'];
}
$plugin = CannaIQ_Menus_Plugin::instance();
$products = $plugin->fetch_products($args);
if (!$products) {
echo '<p>' . __('No products found.', 'cannaiq-menus') . '</p>';
return;
}
$columns = $settings['columns'];
?>
<div class="cannaiq-product-grid cannaiq-grid-cols-<?php echo esc_attr($columns); ?>">
<?php foreach ($products as $product):
$image_url = $product['image_url'] ?? $product['primary_image_url'] ?? $product['image_url_full'] ?? '';
$product_url = !empty($product['menu_url']) ? $product['menu_url'] : '#';
?>
<div class="cannaiq-product-card"
<?php if ($product_url !== '#'): ?>onclick="window.open('<?php echo esc_url($product_url); ?>', '_blank')"<?php endif; ?>
style="cursor: <?php echo ($product_url !== '#') ? 'pointer' : 'default'; ?>;">
<?php if ($settings['show_image'] === 'yes' && !empty($image_url)): ?>
<div class="cannaiq-product-image">
<img src="<?php echo esc_url($image_url); ?>"
alt="<?php echo esc_attr($product['name']); ?>"
loading="lazy" />
</div>
<?php endif; ?>
<div class="cannaiq-product-content">
<h3 class="cannaiq-product-title">
<?php echo esc_html($product['name']); ?>
</h3>
<?php if ($settings['show_description'] === 'yes' && !empty($product['description'])): ?>
<p class="cannaiq-product-description">
<?php echo esc_html(wp_trim_words($product['description'], 15)); ?>
</p>
<?php endif; ?>
<div class="cannaiq-product-meta">
<?php if ($settings['show_thc'] === 'yes' && !empty($product['thc_percentage'])): ?>
<span class="cannaiq-meta-item cannaiq-thc">
<strong>THC:</strong> <?php echo esc_html($product['thc_percentage']); ?>%
</span>
<?php endif; ?>
<?php if ($settings['show_cbd'] === 'yes' && !empty($product['cbd_percentage'])): ?>
<span class="cannaiq-meta-item cannaiq-cbd">
<strong>CBD:</strong> <?php echo esc_html($product['cbd_percentage']); ?>%
</span>
<?php endif; ?>
</div>
<?php if ($settings['show_price'] === 'yes' && isset($product['regular_price'])): ?>
<div class="cannaiq-product-price">
<?php if (!empty($product['sale_price']) && $product['sale_price'] != $product['regular_price']): ?>
<span class="cannaiq-price-sale">$<?php echo esc_html($product['sale_price']); ?></span>
<span class="cannaiq-price-regular cannaiq-strikethrough">$<?php echo esc_html($product['regular_price']); ?></span>
<?php else: ?>
$<?php echo esc_html($product['regular_price']); ?>
<?php endif; ?>
</div>
<?php endif; ?>
<?php if (!$product['in_stock']): ?>
<div class="cannaiq-out-of-stock">
<?php _e('Out of Stock', 'cannaiq-menus'); ?>
</div>
<?php endif; ?>
</div>
</div>
<?php endforeach; ?>
</div>
<?php
}
}