Question

我需要在Shopify中定位一个特定的div。我正在使用Boundless Theme。我想为这个特定的div添加一个自定义id属性。我怎么能这样做？

我需要定位的div是第3个div，类为“product-item grid__item medium-up - 1/3”：

<div class="featured-collection" data-section-id="featured-collection" data-section-type="featured-collection-section">

    <h2 class="visually-hidden">frontpage</h2>

    <div class="grid grid--no-gutters grid--uniform collection-grid">

        <div class="product-item grid__item medium-up--one-third">

            <a class="product-item__link " href="/products/kaylava-candor-decaf-coffee-bean">

                <img class="product-item__image" src="//cdn.shopify.com/s/files/1/1460/5816/products/candor-coffee-sm_grande.jpg?v=1485668871" alt="CANDOR DECAF COFFEE">

                <span class="product-item__meta">
                <span class="product-item__meta__inner">
                <p class="product-item__title">CANDOR DECAF COFFEE</p>
                <p class="product-item__price-wrapper"><span class="txt--emphasis">from</span> $15.99</p>
                </span>
                </span>

                </a>
        </div>

    </div>

</div>

Answer 1

在Shopify中，您可以通过修改主题代码来编辑HTML。

上面的示例看起来像是来自index.liquid模板文件或者片段下的product-card.liquid。

如果您能够在模板文件中找到代码，则可以直接在代码中添加ID。

或者使用JQUery选择器并使用data-section-id =“featured-collection”作为基础向下导航。

Answer 2

在Toby Mills的帮助下找到解决方案！

在Boundless Theme中，“product_item grid_item”类是从product-grid-item.liquid文件生成的。

在顶级div中，我添加了

id="home-{{ product.id }}"

这是最后的样子

<div id="home-{{ product.id }}" class="product-item grid__item {{ grid_item_width }}" >

现在每个div都有一个我可以用CSS定位的唯一ID！

 <div id="home-8748279361" class="product-item grid__item medium-up--one-third" >
 <a class="product-item__link " href="/products/kaylava-candor-decaf-coffee-bean">
<img class="product-item__image" src="//cdn.shopify.com/s/files/1/1460/5816/products/candor-coffee-sm_grande.jpg?v=1485668871" alt="CANDOR DECAF COFFEE">

<span class="product-item__meta">
  <span class="product-item__meta__inner">

    <p class="product-item__title">CANDOR DECAF COFFEE</p>
    <p class="product-item__price-wrapper">

          <span class="txt--emphasis">from</span> $15.99

    </p>        
  </span>
</span>

如何在Shopify Boundless主题中为div元素添加自定义id属性？

2 个答案: