Refactor everblock.js to rely on jQuery #338
Conversation
![chatgpt-codex-connector[bot]](https://avatars.githubusercontent.com/in/1144995?s=60&v=4){kind=small}
There was a problem hiding this comment.
Codex Review: Here are some suggestions.
Reply with @codex fix comments to fix any unresolved comments.
About Codex in GitHub
Your team has set up Codex to review pull requests in this repo. Reviews are triggered when you open a pull request for review, mark a draft as ready, or comment "@codex review". If Codex has suggestions, it will comment; otherwise it will react with 👍.
Codex can also answer questions or update the PR. Try commenting "@codex fix this CI failure" or "@codex address that feedback".
| // Lookbook modal triggers | ||
| document.querySelectorAll('[id^="block-"][data-lookbook-url]').forEach(function(block) { | ||
| var ajaxUrl = block.getAttribute('data-lookbook-url'); | ||
| var blockId = block.id.replace('block-', ''); | ||
| var modalEl = document.getElementById('lookbook-modal-' + blockId); | ||
| if (!modalEl) { | ||
| $('[id^="block-"][data-lookbook-url]').each(function() { | ||
| var $block = $(this); | ||
| var ajaxUrl = $block.data('lookbook-url'); | ||
| var blockId = this.id.replace('block-', ''); | ||
| var $modal = $('#lookbook-modal-' + blockId); | ||
| if (!$modal.length) { | ||
| return; | ||
| } | ||
| var modalBody = modalEl.querySelector('.modal-body'); | ||
| var bootstrapModal = window.bootstrap ? new bootstrap.Modal(modalEl) : null; | ||
| block.querySelectorAll('.lookbook-marker').forEach(function(marker) { | ||
| marker.addEventListener('click', function(e) { | ||
| e.preventDefault(); | ||
| var productId = marker.getAttribute('data-product-id'); | ||
| fetch(ajaxUrl + '&id_product=' + productId) | ||
| .then(function(resp) { return resp.text(); }) | ||
| .then(function(html) { | ||
| modalBody.innerHTML = html; | ||
| if (bootstrapModal) { | ||
| bootstrapModal.show(); | ||
| } else if (typeof $ !== 'undefined' && $(modalEl).modal) { | ||
| $(modalEl).modal('show'); | ||
| } | ||
| }); | ||
| var $modalBody = $modal.find('.modal-body'); | ||
| $block.find('.lookbook-marker').on('click', function(e) { | ||
| e.preventDefault(); | ||
| var productId = $(this).data('product-id'); | ||
| $.get(ajaxUrl + '&id_product=' + productId, function(html) { | ||
| $modalBody.html(html); | ||
| $modal.modal('show'); | ||
| }); |
There was a problem hiding this comment.
[P1] Assume jQuery modal plugin exists
The new lookbook click handler unconditionally invokes $modal.modal('show') after loading the product HTML. Bootstrap 5 dropped the jQuery modal plugin, so on setups that only expose bootstrap.Modal (the case the previous code handled explicitly) this call throws TypeError: $modal.modal is not a function and the modal never appears. This regresses lookbook functionality for the default Bootstrap 5 configuration.
Useful? React with 👍 / 👎.
Summary
Testing
npm test(fails: Could not read package.json)composer validatehttps://chatgpt.com/codex/tasks/task_e_68c1b066aca08322b70636af1d2d243a