小编mik*_*rce的帖子

我是一个前端Magento开发者,已经构建了我自己的一些主题,我想更好地理解Magento的XML块定位...

我通常使用一个local.xml文件来操作一切,我可以按如下方式定义一个块:

<cms_index_index>
   <reference name="root">
      <block type="core/template" name="example_block" as="exampleBlock" template="page/html/example-block.phtml"/>
   </reference>
</cms_index_index>

这将在主页(cms_index_index)上创建一个块,并且由于块创建了一个级别root,我通常会通过添加以下内容来调用块:

<?php echo $this->getChildHtml('exampleBlock') ?>

......到1column.phtml(或2columns-left/ right.phtml,3columns.phtml等等).可以通过替换cms_index_index适当的页面标记将块放置在任何页面上.

我在整个核心XML文件和教程中看到如下内容:

<reference name="root">
   <block type="core/template" name="example_block" before="content" template="page/html/example-block.phtml"/>
</reference>

content是一个块,它是magento的一般页面结构的一部分,从我的理解,before="content"应该把它放在你期望的地方,而不需要使用getChildHtml('exampleBlock'),到目前为止那么好...但是,之前/之后似乎几乎没有工作我,我经常发现自己使用getChildHtml方法作为备份,这并不总是理想的,并且意味着编辑更多.phtml文件而不是必要的.

我试过了:

<reference name="root">
   <block type="core/template" name="example_block" before="content" template="page/html/example-block.phtml"/>
</reference>

什么都没出现......

<reference name="root">
   <block type="core/template" name="example_block" after="header" template="page/html/example-block.phtml"/>
</reference>

仍然没有....我也知道在它的父块之前使用before="-"或after="-"放置一些东西.我偶尔会有一些运气,但一般只会感到困惑和沮丧.

我已经搜索了"magento xml之前/之后不工作"的地方,并开始怀疑它是否只是我发生这种情况......任何人都可以解释我什么时候可以使用之前/之后定位块？上面的例子有什么问题？

我在magento 1.7.0.2(发布时最新的)

这样做的主要动机是减少我需要编辑的核心.phtml文件的数量,只是为了添加一个getChildHtml(),所以如果有另一种(XML)方式来解决这个问题,我有兴趣知道......

在隐身模式下使用谷歌浏览器进行测试,每次都使用"空缓存和硬重新加载"重新加载页面.

我有以下html响应图像:

<img class="content-img" src="/app/uploads/2018/07/1400x750.png" 

srcset="/app/uploads/2018/07/1400x750.png 1400w, 
        /app/uploads/2018/07/1400x750-768x411.png 768w, 
        /app/uploads/2018/07/1400x750-1280x686.png 1280w, 
        /app/uploads/2018/07/1400x750-520x279.png 520w, 
        /app/uploads/2018/07/1400x750-420x225.png 420w, 
        /app/uploads/2018/07/1400x750-340x182.png 340w, 
        /app/uploads/2018/07/1400x750-600x321.png 600w" 

sizes="(max-width: 666px) 100vw, (max-width: 1399px) 38vw, 535px" 
>

预期行为:

1.视口宽度0px - 666px:

• 浏览器应采用完整的视口像素宽度,例如450px,并从srcset中选择宽度大于450px的最小src,在本例中为'/app/uploads/2018/07/1400x750-520x279.png'

2.视口宽度667像素 - 1399像素:

• 浏览器应占视口宽度的38%,例如380px @ 1000px视口,并从宽度大于380px的srcset中选择最小的src,在本例中为'/app/uploads/2018/07/1400x750-420x225.png'

3.视口宽度1400+ px:

• 浏览器应采用默认值535px并从宽度大于535px的srcset中选择最小的src,在本例中为'/app/uploads/2018/07/1400x750-600x321.png'

实际行为:

在Google Chrome中进行测试,使用开发工具检查img上的所有上述示例中的元素,在每种情况下生成的"CurrentSrc"是:

1. /app/uploads/2018/07/1400x750-520x279.png (正确)

