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.