Étiquette : html

[Magento 2] Exploiter l’Escaper dans les fichiers PHTML et HTML utilisant Knockout JS (extension Page Builder) pour maintenir certaines balises dans du contenu HTML

16/12/2022 / admin

Escaper dans les templates PHTML

Magento 2 supprime de manière radicale toutes les balises HTML que vous pourriez renseigner dans des champs du BO. Dans notre exemple, le champ à renseigner affiche un titre en front et si on renseigne ceci: 50<sup>th</sup> Anniversary, l’élément <sup> est automatiquement supprimé.

Pour éviter ceci, on peut déclarer⁽¹⁾ et exploiter l’Escaper dans les fichiers PHTML en listant dans un tableau⁽²⁾ l’ensemble des balises HTML à conserver:

/** @var \Magento\Framework\Escaper $escaper */

1	/** @var \Magento\Framework\Escaper $escaper */

<h1><?= $escaper->escapeHtml($story->getName(), ['sup']); ?></h1>

1	<h1><?= $escaper->escapeHtml($story->getName(), ['sup']); ?></h1>

Valable également en cas d’utilisation d’une clé de traduction (fichiers CSV):

"Related news & stories","Related<sup>TH</sup> news & stories"

1	"Related news & stories","Related<sup>TH</sup> news & stories"

<?= $escaper->escapeHtml(__('Related news & stories'), ['sup']) ?>

1	<?= $escaper->escapeHtml(__('Related news & stories'), ['sup']) ?>

Extension Page Builder de Magento 2 (payante)

Documentation officielle du Page Builder Adobe Commerce (ex Magento 2).

Knockout JS dans les fichiers HTML

C’est en fait dans un fichier title-tag-escaper.js qu’on liste les tags HTML à ne pas échapper:

/**
 * Strip html tags except strong|em|span|br|sup
 *
 * @param {string} name
 * @param {Object} data
 * @returns {string}
 */
;

_proto.toDom = function toDom(name, data) {
    var input = ((0, _object.get)(data, name));
    return this.stripTags(input, '<strong><em><span><br><sup>');
};

/**

* Strip html tags except strong|em|span|br|sup

* @param {string} name

* @param {Object} data

* @returns {string}

;

_proto.toDom = function toDom(name, data) {

var input = ((0, _object.get)(data, name));

return this.stripTags(input, '<strong><em><span><br><sup>');

};

Configuration d’un module dans un fichier XML

Dans app/code/MyVendor/PageBuilder/view/adminhtml/pagebuilder/content_type/module_XX, afin que la liste des balises autorisées soit prise en compte il faut ajouter un attribut converter pour l’élément (le champ du formulaire d’édition en BO) ciblé:

<config xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:module:Magento_PageBuilder:etc/content_type.xsd">
    <type name="module_21"
          label="Text"
          menu_section="add_content"
          component="Magento_PageBuilder/js/content-type"
          preview_component="MyVendor_PageBuilder/js/content-type/module-21/preview"
          master_component="Magento_PageBuilder/js/content-type/master-collection"
          form="pagebuilder_module_21_form"
          icon="icon-pagebuilder-module-21"
          sortOrder="21"
          translate="label">
        <parents default_policy="deny">
            <parent name="root-container" policy="allow"/>
            <parent name="row" policy="allow"/>
        </parents>
        <children default_policy="deny"/>
        <appearances>
            <appearance name="theme_01"
                        default="true"
                        preview_template="MyVendor_PageBuilder/content-type/module-21/theme-01/preview"
                        master_template="MyVendor_PageBuilder/content-type/module-21/theme-01/master"
                        reader="Magento_PageBuilder/js/master-format/read/configurable">
                <elements>
                    <element name="title">
                        <html name="title" converter="MyVendor_PageBuilder/js/converter/html/title-tag-escaper"/>
                        <attribute name="title_italic" source="data-italic"/>
                        <attribute name="title_tag" source="data-tag"/>
                    </element>

<type name="module_21"

label="Text"

menu_section="add_content"

component="Magento_PageBuilder/js/content-type"

preview_component="MyVendor_PageBuilder/js/content-type/module-21/preview"

master_component="Magento_PageBuilder/js/content-type/master-collection"

form="pagebuilder_module_21_form"

icon="icon-pagebuilder-module-21"

sortOrder="21"

translate="label">

</parents>

<appearance name="theme_01"

default="true"

preview_template="MyVendor_PageBuilder/content-type/module-21/theme-01/preview"

master_template="MyVendor_PageBuilder/content-type/module-21/theme-01/master"

reader="Magento_PageBuilder/js/master-format/read/configurable">

</element>

[Magento 2] Utiliser le binding Foreach de Knockout JS pour splitter un tableau en autant d’items que le nombre qu’il contient dans un fichier html

12/05/2022 / admin

Sources:

Exemple pour splitter un tableau contenant une adresse postale sur trois lignes:

Extrait du fichier: app/design/frontend/Vendor/theme/Magento_Checkout/web/js/view/address-renderer-mixin.js

/**
 * @return {string}
 */