2. /app/uploads/2018/07/1400x750-1280x686.png (INCORRECT(预期宽度为420px)

3. /app/uploads/2018/07/1400x750.png (INCORRECT(期望600px宽度)

我一直在挠头,其他类似的问题似乎都归结为谷歌Chrome缓存问题,但我在测试时已经小心消除了这个问题,但我仍然没有得到我期望的src图像.

我只有90%确定我已经为我想要的行为编写了正确的"尺寸"属性.请注意,由于排列了响应式CSS断点并尝试在上下文中加载合理的图像宽度,因此逻辑稍微复杂一些.

我的任务是重写这段可怕的代码,这些代码意味着在网页上依次淡化地图上的图层(它们都是透明的png).它需要按顺序操作,然后循环回到没有可见层的开始,并逐个淡入.这个序列应该永远重复.

我不确定最常推荐的方法是在javascript中做什么,并对堆栈溢出有什么兴趣.

必须有一个比这更好的方法!我对任何方法的优缺点感兴趣.

setInterval(function(){
    $("#layer-1").fadeIn(1000, function() {
      $("#layer-2").fadeIn(1000, function() {
        $("#layer-3").fadeIn(1000, function() {
          $("#layer-4").fadeIn(1000, function() {
            $("#layer-5").fadeIn(1000, function() {
              $("#layer-6").fadeIn(1000, function() {
                $("#layer-7").fadeIn(1000, function() {
                  $("#layer-8").fadeIn(1000, function() {
                    // pause for 2 seconds, then reset and hide all layers:
                    $("#home-map .layer").delay(2000).fadeOut();
                  });
                });
              });
            });
          });
        });
      });
    });
  }, 10000)

编辑:我认为这与其他答案不同的原因是因为我试图在无限循环中设置内容,以及链接动画.有很多方法可以解决javascript中的回调地狱问题,这是一个非常常见的问题,所以毫无疑问会有类似的问题.

我在/app/design/frontend/mytemplate/default/template/page/html/footer.cat.links.phtml上创建了一个.phtml文件

目前只包含1个html div,其中包含一些文本.

我试图将这个添加到页脚,但我之前没有玩过布局xml.

所以,我打开了/app/design/frontend/mytemplate/default/layout/page.xml,并尝试添加:

<block type="catalog/navigation" name="footer.cat.links" as="footerCatLinks" template="page/html/footer.cat.links.phtml" />

(类型是"目录/导航",因为我打算让它工作:http://www.magentocommerce.com/wiki/4_-_themes_and_template_customization/catalog/getting_and_using_categories_and_subcategories)

我把它放在页脚块里面,如下所示:

<block type="page/html_footer" name="footer" as="footer" template="page/html/footer.phtml"><my block here></block>

然后在footer.phtml中,我试图用以下方法调用新块:

<?php $this->getChildHtml('footerCatLinks') ?>

我刷新了缓存等,但是当我在浏览器中查看时,它不会在footer.cat.links.phtml中添加html div.

我终于想到了我对Magento的了解,但根据我对文档的理解,这应该有效!我有多难？

这有效:

function getDataJSON() {
    var queryString = "https://www.examplesite.com/someJSON.json";

    $.getJSON(queryString, function(data) {
        doStuffWithData(data)
    });
 }

 function doStuffWithData(JSON) {
     // some code that refers to JSON
 }

 getDataJSON();

但这抱怨在doStuffWithData()中的某个地方未定义变量(JSON):

function getDataJSON(callback) {
    // Gets share data and runs callback when received
    var queryString = "https://www.examplesite.com/someJSON.json";

    $.getJSON(queryString, function(data) {
        if(typeof callback === "function") {
            callback(data);
        }
    });
 }

 function doStuffWithData(JSON) {
     // some code that refers to JSON
 }

getDataJSON(doStuffWithData());

我可能做错了什么？$ .getJSON()调用需要一两秒钟,所以我需要等待它并在它之后执行操作.我认为问题在于代码执行顺序,但可能是我误解了如何正确地将数据传递给回调函数.

如果我可以将数据加载到我所有其他函数都可以访问的变量中,那会更好.