Étiquette : Change

[Magento 2] Mise à jour du prix final dans une fiche produit lorsqu’on vide dynamiquement via javascript une option sous forme de champ texte

29/06/2020 / admin

Je me suis retrouvé dans un cas extrêmement particulier dans lequel l’utilisateur pouvait, depuis une fiche produit, rajouter des options en cascade: il pouvait en premier lieu choisir une couleur de papier cadeau (+2,00 €).

Une fois le papier cadeau sélectionné (et seulement à cette condition), il pouvait choisir d’ajouter une étiquette avec un prénom (+0,50 €).

Ce champ étiquette était limité à 14 caractères. La fonctionnalité était gérée via un widget remaining-characters.js fourni dans Magento 2.

Problème: lorsque l’utilisateur avait renseigné choisi un papier cadeau et renseigné un prénom, le prix total s’incrémentait de la somme des deux options (+2,00 € +0,50 €). Mais lorsque l’utilisateur décidait finalement de ne pas prendre de papier cadeau en décochant l’option de couleur, seul le prix du papier se décrémentait (-2,00 €) et le prix total comprenait encore celui de l’option étiquette (+0,50 €).

Solution: le plug-in qui compte le nombre de caractères présents dans le champ écoute les événements change keyup paste:

_create: function () {
    [...]
    this.element.on('change keyup paste', this.updateCharacterCount.bind(this));
},