formatStreet: function (str) {
    return String(str).replace(/,(?=[^\s])/g, ", ");
},

/**

* @return {string}

formatStreet: function (str) {

return String(str).replace(/,(?=[^\s])/g, ", ");

Extrait du fichier: app/design/frontend/Vendor/theme/Magento_Checkout/web/template/shipping-information/address-renderer/default.html

<text args="formatStreet(address().street)"></text>

1	<text args="formatStreet(address().street)"></text>

Résultat en front:
Street 1,Street 2,Street 3

<each args="data: address().street, as: 'streetLine'">
    <text args="streetLine"></text>
    <br>
</each>

<br>

</each>

Résultat en front:
Street 1
Street 2
Street 3

[Webpack Encore] Générer des fichiers HTML à partir de templates Twig

18/05/2021 / admin

Testé fonctionnel Webpack Encore v1.1.2 (tournant sous Webpack v5.34.0). Source principale: TWIG + WEBPACK sur dgrigg.com (version PDF).

Les fichiers assets source à placer à la racine de votre projet (Pimcore dans mon cas).

Exécuter les commandes de récupération et de sauvegarde des paquets twig-html-loader et html-webpack-plugin:

yarn add twig-html-loader --save
yarn add html-webpack-plugin --save
yarn add fs --save

yarn add twig-html-loader --save

yarn add html-webpack-plugin --save

yarn add fs --save

webpack.config.js:

const Encore = require('@symfony/webpack-encore');
[...]
const HtmlWebpackPlugin = require('html-webpack-plugin');
const fs = require('fs');

const Encore = require('@symfony/webpack-encore');

[...]

const HtmlWebpackPlugin = require('html-webpack-plugin');

const fs = require('fs');

// create a list of twig files to generate
// filter out anything that starts with an underscore or is not a twig file
function walk(dir) {
    let results = [];
    const list = fs.readdirSync(dir);
    list.forEach(file => {
        file = `${dir}/${file}`;
        const stat = fs.statSync(file);
        if (stat && stat.isDirectory() && path.basename(file).indexOf('_') !== 0) {
            /* Recurse into a subdirectory */
            results = results.concat(walk(file));
        } else if (
            stat &&
            !stat.isDirectory() &&
            path.extname(file) === '.twig' &&
            path.basename(file).indexOf('_') !== 0
        ) {
            /* Is a file */
            results.push(file);
        }
    });
    return results;
}

//start looking in the main twig folder
const files = walk('./assets/twig');

// generate html plugins to export
const htmlPlugins = files.map(
    file =>
        // Create new HTMLWebpackPlugin with options
        Encore.addPlugin(new HtmlWebpackPlugin({
            filename: '../html/' + file.replace('./assets/twig/', '').replace('.twig', '.html'),
            template: path.resolve(__dirname, file),
            publicPath: '../build/',
            hash: true,
        }))
);

