devfrontend.info

[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é.

[Magento 2] Créer un compte administrateur à la main

29/10/2020 / admin

Aller dans la table admin_user et supprimer tous les comptes admin dont vous n’avez pas l’usage

Exécuter la commande: $ n98-magerun2 admin:user:create et répondre aux questions posées

Aller dans la table admin_passwords. Le mot de passe du compte que nous venos de créer via la ligne de commande va expirer rapidement. Pour éviter cela, localiser la ligne relative à ce compte et la supprimer.

[Magento 2] Eviter la redirection automatique de mon instance locale vers la prod lorsque j’affiche une page dans mon navigateur

29/10/2020 / admin

Pour le frontoffice

Dans la table core_config_data, faire une recherche sur l’URL vers laquelle vous êtes redirigé et remplacer toutes les occurrences (au moins les « unsecure » qui sont préfixées par http) par votre URL locale.

Pour le backoffice

Dans la table core_config_data, rechercher (n’importe où) | LIKE %% | url.

Vérifier que la ligne contenant le path admin/url/use_custom est à 0.

Ensuite, pour toutes les lignes où l’URL déclarée dans la colonne value est celle du domaine vers lequel on est redirigé, remplacer toutes les occurrences par votre URL locale.

Pour finir, exécuter la commande $ php bin/magento ca:cl config.

[Magento 2] Etendre un mixin existant

26/10/2020 / admin

how to add methods to a javascript file by using mixins?. L’OP utilise un plug-in Amasty qui étend déjà du code standard via un mixin. Il souhaite ajouter des méthodes en étendant le mixin existant par un nouveau mixin.

Magento 2 DevDocs – JS Mixins

Etendre une extension de widget existante dans Magento 2 n’est pas possible. Il faut obligatoirement surcharger l’extension existante en déclarant l’extension initiale à false dans le fichier requirejs-config.js du module (pouvant être différent) qui contient la nouvelle extension:

var config = { config: { mixins: { 'Magento_Checkout/js/view/shipping': { 'Vendor_Module/js/new-widgetextension': true, 'Vendor_Module/js/alreadyexisting-widgetextension': false } } } };

1
2
3
4
5
6
7
8
9
10

var config = {
    config: {
        mixins: {
            'Magento_Checkout/js/view/shipping': {
                'Vendor_Module/js/new-widgetextension': true,
                'Vendor_Module/js/alreadyexisting-widgetextension': false
            }
        }
    }
};

Notes:

la bonne pratique consiste à placer les extensions de widgets dans des modules (app/code/...) plutôt que dans un thème.

[Magento 2] Authentication required (repo.magento.com) lors d’un composer install

21/10/2020 / admin

Attention: Il faut avoir un compte sur marketplace.magento.com.

En cherchant dans votre profil sur marketplace.magento.com

Récupérer le login (clé publique) et le mot de passe (clé privée) sous My Profile > My Products > Access Keys. Il sera peut-être nécessaire de générer une paire de clé.

Le Username demandé correspond à la clé publique. Le Password demandé correspond à la clé privée. Et PAS aux username et password de votre compte marketplace.magento.com!

En cherchant dans le fichier auth.json de Composer:

Aller tout à la racine de sa machine (dossier parent de « /home ») et taper:

sudo find . -name "auth.json"

1

sudo find . -name "auth.json"

Le résultat devrait vous afficher une ligne de ce type:

./home/intlangf/.composer/auth.json

1

./home/intlangf/.composer/auth.json

Faites:

cat ./home/intlangf/.composer/auth.json

1

cat ./home/intlangf/.composer/auth.json

Le fichier vous révèle les Username et Password pour repo.magento.com.

La procédure d’install va ensuite vous demander:

Do you want to store credentials for repo.magento.com in /root/.composer/auth.json ?

Si vous être sur votre machine, répondez: Y. Dans un container, répondez: n.

[Magento 2] Utilisation de before et after sur les containers dans les layout xml

13/10/2020 / admin

Doc officielle: Layout instructions

Le truc à retenir est que les attributs before et after applicables sur les balises container et block des layouts XML de Magento 2 ont BESOIN d’un contexte pour fonctionner. Exemple:

Pas bon:

L’attribut before ne fonctionnera PAS! Votre block cart.product.slider ne s’affichera pas ou s’affichera au mauvais endroit (ou au bon endroit sur un malentendu… jusqu’à la prochaine modification de layout que vous effectuerez).

<?xml version="1.0"?> <page xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" layout="1column" xsi:noNamespaceSchemaLocation="urn:magento:framework:View/Layout/etc/page_configuration.xsd"> <update handle="checkout_cart_item_renderers"/> <body> <container name="cart.product.slider.container" htmlTag="div" htmlClass="page-bottom" before="page.bottom.container"> <block class="Magento\Cms\Block\Block" name="cart.product.slider"> <arguments> <argument name="block_id" xsi:type="string">cart-product-slider</argument> </arguments> </block> </container> </body> </page>

1
2
3
4
5
6
7
8
9
10
11
12
13

<?xml version="1.0"?>
<page xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" layout="1column" xsi:noNamespaceSchemaLocation="urn:magento:framework:View/Layout/etc/page_configuration.xsd">
    <update handle="checkout_cart_item_renderers"/>
    <body>
            <container name="cart.product.slider.container" htmlTag="div" htmlClass="page-bottom" before="page.bottom.container">
                <block class="Magento\Cms\Block\Block" name="cart.product.slider">
                    <arguments>
                        <argument name="block_id" xsi:type="string">cart-product-slider</argument>
                    </arguments>
                </block>
            </container>
    </body>
</page>

Bon:

L’attribut before fonctionnera!

<?xml version="1.0"?> <page xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" layout="1column" xsi:noNamespaceSchemaLocation="urn:magento:framework:View/Layout/etc/page_configuration.xsd"> <update handle="checkout_cart_item_renderers"/> <body> <referenceContainer name="content"> <container name="cart.product.slider.container" htmlTag="div" htmlClass="page-bottom" before="page.bottom.container"> <block class="Magento\Cms\Block\Block" name="cart.product.slider"> <arguments> <argument name="block_id" xsi:type="string">cart-product-slider</argument> </arguments> </block> </container> </referenceContainer> </body> </page>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

<?xml version="1.0"?>
<page xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" layout="1column" xsi:noNamespaceSchemaLocation="urn:magento:framework:View/Layout/etc/page_configuration.xsd">
    <update handle="checkout_cart_item_renderers"/>
    <body>
        <referenceContainer name="content">
            <container name="cart.product.slider.container" htmlTag="div" htmlClass="page-bottom" before="page.bottom.container">
                <block class="Magento\Cms\Block\Block" name="cart.product.slider">
                    <arguments>
                        <argument name="block_id" xsi:type="string">cart-product-slider</argument>
                    </arguments>
                </block>
            </container>
        </referenceContainer>
    </body>
</page>

Vous avez saisi la différence entre les deux samples de code ci-dessus?

La ligne <referenceContainer name="content"> précise un contexte, une parenté. Les containers cart.product.slider.container et page.bottom.container sont des enfants directs du container content.

[Magento 2] Ajouter une mise à jour de layout pour une page CMS (custom layout update)

08/10/2020 / admin

Testé fonctionnel Magento 2.3.4 et 2.4.0.

Documentation officielle Magento 2: Create cms-page/product/category-specific layouts

Tutoriel Amasty: How to add the Custom Layout Update on Magento 2.3.4?

Pour une page CMS:

Dans le code source du projet:

Le fichier à utiliser comme modèle est le suivant: vendor/magento/module-cms/view/frontend/layout/cms_page_view.xml.

Pour une page CMS, créer un fichier app/design/frontend/Vendor/theme/Magento_Cms/layout/cms_page_view_selectable_<clé d'URL>_<libellé de votre layout update tel qu'il apparaît dans le champ en BO>.xml.

Exemple: pour une page CMS dont la clé d’URL est « test-karine » (en front: https://agriculture-vitalconcept-prod.sodicloud.fr/test-karine):

Si une page avec la même clé d’URL existe sur tous vos stores: app/design/frontend/Vital/vital/Magento_Cms/layout/cms_page_view_selectable_test-karine_TestKarine.xml.

Si la page n’existe que sur un store en particulier (agriculture dans mon exemple): app/design/frontend/Vital/agriculture/Magento_Cms/layout/cms_page_view_selectable_test-karine_TestKarine.xml.

<?xml version="1.0"?> <page xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:framework:View/Layout/etc/page_configuration.xsd"> <body> <referenceContainer name="sidebar.main">  <referenceBlock name="catalog.compare.sidebar" remove="true"/>  <referenceBlock name="wishlist_sidebar" remove="true" /> <referenceBlock name="multiple-wishlist_sidebar" remove="true" />  <block class="Magento\Cms\Block\Block" name="block.karine"> <arguments> <argument name="block_id" xsi:type="string">block-karine</argument> </arguments> </block> </referenceContainer> <referenceContainer name="sidebar.additional"> </referenceContainer> <referenceContainer name="content"> <referenceBlock name="cms_page"/> </referenceContainer> </body> </page>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26

<?xml version="1.0"?>
<page xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:framework:View/Layout/etc/page_configuration.xsd">
    <body>
        <referenceContainer name="sidebar.main">
            
            <referenceBlock name="catalog.compare.sidebar" remove="true"/>
            
            <referenceBlock name="wishlist_sidebar" remove="true" />
            <referenceBlock name="multiple-wishlist_sidebar" remove="true" />

            
            <block class="Magento\Cms\Block\Block" name="block.karine">
                <arguments>
                    <argument name="block_id" xsi:type="string">block-karine</argument>
                </arguments>
            </block>
        </referenceContainer>

        <referenceContainer name="sidebar.additional">
        </referenceContainer>

        <referenceContainer name="content">
            <referenceBlock name="cms_page"/>
        </referenceContainer>
    </body>
</page>

Depuis le BO:

Créer une page (dans mon exemple, dont la clé d’URL est « test-karine »)

Dans le détail de cette page, dans le volet Design, champ custom layout update, on sélectionne « TestKarine »

Pour personnaliser le contenu de la sidebar, créer un block (dans mon exemple, dont l’identifier est « block-karine »)

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

Articles récents

Catégories

Archives

Méta

[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

[Magento 2] Créer un compte administrateur à la main

[Magento 2] Eviter la redirection automatique de mon instance locale vers la prod lorsque j’affiche une page dans mon navigateur

Pour le frontoffice

Pour le backoffice

[Magento 2] Etendre un mixin existant

[Magento 2] Authentication required (repo.magento.com) lors d’un composer install

En cherchant dans votre profil sur marketplace.magento.com

En cherchant dans le fichier `auth.json` de Composer:

[Magento 2] Utilisation de before et after sur les containers dans les layout xml

Pas bon:

Bon:

Vous avez saisi la différence entre les deux samples de code ci-dessus?

[Magento 2] Ajouter une mise à jour de layout pour une page CMS (custom layout update)

Pour une page CMS:

Dans le code source du projet:

Depuis le BO:

Créer une page (dans mon exemple, dont la clé d’URL est « test-karine »)

Dans le détail de cette page, dans le volet Design, champ custom layout update, on sélectionne « TestKarine »

Pour personnaliser le contenu de la sidebar, créer un block (dans mon exemple, dont l’identifier est « block-karine »)

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

Articles récents

Catégories

Tags

Archives

Méta

Dégageage du padding avec getComputedStyle

Dans la pratique:

Tenir compte de la scrollbar

Retrouver un produit dans la table cataloginventory_stock_item

Quelques notes:

Pour le frontoffice

Pour le backoffice

En cherchant dans votre profil sur marketplace.magento.com

En cherchant dans le fichier auth.json de Composer:

Pas bon:

Bon:

Vous avez saisi la différence entre les deux samples de code ci-dessus?

Pour une page CMS:

Dans le code source du projet:

Depuis le BO:

Créer une page (dans mon exemple, dont la clé d’URL est « test-karine »)

Dans le détail de cette page, dans le volet Design, champ custom layout update, on sélectionne « TestKarine »

Pour personnaliser le contenu de la sidebar, créer un block (dans mon exemple, dont l’identifier est « block-karine »)

Dégageage du padding avec `getComputedStyle`

Retrouver un produit dans la table `cataloginventory_stock_item`

En cherchant dans le fichier `auth.json` de Composer: