Tüm sayfalara gereken dosyaları yüklemek için requir-config.js kullanın


9

require-config.jsÖzel temada nasıl kullanılacağını biliyorum , ancak myfile.jstüm sayfalarda özel javascript dosyası ( ) kullanmak istiyorum . Hangi dizine eklemeliyim require-config.jsve nasıl kullanmalıyım, böylece olması gerektiği gibi çalışsın?

Lütfen Magento Resmi sayfasına başvurmayın.


Doğrudan düzen xml kafa etiketi içinde js çağırabilirsiniz ve her sayfada js var.
Rakesh Jesadiya

Cevabınız için teşekkür ederim. Ama eğer ben config-config kullanmak ve onunla dosyaları yüklemek istiyorum, Magento 1 gibi değil?
Anitr

Ayrıca magento 2 desteği modül-tema klasör düzeni / default_head_block.xml dosyasını kontrol edebilirsiniz
Rakesh Jesadiya

Evet biliyorum. Ancak, requir-config.js'yi doğru şekilde kullanmak istiyorum.
Anitr

Yanıtlar:


17

requirejs-config.jsJavaScript kaynak eşlemesi oluşturmak için kullanılır . Hepimiz altında yapılandırmalarını gerektirir bulabilirsiniz: pub/static/_requirejs.

Bildiğim kadarıyla, bizim özel komut dosyası Require Js yoluyla yüklemek için doğru yolu: bizim komut dosyası aramak için şablon kullanma . Magento\Framework\View\Element\TemplateBlok sınıfıyla yeni şablon oluşturacağız .

Hepimizin sayfalarda js dosyaları yüklemek istediğiniz ve yaparsanız yeni bir modül oluşturmak istemez, bizim blok için başvuruda bulunmalıdır before.body.endyaafter.body.start container içinde default.xmlMagento Teması modülü -.

resim açıklamasını buraya girin

Uygulamanın / tasarım / kullanıcı arayüzü / Vendor / Oyun / Magento_Theme / düzeni / default.xml

<?xml version="1.0"?>

<page layout="3columns" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" 
      xsi:noNamespaceSchemaLocation="urn:magento:framework:View/Layout/etc/page_configuration.xsd">

    <referenceContainer name="after.body.start">
        <block class="Magento\Framework\View\Element\Template" name="custom.js" template="Magento_Theme::custom_js.phtml"/>
    </referenceContainer>

</page>

Uygulamanın / tasarım / kullanıcı arayüzü / Vendor / Oyun / requirejs-config.js

var config = {
    map: {
        '*': {
            customScript:'Magento_Theme/js/customscript'
        }
    }
};

Uygulamanın / tasarım / kullanıcı arayüzü / Vendor / Oyun / Magento_Theme / web / js / customscript.js

define('jquery', function($) {

    //Your code here
    //alert('Here');

    }(jQuery)
);

Şablonumuz komut dosyamızı arayacaktır: app / design / frontend / Satıcı / Tema / Magento_Theme / templates / custom_js.phtml

<script>// <![CDATA[
    require([
        'jquery',
        'customScript'
    ], function ($, script) {
        //Your code here
        //alert('Here');
    });
    // ]]>
</script>

Magento Cache'i temizleyin ve statik içerik dağıtımını çalıştırın: php bin/magento setup:static-content:deploy


Ben benim komut diyoruz \app\design\frontend\Enim\blank\Magento_CatalogWidget\templates\product\widget\content\grid.phtmlama Tema klasöründe (app / tasarım / kullanıcı arayüzü / Vendor / Oyun / requirejs-config.js) içinde requirejs-config.js ve senaryosu var. Bu tamam mı? Sorun, betiğimi birden fazla farklı yerden çağırmam.
Anitr

Komut dosyanız yalnızca şablon templa‌​tes\product\widget\c‌​ontent\grid.phtmlçağrıldığında etkilenir .
Khoa TruongDinh

Evet, sorun değil - sorun şu: magento.stackexchange.com/questions/149019/… , bu sorunun bir şekilde arama taleplerine bağlı olup olmadığını merak ediyorum.
Anitr

@KhoaTruongDinh Biraz kafam karıştı. Henüz düzgün bir şekilde test etmedim, ancak içindeki fonksiyonun custom_js.phtmliçerdiği kodun yürütülmesinden sonra yapılan normal bir geri arama olarak ele alındığını düşünüyor muyum customscript.js? Veya customscript.jsiçinde işlev içinden bildirilen kodu yürütmek gerekir custom_js.phtml?
Joshua Flood

1
Senin bu yüzden Iveta cevabı devletler @KhoaTruongDinh Ben de merak ediyorum after.body.startşekilde değiştirilmelidir before.body.end?
Joshua Flood

5

Requirejs-config dosyası: app / code / Vendor / Module / view / frontend / requirjs-config.js

var config = {
    paths: {            
         'myfile': "Vendor_Modulename/js/myfile"
      },   
    shim: {
    'myfile': {
        deps: ['jquery']
    }
  }
} 

Js dosyanız: app / code / Vendor / Module / view / frontend / web / js / myfile.js olmalıdır

Artık aşağıdaki yöntemle şablon dosyanızın herhangi bir yerini kullanabilirsiniz:

<srcipt>
 require(["jquery","myfile"],function($,myfile){
     $(document).ready(function(){
        //call your js here...
     })
 })
</script>

Evet doğru. Ancak, Modül'e bağlı olarak, herkesin Tema klasöründe nasıl kullanılacağını bilip bilmediğini sordum - sadece bir modüle değil, sayfa boyunca yüklenmelidir.
Anitr

tema klasöründe de kullanabilirsiniz, sadece komut dosyasının üzerinde arayın ve
js'nizi

Herhangi bir
sorunuz

Çalışıyor, teşekkürler. Ama yine de, başka bir konuda sorun yaşıyorum: magento.stackexchange.com/questions/149019/…
Anitr

Merhaba, Lütfen bana place1st adım dosyasını nerede bildirin?
Priya

2

Kullanmanın daha kolay bir sürümü var deps. Requirjs-config.js dosyasındaki bağımlılıklar dosyanızı (mağazadaki her yer) kendisi yüklerken dosyanızı yükler. Requijs-config.js dosyanızın nasıl görünmesi gerektiğine ilişkin bir örnek :

var config = {
    // When load 'requirejs' always load the following files also
    deps: [
        'common-js'
    ],

    // Library file path.
    paths: {
        'common-js': 'js/Your-File-Name'
    },

    // The rest of your config file ...

1

Mükemmel Magento dev uygulaması olan Khoa'nın tavsiyesine alternatif bir yaklaşım olarak, JavaScript'inizi aşağıdaki gibi bir .phtml dosyasına yapıştırabilirsiniz:

<srcipt>
require(["jquery"],function($){
 $(document).ready(function(){
    your script here...
 })
});
</script>

Sonra phtml dosyanızı default.xml'den Khoa'nın cevabında açıklandığı gibi bağlayın, ancak before.body.end'e eklemenizi tavsiye ederim. Ve sonra JS betiğinizi copyright.phtml içinden şu şekilde arayın :

<script>
jQuery(document).ready(function($) {
..call your script here ..
});
</script>

copyright.phtml, altbilginin atlandığı ödeme gibi sayfalarda bile her sayfaya yüklenir.

Sitemizi kullandığınızda şunları okuyup anladığınızı kabul etmiş olursunuz: Çerez Politikası ve Gizlilik Politikası.
Licensed under cc by-sa 3.0 with attribution required.