// create a list of twig files to generate

// filter out anything that starts with an underscore or is not a twig file

function walk(dir) {

let results = [];

const list = fs.readdirSync(dir);

list.forEach(file => {

file = `${dir}/${file}`;

const stat = fs.statSync(file);

if (stat && stat.isDirectory() && path.basename(file).indexOf('_') !== 0) {

/* Recurse into a subdirectory */

results = results.concat(walk(file));

} else if (

stat &&

!stat.isDirectory() &&

path.extname(file) === '.twig' &&

path.basename(file).indexOf('_') !== 0

) {

/* Is a file */

results.push(file);

}

});

return results;

}

//start looking in the main twig folder

const files = walk('./assets/twig');

// generate html plugins to export

const htmlPlugins = files.map(

file =>

// Create new HTMLWebpackPlugin with options

Encore.addPlugin(new HtmlWebpackPlugin({

filename: '../html/' + file.replace('./assets/twig/', '').replace('.twig', '.html'),

template: path.resolve(__dirname, file),

publicPath: '../build/',

hash: true,

}))

);

Encore
[...]
    .addLoader({
        test: /\.twig$/,
        type: 'asset/source',
        loader: 'twig-html-loader'
    })
;

Encore

[...]

.addLoader({

test: /\.twig$/,

type: 'asset/source',

loader: 'twig-html-loader'

})

;

Résultat:

Fichiers source:

Fichiers destination:

[HTML] Exploiter les microformats pour baliser une zone de contact (h-card) de la manière la plus sémantique possible

29/09/2020 / admin

Ressources officielles sur les Microformats et outils de test en ligne

Page Wiki d’accueil des microformats 2 (documentation officielle) – mise à jour le 18 juillet 2020
h-card is a simple, open format for publishing people and organisations on the web. et h-card examples in the wild – mise à jour le 20 août 2020
Outil de test des données structurées de Google
Microformats Parser (PHP) 0.4.6 – Pour tester la pertinence de votre code balisé avec les Microformats (retourne un objet JSON)

Demo

La démo comprend la sématique HTML et les microformats pour une société qui possède plusieurs agences réparties dans plusieurs villes.

Demo CodePen.io

[HTML] Le positionnement d’un contenu ancré est décalé à l’écran par rapport à l’emplacement où est placé l’ancre dans le code source de la page.

08/04/2019 / admin

Source: Anchor link landing in wrong position.

Code qui pose problème:

<a name="sponsors"></a>
    <div class="sponsors">
        <div class="sponsors-left">
            <h2>Sponsors</h2>
                <p>Support the lovely folks who support us! Visit their websites, join their mailing lists and peruse their wares. They are all highly-deserving of your custom, and we're thrilled to have each and everyone one of them on-board!</p>
            </div>

<h2>Sponsors</h2>

<p>Support the lovely folks who support us! Visit their websites, join their mailing lists and peruse their wares. They are all highly-deserving of your custom, and we're thrilled to have each and everyone one of them on-board!</p>

</div>

Suggestion de correction:

I think the problem is resulting from the anchors with no contents that you are using.

Also, it appears that name= has been deprecated in favor of id= as a fragment identifier in certain elements (including A) which makes a kind of sense as ID attributes are unique whereas NAME attributes are not so guaranteed.

I’d try sticking the fragment identifier in the actual renderable entity such as:

<h2 id="sponsors">Sponsors</h2>

1

<h2 id="sponsors">Sponsors</h2>

and see where that gets you. Incidentally, it looks like a good conference, I hope you get a comp admission.

Réponse de l’OP:

Aha! Got it, worked a charm, thanks mate. Incidentally – I’m one of the conference organiser, no web dev! So not only will I be at the conference, but also drinking whiskey with the speakers 🙂

[CSS] Des images responsive dans un tableau HTML ou dans un container en display: table-cell;

24/03/2017 / admin

table

nada …

display: table-cell;

ATTENTION: sous IE10, IE11, dans le cadre d’une mise en page Responsive et si vous utilisez des images, il est possible que le redimensionnement homothétique de celles-ci soit mal géré. Vous pouvez ajouter ce style pour corriger le problème :

.votre-faux-tableau .votre-fausse-cellule img { width: 99.99%; }

1	.votre-faux-tableau .votre-fausse-cellule img { width: 99.99%; }

Source: Responsive Images in display: table-cell – A PEN BY Matt Stow.
Voir également: Why do Firefox and Opera ignore max-width inside of display: table-cell?.

<p>Normal "responsive" image</p>
<img src="http://placehold.it/650x150" />

<p>Image in a display: table-cell</p>
<div class="cell"><img src="http://placehold.it/650x150" /></div>

<p>Image in a display: table-cell with width: 100%</p>
<div class="cell"><img src="http://placehold.it/650x150" class="cell-fluid" /></div>

<p>Normal "responsive" image</p>

<p>Image in a display: table-cell</p>

<p>Image in a display: table-cell with width: 100%</p>

img {
  height: auto;
  max-width: 100%;
}

.cell {
  display: table-cell;
}

.cell-fluid {
  width: 100%;
}

img {

height: auto;

max-width: 100%;

}

.cell {

display: table-cell;

}

.cell-fluid {

width: 100%;

}

[Magento] Formulaires : anatomie de l’ossature HTML et taxonomie des classes CSS standard

10/02/2015 / admin

Simulation : http://jsfiddle.net/frontenddeveloper/d205ar7j/10/ (toujours vérifier la dernière update).

Squelette général
Les différents champs
Les boutons
Les messages d’erreur

Squelette général

Obtenir une ossature standard de formulaire (affichage des étiquettes au-dessus des champs qui leur sont associés) :

<form id="" class="" method="" action="">
  <div class="fieldset">
    <h2 class="legend"></h2>
    <p class="form-instructions"></p>
    <p class="required"></p>
    <ul class="form-list">
    </ul>
  </div>
  <div class="buttons-set">
  </div>
</form>

</ul>

</div>

</div>

</form>

Les libellés des classes parlent d’eux-mêmes. .fieldset et .legend reprennent le nom des balises HTML bien connues (la pratique est mauvaise d’un point de vue sémantique, mais c’est défini comme ça…), .form-instructions permet de laisser à l’utilisateur quelques instructions pour bien remplir son formulaire, .required pour le traditionnel message « les champs marqués d’une étoile * doivent être renseignés! », .form-list embarque la liste des champs qui constituent le formulaire et .buttons-set vous servira à englober les boutons d’annulation, validation, etc..

Pour information, une amélioration sémantique par rapport au standard en introduisant les éléments <fieldset /> et <legend /> semble possible sans casser tout l’affichage à condition de conserver les classes .fieldset et .legend :

<form id="" class="" method="" action="">
  <fieldset class="fieldset">
    <legend class="legend"></legend>
    <p class="form-instructions"></p>
    <p class="required"></p>
    <ul class="form-list">
    </ul>
  </fieldset>
  <div class="buttons-set">
  </div>
</form>

</ul>

</fieldset>

</div>

</form>

Simulation : http://jsfiddle.net/frontenddeveloper/d205ar7j/11/.

Obtenir une ossature de formulaire avec des étiquettes alignées sur les champs associés en ajoutant la classe .scaffold-form à l’élément <form /> (voir ici pour plus d’information sur la mise en place et l’utilité de cet affichage) :

<form id="" class="scaffold-form" method="" action=""></form>

1	<form id="" class="scaffold-form" method="" action=""></form>

Les différents champs

Les champs sont sémantiquement déclarés sous forme de liste :

<ul class="form-list">
     <li>...</li>
</ul>

</ul>

Champ texte unique

