Le bloc-notes professionnel d'un développeur front-end senior
Depuis la fiche produit d’un produit configurable, afficher la source (crtl + u) et effectuer une recherche sur Magento_Swatches/js/swatch-renderer": {.
ATTENTION: c’est la première occurence qui sera retournée qui est la bonne, à moins que vous ne cherchiez un product ID spécifique. A ce moment là, votre recherche peut se faire sur le modèle "[data-role=swatch-option-XXXX]" où XXXX correspond au product ID.
Le JSON récupéré peut ensuite être affiché joliment.
Dans la fonction suivante, je souhaite rajouter en else la possibilité d’afficher la placeholder image rendue disponible par Magento 2 si l’utilisateur admin backoffice n’a pas uploadé d’image spécifique.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 |
/** * Get Page Url * * @return string * @throws \Magento\Framework\Exception\NoSuchEntityException */ public function getPageImageUrl() { /** @var \Magento\Framework\DataObject $item */ $item = $this->getItem(); if ($item) { if (!empty($item->getData('image_url'))) { /** @var \Magento\Store\Model\Store $store */ $store = $this->_storeManager->getStore(); return $store->getBaseUrl(\Magento\Framework\UrlInterface::URL_TYPE_MEDIA) . $item->getData('image_url'); } } return ''; } |
Tout d’abord, juste après la déclaration class myClassName extends…, déclarer le Helper Image et sa variable $imageHelper:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 |
/** * Class myClassName * * @package Blurrrblll\MainSearch\Block\ItemRenderer */ class myClassName extends \Magento\Framework\View\Element\Template implements \Blurrrblll\MainSearch\Api\ItemRendererInterface { [...] /** * @var \Magento\Catalog\Helper\Image */ protected $imageHelper; |
NOTE: dans mon cas (un peu particulier), une protected function _construct(): void existe déjà dans le block. Il ne faut pas chercher à la modifier!
|
1 2 3 4 5 6 7 8 9 |
/** * Initialize block * @return void */ protected function _construct(): void { parent::_construct(); $this->setTemplate('Blurrrblll_MainSearch::item_renderer/page.phtml'); } |
Au lieu de ça, dans notre code et juste en-dessous ce premier contructeur, on crée une nouvelle extension de public function __construct sur le modèle de la fonction _construct tout droit issue de vendor/magento/framework/View/Element/Template.php et on y ajoute le image helper:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 |
/** * Constructor * * @param \Magento\Catalog\Helper\Image $imageHelper * @param \Magento\Framework\View\Element\Template\Context $context * @param array $data */ public function __construct( \Magento\Catalog\Helper\Image $imageHelper, \Magento\Framework\View\Element\Template\Context $context, array $data = [] ) { $this->imageHelper = $imageHelper; parent::__construct($context, $data); } |
NOTE: \Template\Context $context devient \Magento\Framework\View\Element\Template\Context $context pour l’occasion.
Puis compléter la fonction de départ avec un else qui retourne l’image placeholder:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 |
/** * Get Page Url * * @return string * @throws \Magento\Framework\Exception\NoSuchEntityException */ public function getPageImageUrl() { /** @var \Magento\Framework\DataObject $item */ $item = $this->getItem(); if ($item) { if (!empty($item->getData('image_url'))) { /** @var \Magento\Store\Model\Store $store */ $store = $this->_storeManager->getStore(); return $store->getBaseUrl(\Magento\Framework\UrlInterface::URL_TYPE_MEDIA) . $item->getData('image_url'); } else { // Display default placeholder if no image is defined return $this->imageHelper->getDefaultPlaceholderUrl('image'); } } return ''; } |
Cette manip’ donnera le même résultat que si on mettait en place le code suivant la le fichier template PHTML chargé d’afficher les images ou, à défaut, le placeholder. On est cependant plus efficace en renvoyant directement l’image adéquate via le block PHP. Donc, le code ci-dessous est présent juste à titre informatif mais éviter de l’utiliser dans la mesure du possible (on voit qu’on utilise, comme argument de la condition, la même méthode empty() que dans le block PHP):
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 |
<?php /** @var \Magento\Framework\DataObject $item */ $item = $block->getItem(); /** @var \Magento\Catalog\Helper\Image $imageHelper */ $imageHelper = $this->helper(\Magento\Catalog\Helper\Image::class); $imageUrl = $block->escapeUrl($block->getPageImageUrl()); $placeholderImageUrl = $imageHelper->getDefaultPlaceholderUrl('image'); ?> <?php if ($item) : ?> <li class="search-item search-item-page follow-url"<?= (string) $item->getData('localization'); ?>> <div class="search-item-image"> <picture> <?php if (!empty($imageUrl)) : ?> <img src="<?= (string) $imageUrl ?>" alt="<?= $block->escapeHtmlAttr(__('Article') . ' - ' . $block->stripTags($item->getData('name'))) ?>"/> <?php else : ?> <img src="<?= (string) $placeholderImageUrl ?>" alt="<?= $block->escapeHtmlAttr(__('Article') . ' - ' . $block->stripTags($item->getData('name'))) ?>"/> <?php endif; ?> </picture> </div> |
(Exemple pour dans un fichier PHTML)
|
1 |
<?= (string) __('Auch empfehlen wir Ihnen <a href="%1" class="pm-font-bold" target="_blank">unsere FAQs</a> und <a href="%2" class="pm-font-bold" target="_blank">das Glossar</a>.', $block->getUrl(null, ['_direct' => 'customer-service/faq']), $block->getUrl(null, ['_direct' => 'customer-service/glossary']));?> |
(Exemple pour dans un fichier PHTML)
|
1 |
<?= (string) __('unter: +00 0000 00 000 0000, oder schriftlich via: <a href="%1" class="pm-font-bold" target="_blank">john@doe.com</a>.', 'mailto:john@doe.com');?> |
Dans mon exemple, j’ai trois containers <div class="payment-method" /> qui sont présents dans le DOM. Chacun de ces containers possède son propre bouton. Je cherche à ajouter un seul nouveau bouton dans chaque container qui n’est pas tout-à-fait un clone de celui qui existe déjà, mais qui en reprend le code HTML enfant.
Problème: avec le code ci-dessous, les trois boutons que j’ajoute sont créés une fois dans chaque container. En d’autres termes, je me retrouve avec quatre boutons (au lieu de deux) dans chaque container.
|
1 2 3 4 5 6 7 |
$(".payment-method").each(function(e) { let $this = $(this); let placeOrderBtn = $("button.checkout", $this); let placeOrderBtnHtml = placeOrderBtn.html(); $('<div class="primary"><button class="action primary">' + placeOrderBtnHtml + '</button></div>').appendTo('.actions-toolbar', $this); }); |
Solution: le souci provient d’une mauvaise utilisation de $(this) en combinaison de .each(). Ci-dessous le code qui me donne le résultat attendu:
|
1 2 3 4 5 6 7 8 |
$(".payment-method").each(function(index, element) { let $this = $(this); let placeOrderBtn = $this.find("button.checkout"); let placeOrderBtnHtml = placeOrderBtn.html(); let actionsToolbar = $this.find('.actions-toolbar'); $('<div class="primary"><button class="action secondary" type="button">' + placeOrderBtnHtml + '</button></div>').appendTo(actionsToolbar); }); |
Dans STORES > Configuration > SALES > Google API > Google Analytics. Mettre enable à « Yes ».
Ne pas oublier de mettre le Container Id dans le champ prévu à cet effet.