_create: function () {

[...]

this.element.on('change keyup paste', this.updateCharacterCount.bind(this));

Lorsqu’un utilisateur décoche l’option papier cadeau, on vide l'input text de l’option étiquette avec la méthode .val(''), mais de cette manière le plug-in qui écoute les événements change keyup paste n’a pas « capté » que le champ a été vidé et, de ce fait, ne remet pas le pric total à jour correctement.

Pour lui signifier que le champ a été vidé de manière dynamique, il faut chaîner notre déclaration avec la méthode .trigger() qui contient en argument l’événement change:

// Vider le champ Etiquette et reset le compteur de lettres
$('.input-text', $giftWrapSticker)
    .val('')
    .trigger('change');
$('.character-counter', $giftWrapSticker).addClass('no-display');

// Vider le champ Etiquette et reset le compteur de lettres

$('.input-text', $giftWrapSticker)

.val('')

.trigger('change');

$('.character-counter', $giftWrapSticker).addClass('no-display');

Le code complet pour gérer les deux options en cascade

La deuxième contrainte était de faire fonctionner des checkboxes un peu comme des boutons radio (un seul des x checkboxes devait pouvoir être sélectionné à la fois), mais de pouvoir n’en sélectionner aucune.

    <script>
        require([
            'jquery'
        ], function ($) {
            // option PAPIER CADEAU + ETIQUETTE

            const $giftWrapOptions = $('#giftWrapOptions'),
                  $giftWrapPrice   = $('#giftWrapPrice'),
                  $giftWrapSticker = $('#giftWrapSticker');

            // On récupère le prix de la 1ère option (ttes les options ont le même prix) pour l'afficher à côté du libellé
            let giftWrapOptionPrice = $('.field:first-of-type .price-wrapper', $giftWrapOptions).text();
            $giftWrapPrice.text(giftWrapOptionPrice);

            // Au clic sur l'une des options
            $('input[type="checkbox"]', $giftWrapOptions).on('click', function(event){
                let $this = $(this);

                // S'assurer que seule UNE option (ou aucune) est sélectionnée
                if($this.hasClass('is-current-choice')){
                    $this.removeClass('is-current-choice');
                } else {
                    $giftWrapOptions
                        .find('.is-current-choice')
                        .click()
                        .removeClass('is-current-choice');
                    $this.addClass('is-current-choice');
                }

                // Afficher/masquer le champ Etiquette
                if($('input[type="checkbox"]', $giftWrapOptions).is(':checked')){
                    $giftWrapSticker.removeClass('is-hidden');
                } else {
                    $giftWrapSticker.addClass('is-hidden');
                    // Vider le champ Etiquette et reset le compteur de lettres
                    $('.input-text', $giftWrapSticker)
                        .val('')
                        .trigger('change');
                    $('.character-counter', $giftWrapSticker).addClass('no-display');
                }
            });
        });
    </script>

require([

'jquery'

], function ($) {

// option PAPIER CADEAU + ETIQUETTE

const $giftWrapOptions = $('#giftWrapOptions'),

$giftWrapPrice = $('#giftWrapPrice'),

$giftWrapSticker = $('#giftWrapSticker');

// On récupère le prix de la 1ère option (ttes les options ont le même prix) pour l'afficher à côté du libellé

let giftWrapOptionPrice = $('.field:first-of-type .price-wrapper', $giftWrapOptions).text();

$giftWrapPrice.text(giftWrapOptionPrice);

// Au clic sur l'une des options

$('input[type="checkbox"]', $giftWrapOptions).on('click', function(event){

let $this = $(this);

// S'assurer que seule UNE option (ou aucune) est sélectionnée

if($this.hasClass('is-current-choice')){

$this.removeClass('is-current-choice');

} else {

$giftWrapOptions

.find('.is-current-choice')

.click()

.removeClass('is-current-choice');

$this.addClass('is-current-choice');

}

// Afficher/masquer le champ Etiquette

if($('input[type="checkbox"]', $giftWrapOptions).is(':checked')){

$giftWrapSticker.removeClass('is-hidden');

} else {

$giftWrapSticker.addClass('is-hidden');

// Vider le champ Etiquette et reset le compteur de lettres

$('.input-text', $giftWrapSticker)

.val('')

.trigger('change');

$('.character-counter', $giftWrapSticker).addClass('no-display');

}

});

</script>

[jQuery] Détecter les changements d’état (coché/pas coché) d’un champ radio ou checkbox et agir en fonction

17/07/2019 / admin

Sources:

How to detect a checkbox click in jQuery

<input type="checkbox" id="" class"js-selectRow" name="" value="" />

1	<input type="checkbox" id="" class"js-selectRow" name="" value="" />

  $(document).on('change', '.js-selectRow', function() {
    const $_THIS = $(this);
    if ( $_THIS.prop('checked') === true ) {
      // if is checked do sth...
      $_THIS.closest('tr').addClass('row-isSelected');
    } else if ( $_THIS.prop('checked') === false ) {
      // if is not checked do sth else...
      $_THIS.closest('tr').removeClass('row-isSelected');
    }
  });

$(document).on('change', '.js-selectRow', function() {

const $_THIS = $(this);

if ( $_THIS.prop('checked') === true ) {

// if is checked do sth...

$_THIS.closest('tr').addClass('row-isSelected');

} else if ( $_THIS.prop('checked') === false ) {

// if is not checked do sth else...

$_THIS.closest('tr').removeClass('row-isSelected');

}

});

[jQuery] Surveiller les changements sur un élément du DOM avec la méthode Bind et l’événement DOMSubtreeModified

11/10/2017 / admin

Edit 11/02/2020: DOMSubtreeModified est désormais déprécié au profit de MutationObserver.

Mes propres expériences avec les MutationObserver:

[javaScript] Exploiter les Mutation Observers pour surveiller la disponibilité d’éléments dans le DOM

Pour surveiller les changements sur un élément du DOM avec jQuery, on va souvent vous renvoyer vers l’utilisation de l’événement .on('change', ...) ou des MutationObserver, mais il y a plus simple avec l’événement .bind('DOMSubtreeModified', ...).

Source: jQuery watch for domElement changes?. Demo JSfiddle.net – Listen DOM Changes using jQuery.

Edit 12/07/2018: j’ai remplacé la méthode .bind() aujourd’hui dépréciée par .on().

$('#content').on('DOMSubtreeModified', function(e) {
  if (e.target.innerHTML.length > 0) {
    // Content change handler
  }
});

$('#content').on('DOMSubtreeModified', function(e) {

if (e.target.innerHTML.length > 0) {

// Content change handler

}

});

[Change 3.x][Gulp] Ajouter les Sourcemaps dans RBS Change

23/11/2016 / admin

[12:46 PM] Frank LANG: Quand t’as essayé d’installe gulp-sourcemaps, t’arrivais à avoir un fichier .map ?
[12:49 PM] Frank LANG: En fait j’avais pas encore regardé comment fonctionne le plug-in; je pense savoir d’où vient le problème
[12:50 PM] Frank LANG: on crée un fichier main.css qui est le résultat de tous nos fichiers SASS compilés et processés
[12:50 PM] Frank LANG: et (pour ma part mais j’imagine que tu étais arrivé à ce stade également), j’ai bien un fichier « main.css.map » qui est généré
[12:52 PM] Frank LANG: Sauf que Change prend « main.css » et le compile et le minifie avec d’autres fichiers CSS (skin.css pur ne citer que lui) et nous crée une CSS unique « screen.css » chargée dans la page
[12:52 PM] Frank LANG: Et c’est la raison pour laquelle le plugin sourcemaps ne fonctionne pas
[12:52 PM] Frank LANG: il se réfère à main.css
[12:53 PM] Frank LANG: et c’est « screen.css » qui est chargée en front
[1:06 PM] Frank LANG: Utiliser les sourcemaps dans Change doit être possible moyennant une grosse grosse bidouille

[1:09 PM] Frank LANG: ouais en fait j’ai réussi
[1:10 PM] Frank LANG: mais c’est lourd …
[1:11 PM] Frank LANG: dans Y:\change30\manbow\override\modules\website\templates\PageDynamic-ContentBasis.all.all.php qui est le fichier qui génère l’en-tête de page
[1:11 PM] Frank LANG: je mets un lien absolu vers main.css :
[1:12 PM] Frank LANG:

<link rel="stylesheet" href="/media/themes/responsive/main.css" type="text/css" media="screen" />

1	<link rel="stylesheet" href="/media/themes/responsive/main.css" type="text/css" media="screen" />

[1:14 PM] Frank LANG: et dans la gulpfile, je crée une nouvelle tâche ‘sass_sourcemaps’ qui va faire pareil que la tâche ‘sass’ mais qui va générer les fichiers ‘main.css’ et ’.map’ dans le dossier ‘image’ du thème car c’est le seul qui est accessible depuis le front via une URL relative
[1:14 PM] Frank LANG: Tu accèdes à : http://manbow.vmchange.rbs.fr/media/themes/responsive/main.css
[1:15 PM] Frank LANG: mais pas à : http://manbow.vmchange.rbs.fr/themes/responsive/style/main.css
[1:15 PM] Frank LANG: Avec ça, l’inspecteur d’éléments te remonte le code dans les SCSS
[1:15 PM] Frank LANG: Mais y’a plusieurs soucis :
[1:16 PM] Frank LANG: 1. je charge 2x le fichier ‘main.css’, donc tu auras toujours le code CSS compilé dans l’inspecteur d’éléments. En plus, le code SASS sera toujours déclaré après, car surchargé.
[1:17 PM] Frank LANG: 2. on peut pas laisser le lien relatif dans le fichier d’en-tête en prod; c’est pas propre (mais à la limite, faut pas inclure les sourcemaps en prod non plus; il parait que ça ralentit l’exécution des CSS)
[1:19 PM] Frank LANG: 3. ‘main.css’ ne contient que les styles issus des fichiers SASS. Les sources CSS comme par exemple ‘skin.css’ ne sont pas incluses. Ce n’ets pas si problématique je pense car l’inspecteur d’éléments te permettra de les retrouver au besoin.
[1:20 PM] Frank LANG: Ce qui est bien :
[1:20 PM] Frank LANG: 1. on a les sourcemaps
[1:21 PM] Frank LANG: malgré tout
[1:26 PM] Frank LANG: j’ai pushé le code commenté si jamais tu veux l’activer pour voir
[1:27 PM] Frank LANG: je pense que via Change, il n’y aura pas possibilité d’avoir mieux que ça

var gulp = require('gulp');
    sass = require('gulp-sass');
    imagemin = require('gulp-imagemin');
    cache = require('gulp-cache');
    flatten = require('gulp-flatten');
    iconfont = require('gulp-iconfont');
    consolidate = require('gulp-consolidate');
	sourcemaps = require('gulp-sourcemaps');
	postcss = require('gulp-postcss');
	autoprefixer = require('autoprefixer')({
		browsers: ['last 5 versions'],
		cascade: false
	});
    runTimestamp = Math.round(Date.now()/1000);


gulp.task('sass', function(){
  return gulp.src('src/sass/**/*.scss')
    .pipe(sass().on('error', sass.logError))
    .pipe(gulp.dest('style'))
});

// gulp.task('sass_sourcemaps', function(){
//   return gulp.src('src/sass/**/*.scss')
//     .pipe(sourcemaps.init())
//     .pipe(sass().on('error', sass.logError))
//     .pipe(sourcemaps.write('.'))
//     .pipe(gulp.dest('image'))
// });

gulp.task('css', function(){
  return gulp.src('src/style/*.css')
    .pipe(cache(flatten()))
	.pipe(postcss([autoprefixer]))
	.pipe(sourcemaps.write('maps'))
    .pipe(gulp.dest('style'))
});

// Watch style tasks only with 'gulp style'
gulp.task('style', ['sass', 'css'], function(){
  gulp.watch('src/sass/**/*.scss', ['sass']);
  gulp.watch('src/style/*.css', ['css']);
});

// style tasks w/Sourcemaps
// gulp.task('style', ['sass', 'sass_sourcemaps', 'css'], function(){
//   gulp.watch('src/sass/**/*.scss', ['sass']);
//   gulp.watch('src/style/*.css', ['css']);
// });

var gulp = require('gulp');

sass = require('gulp-sass');

imagemin = require('gulp-imagemin');

cache = require('gulp-cache');

flatten = require('gulp-flatten');

iconfont = require('gulp-iconfont');

consolidate = require('gulp-consolidate');

sourcemaps = require('gulp-sourcemaps');

postcss = require('gulp-postcss');

autoprefixer = require('autoprefixer')({

browsers: ['last 5 versions'],

cascade: false

});

runTimestamp = Math.round(Date.now()/1000);

gulp.task('sass', function(){

return gulp.src('src/sass/**/*.scss')

.pipe(sass().on('error', sass.logError))

.pipe(gulp.dest('style'))

});

// gulp.task('sass_sourcemaps', function(){

// return gulp.src('src/sass/**/*.scss')

// .pipe(sourcemaps.init())

// .pipe(sass().on('error', sass.logError))

// .pipe(sourcemaps.write('.'))

// .pipe(gulp.dest('image'))

// });

gulp.task('css', function(){

return gulp.src('src/style/*.css')

.pipe(cache(flatten()))

.pipe(postcss([autoprefixer]))

.pipe(sourcemaps.write('maps'))

.pipe(gulp.dest('style'))

});

// Watch style tasks only with 'gulp style'

gulp.task('style', ['sass', 'css'], function(){

gulp.watch('src/sass/**/*.scss', ['sass']);

gulp.watch('src/style/*.css', ['css']);

});

// style tasks w/Sourcemaps

// gulp.task('style', ['sass', 'sass_sourcemaps', 'css'], function(){

// gulp.watch('src/sass/**/*.scss', ['sass']);

// gulp.watch('src/style/*.css', ['css']);

// });

Protégé : [Change 3.x] Bonnes pratiques pour le développement à partir du thème naked-12-cols (branche responsive-modern) #2

09/11/2016 / admin

Protégé : [Change 3.x] Bonnes pratiques pour le développement à partir du thème naked-12-cols (branche responsive-modern)

08/11/2016 / admin

Protégé : [Change 3.x] Quelques notes sur le module Skin (habillage)

08/11/2016 / admin

[RBS Change 3.x] Effectuer une boucle tal:repeat qui rapporte l’ensemble des informations contenues dans une fonction

31/08/2016 / admin

\\change30\alainflou\modules\project\persistentdocument\frame.class.php

/**
 * @return string[]
 */
public function getPublishedDeclinationColorsCode($shapetype = null, $shop = null)
{
    return project_FrameService::getInstance()->getPublishedDeclinationColorsCode($this, $shapetype, $shop);
}

/**

* @return string[]

public function getPublishedDeclinationColorsCode($shapetype = null, $shop = null)

{

return project_FrameService::getInstance()->getPublishedDeclinationColorsCode($this, $shapetype, $shop);

}

\\change30\alainflou\themes\responsive\modules\project\templates\Project-Block-ProductItem-List.all.all.html

<p>${php: var_dump(product.getDeclinedproduct().getPublishedDeclinationColorsCode())}</p>

1	<p>${php: var_dump(product.getDeclinedproduct().getPublishedDeclinationColorsCode())}</p>

<ul class="product-declination-colors">
    <tal:block tal:repeat="colorID product/getDeclinedproduct/getPublishedDeclinationColorsCode">
        <li>
            <i class="icon color-${colorID}" />
        </li>
    </tal:block>
</ul>

<tal:block tal:repeat="colorID product/getDeclinedproduct/getPublishedDeclinationColorsCode">

<li>

</li>

</tal:block>

</ul>

Récupérer une propriété contenue dans un objet

Dans Change, chaque module a un dossier persistentdocument/. Ce dossier contient un ou plusieurs fichiers XML listant un ensemble de propriétés contenues dans un objet.

Par exemple, dans /modules/parking/persistentdocument/parking.xml, sont listées toutes les propriétés de l’objet parking :

<?xml version="1.0" encoding="utf-8"?>
<document xmlns="http://www.rbs.fr/schema/change-document/1.0" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:schemaLocation="http://www.rbs.fr/schema/change-document/1.0 http://www.rbschange.fr/static/schema/change-document/3.5.xsd" model-version="3.5" has-url="false" use-rewrite-url="false">
  <properties>
    <add name="code" type="String" min-occurs="1"/>
    <add name="nom" type="String"/>
    <add name="picto" type="modules_media/media"/>
    <add name="libelle" type="String" localized="true"/>
    <add name="ferme" type="Boolean"/>
    <add name="message" type="String" localized="true" db-size="100"/>
    <add name="devise" type="modules_list/item" min-occurs="0" max-occurs="1" from-list="modules_parking/devise"/>
    <add name="pourcentagevert" type="Integer" min-occurs="1" default-value="20"/>
    <add name="pourcentageorange" type="Integer" min-occurs="1" default-value="80"/>
    <add name="duree" type="Integer">
      <constraints>min:-1</constraints>
    </add>
    <add name="handicape" type="Integer"/>
    <add name="occupation" type="Integer"/>
    <add name="maximum" type="Integer"/>
    <add name="mode" type="Integer"/>
    <add name="libre" type="Integer"/>
    <add name="etat" type="Integer"/>
    <add name="display" type="Integer" default-value="0" from-list="modules_parking/parkingdisplay" localized="true"/>
  </properties>
  <statuses default="PUBLICATED"/>
  <serializedproperties>
	</serializedproperties>
</document>

<?xml version="1.0" encoding="utf-8"?>

</add>

</properties>

</serializedproperties>

</document>

Si, dans mon template de bloc, je souhaite récupérer l’information de nom de l’objet parking, je procède comme suit :

<tal:block tal:repeat="parking parkings">
  <p>${parking/getNom}</p>
</tal:block>

<tal:block tal:repeat="parking parkings">

<p>${parking/getNom}</p>

</tal:block>

[RBS Change 3.x] Attribuer un ID unique à un élément

19/08/2016 / admin

Problème : nous avons un template de bloc unique (un menu dans notre exemple) qui est utilisé plusieurs fois dans la page, chaque fois pour afficher un contenu différent mais avec un balisage similaire. Nous voulons cependant attribuer un ID unique à chaque occurence de ce bloc dans le DOM (dans notre exemple, pour pouvoir les ouvrir/fermer avec le composant Collapse de Bootstrap 3).

Solution : appliquer ${root/getDocument/getId} sur la valeur des attributs href et id :

<tal:block metal:define-macro="menuLevel">
	[...]
</tal:block>

<div tal:attributes="class menuClass">
	<h3 change:h="" tal:condition="configuration/getShowTitle">

	<a class="" role="button" data-toggle="collapse" href="#js-footer-menu-nav-${root/getDocument/getId}" aria-expanded="false" aria-controls="">${root/getLabelAsHtml}<i class="icon icon-chevron-down"></i></a>

	</h3>
	<div id="js-footer-menu-nav-${root/getDocument/getId}" class="js-footer-menu-nav">
		<tal:block tal:define="parent root" metal:use-macro="menuLevel" />		
	</div>
</div>

<tal:block metal:define-macro="menuLevel">

[...]

</tal:block>

<a class="" role="button" data-toggle="collapse" href="#js-footer-menu-nav-${root/getDocument/getId}" aria-expanded="false" aria-controls="">${root/getLabelAsHtml}<i class="icon icon-chevron-down"></i></a>

</h3>

<tal:block tal:define="parent root" metal:use-macro="menuLevel" />

</div>

Articles récents

Catégories

Archives

Méta

Étiquette : Change

[Magento 2] Mise à jour du prix final dans une fiche produit lorsqu’on vide dynamiquement via javascript une option sous forme de champ texte

Le code complet pour gérer les deux options en cascade

[jQuery] Détecter les changements d’état (coché/pas coché) d’un champ radio ou checkbox et agir en fonction

[jQuery] Surveiller les changements sur un élément du DOM avec la méthode Bind et l’événement DOMSubtreeModified

[Change 3.x][Gulp] Ajouter les Sourcemaps dans RBS Change

Protégé : [Change 3.x] Bonnes pratiques pour le développement à partir du thème naked-12-cols (branche responsive-modern) #2

Protégé : [Change 3.x] Bonnes pratiques pour le développement à partir du thème naked-12-cols (branche responsive-modern)

Protégé : [Change 3.x] Quelques notes sur le module Skin (habillage)

[RBS Change 3.x] Effectuer une boucle tal:repeat qui rapporte l’ensemble des informations contenues dans une fonction

Récupérer une propriété contenue dans un objet

[RBS Change 3.x] Attribuer un ID unique à un élément