<li>
    <label for=""></label>
    <div class="input-box">
        <input type="" class="" title="" value="" name="" id="" />
    </div>
</li>

<li>

</div>

</li>

<li>
  <label class="required" for="[etiquette_du_champ]"><em>*</em>Last Name</label>
  <div class="input-box">
    <input type="text" class="input-text validate-[etiquette_du_champ] required-entry" maxlength="255" title="Last Name" value="" name="[etiquette_du_champ]" id="[etiquette_du_champ]" />
  </div>
</li>

<li>

</div>

</li>

Les classes required sur l’élément <label /> et required-entry sur l’élément <input /> sont à mettre en place si le champ est à remplir obligatoirement.
La classe validate-[etiquette_du_champ] sur l’élément <input /> est facultative.

Champ texte unique dont la validation a réussi

<li>
  <label class="required" for="[etiquette_du_champ]"><em>*</em>Password</label>
  <div class="input-box">
    <input type="password" class="input-text required-entry validate-[etiquette_du_champ] validation-passed" title="Password" id="[etiquette_du_champ]" name="[etiquette_du_champ]" />
  </div>
</li>

<li>

<label class="required" for="[etiquette_du_champ]"><em>*</em>Password</label>

</div>

</li>

Une classe .validation-passed est ajoutée à l’élément <input />.

Champ de texte unique dont la validation a échoué

<li>
  <label for="[etiquette_du_champ]">Has failed</label>
  <div class="input-box">
    <input type="text" class="input-text required-entry validate-[etiquette_du_champ] validation-failed" id="[etiquette_du_champ]" title="[etiquette_du_champ]" name="[etiquette_du_champ]" />
    <div id="advice-required-entry-[etiquette_du_champ]" class="validation-advice">This is a required field.</div>
  </div>
</li>

<li>

<label for="[etiquette_du_champ]">Has failed</label>

<div id="advice-required-entry-[etiquette_du_champ]" class="validation-advice">This is a required field.</div>

</div>

</li>

Une classe .validation-failed est ajoutée à l’élément <input />.
Un élément #advice-required-entry-[etiquette_du_champ] apparaît immédiatement après l’élément <input /> auquel il se rapporte pour donner un complément d’information sur le mode de saisie de celui-ci. Notez que cet élément possède aussi une classe .validation-advice.

Groupe de champs texte empilés

<li class="fields">
    <div class="customer-name">
        <div class="field name-firstname">
            <label class="required" for="firstname"><em>*</em>First Name</label>
            <div class="input-box">
                <input type="text" class="input-text required-entry" maxlength="255" title="First Name" value="" name="firstname" id="firstname" />
            </div>
        </div>
        <div class="field name-lastname">
            <label class="required" for="lastname"><em>*</em>Last Name</label>
            <div class="input-box">
                <input type="text" class="input-text required-entry" maxlength="255" title="Last Name" value="" name="lastname" id="lastname" />
            </div>
        </div>
    </div>
</li>

<label class="required" for="firstname"><em>*</em>First Name</label>

</div>

</div>

</li>

Groupe de champs texte alignés horizontalement (exemple : affichage d’une date)

<li class="fields">
  <div class="field">
    <label class="required" for="billing:month"><em>*</em>Date de naissance</label>
    <div class="input-box customer-dob">
      <div class="dob-day">
        <input type="text" class="input-text validate-custom" title="Jour" value="" name="billing[day]" id="billing:day">
        <label for="billing:day">JJ</label>
      </div>
      <div class="dob-month">
        <input type="text" class="input-text validate-custom" title="Mois" value="" name="billing[month]" id="billing:month">
        <label for="billing:month">MM</label>
      </div>
      <div class="dob-year">
        <input type="text" class="input-text validate-custom" title="Année" value="" name="billing[year]" id="billing:year" autocomplete="off">
        <label for="billing:year">AAAA</label>
      </div>
      <div style="display:none;" class="dob-full">
        <input type="hidden" name="billing[dob]" id="billing:dob">
      </div>
      <div style="display:none;" class="validation-advice"></div>
  </div>
