2015-01-07 62 views
0

我正在使用jQuery将jCarousel添加到Shopify的我的主页上。传送带显示并正确滚动,但我需要为每个图像添加链接,以便在点击图像时将用户引导至特定的产品页面。添加链接到jCarousel图像

Shopify使用称为液体的模板引擎,它是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 %} 

回答

0

貌似每个幻灯片已经与在设置中设置的链接按钮:

<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>