Shopify Boundless 테마의 div 요소에 사용자 정의 id 속성을 어떻게 추가합니까?

Shopify에서 특정 div를 타겟팅해야합니다. 나는 무한 테마를 사용하고있다. 이 특정 div 사용자 지정 id 특성을 추가하고 싶습니다. 어떻게해야합니까?Shopify Boundless 테마의 div 요소에 사용자 정의 id 속성을 어떻게 추가합니까?

타겟팅 할 필요가있는 DIV 클래스와 3 사업부는 "제품 항목 grid__item 매체 업 - 1/3"Shopify에서

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

출처

2017-09-04 Pretendo

당신이를 수정하여 HTML을 편집 할 수 있습니다 테마 코드.

위의 샘플은 스 니펫 아래의 index.liquid 템플릿 파일 또는 product-card.liquid에서와 유사합니다.

템플릿 파일 내에서 코드를 찾을 수 있으면 코드에 직접 ID를 추가 할 수 있습니다.

또는 Jquery 선택기를 사용하고 data-section-id = "featured-collection"을 기본으로 사용하여 아래로 탐색합니다.

출처

2017-09-05 09:55:19

그래서 당신이 올바른 방향으로 절 지적했다! 코드는 snippets 섹션의 product-grid-item.liquid 파일에 있습니다! 고맙습니다 – Pretendo

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

이제 각 사업부 내가 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>

출처

2017-09-11 20:03:45 Pretendo

Shopify Boundless 테마의 div 요소에 사용자 정의 id 속성을 어떻게 추가합니까?

답변

관련 문제