novembre 2020 – devfrontend.info

[Magento 2] Rajouter des préfixes de civilités sous forme de boutons radio dans le formulaire de création de compte

27/11/2020 / admin

Attention: astuce fonctionnelle sur une version de Magento 2.4 Enterprise. Je crois que toute la partie attributs des customers n’est pas disponible en version Community Edition. Mais cette astuce pourrait très bien fonctionner avec les deux versions.

PHTML à modifier

Créer le fichier de surcharge app/design/frontend/MyVendor/mytheme/Magento_Customer/templates/widget/name.phtml pour remplacer l’élément Select par des boutons Radio:

<?php if ($prefix) : ?>
    <div class="field field-name-prefix<?= $block->isPrefixRequired() ? ' required' : '' ?>">
        <?php if ($block->getPrefixOptions() === false) : ?>
            <label class="label" for="<?= $block->escapeHtmlAttr($block->getFieldId('prefix')) ?>"><span><?= $block->escapeHtml($block->getStoreLabel('prefix')) ?></span></label>
        <?php endif; ?>

        <?php if ($block->getPrefixOptions() === false) : ?>
            <div class="control">
                <input type="text" id="<?= $block->escapeHtmlAttr($block->getFieldId('prefix')) ?>"
                       name="<?= $block->escapeHtmlAttr($block->getFieldName('prefix')) ?>"
                       value="<?= $block->escapeHtmlAttr($block->getObject()->getPrefix()) ?>"
                       title="<?= $block->escapeHtmlAttr($block->getStoreLabel('prefix')) ?>"
                       class="input-text <?= $block->escapeHtmlAttr($block->getAttributeValidationClass('prefix')) ?>" <?= $block->isPrefixRequired() ? ' data-validate="{required:true}"' : '' ?>>
            </div>
        <?php else : ?>
            <?php foreach ($block->getPrefixOptions() as $_option) : ?>
                <?php if (!$block->escapeHtml(__($_option) == " ")) : ?>
                    <div class="field choice">
                        <div class="control">
                            <input
                                type="radio"
                                name="<?= $block->escapeHtmlAttr($block->getFieldName('prefix')) ?>"
                                id="<?= $block->escapeHtmlAttr($block->getFieldName('prefix')) ?>[<?= $block->escapeHtmlAttr($_option) ?>]"
                                value="<?= $block->escapeHtml(__($_option)) ?>" 
                                <?php // S'assurer que le préfixe coché lors de l'inscription soit récupéré pour un affichage ultérieur ?>
                                <?php if ($option == $block->getObject()->getPrefix()) : ?>
                                    checked="checked" 
                                <?php endif; ?>
                                class="radio"/>
                            <label
                                class="label"
                                for="<?= $block->escapeHtmlAttr($block->getFieldName('prefix')) ?>[<?= $block->escapeHtmlAttr($_option) ?>]">
                                <span><?= $block->escapeHtml(__($_option)) ?></span>
                            </label>
                        </div>
                    </div>
                <?php endif; ?>
            <?php endforeach; ?>
        <?php endif; ?>
    </div>
<?php endif; ?>

<?php if ($prefix) : ?>

<div class="field field-name-prefix<?= $block->isPrefixRequired() ? ' required' : '' ?>">

<?php if ($block->getPrefixOptions() === false) : ?>

<label class="label" for="<?= $block->escapeHtmlAttr($block->getFieldId('prefix')) ?>"><span><?= $block->escapeHtml($block->getStoreLabel('prefix')) ?></span></label>

<?php endif; ?>

<?php if ($block->getPrefixOptions() === false) : ?>

<input type="text" id="<?= $block->escapeHtmlAttr($block->getFieldId('prefix')) ?>"

name="<?= $block->escapeHtmlAttr($block->getFieldName('prefix')) ?>"

value="<?= $block->escapeHtmlAttr($block->getObject()->getPrefix()) ?>"

