Question

我正在使用jQuery将jCarousel添加到Shopify上的主页。轮播正确显示和滚动，但我需要添加每个图像的链接，以便在单击图像时，用户将被定向到特定的产品页面。

Shopify使用名为liquid的模板引擎，这是Ruby的一个变体。我不了解Ruby或者如何实现我正在寻求的功能。

以下是我使用jCarousel的代码段。任何人都可以建议修改代码的位置，以便为每个图像创建链接吗？

<div class="carousel-inner">
{% for i in (1..4) %}
{% capture show_slide %}slide_{{ i }}{% endcapture %}
{% capture image %}slideshow_{{ i }}.jpg{% endcapture %}
{% capture link %}slide_{{ i }}_link{% endcapture %}
{% capture link_text %}slide_{{ i }}_link_text{% endcapture %}
{% capture headline %}slide_{{ i }}_headline{% endcapture %}
{% capture content %}slide_{{ i }}_content{% endcapture %}
{% if settings[show_slide] %}
<div class="item{% if i == 1 %} active {% endif %}">
  <img src="{{ image | asset_url }}" alt="{{ settings[headline] | escape }}" />
  <div class="slide-container">
    <div class="container-fluid">
      <div class="carousel-caption col-md-5 col-sm-10">
        <h1>{{ settings[headline] | escape }}</h1>
        <p>{{ settings[content] | escape }}</p>
        <a class="btn btn-lg btn-default" href="{{ settings[link] | escape }}" role="button">{{ settings[link_text] | escape }}</a>
      </div>
    </div>
  </div>
</div>
{% endif %}
{% endfor %}

Answer 1

看起来每张幻灯片都有一个按钮，其中包含在设置中设置的链接：

<a class="btn btn-lg btn-default" href="{{ settings[link] | escape }}" role="button">{{ settings[link_text] | escape }}</a>

如果您尚未将此功能用于其他内容，则可以修改此代码以将链接添加到图像本身而不是按钮。然后你不需要改变其他任何东西。

例如：

<div class="item{% if i == 1 %} active {% endif %}">
  <a href="{{ settings[link] | escape }}"><img src="{{ image | asset_url }}" alt="{{ settings[headline] | escape }}" /></a>
  <div class="slide-container">
    ...
  </div>
</div>

如果您已经使用该按钮链接到其他内容，则需要在“设置”中添加其他字段以保存产品链接并执行以下操作：

{% capture image_link %}slide_{{ i }}_image_link{% endcapture %}
...
<a href="{{ settings[image_link] | escape }}"><img src="{{ image | asset_url }}" alt="{{ settings[headline] | escape }}" /></a>

添加指向jCarousel图像的链接

1 个答案: