在shopify中向product-card-grid.liquid写函数时，JavaScript简单函数未执行？

问题描述

因此，我试图在我的代码片段/product-card-grid.liquid页面中调用一个简单的警报消息功能。

有人可以告诉我我做错了什么，为什么我的功能未在product-card-grid页面内执行吗？

在页面底部，我添加了一个名为“ foo（）”的函数，该函数需要在页面加载单个产品页面时执行警报消息。由于单个产品页面包含此代码段。

但是，它不执行警报消息，因此我如何在此处编写JS函数以使其正常工作。

{% comment %}
    Renders a product card using "Grid" style
    Accepts:
    - max_height: {Number} Maximum height of the product's image (required)
    - product: {Object} Product Liquid object (required)
    - show_vendor: {Boolean} Show the product's vendor depending on the section setting (optional)

    Usage:
    {% include 'product-card-grid',max_height: max_height,product: product,show_vendor: section.settings.show_vendor %}
{% endcomment %}
 <script>
   console.log('here....');
    </script>
<div class="grid-view-item{% unless product.available %} grid-view-item--sold-out{% endunless %} product-card">
  <a class="grid-view-item__link grid-view-item__image-container full-width-link" href="{{ product.url | within: collection }}">
    <span class="visually-hidden">{{ product.title }}</span>
  </a>

  {% capture img_id %}ProductCardImage-{{ section.id }}-{{ product.id }}{% endcapture %}
  {% capture wrapper_id %}ProductCardImageWrapper-{{ section.id }}-{{ product.id }}{% endcapture %}
  {%- assign preview_image = product.featured_media.preview_image -%}
  {%- assign img_url = preview_image | img_url: '1x1' | replace: '_1x1.','_{width}x.' -%}

  {% unless preview_image == blank %}
    {% include 'image-style',image: preview_image,height: max_height,wrapper_id: wrapper_id,img_id: img_id %}
  {% endunless %}

  <div class="product-card__image-with-placeholder-wrapper" data-image-loading-animation>
    <div id="{{ wrapper_id }}" class="grid-view-item__image-wrapper product-card__image-wrapper js">
      <div style="padding-top:{% unless preview_image == blank %}{{ 1 | divided_by: preview_image.aspect_ratio | times: 100 }}%{% else %}100%{% endunless %};">
        <img id="{{ img_id }}"
              class="grid-view-item__image lazyload"
              alt="{{ preview_image.alt }}"
              data-src="{{ img_url }}"
              data-widths="[180,360,540,720,900,1080,1296,1512,1728,2048]"
              data-aspectratio="{{ preview_image.aspect_ratio }}"
              data-sizes="auto"
              data-image>
      </div>
    </div>
  </div>

  <noscript>
    {% capture image_size %}{{ max_height }}x{{ max_height }}{% endcapture %}
    <img class="grid-view-item__image" src="{{ preview_image | img_url: image_size,scale: 2 }}" alt="{{ preview_image.alt }}" style="max-width: {{ max_height | times: preview_image.aspect_ratio }}px;">
  </noscript>

  <div class="h4 grid-view-item__title product-card__title" aria-hidden="true">{{ product.title }}</div>

  {% include 'product-price-listing',show_vendor: show_vendor %}
  <div>
<script>
  function foo() {
    alert('hellos');
  }
  foo();
    </script>
  <img src="logo.jpg" style="width:103px !important; padding-top: 3px;"><span style="font-size:13px; position:absolute; margin-top:17px;">From $ <script> calWeeklyFixedTerm({{ product.price | money_without_currency  }},12);</script>/week</span>
  </div>    
</div>

解决方法

暂无找到可以解决该程序问题的有效方法，小编努力寻找整理中！

如果你已经找到好的解决方法，欢迎将解决方案带上本链接一起发送给小编。

小编邮箱:dio#foxmail.com (将#修改为@）