title="<?= $block->escapeHtmlAttr($block->getStoreLabel('prefix')) ?>"

class="input-text <?= $block->escapeHtmlAttr($block->getAttributeValidationClass('prefix')) ?>" <?= $block->isPrefixRequired() ? ' data-validate="{required:true}"' : '' ?>>

</div>

<?php else : ?>

<?php foreach ($block->getPrefixOptions() as $_option) : ?>

<?php if (!$block->escapeHtml(__($_option) == " ")) : ?>

<input

type="radio"

name="<?= $block->escapeHtmlAttr($block->getFieldName('prefix')) ?>"

id="<?= $block->escapeHtmlAttr($block->getFieldName('prefix')) ?>[<?= $block->escapeHtmlAttr($_option) ?>]"

value="<?= $block->escapeHtml(__($_option)) ?>"

<?php // S'assurer que le préfixe coché lors de l'inscription soit récupéré pour un affichage ultérieur ?>

<?php if ($option == $block->getObject()->getPrefix()) : ?>

checked="checked"

<?php endif; ?>

class="radio"/>

<label

class="label"

for="<?= $block->escapeHtmlAttr($block->getFieldName('prefix')) ?>[<?= $block->escapeHtmlAttr($_option) ?>]">

<span><?= $block->escapeHtml(__($_option)) ?></span>

</label>

</div>

<?php endif; ?>

<?php endforeach; ?>

<?php endif; ?>

</div>

<?php endif; ?>

A savoir:

Sans ajouter le bout de code ci-dessous, l’information sur le préfixe coché lors de l’inscription ne sera PAS récupérée pour des affichages ultérieurs des préfixes dans les pages du site.

Par exemple, dans la page « Modifier les informations de mon compte », les boutons radio représentant les préfixes disponibles s’affichaient bien, mais celui qui avait été coché lors de l’inscription n’était pas coché!

<?php // S'assurer que le préfixe coché lors de l'inscription soit récupéré pour un affichage ultérieur ?>
<?php if ($option == $block->getObject()->getPrefix()) : ?>
    checked="checked" 
<?php endif; ?>

<?php // S'assurer que le préfixe coché lors de l'inscription soit récupéré pour un affichage ultérieur ?>

<?php if ($option == $block->getObject()->getPrefix()) : ?>

checked="checked"

<?php endif; ?>

Manipulations à effectuer en BO – Afficher les préfixes (Madame, Monsieur) dans le formulaire de création de compte

Se rendre dans STORES > Attributes > Customer
Dans la liste des attributs, sélectionner l’Attribute Code « prefix »
Scroller jusqu’au volet « Storefront Properties »
Passer le champ « Show on Storefront » à « Yes »
Cliquer sur le bouton orange « Save Attribute »

Se rendre ensuite dans STORES > Settings > Configuration
Passer le Scope au store voulu
Dans la navigation de gauche, aller dans CUSTOMERS > Customers Configuration
Ouvrir le volet « Name and Address Options »
Au niveau du champ « Prefix Dropdown Options », décocher la case « Use Defaults »
Dans le champ « Prefix Dropdown Options », saisir les préfixes séparés par des point-virgules (exemple: Madame;Mademoiselle;Monsieur)
Cliquer sur le bouton orange « Save Config »

