[Shopify] story theme 상품목록에 Add to cart 버튼 추가

shopify에 많은 테마가 있는데 그중에서도 유료테마인 Story를 사용하고있다. 

이커머스 사이트면 Add to cart버튼이 어디든 존재해서 고객을 어서빨리 구매전환을 시켜야하는데, 해당 테마에서 해당 기능을 찾을 수 없어서 story theme 고객센터에 문의한 결과, 현재 story theme에서는 상품목록에 장바구니 버튼을 제공하고 있지 않다고 함 🥲

많은 여정 끝에 괜찮은 사료를 찾게 되었고, Finally 상품 목록에 Add to Cart 버튼을 추가하게 되었습니다. 🎉

 

https://youtu.be/fxk51sRZs38?si=m_8mY7VBQ_e5R63K

위 영상을 참고하였고, 해당 영상은 1년전 업로드되었기도 하며 다른 theme의 예시라, 현재 쓰고있는 story의 코드와는 다소 다릅니다.

해당영상은 참고만 하였고, 영상에서 알려준 블로그

https://mrdigitals.com/how-to-add-add-to-cart-button-on-my-collection-page/ 를 참고하여, 코드는 참고하였으나, 알려주는 위치가 아니라, uuuuu공식 홈페이지의 상품리스트 코드가 있는 Product-grid-item.liquid 파일을 찾아서 코드를 추가 하였습니다.

<설명>

Edit code → Snippets → Product-grid-item.liquid 아래 코드 추가

 <form method="post" action="/cart/add">
      <input type="hidden" name="id" value="{{ product.variants.first.id }}" />
      <input min="1" type="hidden" id="quantity" name="quantity" value="1"/>
      <input type="submit" value="Add to cart" class="btn" />
      </form> 

**넣을 때 <div>태그 위치 잘 확인 후 넣기

→ 처음에 위치를 <div class="grid__caption {{ align_text }}"> </div>안에 했더니, Add to cart를 눌러도 상세페이지로 이동하는 불상사가 발생했었습니다 😅

그래서 위 div태그 밖인 <div class="grid__item {{ grid_strings }}{% if on_sale %} on-sale{% endif %}{% if tagged %} tagged{% endif %}"> 해당 태그 안에 위의 코드를 추가하니 정상작동 했습니다 🙂

 

---

+ 추가적으로, default가 영어이다보니, 언어를 한국어로 설정해도, cart페이지에서는 영어로 보이는문제가 발생

-> url에 ko가 들어가있는지 확인 후, action을 ko/cart/add 로 조건문을 써서 해결 !

//해당 코드 추가
{% if request.path contains '/ko' %}
  <script>
    document.addEventListener('DOMContentLoaded', function () {
      var form = document.querySelector('form[action="/cart/add"]');
      form.action = '/ko/cart/add';
    });
  </script>
{% endif %}

끗!