Edit History

Bonjour,

J'ai trouvé une solution. Je la partage donc, si cela peut aider quelqu'un.

Pour un peu plus de précision, ce développement complémentaire concerne la fonction "render()" dans "modules/creativeelements/modules/catalog/widgets/product-variants.php" du page builder "Creative elements".

protected function render()
	{
		$settings = $this->getSettingsForDisplay();
		$context = \Context::getContext();
		$groups = &$context->smarty->tpl_vars['groups']->value; 		
		
		// Récupérer les stocks réels des déclinaisons depuis le tableau $combinations
		$combinations = &$context->smarty->tpl_vars['combinations']->value;
		$stockData = [];
		
		// Boucle pour afficher chaque combinaison avec la classe CSS appropriée
		foreach ($combinations as $combination) {
			$attributesList = $combination['list'];
			$attributesListArray = explode(',', $attributesList);
			$combinedAttributes = implode('-', $attributesListArray);
			$stockData[$combinedAttributes] = $combination['quantity'];
			
			// Enlever les guillemets simples des clés du tableau $stockData
			$stockData = array_combine(array_map(function($key) {
				return str_replace("'", "", $key);
			}, array_keys($stockData)), $stockData);
		}		
		?>			
		
		<div class="ce-product-variants">
			<?php foreach ($groups as $id_attr_group => $group) { ?>
				<?php if (!empty($group['attributes'])) { ?>
					<div class="ce-product-variants__item">
						<span class="ce-product-variants__label"><?php echo esc_html($group['name']); ?></span>
						<?php if ('stacked' === $settings['layout'] && $settings['show_value']) { ?>
							<span class="ce-product-variants__value">
								<?php foreach ($group['attributes'] as $value) { ?>
									<?php echo $value['selected'] ? $value['name'] : ''; ?>
								<?php } ?>
							</span>
						<?php } ?>
						<?php if ('select' === $group['group_type']) { ?>
							<div class="ce-product-variants__select">
								<select class="elementor-field elementor-field-textual elementor-size-<?php echo esc_attr($settings['select_size']); ?>" oninput="$(this.form[this.name]).val(this.value)"
									form="add-to-cart-or-refresh" name="group[<?php echo (int) $id_attr_group; ?>]" data-product-attribute="<?php echo (int) $id_attr_group; ?>">
								<?php foreach ($group['attributes'] as $id_attr => $group_attr) { ?>
									<option <?php echo $group_attr['selected'] ? 'selected' : ''; ?> value="<?php echo (int) $id_attr; ?>"><?php echo esc_html($group_attr['name']); ?></option>
								<?php } ?>
								</select>
							</div>
						<?php } elseif ('radio' === $group['group_type']) { ?>						
							<div class="ce-product-variants__options">
								<?php 									
									foreach ($group['attributes'] as $id_attr => $group_attr) {										
										$attributesList = $selected_color_id . '-' . $id_attr;										
										$isOutOfStock = isset($stockData[$attributesList]) && $stockData[$attributesList] === 0;
									?>
										<label class="ce-product-variants__radio-wrapper" aria-label="<?php echo esc_attr($group_attr['name']); ?>">
											<input class="ce-product-variants__radio" form="add-to-cart-or-refresh" type="radio" <?php echo $group_attr['selected'] ? 'checked' : ''; ?> name="group[<?php echo (int)$id_attr_group; ?>]" value="<?php echo (int)$id_attr; ?>" data-product-attribute="<?php echo (int)$id_attr_group; ?>">
											<span class="ce-product-variants__option <?php echo $isOutOfStock ? 'out-of-stock' : ''; ?>"><?php echo esc_html($group_attr['name']); ?></span>
										</label>
								<?php } ?>
							</div>						
						<?php } elseif ('color' === $group['group_type']) { ?>
							<div class="ce-product-variants__patterns">
							<?php foreach ($group['attributes'] as $id_attr => $group_attr) { ?>
								<label class="ce-product-variants__radio-wrapper" title="<?php echo esc_attr($group_attr['name']); ?>">
									<input class="ce-product-variants__radio" form="add-to-cart-or-refresh" type="radio" <?php echo $group_attr['selected'] ? 'checked' : ''; ?>
										name="group[<?php echo (int) $id_attr_group; ?>]" value="<?php echo (int) $id_attr; ?>" data-product-attribute="<?php echo (int) $id_attr_group; ?>">
								<?php if ($group_attr['html_color_code']) { ?>
									<span class="ce-product-variants__pattern ce-product-variants__color" style="background-color: <?php echo esc_attr($group_attr['html_color_code']); ?>"></span>
								<?php } elseif ($group_attr['texture']) { ?>
									<span class="ce-product-variants__pattern ce-product-variants__texture" style="background-image: url(<?php echo esc_attr($group_attr['texture']); ?>)"></span>
								<?php } ?>
								</label>
							<?php 
							
							if($group_attr['selected'] == 1) { $selected_color_id = $id_attr; }
							
							} ?>
							</div>
						<?php } ?>
					</div>
				<?php } ?>
			<?php } ?>
		</div>
		<?php
	}

Dans un premier temps, je récupère les valeurs des différentes déclinaisons :

// Récupérer les stocks réels des déclinaisons depuis le tableau $combinations
$combinations = &$context->smarty->tpl_vars['combinations']->value;
$stockData = [];

// Boucle pour afficher chaque combinaison avec la classe CSS appropriée
foreach ($combinations as $combination) {
  $attributesList = $combination['list'];
  $attributesListArray = explode(',', $attributesList);
  $combinedAttributes = implode('-', $attributesListArray);
  $stockData[$combinedAttributes] = $combination['quantity'];

  // Enlever les guillemets simples des clés du tableau $stockData
  $stockData = array_combine(array_map(function($key) {
  return str_replace("'", "", $key);
  }, array_keys($stockData)), $stockData);
}

Ensuite, j'initialise la variable "$selected_color_id" suivant le choix de l'internaute :

if($group_attr['selected'] == 1) { $selected_color_id = $id_attr; }

J'initialise ensuite la variable "$attributesList" en concaténant la valeur sélectionnée de l'attribut "color" et l'ID des valeurs de l'attribut "radio" :

$attributesList = $selected_color_id . '-' . $id_attr;

Puis, j'initialise la variable "$isOutOfStock" à true ou false, suivant si le stock de la déclinaison est à 0 ou non, afin d'appliquer une condition dans le span, dans le but de lui affecter une classe css "out-of-stock" :

$isOutOfStock = isset($stockData[$attributesList]) && $stockData[$attributesList] === 0;

<span class="ce-product-variants__option <?php echo $isOutOfStock ? 'out-of-stock' : ''; ?>"><?php echo esc_html($group_attr['name']); ?></span>

Et enfin, je stylise mon span avec du css :

selector .ce-product-variants .ce-product-variants__radio-wrapper span.ce-product-variants__option.out-of-stock {
  position: relative;
  overflow: hidden;
}
selector .ce-product-variants .ce-product-variants__radio-wrapper span.ce-product-variants__option.out-of-stock::before {
  content: "";
  display: block;
  position: absolute;
  top: 10px;
  left: 0;
  width: 150%;
  border-bottom: 1px solid #7a7a7a;
  transform: skewY(-45deg);
}

Le but final est de barrer les déclinaisons ayant un stock à 0, pour que l'internaute est une visibilité immédiate des déclinaisons disponibles.