You've already forked wc-composable-product
Initial implementation of WooCommerce Composable Products plugin
Implemented custom WooCommerce product type allowing customers to build their own product bundles by selecting from predefined sets of products. Features: - Custom "Composable Product" type with admin interface - Product selection by category, tag, or SKU - Configurable selection limits (global and per-product) - Dual pricing modes: fixed price or sum of selected products - Modern responsive frontend with Twig templates - AJAX add-to-cart functionality - Full internationalization support (.pot file) - WooCommerce settings integration - Comprehensive documentation Technical implementation: - PHP 8.3+ with PSR-4 autoloading - Twig 3.0 templating engine via Composer - Vanilla JavaScript with jQuery for frontend interactions - WordPress and WooCommerce hooks for seamless integration - Security: input sanitization, validation, and output escaping - Translation-ready with text domain 'wc-composable-product' Documentation: - README.md: Project overview and features - INSTALL.md: Installation and usage guide - IMPLEMENTATION.md: Technical architecture - CHANGELOG.md: Version history 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude Sonnet 4.5 <noreply@anthropic.com>
This commit is contained in:
50
assets/js/admin.js
Normal file
50
assets/js/admin.js
Normal file
@@ -0,0 +1,50 @@
|
||||
/**
|
||||
* Admin JavaScript for Composable Products
|
||||
*
|
||||
* @package WC_Composable_Product
|
||||
*/
|
||||
|
||||
(function($) {
|
||||
'use strict';
|
||||
|
||||
$(document).ready(function() {
|
||||
/**
|
||||
* Show/hide product data tab for composable products
|
||||
*/
|
||||
$('select#product-type').on('change', function() {
|
||||
const productType = $(this).val();
|
||||
|
||||
if (productType === 'composable') {
|
||||
$('.show_if_composable').show();
|
||||
$('.hide_if_composable').hide();
|
||||
$('#composable_product_data').show();
|
||||
$('.product_data_tabs .composable_options a').show();
|
||||
} else {
|
||||
$('.show_if_composable').hide();
|
||||
$('#composable_product_data').hide();
|
||||
$('.product_data_tabs .composable_options a').hide();
|
||||
}
|
||||
}).trigger('change');
|
||||
|
||||
/**
|
||||
* Toggle criteria groups based on selected type
|
||||
*/
|
||||
$('#_composable_criteria_type').on('change', function() {
|
||||
const criteriaType = $(this).val();
|
||||
|
||||
$('.composable_criteria_group').hide();
|
||||
$('#composable_criteria_' + criteriaType).show();
|
||||
}).trigger('change');
|
||||
|
||||
/**
|
||||
* Initialize enhanced select for categories and tags
|
||||
*/
|
||||
if ($.fn.selectWoo) {
|
||||
$('#_composable_categories, #_composable_tags').selectWoo({
|
||||
placeholder: 'Select options...',
|
||||
allowClear: true
|
||||
});
|
||||
}
|
||||
});
|
||||
|
||||
})(jQuery);
|
||||
186
assets/js/frontend.js
Normal file
186
assets/js/frontend.js
Normal file
@@ -0,0 +1,186 @@
|
||||
/**
|
||||
* Frontend JavaScript for Composable Products
|
||||
*
|
||||
* @package WC_Composable_Product
|
||||
*/
|
||||
|
||||
(function($) {
|
||||
'use strict';
|
||||
|
||||
const ComposableProduct = {
|
||||
/**
|
||||
* Initialize
|
||||
*/
|
||||
init: function() {
|
||||
this.bindEvents();
|
||||
},
|
||||
|
||||
/**
|
||||
* Bind events
|
||||
*/
|
||||
bindEvents: function() {
|
||||
const self = this;
|
||||
|
||||
// Handle checkbox changes
|
||||
$(document).on('change', '.composable-product-checkbox', function() {
|
||||
self.handleCheckboxChange($(this));
|
||||
});
|
||||
|
||||
// Handle add to cart button
|
||||
$(document).on('click', '.composable-add-to-cart', function(e) {
|
||||
e.preventDefault();
|
||||
self.addToCart($(this));
|
||||
});
|
||||
},
|
||||
|
||||
/**
|
||||
* Handle checkbox change
|
||||
*
|
||||
* @param {jQuery} $checkbox Checkbox element
|
||||
*/
|
||||
handleCheckboxChange: function($checkbox) {
|
||||
const $container = $checkbox.closest('.wc-composable-product-selector');
|
||||
const selectionLimit = parseInt($container.data('selection-limit'));
|
||||
const pricingMode = $container.data('pricing-mode');
|
||||
const $checked = $container.find('.composable-product-checkbox:checked');
|
||||
|
||||
// Enforce selection limit
|
||||
if ($checked.length > selectionLimit) {
|
||||
$checkbox.prop('checked', false);
|
||||
this.showMessage($container, wcComposableProduct.i18n.max_items, 'error');
|
||||
return;
|
||||
}
|
||||
|
||||
// Update visual state
|
||||
$checkbox.closest('.composable-product-item').toggleClass('selected', $checkbox.is(':checked'));
|
||||
|
||||
// Update total price if in sum mode
|
||||
if (pricingMode === 'sum') {
|
||||
this.updateTotalPrice($container);
|
||||
}
|
||||
|
||||
// Clear messages
|
||||
this.clearMessages($container);
|
||||
},
|
||||
|
||||
/**
|
||||
* Update total price
|
||||
*
|
||||
* @param {jQuery} $container Container element
|
||||
*/
|
||||
updateTotalPrice: function($container) {
|
||||
const $checked = $container.find('.composable-product-checkbox:checked');
|
||||
let total = 0;
|
||||
|
||||
$checked.each(function() {
|
||||
const price = parseFloat($(this).data('price'));
|
||||
if (!isNaN(price)) {
|
||||
total += price;
|
||||
}
|
||||
});
|
||||
|
||||
const currencySymbol = $container.find('.total-price').data('currency');
|
||||
$container.find('.calculated-total').text(currencySymbol + total.toFixed(2));
|
||||
},
|
||||
|
||||
/**
|
||||
* Add to cart
|
||||
*
|
||||
* @param {jQuery} $button Button element
|
||||
*/
|
||||
addToCart: function($button) {
|
||||
const $container = $button.closest('.wc-composable-product-selector');
|
||||
const $checked = $container.find('.composable-product-checkbox:checked');
|
||||
const productId = $button.data('product-id');
|
||||
|
||||
// Validate selection
|
||||
if ($checked.length === 0) {
|
||||
this.showMessage($container, wcComposableProduct.i18n.min_items, 'error');
|
||||
return;
|
||||
}
|
||||
|
||||
// Collect selected product IDs
|
||||
const selectedProducts = [];
|
||||
$checked.each(function() {
|
||||
selectedProducts.push($(this).val());
|
||||
});
|
||||
|
||||
// Disable button
|
||||
$button.prop('disabled', true).addClass('loading');
|
||||
|
||||
// Add to cart via AJAX
|
||||
$.ajax({
|
||||
url: wc_add_to_cart_params.wc_ajax_url.toString().replace('%%endpoint%%', 'add_to_cart'),
|
||||
type: 'POST',
|
||||
data: {
|
||||
product_id: productId,
|
||||
quantity: 1,
|
||||
composable_products: selectedProducts
|
||||
},
|
||||
success: function(response) {
|
||||
if (response.error) {
|
||||
this.showMessage($container, response.error, 'error');
|
||||
} else {
|
||||
// Trigger WooCommerce event
|
||||
$(document.body).trigger('added_to_cart', [response.fragments, response.cart_hash, $button]);
|
||||
|
||||
// Show success message
|
||||
this.showMessage($container, 'Product added to cart!', 'success');
|
||||
|
||||
// Reset selection
|
||||
setTimeout(function() {
|
||||
$checked.prop('checked', false);
|
||||
$container.find('.composable-product-item').removeClass('selected');
|
||||
this.updateTotalPrice($container);
|
||||
}.bind(this), 1500);
|
||||
}
|
||||
}.bind(this),
|
||||
error: function() {
|
||||
this.showMessage($container, 'An error occurred. Please try again.', 'error');
|
||||
}.bind(this),
|
||||
complete: function() {
|
||||
$button.prop('disabled', false).removeClass('loading');
|
||||
}
|
||||
});
|
||||
},
|
||||
|
||||
/**
|
||||
* Show message
|
||||
*
|
||||
* @param {jQuery} $container Container element
|
||||
* @param {string} message Message text
|
||||
* @param {string} type Message type (error, success)
|
||||
*/
|
||||
showMessage: function($container, message, type) {
|
||||
const $messages = $container.find('.composable-messages');
|
||||
const $message = $('<div>')
|
||||
.addClass('composable-message')
|
||||
.addClass('composable-message-' + type)
|
||||
.text(message);
|
||||
|
||||
$messages.empty().append($message);
|
||||
|
||||
// Auto-hide after 5 seconds
|
||||
setTimeout(function() {
|
||||
$message.fadeOut(function() {
|
||||
$(this).remove();
|
||||
});
|
||||
}, 5000);
|
||||
},
|
||||
|
||||
/**
|
||||
* Clear messages
|
||||
*
|
||||
* @param {jQuery} $container Container element
|
||||
*/
|
||||
clearMessages: function($container) {
|
||||
$container.find('.composable-messages').empty();
|
||||
}
|
||||
};
|
||||
|
||||
// Initialize on document ready
|
||||
$(document).ready(function() {
|
||||
ComposableProduct.init();
|
||||
});
|
||||
|
||||
})(jQuery);
|
||||
Reference in New Issue
Block a user