app/Plugin/VariationSwatches42/Resource/template/assets.twig line 1

Open in your IDE?
  1. {# Load variation swatches CSS #}
  2. <link rel="stylesheet" href="{{ asset('VariationSwatches42/assets/variation-swatches.css', 'plugin') }}">
  4. {# Load React and variation swatches bundle #}
  5. <script src="{{ asset('VariationSwatches42/assets/variation-swatches-bundle.js', 'plugin') }}"></script>
  7. {# Initialize variation swatches #}
  8. {% if configScript is defined and configScript is not empty %}
  9.     {{ configScript|raw }}
  10. {% endif %}
  12. {% if productsScript is defined and productsScript is not empty %}
  13.     {{ productsScript|raw }}
  14. {% endif %}
  16. {# Custom Event Handler for Variation Swatches Selection Complete #}
  17. <script>
  18.     document.addEventListener('DOMContentLoaded', function () {
  19.         const isProductDetail = document.body && document.body.id === 'page_product_detail';
  21.         // Listen for the custom event from ReactJS variation swatches - both options selected
  22.         document.addEventListener('variationSwatchesSelectionComplete', function (event) {
  23.             const {productId, SwatchesMediaIndexConfig} = event.detail;
  25.             if (isProductDetail) {
  26.                 // Product detail page - handle slider navigation
  27.                 handleProductDetailSlider(SwatchesMediaIndexConfig, event.detail);
  28.             } else {
  29.                 // Product list page - handle image URL switching
  30.                 handleProductListImageSwitch(productId, SwatchesMediaIndexConfig);
  31.             }
  32.         });
  34.         // Listen for deselection event - when one or both options are deselected
  35.         document.addEventListener('variationSwatchesDeselection', function (event) {
  36.             const {productId} = event.detail;
  38.             if (isProductDetail) {
  39.                 const slickSlider = document.querySelector('.item_visual');
  40.                 if (slickSlider && typeof $ !== 'undefined' && $(slickSlider).hasClass('slick-initialized')) {
  41.                     $(slickSlider).slick('slickGoTo', 0, false);
  42.                 }
  43.             } else {
  44.                 // Product list page - revert to original image
  45.                 handleProductListImageRevert(productId);
  46.             }
  47.         });
  49.         // Handle product detail slider navigation
  50.         function handleProductDetailSlider(SwatchesMediaIndexConfig, eventDetail) {
  51.             const mediaIndex = SwatchesMediaIndexConfig.media_index;
  53.             // Only proceed if media index is not null
  54.             if (mediaIndex !== null && mediaIndex !== undefined) {
  55.                 const slickSlider = document.querySelector('.item_visual');
  56.                 if (slickSlider && typeof $ !== 'undefined' && $(slickSlider).hasClass('slick-initialized')) {
  57.                     $(slickSlider).slick('slickGoTo', mediaIndex, false);
  59.                     // Dispatch a custom event to notify other components
  60.                     const sliderChangedEvent = new CustomEvent('variationSwatchesSliderChanged', {
  61.                         detail: {
  62.                             productId: eventDetail.productId,
  63.                             mediaIndex: mediaIndex,
  64.                             SwatchesConfig: eventDetail.SwatchesConfig,
  65.                             SwatchesMediaIndexConfig: SwatchesMediaIndexConfig
  66.                         },
  67.                         bubbles: true
  68.                     });
  70.                     document.dispatchEvent(sliderChangedEvent);
  71.                 }
  72.             }
  73.         }
  75.         // Handle product list image URL switching
  76.         function handleProductListImageSwitch(productId, SwatchesMediaIndexConfig) {
  77.             const imageUrl = getImageUrlFromConfig(SwatchesMediaIndexConfig);
  79.             if (imageUrl) {
  80.                 const productInput = document.querySelector(`input[name="product_id"][value="${productId}"]`);
  81.                 if (productInput) {
  82.                     const productElement = productInput.closest('.ec-shelfGrid__item');
  83.                     if (productElement) {
  84.                         const imageElement = productElement.querySelector('.ec-shelfGrid__item-image img');
  85.                         if (imageElement) {
  86.                             if (!imageElement.dataset.originalSrc) {
  87.                                 imageElement.dataset.originalSrc = imageElement.src;
  88.                             }
  90.                             // Switch to new image
  91.                             imageElement.src = imageUrl;
  92.                         }
  93.                     }
  94.                 }
  95.             }
  96.         }
  98.         // Handle product list image revert
  99.         function handleProductListImageRevert(productId) {
  100.             const productInput = document.querySelector(`input[name="product_id"][value="${productId}"]`);
  101.             if (productInput) {
  102.                 const productElement = productInput.closest('.ec-shelfGrid__item');
  103.                 if (productElement) {
  104.                     const imageElement = productElement.querySelector('.ec-shelfGrid__item-image img');
  105.                     if (imageElement && imageElement.dataset.originalSrc) {
  106.                         imageElement.src = imageElement.dataset.originalSrc;
  107.                     }
  108.                 }
  109.             }
  110.         }
  112.         // Get image URL from SwatchesMediaIndexConfig
  113.         function getImageUrlFromConfig(SwatchesMediaIndexConfig) {
  114.             if (SwatchesMediaIndexConfig && SwatchesMediaIndexConfig.image_url) {
  115.                 return SwatchesMediaIndexConfig.image_url;
  116.             }
  118.             return null;
  119.         }
  120.     });
  121. </script>