</li>

<label class="required" for="billing:month"><em>*</em>Date de naissance</label>

</div>

</div>

</div>

</div>

</div>

</li>

Les boutons

Les messages d’erreur

Scaffold forms

scaffold n (around building) (Construction) échafaudage nm.

Documentation officielle : Scaffold Forms – Magento CE 1.9 and EE 1.14 Responsive Web Design Developer’s Guide.

Le thème responsive (rwd) de Magento est livré avec le fichier skin/frontend/rwd/default/scss/scaffold-forms.scss qui embarque des styles qui modifient le comportement standard des formulaires en affichant les étiquettes à gauche des champs qui leur sont associés sur les viewports les plus larges (en opposition à un affichage au-dessus des champs). Cet affichage à pour vocation de rendre les formulaires longs (par exemple, l’étape du tunnel d’achat où il faut renseigner ses informations de facturation) moins intimidants pour les utilisateurs.

Cependant, ces styles ne sont pas actifs par défaut parce que le thème responsive a des contraintes de localisation (la longueur des étiquettes peut varier suivant la langue et, ainsi, impacter l’affichage).

Le choix est laissé au développeur de les utiliser ou non. Pour ce faire, déplacer skin/frontend/rwd/default/scss/scaffold-forms.scss vers core/_scaffold-forms.scss et éditer scss/_core.scss pour l’inclure.

[HTML] Viewport : utiliser la balise meta Viewport adéquate suivant le type de site (optimisé mobile ou non).

21/03/2013 / admin

Viewport pour un site optimisé mobile/smartphone :
(Ressource : Using the viewport meta tag to control layout on mobile browsers)

<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">

1	<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">

Viewport pour un site non-optimisé mobile/smartphone :
(Ressource : Viewport meta tag for non-responsive design)

<meta name="viewport" content="width=1024">

1	<meta name="viewport" content="width=1024">

Utiliser le second Viewport si l’affichage de votre site se comporte de manière bizarre sur mobile (votre site n’a pas été prévu pour s’afficher sur mobile, la page est zoomée au chargement).

Articles récents

Catégories

Archives

Méta

Étiquette : html

[Magento 2] Exploiter l’Escaper dans les fichiers PHTML et HTML utilisant Knockout JS (extension Page Builder) pour maintenir certaines balises dans du contenu HTML

Escaper dans les templates PHTML

Extension Page Builder de Magento 2 (payante)

Knockout JS dans les fichiers HTML

Configuration d’un module dans un fichier XML

[Magento 2] Utiliser le binding Foreach de Knockout JS pour splitter un tableau en autant d’items que le nombre qu’il contient dans un fichier html

Exemple pour splitter un tableau contenant une adresse postale sur trois lignes:

[Webpack Encore] Générer des fichiers HTML à partir de templates Twig

[HTML] Exploiter les microformats pour baliser une zone de contact (h-card) de la manière la plus sémantique possible

Ressources officielles sur les Microformats et outils de test en ligne

Demo

[HTML] Le positionnement d’un contenu ancré est décalé à l’écran par rapport à l’emplacement où est placé l’ancre dans le code source de la page.

[CSS] Des images responsive dans un tableau HTML ou dans un container en display: table-cell;

table

display: table-cell;

[Magento] Formulaires : anatomie de l’ossature HTML et taxonomie des classes CSS standard

Squelette général

Les différents champs

Champ texte unique

Champ texte unique dont la validation a réussi

Champ de texte unique dont la validation a échoué

Groupe de champs texte empilés

Groupe de champs texte alignés horizontalement (exemple : affichage d’une date)

Les boutons

Les messages d’erreur

Scaffold forms

[HTML] Viewport : utiliser la balise meta Viewport adéquate suivant le type de site (optimisé mobile ou non).