Se rendre ensuite dans SYSTEM > Tools > Cache Management
Cocher les « Cache Type » « Configuration » et « Page Cache » (leur « Status » est normalement en « INVALIDATED »
Au niveau de la liste de sélection située en haut à gauche du tableau, sélectionner « Refresh » et cliquer sur le bouton gris « Submit »

[Javascript] Récupérer la largeur ou la hauteur d’un élément sans les padding, margin, bordure et scrollbar associés avec clientHeight, offsetHeight et parseFloat

24/11/2020 / admin

Sources:

Dégageage du padding avec `getComputedStyle`

Faire un console.log(computedStyle); vous donnera une liste de toutes les données récupérées via la méthode getComputedStyle et que vous pourrez exploiter ensuite.

var computedStyle = getComputedStyle(element);

elementHeight = element.clientHeight;  // height with padding
elementWidth = element.clientWidth;   // width with padding

elementHeight -= parseFloat(computedStyle.paddingTop) + parseFloat(computedStyle.paddingBottom);
elementWidth -= parseFloat(computedStyle.paddingLeft) + parseFloat(computedStyle.paddingRight);

var computedStyle = getComputedStyle(element);

elementHeight = element.clientHeight; // height with padding

elementWidth = element.clientWidth; // width with padding

elementHeight -= parseFloat(computedStyle.paddingTop) + parseFloat(computedStyle.paddingBottom);

elementWidth -= parseFloat(computedStyle.paddingLeft) + parseFloat(computedStyle.paddingRight);

Dans la pratique:

Je veux récupérer la hauteur du contenu de l’élément de DOM .page-leftColumn sans le padding:

    let $leftColumn = document.querySelector('.page-leftColumn'),
        computedStyle = getComputedStyle($leftColumn),
        leftColumnHeight = $leftColumn.clientHeight - (parseFloat(computedStyle.paddingTop) + parseFloat(computedStyle.paddingBottom));
    // console.log(leftColumnHeight);

let $leftColumn = document.querySelector('.page-leftColumn'),

computedStyle = getComputedStyle($leftColumn),

leftColumnHeight = $leftColumn.clientHeight - (parseFloat(computedStyle.paddingTop) + parseFloat(computedStyle.paddingBottom));

// console.log(leftColumnHeight);

Tenir compte de la scrollbar

Voir aussi ici pour ce bout de code modifié pour tenir compte de la scrollbar:

var cs = getComputedStyle(element);

var paddingX = parseFloat(cs.paddingLeft) + parseFloat(cs.paddingRight);
var paddingY = parseFloat(cs.paddingTop) + parseFloat(cs.paddingBottom);

var borderX = parseFloat(cs.borderLeftWidth) + parseFloat(cs.borderRightWidth);
var borderY = parseFloat(cs.borderTopWidth) + parseFloat(cs.borderBottomWidth);

// Element width and height minus padding and border
elementWidth = element.offsetWidth - paddingX - borderX;
elementHeight = element.offsetHeight - paddingY - borderY;

var cs = getComputedStyle(element);

var paddingX = parseFloat(cs.paddingLeft) + parseFloat(cs.paddingRight);

var paddingY = parseFloat(cs.paddingTop) + parseFloat(cs.paddingBottom);

var borderX = parseFloat(cs.borderLeftWidth) + parseFloat(cs.borderRightWidth);

var borderY = parseFloat(cs.borderTopWidth) + parseFloat(cs.borderBottomWidth);

// Element width and height minus padding and border

elementWidth = element.offsetWidth - paddingX - borderX;

elementHeight = element.offsetHeight - paddingY - borderY;

[CSS] Des effets de fonds de couleur avec séparateur oblique avec linear-gradient

18/11/2020 / admin

dégradé de fond avec effet d’oblique sur codepen.io

/* https://cssgradient.io/ */
background: linear-gradient(170deg, transparent 0%, transparent 15%, #020024 15.1%, #020024 100%);

1 2	/* https://cssgradient.io/ */ background: linear-gradient(170deg, transparent 0%, transparent 15%, #020024 15.1%, #020024 100%);

[Magento 2] Modifier les stocks directement depuis la base de données

05/11/2020 / admin

Source: Magento 2, Database Level Inventory Management. Version PDF pour la postérité: danjoseph.me-Magento 2 Database Level Inventory Management.

Retrouver un produit dans la table `cataloginventory_stock_item`

Utiliser la valeur de product_id qui est visible dans le DOM lorsque le produit est sélectionné, en tant que valeur d’un attribut value pour l’élément input name="selected_configurable_option".

Quelques notes:

La valeur de la clé is_in_stock dans la table cataloginventory_stock_item doit rester à 1 si vous souhaitez que la configuration de votre produit reste visible dans l’élément SELECT.

[Magento 2] Erreur Import failed: Invalid Base URL au app:config:import ou au setup:upgrade

04/11/2020 / admin

Si en tapant la commande: bin/magento app:config:import ou bin/magento setup:upgrade, vous rencontrez l’erreur suivante:

Import failed: Invalid Base URL. Value must be a URL or one of placeholders: {{base_url}}

1	Import failed: Invalid Base URL. Value must be a URL or one of placeholders: {{base_url}}

… c’est que vous avez quelque part dans un fichier de conf (app/etc/config.php ou app/etc/env.php) ou en base de données (dans la table core_config_data en général) une URL qui ne se termine pas par un caractère slash /.

En effet, les URLs dans les confs et la base de données Magento 2 doivent toutes obligatoirement se terminer par un slash!

Erreur documentée ici sur le site d’Alan Storm: Invalid Base URL. Value must be a URL or one of placeholders: {{base_url}} mais aussi dans certains fils de discussion comme celui-ci sur magento.stackexchange.com.

Note: ça ne me paraît pas logique, mais j’ai eu à nouveau le message d’erreur Import failed: Invalid Base URL. Value must be a URL or one of placeholders: {{base_url}} même après avoir modifié la valeur de la clé base_url dans la table core_config_data pour ajouter un caractère slash à la fin de l’URL et après avoir réussi à accéder à mon front-office une première fois.
J’ai alors fait un dump de ma config via la commande bin/magento app:config:dump (ATTENTION: cette commande écrase le fichier app/etc/config.php existant sans en faire une copie de sauvegarde au préalable!), puis rafraîchi immédiatement mon front. Il s’est affiché.

devfrontend.info

Le bloc-notes professionnel d'un développeur front-end senior

Articles récents

Catégories

Archives

Méta

Monthnovembre 2020

[Magento 2] Rajouter des préfixes de civilités sous forme de boutons radio dans le formulaire de création de compte

PHTML à modifier

A savoir:

Manipulations à effectuer en BO – Afficher les préfixes (Madame, Monsieur) dans le formulaire de création de compte

[Javascript] Récupérer la largeur ou la hauteur d’un élément sans les padding, margin, bordure et scrollbar associés avec clientHeight, offsetHeight et parseFloat

Dégageage du padding avec `getComputedStyle`

Dans la pratique:

Tenir compte de la scrollbar

[CSS] Des effets de fonds de couleur avec séparateur oblique avec linear-gradient

[Magento 2] Modifier les stocks directement depuis la base de données

Retrouver un produit dans la table `cataloginventory_stock_item`

Quelques notes:

[Magento 2] Erreur Import failed: Invalid Base URL au app:config:import ou au setup:upgrade

devfrontend.info

Le bloc-notes professionnel d'un développeur front-end senior

Articles récents

Catégories

Tags

Archives

Méta

Monthnovembre 2020

[Magento 2] Rajouter des préfixes de civilités sous forme de boutons radio dans le formulaire de création de compte

PHTML à modifier

A savoir:

Manipulations à effectuer en BO – Afficher les préfixes (Madame, Monsieur) dans le formulaire de création de compte

[Javascript] Récupérer la largeur ou la hauteur d’un élément sans les padding, margin, bordure et scrollbar associés avec clientHeight, offsetHeight et parseFloat

Dégageage du padding avec getComputedStyle

Dans la pratique:

Tenir compte de la scrollbar

[CSS] Des effets de fonds de couleur avec séparateur oblique avec linear-gradient

[Magento 2] Modifier les stocks directement depuis la base de données

Retrouver un produit dans la table cataloginventory_stock_item

Quelques notes:

[Magento 2] Erreur Import failed: Invalid Base URL au app:config:import ou au setup:upgrade

Dégageage du padding avec `getComputedStyle`

Retrouver un produit dans la table `cataloginventory_stock_item`