Étiquette : extend

[Magento 2] Etendre un Block pour en hériter et lui ajouter de nouvelles fonctionnalités

03/02/2023 / admin

Note: dans un but d’anonymisation, le véritable libellé du vendor a été remplacé par MyVendor.

Les fichiers obligatoires pour la création d’un nouveau module dans Magento 2 (ou Adobe Commerce)

app/code/MyVendor/KlarnaOnSiteMessaging/registration.php

<?php
\Magento\Framework\Component\ComponentRegistrar::register(
    \Magento\Framework\Component\ComponentRegistrar::MODULE,
    'MyVendor_KlarnaOnsitemessaging',
    __DIR__
);

<?php

\Magento\Framework\Component\ComponentRegistrar::register(

\Magento\Framework\Component\ComponentRegistrar::MODULE,

'MyVendor_KlarnaOnsitemessaging',

__DIR__

);

app/code/MyVendor/KlarnaOnSiteMessaging/etc/module.xml

<?xml version="1.0"?>
<config xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
        xsi:noNamespaceSchemaLocation="urn:magento:framework:Module/etc/module.xsd">
    <module name="MyVendor_KlarnaOnsitemessaging" >
        <sequence>
            <module name="Klarna_Onsitemessaging" />
        </sequence>
    </module>
</config>

<?xml version="1.0"?>

<config xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"

xsi:noNamespaceSchemaLocation="urn:magento:framework:Module/etc/module.xsd">

</sequence>

</module>

</config>

app/code/MyVendor/KlarnaOnSiteMessaging/etc/di.xml

<?xml version="1.0"?>
<config xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
        xsi:noNamespaceSchemaLocation="urn:magento:framework:ObjectManager/etc/config.xsd">
    <preference for="Klarna\Onsitemessaging\Block\Product" type="MyVendor\KlarnaOnsitemessaging\Block\Product"/>
</config>

<?xml version="1.0"?>

<config xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"

xsi:noNamespaceSchemaLocation="urn:magento:framework:ObjectManager/etc/config.xsd">

</config>

Etendre un Block dans Magento 2

Le Block (fichier) initial

Le Block étendu

app/code/MyVendor/KlarnaOnSiteMessaging/Block/Product.php

<?php
/**
 * This file is part of the Klarna Onsitemessaging module
 *
 * (c) Klarna Bank AB (publ)
 *
 * For the full copyright and license information, please view the NOTICE
 * and LICENSE files that were distributed with this source code.
 */
declare(strict_types=1);

namespace MyVendor\KlarnaOnsitemessaging\Block;

use Magento\Catalog\Helper\Data;
use Magento\Framework\Locale\Resolver;
use Magento\Framework\View\Element\Template;
use Magento\Framework\View\Element\Template\Context;
use Magento\Store\Model\ScopeInterface;

/**
 * @api
 */
class Product extends \Klarna\Onsitemessaging\Block\Product
{
    /** @var \Magento\Framework\Registry $registry */
    protected $registry;

    /**
     * @param Context  $context
     * @param \Magento\Framework\Registry $registry $registry
     * @param Resolver $locale
     * @param Data     $productHelper
     * @param array    $data
     * @codeCoverageIgnore
     */
    public function __construct(
        Context $context,
        \Magento\Framework\Registry $registry,
        Resolver $locale,
        Data $productHelper,
        array $data = []
    )
    {
        parent::__construct(
            $context,
            $locale,
            $productHelper,
            $data
        );
        $this->registry = $registry;
    }

    public function getProduct()
    {
        return $this->registry->registry('current_product');
    }

    /**
     * Check to see:
     * - if display on product is enabled or not
     * - whether the product type or stock allows to purchase the product (isSalable = true && isInStock = true)
     * - if product final price < 10000
     *
     * @return bool
     */
    public function conditionalShowOnProduct(): bool
    {
        $product = $this->getProduct();
        $finalPrice = $product->getFinalPrice();
        $finalPriceThreshold = 10000; //TODO
        $isAvailable = $product->isAvailable();

        return $this->showOnProduct()
            && $isAvailable
            && $finalPrice < $finalPriceThreshold;
    }
}

<?php

/**

* This file is part of the Klarna Onsitemessaging module

* (c) Klarna Bank AB (publ)

* For the full copyright and license information, please view the NOTICE

* and LICENSE files that were distributed with this source code.

declare(strict_types=1);

namespace MyVendor\KlarnaOnsitemessaging\Block;

use Magento\Catalog\Helper\Data;

use Magento\Framework\Locale\Resolver;

use Magento\Framework\View\Element\Template;

use Magento\Framework\View\Element\Template\Context;

use Magento\Store\Model\ScopeInterface;

/**

* @api

class Product extends \Klarna\Onsitemessaging\Block\Product

{

/** @var \Magento\Framework\Registry $registry */

protected $registry;

/**

* @param Context $context

* @param \Magento\Framework\Registry $registry $registry

* @param Resolver $locale

* @param Data $productHelper

* @param array $data

* @codeCoverageIgnore

public function __construct(

Context $context,

\Magento\Framework\Registry $registry,

Resolver $locale,

Data $productHelper,

array $data = []

)

{

parent::__construct(

$context,

$locale,

$productHelper,

$data

);

$this->registry = $registry;

}

public function getProduct()

{

return $this->registry->registry('current_product');

}

/**

* Check to see:

* - if display on product is enabled or not

* - whether the product type or stock allows to purchase the product (isSalable = true && isInStock = true)

* - if product final price < 10000

* @return bool

public function conditionalShowOnProduct(): bool

{

$product = $this->getProduct();

$finalPrice = $product->getFinalPrice();

$finalPriceThreshold = 10000; //TODO

$isAvailable = $product->isAvailable();

return $this->showOnProduct()

&& $isAvailable

&& $finalPrice < $finalPriceThreshold;

}

[Magento 2] Etendre ou surcharger des styles less parent, de composants ou de modules dans un thème

16/05/2022 / admin

Testé fonctionnel Magento 2.4

Sources: Best way to extend module less found in web/css/source/module, like _minicart.less? et Extend or override parent, components or modules styles in Magento 2 et version PDF pour la postérité.

Etendre les styles less d’un composant

Fichier parent: app/design/frontend/Vendor/default/Magento_Catalog/web/css/source/module/listings/_prod-small.less.

Son extension: app/design/frontend/Vendor/germany/Magento_Catalog/web/css/source/module/listings/_prod-small_extend.less

L’import de l’extension: app/design/frontend/Vendor/germany/Magento_Catalog/web/css/source/_extend.less

@import 'module/listings/_prod-small_extend.less';

1	@import 'module/listings/_prod-small_extend.less';

[jQuery] Etendre une fonction existante

21/02/2017 / admin

Source: Extending an existing jQuery function.

(function($)
{
    // maintain a reference to the existing function
    var oldcss = $.fn.css;
    // ...before overwriting the jQuery extension point
    $.fn.css = function()
    {
        // original behavior - use function.apply to preserve context
        var ret = oldcss.apply(this, arguments);

        // stuff I will be extending
        // that doesn't affect/change
        // the way .css() works

        // preserve return value (probably the jQuery object...)
        return ret;
    };
})(jQuery);

(function($)

{

// maintain a reference to the existing function

var oldcss = $.fn.css;

// ...before overwriting the jQuery extension point

$.fn.css = function()

{

// original behavior - use function.apply to preserve context

var ret = oldcss.apply(this, arguments);

// stuff I will be extending

// that doesn't affect/change

// the way .css() works

// preserve return value (probably the jQuery object...)

return ret;

};

})(jQuery);

Aller plus loin avec un callback

Source: Coderbits – Extending jQuery with onShow and onHide events.

<!-- Include latest jquery first! -->
<script>

    //Extending show-function example at http://stackoverflow.com/questions/5007279/extending-an-existing-jquery-function
    (function ($) {

        //Extend show() so that it trigger our event when called
        var show = $.fn.show;
        $.fn.show = function () {
            var ret = show.apply(this, arguments); //Read comments about these part at the stackoverflow linked above

            $(this).trigger("onShow"); //Trigger our new onShow event

            return ret; //Return object so that it can propagate
        };
        //Extend hide()
        var hide = $.fn.hide;
        $.fn.hide = function () {
            var ret = hide.apply(this, arguments); //Read comments about these part at the stackoverflow linked above

            $(this).trigger("onHide"); //Trigger our new onShow event

            return ret; //Return object so that it can propagate
        };

        //Define new event functions
        $.fn.onShow = function (callback) {
            if (callback != null) {
                $(this).on("onShow", function () {
                    callback(); //Trigger callback
                });
            } else {
                $(this).trigger("onShow"); //If no callback exist we trigger the event
            }
            return this;
        };

        $.fn.onHide = function (callback) {
            if (callback != null) {
                $(this).on("onHide", function () {
                    callback(); //Trigger callback
                });
            } else {
                $(this).trigger("onHide"); //If no callback exist we trigger the event
            }
            return this;
        };
    })(jQuery);
    //All the above code could be saved in an external .js file which is much easier to include

    //Testing time!
    $(function () { //DOM ready

        //Define what happens if our element is shown
        $("#testingElement").onShow(function () {
            alert("Hello!");
        });

        //Define what happens if our element is hidden
        $("#testingElement").onHide(function () {
            alert("Goodbye!");
        });

        //Button event
        $("button").click(function () {
            $("#testingElement").toggle();
        });
    });

</script>

<p id="testingElement" style="display:none;">Showing</p>
<button>Show</button>

//Extending show-function example at http://stackoverflow.com/questions/5007279/extending-an-existing-jquery-function

(function ($) {

//Extend show() so that it trigger our event when called

var show = $.fn.show;

$.fn.show = function () {

var ret = show.apply(this, arguments); //Read comments about these part at the stackoverflow linked above

$(this).trigger("onShow"); //Trigger our new onShow event

return ret; //Return object so that it can propagate

};

//Extend hide()

var hide = $.fn.hide;

$.fn.hide = function () {

var ret = hide.apply(this, arguments); //Read comments about these part at the stackoverflow linked above

$(this).trigger("onHide"); //Trigger our new onShow event

return ret; //Return object so that it can propagate

};

//Define new event functions

$.fn.onShow = function (callback) {

if (callback != null) {

$(this).on("onShow", function () {

callback(); //Trigger callback

});

} else {

$(this).trigger("onShow"); //If no callback exist we trigger the event

}

return this;

};

$.fn.onHide = function (callback) {

if (callback != null) {

$(this).on("onHide", function () {

callback(); //Trigger callback

});

} else {

$(this).trigger("onHide"); //If no callback exist we trigger the event

}

return this;

};

})(jQuery);

//All the above code could be saved in an external .js file which is much easier to include

//Testing time!

$(function () { //DOM ready

//Define what happens if our element is shown

$("#testingElement").onShow(function () {

alert("Hello!");

});

//Define what happens if our element is hidden

$("#testingElement").onHide(function () {

alert("Goodbye!");

});

//Button event

$("button").click(function () {

$("#testingElement").toggle();

});

</script>

<p id="testingElement" style="display:none;">Showing</p>

[jQuery] Créer un plugin avec la méthode jQuery.fn.extend()

19/08/2016 / admin

Sources :

devheart.org – Tutorial: Creating a jQuery plugin
lostechies.com – Extending Objects in jQuery

Attention : en l’état, ce code requiert l’utilisation des plugins bxSlider et enquire.js et n’est pas tout-à-fait opérationnel. Le but de ce billet est de mettre en avant le principe de créer un mini plugin qui stocke des valeurs spécifiques de paramètres issus d’un plugin tiers (en l’occurence bxslider) afin de pouvoir les redistribuer à la volée sans avoir à les ressaisir à chaque fois.

jQuery(document).ready(function() { jQuery.fn.setSlider = function(settings){ var config = { 'minSlides': '1', 'maxSlides': '3', 'slideWidth': '200', 'slideMargin': '20', 'moveSlides': '1', 'controls': false }; if (settings){jQuery.extend(config, settings);} return this.each(function(){ jQuery(this).bxSlider4({ minSlides: config.minSlides, maxSlides: config.maxSlides, slideWidth: config.slideWidth, slideMargin: config.slideMargin, moveSlides: config.moveSlides, controls: config.controls }); }); }; var pushOffreSlider = jQuery('.push-offre-slider'); // enquire JS enquire.register(bpSmartphone, { match : function() { pushOffreSlider.setSlider({ slideWidth: 200, maxSlides: 1, slideMargin: 20 }); // console.log('bpSmartphone'); }, unmatch : function() {} }); enquire.register(bpTablet, { match : function() { pushOffreSlider.setSlider({ slideWidth: 200, maxSlides: 2, slideMargin: 20 }); // console.log('bpTablet'); }, unmatch : function() {} }); enquire.register(bpDesktop, { match : function() { pushOffreSlider.setSlider({ slideWidth: 200, maxSlides: 3, slideMargin: 20 }); // console.log('bpDesktop'); }, unmatch : function() {} }); });

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
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66

jQuery(document).ready(function() {

    jQuery.fn.setSlider = function(settings){
        var config = {
            'minSlides': '1',
            'maxSlides': '3',
            'slideWidth': '200',
            'slideMargin': '20',
            'moveSlides': '1',
            'controls': false
        };

        if (settings){jQuery.extend(config, settings);}

        return this.each(function(){
            jQuery(this).bxSlider4({
                minSlides: config.minSlides,
                maxSlides: config.maxSlides,
                slideWidth: config.slideWidth,
                slideMargin: config.slideMargin,
                moveSlides: config.moveSlides,
                controls: config.controls
            });
        });
    };

    var pushOffreSlider = jQuery('.push-offre-slider');

    // enquire JS
    enquire.register(bpSmartphone, {
      match : function() {
        pushOffreSlider.setSlider({
            slideWidth: 200,
            maxSlides: 1,
            slideMargin: 20
        });
        // console.log('bpSmartphone');
      },
      unmatch : function() {}
    });

    enquire.register(bpTablet, {
      match : function() {
        pushOffreSlider.setSlider({
            slideWidth: 200,
            maxSlides: 2,
            slideMargin: 20
        });
        //  console.log('bpTablet');
      },
      unmatch : function() {}
    });

    enquire.register(bpDesktop, {
      match : function() {
        pushOffreSlider.setSlider({
            slideWidth: 200,
            maxSlides: 3,
            slideMargin: 20
        });
        // console.log('bpDesktop');
      },
      unmatch : function() {}
    });

});

Articles récents

Catégories

Archives

Méta